docs: rewrite custom filter demo with filterDropdown function

components/table/demo/custom-filter-panel.md

@@ -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) => {
+  handleSearch = (selectedKeys, confirm) => () => {
-    this.setState({ searchText: e.target.value });
+    confirm();
+    this.setState({ searchText: selectedKeys[0] });
   }
 
-  onSearch = () => {
+  handleReset = clearFilters => () => {
-    const { searchText } = this.state;
+    clearFilters();
-    const reg = new RegExp(searchText, 'gi');
+    this.setState({ searchText: '' });
-    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),
-    });
   }
 
   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}
+            value={selectedKeys[0]}
-            onChange={this.onInputChange}
+            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
-            onPressEnter={this.onSearch}
+            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' }} />,
+      filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
-      filterDropdownVisible: this.state.filterDropdownVisible,
+      onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
       onFilterDropdownVisibleChange: (visible) => {
-        this.setState({
+        if (visible) {
-          filterDropdownVisible: visible,
+          setTimeout(() => {
-        }, () => this.searchInput && this.searchInput.focus());
+            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;
 }

components/table/demo/override-filter-panel.md

@@ -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);
-}
-````