Filter Icon of Table (#5293)

*  Filter Icon of Table

+ close #5287
+ add `isFiltered` props for mark dataSource is filterd
+ improve CustomFilter Demo

* fix doc

* update

* custome filter icon

* custome filter icon

components/table/Column.tsx

@@ -15,6 +15,7 @@ export interface ColumnProps<T> {
   width?: string | number;
   className?: string;
   fixed?: boolean | ('left' | 'right');
+  filterIcon?: React.ReactNode;
   filteredValue?: any[];
   sortOrder?: boolean | ('ascend' | 'descend');
   children?: ColumnProps<T>[];

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -862,7 +862,8 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                     <span>
                       Name
                       <i
-                        class="anticon anticon-filter ant-dropdown-trigger"
+                        class="anticon anticon-smile-o ant-table-filter-icon ant-dropdown-trigger"
+                        style="color:#aaa;"
                         title="筛选"
                       />
                     </span>

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

@@ -14,7 +14,7 @@ title:
 Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`.
 
 ````jsx
-import { Table, Input, Button } from 'antd';
+import { Table, Input, Button, Icon } from 'antd';
 
 const data = [{
   key: '1',
@@ -43,6 +43,7 @@ class App extends React.Component {
     filterDropdownVisible: false,
     data,
     searchText: '',
+    filtered: false,
   };
   onInputChange = (e) => {
     this.setState({ searchText: e.target.value });
@@ -52,6 +53,7 @@ class App extends React.Component {
     const reg = new RegExp(searchText, 'gi');
     this.setState({
       filterDropdownVisible: false,
+      filtered: !!searchText,
       data: data.map((record) => {
         const match = record.name.match(reg);
         if (!match) {
@@ -78,6 +80,7 @@ class App extends React.Component {
       filterDropdown: (
         <div className="custom-filter-dropdown">
           <Input
+            ref={ele => this.searchInput = ele}
             placeholder="Search name"
             value={this.state.searchText}
             onChange={this.onInputChange}
@@ -86,8 +89,9 @@ class App extends React.Component {
           <Button type="primary" onClick={this.onSearch}>Search</Button>
         </div>
       ),
+      filterIcon: <Icon type="smile-o" style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />,
       filterDropdownVisible: this.state.filterDropdownVisible,
-      onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }),
+      onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }, () => this.searchInput.focus()),
     }, {
       title: 'Age',
       dataIndex: 'age',

components/table/filterDropdown.tsx

@@ -19,6 +19,7 @@ export interface FilterMenuProps {
     filterDropdownVisible?: boolean,
     onFilterDropdownVisibleChange?: (visible: boolean) => any,
     fixed?: boolean | string,
+    filterIcon?: React.ReactNode;
   };
   confirmFilter: (column: Object, selectedKeys: string[]) => any;
   prefixCls: string;
@@ -168,6 +169,18 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     this.setState({ keyPathOfSelectedItem });
   }
 
+  renderFilterIcon = () => {
+    const { column, locale, prefixCls } = this.props;
+    const filterIcon = column.filterIcon as any;
+    const dropdownSelectedClass = this.props.selectedKeys.length > 0 ? `${prefixCls}-selected` : '';
+
+    return filterIcon ? React.cloneElement(filterIcon as any, {
+      title: locale.filterTitle,
+      className: classNames(filterIcon.className, {
+        [`${prefixCls}-icon`]: true,
+      }),
+    }) : <Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />;
+  }
   render() {
     const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
     // default multiple selection in filter dropdown
@@ -209,9 +222,6 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
       </FilterDropdownMenuWrapper>
     );
 
-    const dropdownSelectedClass = (this.props.selectedKeys.length > 0)
-      ? `${prefixCls}-selected` : '';
-
     return (
       <Dropdown
         trigger={['click']}
@@ -219,7 +229,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
         visible={this.neverShown ? false : this.state.visible}
         onVisibleChange={this.onVisibleChange}
       >
-        <Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />
+        {this.renderFilterIcon()}
       </Dropdown>
     );
   }

components/table/index.en-US.md

@@ -92,7 +92,9 @@ One of Property `columns` for descriping column, Column has the same API.
 | filterDropdown | customized filter overlay | ReactNode | - |
 | filterDropdownVisible | whether filterDropdown is visible | boolean | - |
 | onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - |
-| filteredValue | controlled filtered value | string[] | - |
+| filteredValue | controlled filtered value, filter icon will highlight. | string[] | - |
+| filtered | whether the dataSource is filterd | boolean | false |
+| filterIcon | customized filter icon | ReactNode | false |
 | sorter     | sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set it `true` | Function\|boolean | - |
 | colSpan    | span of this column's title | number |         |
 | width      | width of this column | string\|number | -  |

components/table/index.zh-CN.md

@@ -94,6 +94,8 @@ const columns = [{
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
 | onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - |
+| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
+| filterIcon | 自定义 fiter 图标。| ReactNode | false |
 | sorter     | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
 | colSpan    | 表头列合并,设置为 0 时，不渲染 | number      |         |
 | width      | 列宽度 | string\|number | -  |

components/table/style/index.less

@@ -39,7 +39,7 @@
       text-align: center;
     }
 
-    .@{iconfont-css-prefix}-filter {
+    .@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon {
       margin-left: 4px;
       font-size: @font-size-base;
       cursor: pointer;