Skip to content

Commit

Permalink
Merge pull request #2709 from ONLYOFFICE/feature/Bug_62413
Browse files Browse the repository at this point in the history 
Feature/bug 62413
  • Loading branch information
@maxkadushkin
maxkadushkin authored Dec 4, 2023
2 parents acb468f + e0906f4 commit 273d2ad
Show file tree
Hide file tree
Showing 7 changed files with 257 additions and 120 deletions.
66 changes: 53 additions & 13 deletions apps/common/mobile/lib/view/Search.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ class SearchView extends Component {
this.onReplaceClick = this.onReplaceClick.bind(this);
}

componentDidMount(){
componentDidMount() {
this.$replace = $$('#idx-replace-val');
const $editor = $$('#editor_sdk');

Expand Down Expand Up @@ -126,8 +126,13 @@ class SearchView extends Component {
}

componentWillUnmount() {
$$('#editor_sdk').off('pointerdown', this.onEditorTouchStart)
.off('pointerup', this.onEditorTouchEnd);
$$('#editor_sdk')
.off('pointerdown', this.onEditorTouchStart)
.off('pointerup', this.onEditorTouchEnd);

if(this.searchTimer) {
clearInterval(this.searchTimer);
}
}

onSettingsClick(e) {
Expand All @@ -152,9 +157,9 @@ class SearchView extends Component {
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);
}
Expand Down Expand Up @@ -190,7 +195,7 @@ class SearchView extends Component {
// }

onEditorTouchStart(e) {
console.log('taouch start');
// console.log('taouch start');
this.startPoint = this.pointerPosition(e);
}

Expand Down Expand Up @@ -236,9 +241,43 @@ class SearchView extends Component {
});
}

onSearchKeyBoard(event) {
if(event.keyCode === 13) {
this.props.onSearchQuery(this.searchParams());
onSearchKeyDown(e) {
if(e.keyCode === 13) {
if (this.props.onSearchQuery(this.searchParams(), true) && this.searchTimer) {
clearInterval(this.searchTimer);
this.searchTimer = undefined;
}
}
}

onSearchInput(e) {
const text = e.target.value;
const api = Common.EditorApi.get();

if (text && this.state.searchQuery !== text) {
this.setState(prevState => ({
...prevState,
searchQuery: text
}));

this.lastInputChange = new Date();

if (this.searchTimer === undefined) {
this.searchTimer = setInterval(() => {
if (new Date() - this.lastInputChange < 400) return;

if (this.state.searchQuery !== '') {
this.props.onSearchQuery(this.searchParams(), true);
} else {
api.asc_endFindText();
}

clearInterval(this.searchTimer);
this.searchTimer = undefined;
}, 10);
}
} else {
this.props.setNumberSearchResults(null);
}
}

Expand All @@ -250,6 +289,7 @@ class SearchView extends Component {
const replaceQuery = this.state.replaceQuery;
const isIos = Device.ios;
const { _t } = this.props;
const numberSearchResults = this.props.numberSearchResults;

if(this.searchbar && this.searchbar.enabled) {
usereplace || isReplaceAll ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
Expand All @@ -267,14 +307,17 @@ class SearchView extends Component {
<div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input className="searchbar-input" value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
onKeyDown={e => this.onSearchKeyBoard(e)}
onKeyDown={e => this.onSearchKeyDown(e)}
onInput={e => this.onSearchInput(e)}
onChange={e => {this.changeSearchQuery(e.target.value)}} ref={el => this.refSearchbarInput = el} />
{isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" onClick={() => this.changeSearchQuery('')} />
{numberSearchResults !== null ?
<span className="number-search-results">{numberSearchResults}</span>
: null}
</div>
{/* {usereplace || isReplaceAll ? */}
<div className="searchbar-input-wrap" style={usereplace || isReplaceAll ? null : hidden}>
{/* style={!usereplace ? hidden: null} */}
<input value={replaceQuery} placeholder={_t.textReplace} type="text" maxLength="255" id="idx-replace-val"
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null}
Expand All @@ -284,9 +327,6 @@ 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()}>{_t.textReplace}</a>
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a> */}

{isReplaceAll ? (
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
) : usereplace ? (
Expand Down
47 changes: 31 additions & 16 deletions apps/common/mobile/resources/less/common-ios.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,7 @@
background: var(--f7-navbar-bg-color);
}
.searchbar-input-wrap {
position: relative;
margin-right: 10px;
height: 28px;
}
Expand All @@ -445,23 +446,37 @@
}
}

.searchbar input {
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
border: none;
appearance: none;
border-radius: 5px;
font-family: inherit;
color: @text-normal;
font-size: 14px;
font-weight: 400;
padding: 0 8px;
background-color: @background-button;
padding: 0 28px;
&::placeholder {
.searchbar {
input {
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
border: none;
appearance: none;
border-radius: 5px;
font-family: inherit;
color: @text-normal;
font-size: 14px;
font-weight: 400;
padding: 0 8px;
background-color: @background-button;
padding: 0 36px 0 28px;

&::placeholder {
color: @text-tertiary;
}
}

.number-search-results {
position: absolute;
font-size: 13px;
font-weight: 400;
line-height: 18px;
right: 26px;
color: @text-tertiary;
top: 5px;
z-index: 100;
}
}

Expand Down
81 changes: 47 additions & 34 deletions apps/common/mobile/resources/less/common-material.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,14 +435,54 @@
}
}

.searchbar .input-clear-button {
width: 18px;
height: 18px;
margin-top: -8px;
&:after {
.searchbar {
input {
box-sizing: border-box;
width: 100%;
display: block;
border: none;
appearance: none;
border-radius: 0;
font-family: inherit;
color: @fill-white;
font-size: 19px;
line-height: 19px;
font-size: 16px;
font-weight: 400;
padding: 0;
border-bottom: 1px solid @fill-white;
height: 100%;
padding: 0 40px 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>');
&::placeholder {
color: @fill-white;
}
}

.input-clear-button {
width: 18px;
height: 18px;
top: 7px;
margin: 0;

&:after {
color: @fill-white;
font-size: 19px;
line-height: 19px;
}
}

.number-search-results {
position: absolute;
right: 26px;
top: 4px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}

Expand All @@ -452,33 +492,6 @@
font-size: 19px;
}
}

.searchbar input {
box-sizing: border-box;
width: 100%;
display: block;
border: none;
appearance: none;
border-radius: 0;
font-family: inherit;
color: @fill-white;
font-size: 16px;
font-weight: 400;
padding: 0;
border-bottom: 1px solid @fill-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>');
&::placeholder {
color: @fill-white;
}
}

.navbar {
.searchbar-expandable.searchbar-enabled {
Expand Down
34 changes: 29 additions & 5 deletions apps/documenteditor/mobile/src/controller/Search.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import React, { useState } from 'react';
import { List, ListItem, Toggle, Page, Navbar, NavRight, Link, f7 } from 'framework7-react';
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { withTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device';
import { observer, inject } from "mobx-react";
Expand Down Expand Up @@ -95,8 +95,9 @@ class DESearchView extends SearchView {
const Search = withTranslation()(props => {
const { t } = props;
const _t = t('Settings', {returnObjects: true});
const [numberSearchResults, setNumberSearchResults] = useState(null);

const onSearchQuery = params => {
const onSearchQuery = (params, isSearchByTyping) => {
const api = Common.EditorApi.get();

f7.popover.close('.document-menu.modal-in', false);
Expand All @@ -109,7 +110,16 @@ const Search = withTranslation()(props => {
if (params.highlight) api.asc_selectSearchingResults(true);

api.asc_findText(options, params.forward, function (resultCount) {
!resultCount && f7.dialog.alert(null, t('Settings.textNoMatches'));
if(!resultCount) {
setNumberSearchResults(0);
api.asc_selectSearchingResults(false);

if(!isSearchByTyping) {
f7.dialog.alert(null, t('Settings.textNoMatches'));
}
} else {
setNumberSearchResults(resultCount);
}
});
};

Expand All @@ -128,11 +138,13 @@ const Search = withTranslation()(props => {

api.asc_findText(options, params.forward, function (resultCount) {
if(!resultCount) {
setNumberSearchResults(0);
f7.dialog.alert(null, t('Settings.textNoMatches'));
return;
}

api.asc_replaceText(options, params.replace || '', false);
setNumberSearchResults(numberSearchResults - 1);
});
}

Expand All @@ -145,15 +157,27 @@ const Search = withTranslation()(props => {

api.asc_findText(options, params.forward, function (resultCount) {
if(!resultCount) {
setNumberSearchResults(0);
f7.dialog.alert(null, t('Settings.textNoMatches'));
return;
}

api.asc_replaceText(options, params.replace || '', true);
setNumberSearchResults(0);
});
}

return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onchangeSearchQuery={onchangeSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
return (
<DESearchView
_t={_t}
numberSearchResults={numberSearchResults}
onSearchQuery={onSearchQuery}
onchangeSearchQuery={onchangeSearchQuery}
onReplaceQuery={onReplaceQuery}
onReplaceAllQuery={onReplaceAllQuery}
setNumberSearchResults={setNumberSearchResults}
/>
)
});

const SearchSettingsWithTranslation = inject("storeAppOptions", "storeReview", "storeVersionHistory")(observer(withTranslation()(SearchSettings)));
Expand Down
Loading

0 comments on commit 273d2ad

Please sign in to comment.