Merge pull request #3837 from ant-design/feat-custom-table-column-filter

controlled filterDropdown props

components/table/demo/ajax.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 title:
   en-US: Ajax
   zh-CN: 远程加载数据

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

@@ -0,0 +1,125 @@
+---
+order: 7
+title:
+  en-US: Customized filter panel
+  zh-CN: 自定义筛选菜单
+---
+
+## zh-CN
+
+通过 `filterDropdown`、`filterDropdownVisible` 和 `filterDropdownVisibleChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。
+
+## en-US
+
+Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`.
+
+````jsx
+import { Table, Input, Button } from 'antd';
+
+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',
+}, {
+  key: '4',
+  name: 'Jim Red',
+  age: 32,
+  address: 'London No. 2 Lake Park',
+}];
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      filterDropdownVisible: false,
+      data,
+      searchText: '',
+    };
+  },
+  onInputChange(e) {
+    this.setState({ searchText: e.target.value });
+  },
+  onSearch() {
+    const { searchText } = this.state;
+    const reg = new RegExp(searchText, 'gi');
+    this.setState({
+      filterDropdownVisible: false,
+      data: data.map((record) => {
+        const match = record.name.match(reg);
+        if (!match) {
+          return null;
+        }
+        return {
+          ...record,
+          name: (
+            <span>
+              {record.name.split(reg).map((text, i) => (
+                i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
+              ))}
+            </span>
+          ),
+        };
+      }).filter(record => !!record),
+    });
+  },
+  render() {
+    const columns = [{
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      filterDropdown: (
+        <div className="custom-filter-dropdown">
+          <Input
+            placeholder="Search name"
+            value={this.state.searchText}
+            onChange={this.onInputChange}
+            onPressEnter={this.onSearch}
+          />
+          <Button type="primary" onClick={this.onSearch}>Search</Button>
+        </div>
+      ),
+      filterDropdownVisible: this.state.filterDropdownVisible,
+      onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }),
+    }, {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+    }, {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+    }];
+    return <Table columns={columns} dataSource={this.state.data} />;
+  },
+});
+
+ReactDOM.render(<App />, mountNode);
+````
+
+````css
+.custom-filter-dropdown {
+  padding: 8px;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+}
+
+.custom-filter-dropdown input {
+  width: 130px;
+  margin-right: 8px;
+}
+
+.highlight {
+  color: #f50;
+}
+````

components/table/filterDropdown.tsx

@@ -12,7 +12,9 @@ export interface FilterMenuProps {
   column: {
     filterMultiple?: boolean,
     filterDropdown?: React.ReactNode,
-    filters?: string[]
+    filters?: string[],
+    filterDropdownVisible?: boolean,
+    onFilterDropdownVisibleChange?: (visible: boolean) => any,
   };
   confirmFilter: (column: Object, selectedKeys: string[]) => any;
   prefixCls: string;
@@ -22,7 +24,7 @@ export interface FilterMenuProps {
 export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   static defaultProps = {
     handleFilter() {},
-    column: null,
+    column: {},
   };
 
   constructor(props) {
@@ -36,15 +38,35 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({
-      selectedKeys: nextProps.selectedKeys,
-    });
+    const { column } = nextProps;
+    let newState;
+    if ('selectedKeys' in nextProps) {
+      newState = newState || {};
+      newState.selectedKeys = nextProps.selectedKeys;
+    }
+    if ('filterDropdownVisible' in column) {
+      newState = newState || {};
+      newState.visible = column.filterDropdownVisible;
+    }
+    if (newState) {
+      this.setState(newState);
+    }
   }
 
   setSelectedKeys = ({ selectedKeys }) => {
     this.setState({ selectedKeys });
   }
 
+  setVisible(visible) {
+    const { column } = this.props;
+    if (!('filterDropdownVisible' in column)) {
+      this.setState({ visible });
+    }
+    if (column.onFilterDropdownVisibleChange) {
+      column.onFilterDropdownVisibleChange(visible);
+    }
+  }
+
   handleClearFilters = () => {
     this.setState({
       selectedKeys: [],
@@ -52,16 +74,12 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   }
 
   handleConfirm = () => {
-    this.setState({
-      visible: false,
-    });
+    this.setVisible(false);
     this.confirmFilter();
   }
 
   onVisibleChange = (visible) => {
-    this.setState({
-      visible,
-    });
+    this.setVisible(visible);
     if (!visible) {
       this.confirmFilter();
     }

components/table/index.en-US.md

@@ -90,12 +90,14 @@ One of Property `columns` for describing column.
 | onFilter   | callback that is called when when click confirm filter button | Function | - |
 | filterMultiple | whether to select multiple filtered item | Boolean    | true    |
 | filterDropdown | customized filter overlay | React.Element | - |
+| filterDropdownVisible | whether filterDropdown is visible | Boolean | - |
+| onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - |
+| filteredValue | controlled filtered value | Array | - |
 | sorter     | sort function for local sort. If you need sort buttons only, set it `true` | Function or Boolean | - |
 | colSpan    | span of this column's title | Number |         |
 | width      | width of this column | String or Number | -  |
 | className  | className of this column            | String          |  -      |
 | fixed      | set column to be fixed: `true`(same as left) `'left'` `'right'` | Boolean or String | false |
-| filteredValue | controlled filtered value | Array | - |
 | sortOrder | controlled sorted value: `'ascend'` `'descend'` `false` | Boolean or String | - |
 
 ### rowSelection

components/table/index.zh-CN.md

@@ -91,12 +91,14 @@ const columns = [{
 | onFilter   | 本地模式下，确定筛选的运行函数 | Function    | - |
 | filterMultiple | 是否多选 | Boolean    | true    |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | React.Element | - |
+| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | Boolean | - |
+| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
+| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | Array | - |
 | sorter     | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true | Function or Boolean | - |
 | colSpan    | 表头列合并,设置为 0 时，不渲染 | Number      |         |
 | width      | 列宽度 | String or Number | -  |
 | className  | 列的 className             | String          |  -      |
 | fixed      | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | Boolean or String | false |
-| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | Array | - |
 | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | Boolean or String | - |
 
 ### rowSelection