[SSE mobile] Added Find and Replace

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

@@ -1,11 +1,13 @@
+
 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 { f7 } from 'framework7-react';
 import { Dom7 } from 'framework7';
 import { Device } from '../../../../common/mobile/utils/device';
-import { observable } from "mobx";
+import { observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
+import { useTranslation, withTranslation } from 'react-i18next';
 
 const searchOptions = observable({
     usereplace: false
@@ -24,18 +26,23 @@ class SearchSettingsView extends Component {
 
         this.state = {
             useReplace: false,
-            caseSensitive: false,
+            // caseSensitive: false,
-            markResults: false
+            // markResults: false
+            searchIn: 0,
+            searchBy: 1,
+            lookIn: 1,
+            isMatchCase: false,
+            isMatchCell: false
         };
     }
 
     onFindReplaceClick(action) {
-        searchOptions.usereplace = action == 'replace';
+        runInAction(() => searchOptions.usereplace = action == 'replace');
+
         this.setState({
             useReplace: searchOptions.usereplace
         });
 
-
         if (this.onReplaceChecked) {}
     }
 
@@ -43,17 +50,18 @@ class SearchSettingsView extends Component {
     }
 
     render() {
-        const show_popover = true;
+        const show_popover = !Device.phone;
         const navbar =
             <Navbar title="Find and replace">
                 {!show_popover &&
                     <NavRight>
                         <Link popupClose=".search-settings-popup">Done</Link>
-                    </NavRight>}
+                    </NavRight>
+                }
             </Navbar>;
         const extra = this.extraSearchOptions();
         const content =
-            <View style={popoverStyle}>
+            <View style={show_popover ? popoverStyle : null}>
                 <Page>
                     {navbar}
                     <List>
@@ -66,7 +74,7 @@ class SearchSettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
-                <Popup id="idx-search-settings">{content}</Popup>
+                <Popup id="idx-search-settings" className="search-settings-popup">{content}</Popup>
         )
     }
 }
