feat: Add visible to filterDropdown function (#17614)

* Add visible to filterDropdown function * Update tests
ant-design · Sep 17, 2019 · 8846122 · 8846122
1 parent db24346
commit 8846122
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 9 deletions.
diff --git 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
@@ -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(
-      <RangePicker defaultValue={[moment(), moment()]} />,
-    );
+    const wrapper = mount(<RangePicker defaultValue={[moment(), moment()]} />);
     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
@@ -664,6 +664,7 @@ describe('Table.filter', () => {
     const Test = ({ filters }) => (
       <Table
         onChange={onChange}
+        rowKey="name"
         columns={[
           {
             title: 'Name',
@@ -749,8 +750,87 @@ describe('Table.filter', () => {
             },
           ],
         })}
-      </ConfigProvider>
+      </ConfigProvider>,
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('pass visible prop to filterDropdown', () => {
+    const filterDropdownMock = jest.fn().mockReturnValue(<span>test</span>);
+    const filterDropdown = (...args) => filterDropdownMock(...args);
+
+    const Test = () => {
+      return (
+        <Table
+          rowKey="name"
+          columns={[
+            {
+              title: 'Name',
+              dataIndex: 'name',
+              filterDropdown,
+            },
+          ]}
+          dataSource={[
+            {
+              name: 'Jack',
+            },
+          ]}
+        />
+      );
+    };
+
+    mount(<Test />);
+    expect(filterDropdownMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        visible: false,
+      }),
+    );
+  });
+
+  it('visible prop of filterDropdown changes on click', () => {
+    const filterDropdownMock = jest.fn().mockReturnValue(<span>test</span>);
+    const filterDropdown = (...args) => filterDropdownMock(...args);
+
+    const Test = () => {
+      return (
+        <Table
+          rowKey="name"
+          columns={[
+            {
+              title: 'Name',
+              dataIndex: 'name',
+              filterDropdown,
+            },
+          ]}
+          dataSource={[
+            {
+              name: 'Jack',
+            },
+          ]}
+        />
+      );
+    };
+
+    const wrapper = mount(<Test />);
+
+    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
@@ -266,6 +266,8 @@ class FilterMenu<T> extends React.Component<FilterMenuProps<T>, 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
@@ -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
@@ -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
@@ -23,6 +23,7 @@ export interface FilterDropdownProps {
   clearFilters?: (selectedKeys: string[]) => void;
   filters?: ColumnFilterItem[];
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  visible?: boolean;
 }
 
 export interface ColumnProps<T> {

diff --git 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;
   }