Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
feat: filterIcon can be a function
- Loading branch information
|
@@ -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 | |
|
|