@@ -76,6 +84,13 @@ class SearchView extends Component {
     constructor(props) {
         super(props);
 
+        this.state = {
+            searchQuery: '',
+            replaceQuery: ''
+        };
+
+        const $$ = Dom7;
+
         $$(document).on('page:init', (e, page) => {
             if ( page.name == 'home' ) {
                 this.searchbar = f7.searchbar.create({
@@ -84,7 +99,7 @@ class SearchView extends Component {
                     expandable: true,
                     backdrop: false,
                     on: {
-                        search: (bar, curval, prevval) => {
+                            search: (bar, curval, prevval) => {
                         },
                         enable: this.onSearchbarShow.bind(this, true),
                         disable: this.onSearchbarShow.bind(this, false)
@@ -97,8 +112,9 @@ class SearchView extends Component {
                 //     return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0;
                 // }
 
-                const $$ = Dom7;
                 const $editor = $$('#editor_sdk');
+                const $replaceLink = $$('#replace-link');
+               
                 if (false /*iOSVersion() < 13*/) {
                     // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
                     // $editor.single('mouseup touchend',     _.bind(me.onEditorTouchEnd, me));
@@ -109,21 +125,23 @@ class SearchView extends Component {
 
                 $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
                 $editor.on('pointerup',   this.onEditorTouchEnd.bind(this));
+                // $replaceLink.on('click', this.onReplaceHold.bind(this));
             }
         });
 
         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.popup.open('.search-settings-popup');
         } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
     }
 
@@ -132,35 +150,64 @@ class SearchView extends Component {
             find: this.searchbar.query
         };
 
-        if ( searchOptions.usereplace )
+        if (searchOptions.usereplace) {
             params.replace = this.$replace.val();
+        } 
 
         return params;
     }
 
     onSearchClick(action) {
-        if ( this.searchbar && this.searchbar.query) {
+        if (this.searchbar && this.state.searchQuery) {
-            if ( this.props.onSearchQuery ) {
+            if (this.props.onSearchQuery) {
                 let params = this.searchParams();
+                params.find = this.state.searchQuery;
                 params.forward = action != SEARCH_BACKWARD;
+                console.log(params);
 
                 this.props.onSearchQuery(params);
             }
         }
     }
 
+    onReplaceClick() {
+        if (this.searchbar && this.state.searchQuery) {
+            if (this.props.onReplaceQuery) {
+                let params = this.searchParams();
+                params.find = this.state.searchQuery;
+                // console.log(params);
+
+                this.props.onReplaceQuery(params);
+            }   
+        }
+    }
+
+    onReplaceAllClick() {
+        if (this.searchbar && this.state.searchQuery) {
+            if (this.props.onReplaceAllQuery) {
+                let params = this.searchParams();
+                params.find = this.state.searchQuery;
+                // console.log(params);
+
+                this.props.onReplaceAllQuery(params);
+            }   
+        }
+    }
+
     onSearchbarShow(isshowed, bar) {
         if ( !isshowed ) {
-            this.$repalce.val('');
+            this.$replace.val('');
         }
     }
 
     onEditorTouchStart(e) {
         this.startPoint = this.pointerPosition(e);
+        // console.log(this.startPoint);
     }
 
     onEditorTouchEnd(e) {
         const endPoint = this.pointerPosition(e);
+        // console.log(endPoint);
 
         if ( this.searchbar.enabled ) {
             const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
@@ -187,35 +234,68 @@ 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;
+        const isIos = Device.ios;
+        
+        // const _t = this.t('View.Settings', {returnObjects: true});
+        // console.log(this.state.searchQuery, this.state.replaceQuery);
+
+        if(this.searchbar && this.searchbar.enabled) {
+            usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
+        } 
+
         return (
             <form className="searchbar">
-                <div className="searchbar-bg"></div>
+                {isIos ? <div className="searchbar-bg"></div> : null}
                 <div className="searchbar-inner">
-                    <div className="buttons-row">
+                    <div className="buttons-row searchbar-inner__left">
                         <a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
                             <i className="icon icon-settings" />
                         </a>
                     </div>
-                    <div className="searchbar-input-wrap">
+                    <div className="searchbar-inner__center">
-                        <input placeholder="Search" type="search" />
+                        <div className="searchbar-input-wrap">
-                        <i className="searchbar-icon" />
+                            <input placeholder="Search" type="search" value={searchQuery} 
-                        <span className="input-clear-button" />
+                                onChange={e => {this.changeSearchQuery(e.target.value)}} />
+                            {isIos ? <i className="searchbar-icon" /> : null}
+                            <span className="input-clear-button" />
+                        </div>
+                        <div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
+                            <input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery} 
+                                onChange={e => {this.changeReplaceQuery(e.target.value)}} />
+                            {isIos ? <i className="searchbar-icon" /> : null}
+                            <span className="input-clear-button" />
+                        </div>
                     </div>
-                    <div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
+                    <div className="buttons-row searchbar-inner__right">
-                        <input placeholder="Replace" type="search" id="idx-replace-val" />
+                        <div className="buttons-row buttons-row-replace">
-                        <i className="searchbar-icon" />
+                            <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
-                        <span className="input-clear-button" />
+                            <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>Replace All</a>
-                    </div>
+                        </div>
-                    <div className="buttons-row">
+                        <div className="buttons-row">
-                        <a className="link icon-only prev" onClick={e => this.onSearchClick(SEARCH_BACKWARD)}>
+                            <a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
-                            <i className="icon icon-prev" />
+                                <i className="icon icon-prev" />
-                        </a>
+                            </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" />
+                                <i className="icon icon-next" />
-                        </a>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </form>
@@ -223,4 +303,4 @@ class SearchView extends Component {
     }
 }
 
-export {SearchView as default, SearchView, SearchSettingsView};
+export {SearchView as default, SearchView, SearchSettingsView};

apps/common/mobile/resources/less/common-ios.less

@@ -417,4 +417,71 @@
             }
         }
     }
+
+    // Find and Replace 
+
+    .navbar {
+        .searchbar-input-wrap {
+            margin-right: 10px;
+            height: 28px;
+        }
+        .buttons-row-replace a {
+            color: @themeColor;
+        }
+    }
+
+    .searchbar input[type=search] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        display: block;
+        border: none;
+        appearance: none;
+        border-radius: 5px;
+        font-family: inherit;
+        color: @black;
+        font-size: 14px;
+        font-weight: 400;
+        padding: 0 8px;
+        background-color: @white;
+        padding: 0 28px;
+    }
+
+    .searchbar-inner {
+        &__right {
+            .buttons-row a.next {
+                margin-left: 15px;
+            }
+        }
+    }
+
+    @media(max-width: 550px)
+    {
+        .searchbar-expandable.searchbar-enabled {
+            top: 0;
+            .searchbar-inner {
+                &__left {
+                    margin-right: 15px;
+                }
+                &__center {
+                    flex-direction: column;
+                }
+                &__right {
+                    flex-direction: column-reverse;
+                    margin-left: 10px;
+                }
+            }
+            &.replace {
+                height: 88px;
+                .searchbar-inner {
+                    height: 100%;
+                    &__center {
+                        .searchbar-input-wrap {
+                            margin: 8px 0;
+                        }
+                    }
+                }
+            }
+        } 
+    }
 }

apps/common/mobile/resources/less/common-material.less

@@ -311,4 +311,116 @@
             }
         }
     }
+
+    // Find and Replace 
+
+    .searchbar-inner {
+        &__center {
+            flex-wrap: wrap;
+        }
+        &__left {
+            padding-top: 4px;
+        }
+    }
+
+    .buttons-row-replace a {
+        color: @white;
+    }
+
+    .navbar {
+        .searchbar-input-wrap {
+            height: 32px;
+            margin-right: 10px;
+            margin: 4px 0;
+        }
+        &-inner {
+            overflow: initial;
+        }
+    }
+
+    .searchbar .input-clear-button {
+        width: 18px;
+        height: 18px;
+        &:after {
+            color: @white;
+            font-size: 19px;
+        }
+    }
+
+    .searchbar-icon {
+        &:after {
+            color: @white;
+            font-size: 19px;
+        }
+    }
+
+    .searchbar input[type=search] {
+        box-sizing: border-box;
+        width: 100%;
+        display: block;
+        border: none;
+        appearance: none;
+        border-radius: 0;
+        font-family: inherit;
+        color: @white;
+        font-size: 16px;
+        font-weight: 400;
+        padding: 0;
+        border-bottom: 1px solid @white;
+        height: 100%;
+        padding: 0 36px 0 24px;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: 0 center;
+        opacity: 1;
+        background-size: 24px 24px;
+        transition-duration: .3s;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+    }
+
+    .searchbar input[type=search]::placeholder {
+        color: @white;
+    }
+
+    .navbar {
+        .searchbar-expandable.searchbar-enabled {
+            top: 0;
+            // height: 100%;
+            .searchbar-inner {
+                height: 100%;
+                &__center {
+                    flex-direction: column;
+                }
+                &__right {
+                    flex-direction: column-reverse;
+                }
+            }
+            &.replace {
+                height: 96px;
+            }
+        }
+        a.link {
+            padding: 0 16px;
+        }
+        a.icon-only {
+            width: auto;
+            height: 48px;
+        }
+        .buttons-row-replace a {
+            color: @white;
+        }
+        .searchbar .buttons-row {
+            align-self: flex-start;
+        }
+    }
+
+    @media(max-width: 550px) {
+        .searchbar-expandable.searchbar-enabled {
+            .searchbar-inner {
+                &__left {
+                    margin-right: 33px;
+                }
+            }
+        }
+    }
 }

apps/common/mobile/resources/less/icons.less

@@ -0,0 +1,10 @@
+@import "./ios/icons";
+@import "./material/icons";
+
+i.icon {
+    // &.icon-paste {
+    //     width: 24px;
+    //     height: 24px;
+    //     .encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" /><path d="M5 0H14V5H5V0Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" /></svg>');
+    // }
+}

apps/common/mobile/resources/less/ios/icons.less

@@ -0,0 +1,23 @@
+.device-ios {
+    i.icon {
+        &.icon_mask {
+            background-color: white;
+        }
+        &.icon-prev {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
+            &:after {
+              display: none;
+            }
+        }
+        &.icon-next {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
+            &:after {
+                display: none;
+            }
+        }
+    }
+}

apps/common/mobile/resources/less/material/icons.less

@@ -0,0 +1,23 @@
+.device-android {
+    i.icon {
+        &.icon_mask {
+            background-color: black;
+        }
+        &.icon-prev {
+            width: 20px;
+            height: 20px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{white}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+            &:after {
+              display: none;
+            }
+        }
+        &.icon-next {
+            width: 20px;
+            height: 20px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{white}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+            &:after {
+                display: none;
+            }
+        }
+    }
+}

apps/common/mobile/resources/less/search.less

@@ -14,7 +14,59 @@
         }
     }
 
