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

[SSE mobile] Correcting Find and Replace

Browse source
This commit is contained in:
SergeyEzhin 2021-03-12 20:54:11 +03:00
parent 99fc32bf99
commit a556f4e196
4 changed files with 89 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/common/mobile/lib/controller/Search.jsx
View file

@ -1,13 +1,12 @@
import React from 'react';
import SearchView, {SearchSettingsView} from '../view/Search'
import {SearchView, SearchSettingsView} from '../view/Search';
const SearchController = props => {
const onSearchQuery = params => {
console.log('on search: ' + params);
};
return <SearchView onSearchQuery={onSearchQuery} />
return <SearchView onSearchQuery={onSearchQuery} />
};
export {SearchController, SearchView, SearchSettingsView};

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

@ -7,7 +7,6 @@ import { Dom7 } from 'framework7';
import { Device } from '../../../../common/mobile/utils/device';
import { observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import { useTranslation, withTranslation } from 'react-i18next';
const searchOptions = observable({
usereplace: false
@ -51,25 +50,21 @@ class SearchSettingsView extends Component {
render() {
const show_popover = !Device.phone;
const navbar =
<Navbar title="Find and replace">
{!show_popover &&
<NavRight>
<Link popupClose=".search-settings-popup">Done</Link>
</NavRight>
}
</Navbar>;
// const navbar =
// <Navbar title="Find and replace">
// {!show_popover &&
// <NavRight>
// <Link popupClose=".search-settings-popup">Done</Link>
// </NavRight>
// }
// </Navbar>;
const extra = this.extraSearchOptions();
const content =
<View style={show_popover ? popoverStyle : null}>
<Page>
{navbar}
<List>
<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>
{ extra }
</Page>
{/* <Page>
{navbar} */}
{extra}
{/* </Page> */}
</View>;
return (
show_popover ?
@ -113,14 +108,14 @@ class SearchView extends Component {
// }
const $editor = $$('#editor_sdk');
const $replaceLink = $$('#replace-link');
// const $replaceLink = $$('#replace-link');
if (false /*iOSVersion() < 13*/) {
// $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
// $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, me));
if (false /* iOSVersion < 13 */) {
// $editor.on('mousedown touchstart', this.onEditorTouchStart.bind(this));
// $editor.on('mouseup touchend', this.onEditorTouchEnd.bind(this));
} else {
// $editor.single('pointerdown', this.onEditorTouchStart, me));
// $editor.single('pointerup', _.bind(me.onEditorTouchEnd, me));
// $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
// $editor.on('pointerup', this.onEditorTouchEnd.bind(this));
}
$editor.on('pointerdown', this.onEditorTouchStart.bind(this));
@ -163,7 +158,7 @@ class SearchView extends Component {
let params = this.searchParams();
params.find = this.state.searchQuery;
params.forward = action != SEARCH_BACKWARD;
console.log(params);
// console.log(params);
this.props.onSearchQuery(params);
}
@ -209,11 +204,20 @@ class SearchView extends Component {
const endPoint = this.pointerPosition(e);
// console.log(endPoint);
if ( this.searchbar.enabled ) {
const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
if (this.searchbar.enabled) {
let distance;
if ( distance < 1 ) {
if(this.startPoint) {
distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 :
Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
} else {
distance = 0;
}
// const distance = (this.startPoint === undefined || this.startPoint === undefined) ? 0 :
// Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
if (distance < 1) {
this.searchbar.disable();
}
}
@ -225,8 +229,7 @@ class SearchView extends Component {
const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
out.x = touch.pageX;
out.y = touch.pageY;
} else
if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
} else if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
out.x = e.pageX;
out.y = e.pageY;
}
@ -252,9 +255,7 @@ class SearchView extends Component {
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);
const { _t } = this.props;
if(this.searchbar && this.searchbar.enabled) {
usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
@ -271,13 +272,13 @@ class SearchView extends Component {
</div>
<div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input placeholder="Search" type="search" value={searchQuery}
<input placeholder={_t.textSearch} 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}
<input placeholder={_t.textReplace} 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" />
@ -285,8 +286,8 @@ class SearchView extends Component {
</div>
<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>
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
</div>
<div className="buttons-row">
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
@ -303,4 +304,4 @@ class SearchView extends Component {
}
}
export {SearchView as default, SearchView, SearchSettingsView};
export {SearchView, SearchSettingsView};

78
apps/spreadsheeteditor/mobile/src/controller/Search.jsx
View file

@ -1,22 +1,15 @@
import React, { Fragment } from 'react';
import { List, ListItem, Toggle, BlockTitle } from 'framework7-react';
import React, { Fragment, useEffect } from 'react';
import { List, ListItem, Toggle, BlockTitle, Navbar, NavRight, Link, Page } 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 { withTranslation } from 'react-i18next';
import { Dom7 } from 'framework7';
import { Device } from '../../../../common/mobile/utils/device';
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);
}
@ -27,52 +20,66 @@ class SearchSettings extends SearchSettingsView {
extraSearchOptions() {
const anc_markup = super.extraSearchOptions();
const show_popover = !Device.phone;
const { t } = this.props;
const _t = t("View.Settings", { returnObjects: true });
const markup = (
<Fragment>
<BlockTitle>Search In</BlockTitle>
<Page>
<Navbar title={_t.textFindAndReplace}>
{!show_popover &&
<NavRight>
<Link popupClose=".search-settings-popup">{_t.textDone}</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem radio title="Workbook" name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
<ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List>
<BlockTitle>{_t.textSearchIn}</BlockTitle>
<List>
<ListItem radio title={_t.textWorkbook} 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({
<ListItem radio title={_t.textSheet} name="search-in-checkbox" value="1" checked={this.state.searchIn === 1} onClick={( )=> this.setState({
searchIn: 1
})} />
</List>
<BlockTitle>Search</BlockTitle>
<BlockTitle>{_t.textSearchBy}</BlockTitle>
<List>
<ListItem radio title="By rows" name="search-by-checkbox" value="0" checked={this.state.searchBy === 0} onClick={() => this.setState({
<ListItem radio title={_t.textByRows} 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({
<ListItem radio title={_t.textByColumns} name="search-by-checkbox" value="1" checked={this.state.searchBy === 1} onClick={() => this.setState({
searchBy: 1
})} />
</List>
<BlockTitle>Look In</BlockTitle>
<BlockTitle>{_t.textLookIn}</BlockTitle>
<List>
<ListItem radio title="Formulas" name="look-in-checkbox" value="0" checked={this.state.lookIn === 0} onClick={() => this.setState({
<ListItem radio title={_t.textFormulas} 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({
<ListItem radio title={_t.textValues} name="look-in-checkbox" value="1" checked={this.state.lookIn === 1} onClick={() => this.setState({
lookIn: 1
})} />
</List>
<List>
<ListItem title="Match Case">
<ListItem title={_t.textMatchCase}>
<Toggle slot="after" className="toggle-match-case" checked={this.state.isMatchCase} onToggleChange={() => this.setState({
isMatchCase: !this.state.isMatchCase
})} />
</ListItem>
<ListItem title="Match Cell">
<ListItem title={_t.textMatchCell}>
<Toggle slot="after" className="toggle-match-cell" checked={this.state.isMatchCell} onToggleChange={() => this.setState({
isMatchCell: !this.state.isMatchCell
})} />
</ListItem>
<ListItem title="Highlight results">
<ListItem title={_t.textHighlightRes}>
<Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
</ListItem>
</List>
</Fragment>
</Page>
)
return {...anc_markup, ...markup};
@ -80,6 +87,10 @@ class SearchSettings extends SearchSettingsView {
}
class SESearchView extends SearchView {
constructor(props) {
super(props);
}
searchParams() {
let params = super.searchParams();
const $$ = Dom7;
@ -114,12 +125,13 @@ class SESearchView extends SearchView {
}
}
const Search = props => {
// const { t } = useTranslation();
// const _t = t('View.Settings', {returnObjects: true});
const Search = withTranslation()(props => {
const { t } = props;
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;
@ -136,7 +148,7 @@ const Search = props => {
options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
if (!api.asc_findText(options)) {
f7.dialog.alert(null, 'Text not Found');
f7.dialog.alert(null, _t.textNoTextFound);
}
}
};
@ -189,7 +201,9 @@ const Search = props => {
}
}
return <SESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
};
return <SESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
});
export {Search, SearchSettings}
const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
export {Search, SearchSettingsWithTranslation as SearchSettings}

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

@ -73,12 +73,12 @@ export default class MainPage extends Component {
<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 />
<Search useSuspense={false} />
</Navbar>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
{/* Page content */}
<View id="editor_sdk" />
<SearchSettings />
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />