test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 19:19:26 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

docs: rewrite custom filter demo with filterDropdown function

Browse Source
This commit is contained in:
Wei Zhu 2018-07-02 18:39:49 +08:00
parent 1af4392ae9
commit 0f2fea2d78
2 changed files with 37 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
components/table/demo/custom-filter-panel.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN
通过 `filterDropdown`、`filterDropdownVisible` 和 `filterDropdownVisibleChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。
通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。
## en-US
Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`.
Implement a customized column search example via `filterDropdown`.
````jsx
import { Table, Input, Button, Icon } from 'antd';
@ -40,40 +40,17 @@ const data = [{
class App extends React.Component {
state = {
filterDropdownVisible: false,
data,
searchText: '',
filtered: false,
};
onInputChange = (e) => {
this.setState({ searchText: e.target.value });
handleSearch = (selectedKeys, confirm) => () => {
confirm();
this.setState({ searchText: selectedKeys[0] });
}
onSearch = () => {
const { searchText } = this.state;
const reg = new RegExp(searchText, 'gi');
this.setState({
filterDropdownVisible: false,
filtered: !!searchText,
data: data.map((record) => {
const match = record.name.match(reg);
if (!match) {
return null;
}
return {
...record,
name: (
<span>
{record.name.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i')).map((text, i) => (
text.toLowerCase() === searchText.toLowerCase()
? <span key={i} className="highlight">{text}</span> : text // eslint-disable-line
))}
</span>
),
};
}).filter(record => !!record),
});
handleReset = clearFilters => () => {
clearFilters();
this.setState({ searchText: '' });
}
render() {
@ -81,24 +58,38 @@ class App extends React.Component {
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: (
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div className="custom-filter-dropdown">
<Input
ref={ele => this.searchInput = ele}
placeholder="Search name"
value={this.state.searchText}
onChange={this.onInputChange}
onPressEnter={this.onSearch}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={this.handleSearch(selectedKeys, confirm)}
/>
<Button type="primary" onClick={this.onSearch}>Search</Button>
<Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
<Button onClick={this.handleReset(clearFilters)}>Reset</Button>
</div>
),
filterIcon: <Icon type="smile-o" style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />,
filterDropdownVisible: this.state.filterDropdownVisible,
filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: (visible) => {
this.setState({
filterDropdownVisible: visible,
}, () => this.searchInput && this.searchInput.focus());
if (visible) {
setTimeout(() => {
this.searchInput.focus();
});
}
},
render: (text) => {
const { searchText } = this.state;
return (
<span>
{text.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i')).map((fragment, i) => (
fragment.toLowerCase() === searchText.toLowerCase()
? <span key={i} className="highlight">{fragment}</span> : fragment // eslint-disable-line
))}
</span>
);
},
}, {
title: 'Age',
@ -117,7 +108,7 @@ class App extends React.Component {
}],
onFilter: (value, record) => record.address.indexOf(value) === 0,
}];
return <Table columns={columns} dataSource={this.state.data} />;
return <Table columns={columns} dataSource={data} />;
}
}
@ -137,6 +128,10 @@ ReactDOM.render(<App />, mountNode);
margin-right: 8px;
}
.custom-filter-dropdown button {
margin-right: 8px;
}
.highlight {
color: #f50;
}

95
components/table/demo/override-filter-panel.md
View File

@ -1,95 +0,0 @@
---
order: 27
title:
en-US: Override filter panel renderer
zh-CN: TODO
---
## zh-CN
TODO
## en-US
Override filter panel renderer, injecting `filterDropdown` prop
````jsx
import { Table, Icon, Divider } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="javascript:;">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
filterDropdown: ({ prefixCls, setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
return (
<div className={`${prefixCls}-view`}>
<div>
<a href="javascript:;" onClick={() => setSelectedKeys([42])}>
{selectedKeys.indexOf(42) >= 0 && <Icon type="check" />} 42
</a>
</div>
<div>
<a href="javascript:;" onClick={() => setSelectedKeys([32])}>
{selectedKeys.indexOf(32) >= 0 && <Icon type="check" />} 32
</a>
</div>
<Divider type="horizontal" style={{ margin: '5px 0' }} />
<a href="javascript:;" onClick={() => confirm()}>Confirm</a>{' - '}
<a href="javascript:;" onClick={() => clearFilters()}>Reset</a>
</div>
);
},
onFilter: (value, record) => value === record.age,
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a href="javascript:;">Action 一 {record.name}</a>
<Divider type="vertical" />
<a href="javascript:;">Delete</a>
<Divider type="vertical" />
<a href="javascript:;" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
````
````css
.ant-dropdown-custom-view {
padding: 8px;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
````