-    .searchbar-input-wrap {
+    .searchbar-inner {
-        margin-right: 10px;
+        &__center {
+            display: flex;
+            align-items: center;
+            width: 100%;
+        }
+        &__right {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .searchbar-expandable {
+        transition-duration: 0s;
+    }
+
+    .buttons-row-replace {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: max-content;
+        a {
+            font-size: 15px;
+            height: auto;
+            display: block;
+            line-height: normal;
+        }
+    }
+
+    @media(max-width: 550px)
+    {
+        .searchbar-expandable.searchbar-enabled {
+            .searchbar-inner {
+                &__left {
+                    min-width: 22px;
+                    max-width: 22px;
+                }
+                &__center {
+                    flex-direction: column;
+                }
+                &__right {
+                    flex-direction: column-reverse;
+                }
+            }
+            &.replace {
+                top: 0;
+                .searchbar-inner {
+                    height: 100%;
+                    &__left {
+                        align-self: flex-start;
+                    }
+                }
+            }
+        } 
     }
 }

apps/spreadsheeteditor/mobile/locale/en.json

@@ -290,7 +290,24 @@
             "textEmail": "Email",
             "textAddress": "Address",
             "textTel": "Tel",
-            "textPoweredBy": "Powered By"
+            "textPoweredBy": "Powered By",
+            "textFind": "Find",
+            "textSearch": "Search",
+            "textReplace": "Replace",
+            "textMatchCase": "Match Case",
+            "textMatchCell": "Match Cell",
+            "textSearchIn": "Search In",
+            "textWorkbook": "Workbook",
+            "textSheet": "Sheet",
+            "textHighlightRes": "Highlight results",
+            "textByColumns": "By columns",
+            "textByRows": "By rows",
+            "textSearchBy": "Search",
+            "textLookIn": "Look In",
+            "textFormulas": "Formulas",
+            "textValues": "Values",
+            "textNoTextFound": "Text not found",
+            "textReplaceAll": "Replace All"
         }
     },
     "Common": {

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

@@ -0,0 +1,195 @@
+import React, { Fragment } from 'react';
+import { List, ListItem, Toggle, BlockTitle } from 'framework7-react';
+import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
+import { f7 } from 'framework7-react';
+import { useTranslation, withTranslation } from 'react-i18next';
+import { Dom7 } from 'framework7';
+
+class SearchSettings extends SearchSettingsView {
+    constructor(props) {
+        super(props);
+
+        // this.state = {
+        //     searchIn: 0,
+        //     searchBy: 1,
+        //     lookIn: 1,
+        //     isMatchCase: false,
+        //     isMatchCell: false
+        // }
+
+        this.onToggleMarkResults = this.onToggleMarkResults.bind(this);
+    }
+
+    onToggleMarkResults(checked) {
+        const api = Common.EditorApi.get();
+        api.asc_selectSearchingResults(checked);
+    }
+
+    extraSearchOptions() {
+        const anc_markup = super.extraSearchOptions();
+
+        const markup = (
+            <Fragment>
+                <BlockTitle>Search In</BlockTitle>
+                <List>
+                    <ListItem radio title="Workbook" name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({
+                        searchIn: 0
+                    })} />
+                    <ListItem radio title="Sheet" name="search-in-checkbox" value="1" checked={this.state.searchIn === 1} onClick={( )=> this.setState({
+                        searchIn: 1
+                    })} />
+                </List>
+                <BlockTitle>Search</BlockTitle>
+                <List>
+                    <ListItem radio title="By rows" name="search-by-checkbox" value="0" checked={this.state.searchBy === 0} onClick={() => this.setState({
+                        searchBy: 0
+                    })} />
+                    <ListItem radio title="By columns" name="search-by-checkbox" value="1" checked={this.state.searchBy === 1} onClick={() => this.setState({
+                        searchBy: 1
+                    })} />
+                </List>
+                <BlockTitle>Look In</BlockTitle>
+                <List>
+                    <ListItem radio title="Formulas" name="look-in-checkbox" value="0" checked={this.state.lookIn === 0} onClick={() => this.setState({
+                        lookIn: 0
+                    })} />
+                    <ListItem radio title="Values" name="look-in-checkbox" value="1" checked={this.state.lookIn === 1} onClick={() => this.setState({
+                        lookIn: 1
+                    })} />
+                </List>
+                <List>
+                    <ListItem title="Match Case">
+                        <Toggle slot="after" className="toggle-match-case" checked={this.state.isMatchCase} onToggleChange={() => this.setState({
+                            isMatchCase: !this.state.isMatchCase
+                        })} />
+                    </ListItem>
+                    <ListItem title="Match Cell">
+                        <Toggle slot="after" className="toggle-match-cell" checked={this.state.isMatchCell} onToggleChange={() => this.setState({
+                            isMatchCell: !this.state.isMatchCell
+                        })} />
+                    </ListItem>
+                    <ListItem title="Highlight results">
+                        <Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
+                    </ListItem>
+                </List>
+            </Fragment>
+        )
+
+        return {...anc_markup, ...markup};
+    }
+}
+
+class SESearchView extends SearchView {
+    searchParams() {
+        let params = super.searchParams();
+        const $$ = Dom7;
+
+        const checkboxMatchCase = f7.toggle.get('.toggle-match-case'),
+            checkboxMatchCell = f7.toggle.get('.toggle-match-cell'),
+            checkboxMarkResults = f7.toggle.get('.toggle-mark-results'),
+            checkboxSearchIn = $$('[name="search-in-checkbox"]:checked')[0],
+            checkboxSearchBy = $$('[name="search-by-checkbox"]:checked')[0],
+            checkboxLookIn = $$('[name="look-in-checkbox"]:checked')[0];
+
+        const searchOptions = {
+            caseSensitive: checkboxMatchCase.checked,
+            highlight: checkboxMarkResults.checked,
+            matchCell: checkboxMatchCell.checked,
+            searchIn: checkboxSearchIn.value,
+            searchBy: checkboxSearchBy.value,
+            lookIn: checkboxLookIn.value,
+        };
+
+        return {...params, ...searchOptions};
+    }
+
+    onSearchbarShow(isshowed, bar) {
+        super.onSearchbarShow(isshowed, bar);
+
+        const api = Common.EditorApi.get();
+        if ( isshowed ) {
+            const checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
+            api.asc_selectSearchingResults(checkboxMarkResults.checked);
+        } else api.asc_selectSearchingResults(false);
+    }
+}
+
+const Search = props => {
+    // const { t } = useTranslation();
+    // const _t = t('View.Settings', {returnObjects: true});
+
+    const onSearchQuery = params => {
+        const api = Common.EditorApi.get();
+        let lookIn = +params.lookIn === 0;
+        let searchIn = +params.searchIn === 1;
+        let searchBy = +params.searchBy === 0;
+
+        if (params.find && params.find.length) {
+            let options = new Asc.asc_CFindOptions();
+    
+            options.asc_setFindWhat(params.find);
+            options.asc_setScanForward(params.forward);
+            options.asc_setIsMatchCase(params.caseSensitive);
+            options.asc_setIsWholeCell(params.matchCell);
+            options.asc_setScanOnOnlySheet(searchIn);
+            options.asc_setScanByRows(searchBy);
+            options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
+
+            if (!api.asc_findText(options)) {
+                f7.dialog.alert(null, 'Text not Found');
+            }
+        }
+    };
+
+    const onReplaceQuery = params => {
+        const api = Common.EditorApi.get();
+        let lookIn = +params.lookIn === 0;
+        let searchIn = +params.searchIn === 1;
+        let searchBy = +params.searchBy === 0;
+
+        if (params.find && params.find.length) {
+            api.isReplaceAll = false;
+
+            let options = new Asc.asc_CFindOptions();
+
+            options.asc_setFindWhat(params.find);
+            options.asc_setReplaceWith(params.replace);
+            options.asc_setIsMatchCase(params.caseSensitive);
+            options.asc_setIsWholeCell(params.matchCell);
+            options.asc_setScanOnOnlySheet(searchIn);
+            options.asc_setScanByRows(searchBy);
+            options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
+            options.asc_setIsReplaceAll(false);
+
+            api.asc_replaceText(options);
+        }
+    }
+
+    const onReplaceAllQuery = params => {
+        const api = Common.EditorApi.get();
+        let lookIn = +params.lookIn === 0;
+        let searchIn = +params.searchIn === 1;
+        let searchBy = +params.searchBy === 0;
+
+        if (params.find && params.find.length) {
+            api.isReplaceAll = true;
+
+            let options = new Asc.asc_CFindOptions();
+
+            options.asc_setFindWhat(params.find);
+            options.asc_setReplaceWith(params.replace);
+            options.asc_setIsMatchCase(params.caseSensitive);
+            options.asc_setIsWholeCell(params.matchCell);
+            options.asc_setScanOnOnlySheet(searchIn);
+            options.asc_setScanByRows(searchBy);
+            options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
+            options.asc_setIsReplaceAll(true);
+
+            api.asc_replaceText(options);
+        }
+    }
+
+    return <SESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
+};
+
+export {Search, SearchSettings}

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -9,7 +9,9 @@
 @import '../../../../common/mobile/resources/less/common.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';
 @import '../../../../common/mobile/resources/less/common-material.less';
