[DE mobile] Added replacing

apps/common/mobile/lib/view/Search.jsx

@@ -76,6 +76,11 @@ class SearchView extends Component {
     constructor(props) {
         super(props);
 
+        this.state = {
+            searchQuery: '',
+            replaceQuery: ''
+        };
+
         $$(document).on('page:init', (e, page) => {
             if ( page.name == 'home' ) {
                 this.searchbar = f7.searchbar.create({
@@ -114,16 +119,18 @@ class SearchView extends Component {
 
         this.onSettingsClick = this.onSettingsClick.bind(this);
         this.onSearchClick = this.onSearchClick.bind(this);
+        this.onReplaceClick = this.onReplaceClick.bind(this);
     }
 
     componentDidMount(){
         const $$ = Dom7;
-        this.$repalce = $$('#idx-replace-val');
+        this.$replace = $$('#idx-replace-val');
     }
 
     onSettingsClick(e) {
         if ( Device.phone ) {
             // f7.popup.open('.settings-popup');
+            f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
         } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
     }
 
@@ -149,9 +156,18 @@ class SearchView extends Component {
         }
     }
 
+    onReplaceClick() {
+        if ( this.searchbar && this.searchbar.query) {
+            if ( this.props.onReplaceQuery ) {
+                let params = this.searchParams();
+                this.props.onReplaceQuery(params);
+            }   
+        }
+    }
+
     onSearchbarShow(isshowed, bar) {
         if ( !isshowed ) {
-            this.$repalce.val('');
+            this.$replace.val('');
         }
     }
 
@@ -187,9 +203,27 @@ class SearchView extends Component {
         return out;
     }
 
+    changeSearchQuery(value) {
+        this.setState({
+            searchQuery: value
+        });
+    }
+
+    changeReplaceQuery(value) {
+        this.setState({
+            replaceQuery: value
+        });
+    }
+
     render() {
         const usereplace = searchOptions.usereplace;
         const hidden = {display: "none"};
+        const searchQuery = this.state.searchQuery;
+        const replaceQuery = this.state.replaceQuery;
+
+        // console.log(searchQuery);
+        // console.log(replaceQuery)
+
         return (
             <form className="searchbar">
                 <div className="searchbar-bg"></div>
@@ -200,20 +234,23 @@ class SearchView extends Component {
                         </a>
                     </div>
                     <div className="searchbar-input-wrap">
-                        <input placeholder="Search" type="search" />
+                        <input placeholder="Search" type="search" value={searchQuery} 
+                            onChange={e => {this.changeSearchQuery(e.target.value)}} />
                         <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" />
+                        <input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery} 
+                            onChange={e => {this.changeReplaceQuery(e.target.value)}} />
                         <i className="searchbar-icon" />
                         <span className="input-clear-button" />
                     </div>
                     <div className="buttons-row">
-                        <a className="link icon-only prev" onClick={e => this.onSearchClick(SEARCH_BACKWARD)}>
+                        <a className={"link replace " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
+                        <a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
                             <i className="icon icon-prev" />
                         </a>
-                        <a className="link icon-only next" onClick={e => this.onSearchClick(SEARCH_FORWARD)}>
+                        <a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
                             <i className="icon icon-next" />
                         </a>
                     </div>

apps/documenteditor/mobile/locale/en.json

@@ -194,7 +194,9 @@
     "advDRMPassword": "Password",
     "closeButtonText": "Close File",
     "advDRMOptions": "Protected File",
-    "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset"
+    "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
+    "textNoTextFound": "Text not found",
+    "textReplaceAll": "Replace All"
   },
   "Edit": {
     "textClose": "Close",
@@ -295,7 +297,6 @@
     "textAutomatic": "Automatic",
     "textAddCustomColor": "Add Custom Color",
     "textCustomColor": "Custom Color",
-    "textBackground": "Background",
     "textFill": "Fill",
     "textBorder": "Border",
     "textEffects": "Effects",

apps/documenteditor/mobile/src/controller/Search.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { List, ListItem, Toggle } from 'framework7-react';
 import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
 import { f7 } from 'framework7-react';
-
+// import { useTranslation, withTranslation } from 'react-i18next';
 
 class SearchSettings extends SearchSettingsView {
     constructor(props) {
@@ -58,18 +58,26 @@ class DESearchView extends SearchView {
 }
 
 const Search = props => {
+
     const onSearchQuery = params => {
         const api = Common.EditorApi.get();
-
+       
-        if ( !params.replace ) {
+        if (params.find && params.find.length) {
-            if ( !api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
+            if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
-                f7.dialog.alert('there are no more results', e => {
+                f7.dialog.alert(null, 'Text not Found');
-                });
             }
         }
     };
 
-    return <DESearchView onSearchQuery={onSearchQuery} />
+    const onReplaceQuery = params => {
+        const api = Common.EditorApi.get();
+    
+        if (params.find && params.find.length) {
+            api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight);
+        }
+    }
+
+    return <DESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} />
 };
 
 export {Search, SearchSettings}

apps/documenteditor/mobile/src/page/main.jsx

@@ -71,15 +71,17 @@ export default class MainPage extends Component {
                       <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                       <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                   </NavRight>
-                  { Device.phone ? null : <Search /> }
+                  {/* { Device.phone ? null : <Search /> } */}
+                  <Search />
               </Navbar>
               {/* Page content */}
               <View id="editor_sdk">
 
               </View>
-              {
+              {/* {
                   Device.phone ? null : <SearchSettings />
-              }
+              } */}
+              <SearchSettings />
               {
                   !this.state.editOptionsVisible ? null :
                       <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -64,6 +64,14 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
             props.onOptionClick(page)
     };
 
+    const closeModal = () => {
+        if (Device.phone) {
+            f7.sheet.close('.settings-popup', true);
+        } else {
+            f7.popover.close('#settings-popover');
+        }
+    };
+
     useEffect(() => {
     });
 
@@ -100,7 +108,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
                 {navbar}
                 <List>
                     {!props.inPopover &&
-                        <ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace}>
+                        <ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }