Merge pull request #1280 from ONLYOFFICE/feature/edit-search

[DE PE SSE] Edit SearchBar
This commit is contained in:
maxkadushkin 2021-10-28 22:33:03 +03:00 committed by GitHub
commit ceaee6161b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 8 deletions

View file

@ -227,6 +227,8 @@ class SearchView extends Component {
this.setState({ this.setState({
searchQuery: value searchQuery: value
}); });
this.props.onchangeSearchQuery(value);
} }
changeReplaceQuery(value) { changeReplaceQuery(value) {
@ -240,7 +242,7 @@ class SearchView extends Component {
const isReplaceAll = searchOptions.isReplaceAll; const isReplaceAll = searchOptions.isReplaceAll;
const hidden = {display: "none"}; const hidden = {display: "none"};
const searchQuery = this.state.searchQuery; const searchQuery = this.state.searchQuery;
// const replaceQuery = this.state.replaceQuery; const replaceQuery = this.state.replaceQuery;
const isIos = Device.ios; const isIos = Device.ios;
const { _t } = this.props; const { _t } = this.props;
@ -259,7 +261,7 @@ class SearchView extends Component {
</div> </div>
<div className="searchbar-inner__center"> <div className="searchbar-inner__center">
<div className="searchbar-input-wrap"> <div className="searchbar-input-wrap">
<input placeholder={_t.textSearch} type="search" maxLength="255" <input value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
onChange={e => {this.changeSearchQuery(e.target.value)}} /> onChange={e => {this.changeSearchQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null} {isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" onClick={() => this.changeSearchQuery('')} /> <span className="input-clear-button" onClick={() => this.changeSearchQuery('')} />
@ -267,7 +269,7 @@ class SearchView extends Component {
{/* {usereplace || isReplaceAll ? */} {/* {usereplace || isReplaceAll ? */}
<div className="searchbar-input-wrap" style={usereplace || isReplaceAll ? null : hidden}> <div className="searchbar-input-wrap" style={usereplace || isReplaceAll ? null : hidden}>
{/* style={!usereplace ? hidden: null} */} {/* style={!usereplace ? hidden: null} */}
<input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val" <input value={replaceQuery} placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val"
onChange={e => {this.changeReplaceQuery(e.target.value)}} /> onChange={e => {this.changeReplaceQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null} {isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" onClick={() => this.changeReplaceQuery('')} /> <span className="input-clear-button" onClick={() => this.changeReplaceQuery('')} />

View file

@ -81,7 +81,7 @@ class DESearchView extends SearchView {
super.onSearchbarShow(isshowed, bar); super.onSearchbarShow(isshowed, bar);
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if ( isshowed ) { if ( isshowed && this.state.searchQuery.length ) {
const checkboxMarkResults = f7.toggle.get('.toggle-mark-results'); const checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
api.asc_selectSearchingResults(checkboxMarkResults.checked); api.asc_selectSearchingResults(checkboxMarkResults.checked);
} else api.asc_selectSearchingResults(false); } else api.asc_selectSearchingResults(false);
@ -98,12 +98,20 @@ const Search = withTranslation()(props => {
f7.popover.close('.document-menu.modal-in', false); f7.popover.close('.document-menu.modal-in', false);
if (params.find && params.find.length) { if (params.find && params.find.length) {
api.asc_selectSearchingResults(true);
if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
f7.dialog.alert(null, _t.textNoTextFound); f7.dialog.alert(null, _t.textNoTextFound);
} }
} }
}; };
const onchangeSearchQuery = params => {
const api = Common.EditorApi.get();
if(params.length === 0) api.asc_selectSearchingResults(false);
}
const onReplaceQuery = params => { const onReplaceQuery = params => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -120,7 +128,7 @@ const Search = withTranslation()(props => {
} }
} }
return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} /> return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onchangeSearchQuery={onchangeSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
}); });
const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings))); const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings)));

View file

@ -86,6 +86,12 @@ const Search = withTranslation()(props => {
} }
}; };
const onchangeSearchQuery = params => {
const api = Common.EditorApi.get();
if(params.length === 0) api.asc_selectSearchingResults(false);
}
const onReplaceQuery = params => { const onReplaceQuery = params => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -102,7 +108,7 @@ const Search = withTranslation()(props => {
} }
} }
return <PESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} /> return <PESearchView _t={_t} onSearchQuery={onSearchQuery} onchangeSearchQuery={onchangeSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
}); });
const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings))); const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings)));

View file

@ -126,7 +126,7 @@ class SESearchView extends SearchView {
super.onSearchbarShow(isshowed, bar); super.onSearchbarShow(isshowed, bar);
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if ( isshowed ) { if ( isshowed && this.state.searchQuery.length ) {
const checkboxMarkResults = f7.toggle.get('.toggle-mark-results'); const checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
api.asc_selectSearchingResults(checkboxMarkResults.checked); api.asc_selectSearchingResults(checkboxMarkResults.checked);
} else api.asc_selectSearchingResults(false); } else api.asc_selectSearchingResults(false);
@ -155,12 +155,20 @@ const Search = withTranslation()(props => {
options.asc_setScanByRows(searchBy); options.asc_setScanByRows(searchBy);
options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
api.asc_selectSearchingResults(true);
if (!api.asc_findText(options)) { if (!api.asc_findText(options)) {
f7.dialog.alert(null, _t.textNoTextFound); f7.dialog.alert(null, _t.textNoTextFound);
} }
} }
}; };
const onchangeSearchQuery = params => {
const api = Common.EditorApi.get();
if(params.length === 0) api.asc_selectSearchingResults(false);
}
const onReplaceQuery = params => { const onReplaceQuery = params => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
let lookIn = +params.lookIn === 0; let lookIn = +params.lookIn === 0;
@ -209,7 +217,7 @@ const Search = withTranslation()(props => {
} }
} }
return <SESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} /> return <SESearchView _t={_t} onSearchQuery={onSearchQuery} onchangeSearchQuery={onchangeSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
}); });
const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings))); const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings)));