+@import '../../../../common/mobile/resources/less/icons.less';
 @import '../../../../common/mobile/resources/less/dataview.less';
+@import '../../../../common/mobile/resources/less/search.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';

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

@@ -8,6 +8,8 @@ import CellEditor from '../controller/CellEditor';
 import Statusbar from '../controller/StatusBar'
 import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";
+import { Device } from '../../../../common/mobile/utils/device';
+import { Search, SearchSettings } from '../controller/Search';
 
 import {FunctionGroups} from "../controller/add/AddFunction";
 
@@ -56,44 +58,47 @@ export default class MainPage extends Component {
 
   render() {
       return (
-          <Page name="home">
+            <Page name="home">
               {/* Top Navbar */}
-              <Navbar id='editor-navbar'>
+                <Navbar id='editor-navbar'>
-                  {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
+                    {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
-                  <NavLeft>
+                    <NavLeft>
-                      <Link icon='icon-undo'></Link>
+                        <Link icon='icon-undo'></Link>
-                      <Link icon='icon-redo'></Link>
+                        <Link icon='icon-redo'></Link>
-                  </NavLeft>
+                    </NavLeft>
-                  <NavRight>
+                    <NavRight>
-                      <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
+                        <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
-                      <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
+                        <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                      <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
+                        { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                      <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
+                        <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
-                  </NavRight>
+                        <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
-              </Navbar>
+                    </NavRight>
-              <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
+                    <Search />
-              {/* Page content */}
+                </Navbar>
-              <View id="editor_sdk" />
+                <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
-            {
+                {/* Page content */}
-                !this.state.editOptionsVisible ? null :
+                <View id="editor_sdk" />
-                    <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                <SearchSettings />
-            }
+                {
-            {
+                    !this.state.editOptionsVisible ? null :
-                !this.state.addOptionsVisible ? null :
+                        <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-                    <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                }
-            }
+                {
-            {
+                    !this.state.addOptionsVisible ? null :
-                !this.state.settingsVisible ? null :
+                        <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-                    <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                }
-            }
+                {
-            {
+                    !this.state.settingsVisible ? null :
-                !this.state.collaborationVisible ? null :
+                        <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-                    <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+                }
-            }
+                {
-              <Statusbar />
+                    !this.state.collaborationVisible ? null :
+                        <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+                }
+                <Statusbar />
 
-              <FunctionGroups /> {/* hidden component*/}
+                <FunctionGroups /> {/* hidden component*/}
-          </Page>
+            </Page>
       )
   }
 };

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

@@ -115,7 +115,7 @@ const SettingsList = withTranslation()(props => {
                 {navbar}
                 <List>
                     {!props.inPopover &&
-                        <ListItem title={_t.textFindAndReplace}>
+                        <ListItem title={_t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }