From 711cea9e3eb52913edaea30696feb607f8fe8d3c Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 28 Jan 2021 13:27:18 +0300
Subject: [PATCH] [common] Searchbar moved to common

---
 .../mobile/lib}/controller/Search.jsx         |  7 ++-
 .../src => common/mobile/lib}/view/Search.jsx | 56 +++++++++++++++++--
 apps/common/mobile/resources/less/search.less |  4 ++
 apps/documenteditor/mobile/src/page/main.jsx  |  2 +-
 4 files changed, 61 insertions(+), 8 deletions(-)
 rename apps/{documenteditor/mobile/src => common/mobile/lib}/controller/Search.jsx (57%)
 rename apps/{documenteditor/mobile/src => common/mobile/lib}/view/Search.jsx (71%)

diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/common/mobile/lib/controller/Search.jsx
similarity index 57%
rename from apps/documenteditor/mobile/src/controller/Search.jsx
rename to apps/common/mobile/lib/controller/Search.jsx
index 6c662c5f3..610ce2fac 100644
--- a/apps/documenteditor/mobile/src/controller/Search.jsx
+++ b/apps/common/mobile/lib/controller/Search.jsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import SearchView, {SearchSettingsView} from '../view/Search'
 
+
 const SearchController = props => {
-    return <SearchView />
+    const _onSearchQuery = params => {
+        console.log('on search: ' + params);
+    };
+
+    return <SearchView onSearchQuery={_onSearchQuery} />
 };
 
 export {SearchController as Search, SearchSettingsView as SearchSettings};
diff --git a/apps/documenteditor/mobile/src/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx
similarity index 71%
rename from apps/documenteditor/mobile/src/view/Search.jsx
rename to apps/common/mobile/lib/view/Search.jsx
index f7ddd4609..e896f80e1 100644
--- a/apps/documenteditor/mobile/src/view/Search.jsx
+++ b/apps/common/mobile/lib/view/Search.jsx
@@ -1,8 +1,15 @@
 import React, { Component } from 'react';
 import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
 import { Toggle } from 'framework7-react';
-import { f7ready, f7 } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { Dom7 } from 'framework7';
 import { Device } from '../../../../common/mobile/utils/device';
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+const searchOptions = observable({
+    usereplace: false
+});
 
 const popoverStyle = {
     height: '300px'
@@ -20,9 +27,13 @@ class SearchSettingsView extends Component {
     }
 
     onFindReplaceClick(action) {
+        searchOptions.usereplace = action == 'replace';
         this.setState({
-            useReplace: action == 'replace'
+            useReplace: searchOptions.usereplace
         });
+
+
+        if (this.onReplaceChecked) {}
     }
 
     render() {
@@ -60,20 +71,20 @@ class SearchSettingsView extends Component {
     }
 }
 
+@observer
 class SearchView extends Component {
     constructor(props) {
         super(props);
 
         $$(document).on('page:init', (e, page) => {
             if ( page.name == 'home' ) {
-                f7.searchbar.create({
+                this.searchbar = f7.searchbar.create({
                     el: '.searchbar',
                     customSearch: true,
                     expandable: true,
                     backdrop: false,
                     on: {
                         search: (bar, curval, prevval) => {
-                            console.log('on search results ' + curval);
                         }
                     }
                 });
@@ -81,9 +92,12 @@ class SearchView extends Component {
         });
 
         this.onSettingsClick = this.onSettingsClick.bind(this);
+        this.onSearchClick = this.onSearchClick.bind(this);
     }
 
     componentDidMount(){
+        const $$ = Dom7;
+        this.$repalce = $$('#idx-replace-val');
     }
 
     onSettingsClick(e) {
@@ -92,7 +106,32 @@ class SearchView extends Component {
         } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
     }
 
+    searchParams() {
+        let params = {
+            text: this.searchbar.query,
+            direction: action
+        };
+    }
+
+    onSearchClick(action) {
+        if ( this.searchbar && this.searchbar.query) {
+            if ( this.props.onSearchQuery ) {
+                let params = {
+                    text: this.searchbar.query,
+                    direction: action
+                };
+
+                if ( searchOptions.usereplace )
+                    params.replace = this.$replace.val();
+
+                this.props.onSearchQuery(params);
+            }
+        }
+    }
+
     render() {
+        const usereplace = searchOptions.usereplace;
+        const hidden = {display: "none"};
         return (
             <form className="searchbar">
                 <div className="searchbar-bg"></div>
@@ -107,11 +146,16 @@ class SearchView extends Component {
                         <i className="searchbar-icon" />
                         <span className="input-clear-button" />
                     </div>
+                    <div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
+                        <input placeholder="Replace" type="search" id="idx-replace-val" />
+                        <i className="searchbar-icon" />
+                        <span className="input-clear-button" />
+                    </div>
                     <div className="buttons-row">
-                        <a className="link icon-only prev disabled">
+                        <a className="link icon-only prev disabled1" onClick={e => this.onSearchClick('back')}>
                             <i className="icon icon-prev" />
                         </a>
-                        <a className="link icon-only next disabled">
+                        <a className="link icon-only next disabled1" onClick={e => this.onSearchClick('next')}>
                             <i className="icon icon-next" />
                         </a>
                     </div>
diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less
index ab694cea8..21249b941 100644
--- a/apps/common/mobile/resources/less/search.less
+++ b/apps/common/mobile/resources/less/search.less
@@ -13,4 +13,8 @@
             .hairline(bottom, @statusBarBorderColor);
         }
     }
+
+    .searchbar-input-wrap {
+        margin-right: 10px;
+    }
 }
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 86b1996de..fc9d05cc2 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -6,7 +6,7 @@ import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
 import { Device } from '../../../../common/mobile/utils/device'
-import { Search, SearchSettings } from '../controller/Search';
+import { Search, SearchSettings } from '../../../../common/mobile/lib/controller/Search';
 
 export default class MainPage extends Component {
     constructor(props) {