Permalink
Browse files

feat: filterIcon can be a function

  • Loading branch information...
yesmeck committed Jul 2, 2018
1 parent 59cc3a8 commit 1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a
@@ -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();
});
});
@@ -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"
@@ -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,
@@ -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` |
@@ -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 |

0 comments on commit 1af4392

Please sign in to comment.