diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 2bc639c4b59c..720de8cd9ad1 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -41,6 +41,7 @@ cols: 1 ### Card.Grid + | 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | ---------------------- | ------- | ------ | ------ | | className | 网格容器类名 | string | - | | diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js index 8a6fffabb8c4..5f4d3c4e18de 100644 --- a/components/date-picker/__tests__/RangePicker.test.js +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -390,14 +390,22 @@ describe('RangePicker', () => { // https://github.com/ant-design/ant-design/issues/17135 it('the end time should be less than the start time', () => { - const wrapper = mount( - , - ); + const wrapper = mount(); wrapper.find('.ant-calendar-picker-input').simulate('click'); const firstInput = wrapper.find('.ant-calendar-input').first(); const secondInput = wrapper.find('.ant-calendar-input').last(); - firstInput.simulate('change', { target: { value: moment().add(1, 'day').format('YYYY-MM-DD')}}); - expect(firstInput.getDOMNode().value).toBe(moment().add(1, 'day').format('YYYY-MM-DD')); + firstInput.simulate('change', { + target: { + value: moment() + .add(1, 'day') + .format('YYYY-MM-DD'), + }, + }); + expect(firstInput.getDOMNode().value).toBe( + moment() + .add(1, 'day') + .format('YYYY-MM-DD'), + ); expect(secondInput.getDOMNode().value).toBe(''); }); }); diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 33feeafe0e08..9a69547cd535 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -664,6 +664,7 @@ describe('Table.filter', () => { const Test = ({ filters }) => ( { }, ], })} - + , ); expect(wrapper.render()).toMatchSnapshot(); }); + + it('pass visible prop to filterDropdown', () => { + const filterDropdownMock = jest.fn().mockReturnValue(test); + const filterDropdown = (...args) => filterDropdownMock(...args); + + const Test = () => { + return ( +
+ ); + }; + + mount(); + expect(filterDropdownMock).toHaveBeenCalledWith( + expect.objectContaining({ + visible: false, + }), + ); + }); + + it('visible prop of filterDropdown changes on click', () => { + const filterDropdownMock = jest.fn().mockReturnValue(test); + const filterDropdown = (...args) => filterDropdownMock(...args); + + const Test = () => { + return ( +
+ ); + }; + + const wrapper = mount(); + + wrapper + .find('.ant-dropdown-trigger') + .first() + .simulate('click'); + expect(filterDropdownMock).toHaveBeenCalledWith( + expect.objectContaining({ + visible: true, + }), + ); + + wrapper + .find('.ant-dropdown-trigger') + .first() + .simulate('click'); + expect(filterDropdownMock).toHaveBeenCalledWith( + expect.objectContaining({ + visible: false, + }), + ); + }); }); diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx index 53af8a367604..360fa62915b4 100755 --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -266,6 +266,8 @@ class FilterMenu extends React.Component, FilterMenuState< confirm: this.handleConfirm, clearFilters: this.handleClearFilters, filters: column.filters, + visible: this.getDropdownVisible(), + getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement, }); } diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index c9097e111b6b..d61f3a0ae499 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -125,7 +125,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t | colSpan | Span of this column's title | number | | | | dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - | | | defaultSortOrder | Default order of sorted values | 'ascend' \| 'descend' | - | | -| filterDropdown | Customized filter overlay | ReactNode | - | | +| filterDropdown | Customized filter overlay | React.ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => React.ReactNode | - | | filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | | filtered | Whether the `dataSource` is filtered | boolean | `false` | | | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index fbd9667b67b9..5b56caab9632 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -130,7 +130,7 @@ const columns = [ | colSpan | 表头列合并,设置为 0 时,不渲染 | number | | | | dataIndex | 列数据在数据项中对应的 key,支持 `a.b.c`、`a[0].b.c[1]` 的嵌套写法 | string | - | | | defaultSortOrder | 默认排序顺序 | 'ascend' \| 'descend' | - | 3.9.3 | -| filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | ReactNode | - | | +| filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | React.ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => React.ReactNode | - | | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | | | filtered | 标识数据是否经过过滤,筛选图标会高亮 | boolean | false | | | filteredValue | 筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组 | string\[] | - | | diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 46cdfd0d995e..d1d4bf7042a2 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -23,6 +23,7 @@ export interface FilterDropdownProps { clearFilters?: (selectedKeys: string[]) => void; filters?: ColumnFilterItem[]; getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; + visible?: boolean; } export interface ColumnProps { diff --git a/site/theme/static/common.less b/site/theme/static/common.less index f578cd124ffd..812e5e4d6125 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -111,7 +111,7 @@ a { } .menu-antd-components-count { - margin-left: .5em; + margin-left: 0.5em; color: @disabled-color; font-size: 12px; }