[DE mobile] custom Search for DE

This commit is contained in:
Maxim Kadushkin 2021-01-28 19:23:28 +03:00
parent 6c95a26e76
commit 3e6f6bc964
4 changed files with 69 additions and 22 deletions

View file

@ -3,11 +3,11 @@ import SearchView, {SearchSettingsView} from '../view/Search'
const SearchController = props => {
const _onSearchQuery = params => {
const onSearchQuery = params => {
console.log('on search: ' + params);
};
return <SearchView onSearchQuery={_onSearchQuery} />
return <SearchView onSearchQuery={onSearchQuery} />
};
export {SearchController as Search, SearchSettingsView as SearchSettings};
export {SearchController, SearchView, SearchSettingsView};

View file

@ -36,6 +36,9 @@ class SearchSettingsView extends Component {
if (this.onReplaceChecked) {}
}
extraSearchOptions() {
}
render() {
const show_popover = true;
const navbar =
@ -45,6 +48,7 @@ class SearchSettingsView extends Component {
<Link popupClose=".search-settings-popup">Done</Link>
</NavRight>}
</Navbar>;
const extra = this.extraSearchOptions();
const content =
<View style={popoverStyle}>
<Page>
@ -53,14 +57,7 @@ class SearchSettingsView extends Component {
<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>
<List>
<ListItem title="Case sensitive">
<Toggle slot="after" />
</ListItem>
<ListItem title="Highlight results">
<Toggle slot="after" />
</ListItem>
</List>
{ extra }
</Page>
</View>;
return (
@ -108,21 +105,20 @@ class SearchView extends Component {
searchParams() {
let params = {
text: this.searchbar.query,
direction: action
find: this.searchbar.query
};
if ( searchOptions.usereplace )
params.replace = this.$replace.val();
return params;
}
onSearchClick(action) {
if ( this.searchbar && this.searchbar.query) {
if ( this.props.onSearchQuery ) {
let params = {
text: this.searchbar.query,
direction: action
};
if ( searchOptions.usereplace )
params.replace = this.$replace.val();
let params = this.searchParams();
params.to = action;
this.props.onSearchQuery(params);
}
@ -166,4 +162,4 @@ class SearchView extends Component {
}
}
export {SearchView as default, SearchSettingsView};
export {SearchView as default, SearchView, SearchSettingsView};

View file

@ -0,0 +1,51 @@
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';
class SearchSettings extends SearchSettingsView {
constructor(props) {
super(props);
}
extraSearchOptions() {
const anc_markup = super.extraSearchOptions();
const markup = <List>
<ListItem title="Case sensitive">
<Toggle slot="after" className="toggle-case-sensitive" />
</ListItem>
<ListItem title="Highlight results">
<Toggle slot="after" className="toggle-mark-results" defaultChecked />
</ListItem>
</List>;
return {...anc_markup, ...markup};
}
}
class DESearchView extends SearchView {
searchParams() {
let params = super.searchParams();
const checkboxCaseSensitive = f7.toggle.get('.toggle-case-sensitive'),
checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
const searchOptions = {
caseSensitive: checkboxCaseSensitive.checked,
highlight: checkboxMarkResults.checked
};
return {...params, ...searchOptions};
}
}
const Search = props => {
const onSearchQuery = params => {
console.log('on search: ' + params.find);
};
return <DESearchView onSearchQuery={onSearchQuery} />
};
export {Search, SearchSettings}

View file

@ -6,7 +6,7 @@ import AddOptions from '../view/add/Add';
import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
import { Device } from '../../../../common/mobile/utils/device'
import { Search, SearchSettings } from '../../../../common/mobile/lib/controller/Search';
import { Search, SearchSettings } from '../controller/Search';
export default class MainPage extends Component {
constructor(props) {