mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
💄 Optimize custom filter demo of Table
This commit is contained in:
afc163
parent
c2d1d72675
commit
7abf528b96
@ -1038,8 +1038,12 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col />
|
||||
<col
|
||||
style="width:30%;min-width:30%"
|
||||
/>
|
||||
<col
|
||||
style="width:20%;min-width:20%"
|
||||
/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
@ -1053,31 +1057,48 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
Name
|
||||
</div>
|
||||
<i
|
||||
class="anticon anticon-smile-o ant-table-filter-icon ant-dropdown-trigger"
|
||||
style="color:#aaa"
|
||||
class="anticon anticon-search ant-table-filter-icon ant-dropdown-trigger"
|
||||
title="Filter menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<div>
|
||||
Age
|
||||
</div>
|
||||
<i
|
||||
class="anticon anticon-search ant-table-filter-icon ant-dropdown-trigger"
|
||||
title="Filter menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
@ -1086,20 +1107,20 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
Address
|
||||
</div>
|
||||
<i
|
||||
class="anticon anticon-filter ant-dropdown-trigger"
|
||||
class="anticon anticon-search ant-table-filter-icon ant-dropdown-trigger"
|
||||
title="Filter menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="filter"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
@ -1120,17 +1141,35 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
32
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
John Brown
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
New York No. 1 Lake Park
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
32
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
New York No. 1 Lake Park
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
@ -1144,17 +1183,35 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Joe Black
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
42
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
Joe Black
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
42
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
@ -1168,17 +1225,35 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jim Green
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
32
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
Jim Green
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
32
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
@ -1192,17 +1267,35 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jim Red
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
32
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
Jim Red
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
London No. 2 Lake Park
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
32
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
London No. 2 Lake Park
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -17,6 +17,7 @@ Implement a customized column search example via `filterDropdown`.
|
||||
import {
|
||||
Table, Input, Button, Icon,
|
||||
} from 'antd';
|
||||
import Highlighter from 'react-highlight-words';
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
@ -45,12 +46,60 @@ class App extends React.Component {
|
||||
searchText: '',
|
||||
};
|
||||
|
||||
handleSearch = (selectedKeys, confirm) => () => {
|
||||
getColumnSearchProps = (dataIndex) => ({
|
||||
filterDropdown: ({
|
||||
setSelectedKeys, selectedKeys, confirm, clearFilters,
|
||||
}) => (
|
||||
<div className="custom-filter-dropdown">
|
||||
<Input
|
||||
ref={node => { this.searchInput = node; }}
|
||||
placeholder={`Search ${dataIndex}`}
|
||||
value={selectedKeys[0]}
|
||||
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
|
||||
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
|
||||
style={{ width: 188, marginBottom: 8, display: 'block' }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => this.handleSearch(selectedKeys, confirm)}
|
||||
icon="search"
|
||||
size="small"
|
||||
style={{ width: 90, marginRight: 8 }}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => this.handleReset(clearFilters)}
|
||||
size="small"
|
||||
style={{ width: 90 }}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
|
||||
onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
|
||||
onFilterDropdownVisibleChange: (visible) => {
|
||||
if (visible) {
|
||||
setTimeout(() => this.searchInput.select());
|
||||
}
|
||||
},
|
||||
render: (text) => (
|
||||
<Highlighter
|
||||
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
|
||||
searchWords={[this.state.searchText]}
|
||||
autoEscape
|
||||
textToHighlight={text.toString()}
|
||||
/>
|
||||
),
|
||||
})
|
||||
|
||||
handleSearch = (selectedKeys, confirm) => {
|
||||
confirm();
|
||||
this.setState({ searchText: selectedKeys[0] });
|
||||
}
|
||||
|
||||
handleReset = clearFilters => () => {
|
||||
handleReset = (clearFilters) => {
|
||||
clearFilters();
|
||||
this.setState({ searchText: '' });
|
||||
}
|
||||
@ -60,57 +109,19 @@ class App extends React.Component {
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
filterDropdown: ({
|
||||
setSelectedKeys, selectedKeys, confirm, clearFilters,
|
||||
}) => (
|
||||
<div className="custom-filter-dropdown">
|
||||
<Input
|
||||
ref={ele => this.searchInput = ele}
|
||||
placeholder="Search name"
|
||||
value={selectedKeys[0]}
|
||||
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
|
||||
onPressEnter={this.handleSearch(selectedKeys, confirm)}
|
||||
/>
|
||||
<Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
|
||||
<Button onClick={this.handleReset(clearFilters)}>Reset</Button>
|
||||
</div>
|
||||
),
|
||||
filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
|
||||
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
|
||||
onFilterDropdownVisibleChange: (visible) => {
|
||||
if (visible) {
|
||||
setTimeout(() => {
|
||||
this.searchInput.focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
render: (text) => {
|
||||
const { searchText } = this.state;
|
||||
return searchText ? (
|
||||
<span>
|
||||
{text.split(new RegExp(`(${searchText})`, 'gi')).map((fragment, i) => (
|
||||
fragment.toLowerCase() === searchText.toLowerCase()
|
||||
? <span key={i} className="highlight">{fragment}</span> : fragment // eslint-disable-line
|
||||
))}
|
||||
</span>
|
||||
) : text;
|
||||
},
|
||||
width: '30%',
|
||||
...this.getColumnSearchProps('name'),
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: '20%',
|
||||
...this.getColumnSearchProps('age'),
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
filters: [{
|
||||
text: 'London',
|
||||
value: 'London',
|
||||
}, {
|
||||
text: 'New York',
|
||||
value: 'New York',
|
||||
}],
|
||||
onFilter: (value, record) => record.address.indexOf(value) === 0,
|
||||
...this.getColumnSearchProps('address'),
|
||||
}];
|
||||
return <Table columns={columns} dataSource={data} />;
|
||||
}
|
||||
@ -122,21 +133,8 @@ ReactDOM.render(<App />, mountNode);
|
||||
````css
|
||||
.custom-filter-dropdown {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.custom-filter-dropdown input {
|
||||
width: 130px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.custom-filter-dropdown button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #f50;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
|
||||
}
|
||||
````
|
||||
|
||||
@ -156,6 +156,7 @@
|
||||
"react-document-title": "^2.0.3",
|
||||
"react-dom": "^16.5.2",
|
||||
"react-github-button": "^0.1.11",
|
||||
"react-highlight-words": "^0.14.0",
|
||||
"react-infinite-scroller": "^1.2.1",
|
||||
"react-intl": "^2.7.0",
|
||||
"react-resizable": "^1.7.5",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user