[DE mobile] Added replacing

This commit is contained in:
SergeyEzhin 2021-03-02 22:33:26 +03:00
parent 42d8461f1c
commit ed550f1dce
5 changed files with 75 additions and 19 deletions

View file

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

View file

@ -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",

View file

@ -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 ( !api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
f7.dialog.alert('there are no more results', e => {
});
if (params.find && params.find.length) {
if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
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}

View file

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

View file

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