search refactoring

This commit is contained in:
insanity 2017-07-19 13:46:56 +09:00
parent 35e6d662a1
commit 99cbdabc6a
2 changed files with 57 additions and 22 deletions

View File

@ -26,7 +26,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "asus"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "1AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description1111111111",
},
{
@ -37,7 +37,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "ottugi"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "2AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description22222222",
},
{
@ -48,7 +48,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "lg"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "3AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description33333",
},
{
@ -59,7 +59,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "apple"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "4AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description4444",
},
];
@ -82,17 +82,9 @@ export class Probes extends React.Component<any, any> {
});
}
handleSearch(searchWord: string) {
let founds = new Array();
for (let probe of this.data) {
if (probe.domain.name.toLowerCase().indexOf(searchWord) !== -1
|| probe.description.toLowerCase().indexOf(searchWord) !== -1
|| probe.metaProbeStatus.name.toLowerCase().indexOf(searchWord) !== -1) {
founds.push(probe);
}
}
handleSearch(result: object[]) {
this.setState({
list: founds,
list: result,
});
}
@ -115,7 +107,7 @@ export class Probes extends React.Component<any, any> {
}
renderRows() {
if(this.state.list.length === 0) {
if (this.state.list.length === 0) {
return <Table.Row error >
<Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
</Table.Row>;
@ -131,6 +123,7 @@ export class Probes extends React.Component<any, any> {
));
}
render() {
if (this.state.isDetail) {
return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
@ -157,8 +150,9 @@ export class Probes extends React.Component<any, any> {
return (
<ListContainer
contents={probeList}
filter={<ProbeFilter data={this.data} onFilter={this.handleFilter.bind(this)} />}
data={this.data}
onSearch={this.handleSearch.bind(this)}
filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
/>
);
}

View File

@ -1,26 +1,67 @@
import * as React from 'react';
import { Grid, Input, Form, Checkbox, Divider, Button } from 'semantic-ui-react';
import { Grid, Input, Form, Checkbox, Divider } from 'semantic-ui-react';
export class ListContainer extends React.Component<any, any> {
private data: any = null;
private found: boolean = false;
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
handleSearch(e: any, data: any) {
this.props.onSearch(data.value.toLowerCase());
let searchWord = data.value;
let items: object[];
items = this.props.data;
let item: any;
let result = new Array();
for (item of items) {
this.search(item, searchWord);
if (this.found) {
result.push(item);
}
this.found = false;
}
this.props.onSearch(result);
}
handleSearchInput(e: any, data: any) {
this.setState({
searchWord: data.value,
});
}
search(item: any, searchWord: string) {
let key: any;
for (key in item) {
if (this.isString(item[key])) {
if (item[key].toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
this.found = true;
}
} else {
this.search(item[key], searchWord);
}
}
}
isString(val: any): boolean {
if (typeof val === 'string') {
return true;
}
return false;
}
render() {
return (
<Grid>
<Grid.Column width={4}>
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid />
{/*filter */}
<Input icon='search' label={{ icon: 'asterisk' }}
labelPosition='left corner' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid/>
<Divider />
{this.props.filter}
</Grid.Column>