mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

chore(Table): Update custom-filter-panel.md demo (#19899)

Browse Source 
* Update custom-filter-panel.md

In order to decrease the confusion during search created by highlighted text in all the columns, the proposal is to highlight searched text in the searched column exclusively.

* chore(Table): Update demo.test.js.snap

Snapshot update according to update in components/table/demo/custom-filter-panel.md

* chore(Table): Update custom-filter-panel.md demo

Missing trailing comma comma-dangle
This commit is contained in:
mbotnari 2019-11-24 13:10:29 +02:00 committed by Amumu
parent 958bc51629
commit fb4ed9a638
2 changed files with 22 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1328,35 +1328,17 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
John Brown
</span>
</span>
John Brown
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
32
</span>
</span>
32
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<span>
<span
class=""
>
New York No. 1 Lake Park
</span>
</span>
New York No. 1 Lake Park
</td>
</tr>
<tr
@ -1366,35 +1348,17 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
Joe Black
</span>
</span>
Joe Black
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
42
</span>
</span>
42
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<span>
<span
class=""
>
London No. 1 Lake Park
</span>
</span>
London No. 1 Lake Park
</td>
</tr>
<tr
@ -1404,35 +1368,17 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
Jim Green
</span>
</span>
Jim Green
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
32
</span>
</span>
32
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<span>
<span
class=""
>
Sidney No. 1 Lake Park
</span>
</span>
Sidney No. 1 Lake Park
</td>
</tr>
<tr
@ -1442,35 +1388,17 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
Jim Red
</span>
</span>
Jim Red
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-row-cell-break-word"
>
<span>
<span
class=""
>
32
</span>
</span>
32
</td>
<td
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<span>
<span
class=""
>
London No. 2 Lake Park
</span>
</span>
London No. 2 Lake Park
</td>
</tr>
</tbody>

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

@ -47,6 +47,7 @@ const data = [
class App extends React.Component {
state = {
searchText: '',
searchedColumn: '',
};
getColumnSearchProps = dataIndex => ({
@ -59,12 +60,12 @@ class App extends React.Component {
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm)}
onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}
@ -90,18 +91,23 @@ class App extends React.Component {
}
},
render: text => (
(this.state.searchedColumn === dataIndex) ?
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text.toString()}
/>
: text
),
});
handleSearch = (selectedKeys, confirm) => {
handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
this.setState({ searchText: selectedKeys[0] });
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex,
});
};
handleReset = clearFilters => {