Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Added Find and Replace

Browse source
This commit is contained in:
SergeyEzhin 2021-03-11 20:21:05 +03:00
parent d116f5e0a0
commit 99fc32bf99
12 changed files with 662 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
apps/common/mobile/lib/view/Search.jsx
View file

@ -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,
markResults: false
// caseSensitive: 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.props.onSearchQuery ) {
if (this.searchbar && this.state.searchQuery) {
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">
<input placeholder="Search" type="search" />
<i className="searchbar-icon" />
<span className="input-clear-button" />
<div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input placeholder="Search" type="search" value={searchQuery}
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}>
<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" onClick={e => this.onSearchClick(SEARCH_BACKWARD)}>
<i className="icon icon-prev" />
</a>
<a className="link icon-only next" onClick={e => this.onSearchClick(SEARCH_FORWARD)}>
<i className="icon icon-next" />
</a>
<div className="buttons-row searchbar-inner__right">
<div className="buttons-row buttons-row-replace">
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>Replace All</a>
</div>
<div className="buttons-row">
<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 " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
<i className="icon icon-next" />
</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};

67
apps/common/mobile/resources/less/common-ios.less
View file

@ -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;
}
}
}
}
}
}
}

112
apps/common/mobile/resources/less/common-material.less
View file

@ -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;
}
}
}
}
}

10
apps/common/mobile/resources/less/icons.less Normal file
View file

@ -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>');
// }
}

23
apps/common/mobile/resources/less/ios/icons.less Normal file
View file

@ -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;
}
}
}
}

23
apps/common/mobile/resources/less/material/icons.less Normal file
View file

@ -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;
}
}
}
}

56
apps/common/mobile/resources/less/search.less
View file

@ -14,7 +14,59 @@
}
}
.searchbar-input-wrap {
margin-right: 10px;
.searchbar-inner {
&__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;
}
}
}
}
}
}

19
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -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": {

195
apps/spreadsheeteditor/mobile/src/controller/Search.jsx Normal file
View file

@ -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}

2
apps/spreadsheeteditor/mobile/src/less/app.less
View file

@ -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';

77
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -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'>
{/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
<NavLeft>
<Link icon='icon-undo'></Link>
<Link icon='icon-redo'></Link>
</NavLeft>
<NavRight>
<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 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>
</Navbar>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
{/* Page content */}
<View id="editor_sdk" />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
<Statusbar />
<Navbar id='editor-navbar'>
{/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
<NavLeft>
<Link icon='icon-undo'></Link>
<Link icon='icon-redo'></Link>
</NavLeft>
<NavRight>
<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>
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
<Link 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>
<Search />
</Navbar>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
{/* Page content */}
<View id="editor_sdk" />
<SearchSettings />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
<Statusbar />
<FunctionGroups /> {/* hidden component*/}
</Page>
<FunctionGroups /> {/* hidden component*/}
</Page>
)
}
};

2
apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
View file

@ -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>
}