feat: filterIcon can be a function

ant-design · Jul 2, 2018 · 1af4392 · 1af4392
1 parent 59cc3a8
commit 1af4392
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -368,4 +368,23 @@ describe('Table.filter', () => {
 
     expect(handleChange).toBeCalled();
   });
+
+  it('renders custom filter icon correctly', () => {
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filterIcon: filtered => <span>{filtered ? 'filtered' : 'unfiltered'}</span>,
+      }],
+    }));
+
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    wrapper.find('.ant-dropdown-menu-item').first().simulate('click');
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    expect(wrapper.find('.ant-table-filter-icon').render()).toMatchSnapshot();
+
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    wrapper.find('.ant-dropdown-menu-item').first().simulate('click');
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    expect(wrapper.find('.ant-table-filter-icon').render()).toMatchSnapshot();
+  });
 });
diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
@@ -42,6 +42,26 @@ exports[`Table.filter renders custom content correctly 1`] = `
 </div>
 `;
 
+exports[`Table.filter renders custom filter icon correctly 1`] = `
+<span
+  class="ant-table-filter-icon ant-dropdown-trigger"
+  style=""
+  title="Filter menu"
+>
+  filtered
+</span>
+`;
+
+exports[`Table.filter renders custom filter icon correctly 2`] = `
+<span
+  class="ant-table-filter-icon ant-dropdown-trigger"
+  style=""
+  title="Filter menu"
+>
+  unfiltered
+</span>
+`;
+
 exports[`Table.filter renders filter correctly 1`] = `
 <div
   class="ant-table-wrapper"

diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx
@@ -169,8 +169,12 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
 
   renderFilterIcon = () => {
     const { column, locale, prefixCls } = this.props;
-    const filterIcon = column.filterIcon as any;
-    const dropdownSelectedClass = this.props.selectedKeys.length > 0 ? `${prefixCls}-selected` : '';
+    const filterd = this.props.selectedKeys.length > 0;
+    let filterIcon = column.filterIcon as any;
+    if (typeof filterIcon === 'function') {
+      filterIcon = filterIcon(filterd);
+    }
+    const dropdownSelectedClass =  filterd ? `${prefixCls}-selected` : '';
 
     return filterIcon ? React.cloneElement(filterIcon as any, {
       title: locale.filterTitle,

diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
@@ -116,7 +116,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
 | filtered | Whether the `dataSource` is filtered | boolean | `false` |
 | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |
-| filterIcon | Customized filter icon | ReactNode | `false` |
+| filterIcon | Customized filter icon | ReactNode\|(filtered: boolean) => ReactNode | `false` |
 | filterMultiple | Whether multiple filters can be selected | boolean | `true` |
 | filters | Filter menu config | object\[] | - |
 | fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |

diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
@@ -116,7 +116,7 @@ const columns = [{
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
-| filterIcon | 自定义 fiter 图标。 | ReactNode | false |
+| filterIcon | 自定义 filter 图标。 | ReactNode\|(filtered: boolean) => ReactNode | false |
 | filterMultiple | 是否多选 | boolean | true |
 | filters | 表头的筛选菜单项 | object\[] | - |
 | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |