[DE mobile] custom Search for DE

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

@@ -3,11 +3,11 @@ import SearchView, {SearchSettingsView} from '../view/Search'
 
 
 const SearchController = props => {
-    const _onSearchQuery = params => {
+    const onSearchQuery = params => {
         console.log('on search: ' + params);
     };
 
-    return <SearchView onSearchQuery={_onSearchQuery} />
+    return <SearchView onSearchQuery={onSearchQuery} />
 };
 
-export {SearchController as Search, SearchSettingsView as SearchSettings};
+export {SearchController, SearchView, SearchSettingsView};

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

@@ -36,6 +36,9 @@ class SearchSettingsView extends Component {
         if (this.onReplaceChecked) {}
     }
 
+    extraSearchOptions() {
+    }
+
     render() {
         const show_popover = true;
         const navbar =
@@ -45,6 +48,7 @@ class SearchSettingsView extends Component {
                         <Link popupClose=".search-settings-popup">Done</Link>
                     </NavRight>}
             </Navbar>;
+        const extra = this.extraSearchOptions();
         const content =
             <View style={popoverStyle}>
                 <Page>
@@ -53,14 +57,7 @@ class SearchSettingsView extends Component {
                         <ListItem radio title="Find" name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
                         <ListItem radio title="Find and replace" name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
                     </List>
-                    <List>
+                    { extra }
-                        <ListItem title="Case sensitive">
-                            <Toggle slot="after" />
-                        </ListItem>
-                        <ListItem title="Highlight results">
-                            <Toggle slot="after" />
-                        </ListItem>
-                    </List>
                 </Page>
             </View>;
         return (
@@ -108,21 +105,20 @@ class SearchView extends Component {
 
     searchParams() {
         let params = {
-            text: this.searchbar.query,
+            find: this.searchbar.query
-            direction: action
         };
+
+        if ( searchOptions.usereplace )
+            params.replace = this.$replace.val();
+
+        return params;
     }
 
     onSearchClick(action) {
         if ( this.searchbar && this.searchbar.query) {
             if ( this.props.onSearchQuery ) {
-                let params = {
+                let params = this.searchParams();
-                    text: this.searchbar.query,
+                params.to = action;
-                    direction: action
-                };
-
-                if ( searchOptions.usereplace )
-                    params.replace = this.$replace.val();
 
                 this.props.onSearchQuery(params);
             }
@@ -166,4 +162,4 @@ class SearchView extends Component {
     }
 }
 
-export {SearchView as default, SearchSettingsView};
+export {SearchView as default, SearchView, SearchSettingsView};

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

@@ -0,0 +1,51 @@
+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';
+
+
+class SearchSettings extends SearchSettingsView {
+    constructor(props) {
+        super(props);
+    }
+
+    extraSearchOptions() {
+        const anc_markup = super.extraSearchOptions();
+
+        const markup = <List>
+                        <ListItem title="Case sensitive">
+                            <Toggle slot="after" className="toggle-case-sensitive" />
+                        </ListItem>
+                        <ListItem title="Highlight results">
+                            <Toggle slot="after" className="toggle-mark-results" defaultChecked />
+                        </ListItem>
+                    </List>;
+
+        return {...anc_markup, ...markup};
+    }
+}
+
+class DESearchView extends SearchView {
+    searchParams() {
+        let params = super.searchParams();
+
+        const checkboxCaseSensitive = f7.toggle.get('.toggle-case-sensitive'),
+            checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
+        const searchOptions = {
+            caseSensitive: checkboxCaseSensitive.checked,
+            highlight: checkboxMarkResults.checked
+        };
+
+        return {...params, ...searchOptions};
+    }
+}
+
+const Search = props => {
+    const onSearchQuery = params => {
+        console.log('on search: ' + params.find);
+    };
+
+    return <DESearchView onSearchQuery={onSearchQuery} />
+};
+
+export {Search, SearchSettings}

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 '../../../../common/mobile/lib/controller/Search';
+import { Search, SearchSettings } from '../controller/Search';
 
 export default class MainPage extends Component {
     constructor(props) {