[DE mobile] custom Search for DE
This commit is contained in:
parent
6c95a26e76
commit
3e6f6bc964
|
@ -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};
|
||||
|
|
|
@ -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};
|
||||
|
|
51
apps/documenteditor/mobile/src/controller/Search.jsx
Normal file
51
apps/documenteditor/mobile/src/controller/Search.jsx
Normal 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}
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue