Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: filterIcon can be a function
  • Loading branch information
yesmeck committed Jul 2, 2018
1 parent 59cc3a8 commit 1af4392
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 4 deletions.
19 changes: 19 additions & 0 deletions components/table/__tests__/Table.filter.test.js
Expand Up @@ -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();
});
});
20 changes: 20 additions & 0 deletions components/table/__tests__/__snapshots__/Table.filter.test.js.snap
Expand Up @@ -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"
Expand Down
8 changes: 6 additions & 2 deletions components/table/filterDropdown.tsx
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion components/table/index.en-US.md
Expand Up @@ -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` |
Expand Down
2 changes: 1 addition & 1 deletion components/table/index.zh-CN.md
Expand Up @@ -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 |
Expand Down

0 comments on commit 1af4392

Please sign in to comment.