[DE mobile] Added replacing
This commit is contained in:
SergeyEzhin
parent
42d8461f1c
commit
ed550f1dce
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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')} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue