fix: support table getPopupContainer on row selections (ant-design#22787

) * fix: support table getPopupContainer on row selections * move top to before right * Add cursor to dropdown arrow * Feedback suggestion Co-Authored-By: 偏右 <[email protected]> Co-authored-by: Michael Shing <[email protected]> Co-authored-by: 偏右 <[email protected]>
newoga · Apr 1, 2020 · 06f29d0 · 06f29d0
1 parent dba1e5a
commit 06f29d0
Show file tree

Hide file tree

Showing 5 changed files with 705 additions and 12 deletions.
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
@@ -132,7 +132,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
   };
 
   const expandType: ExpandType = React.useMemo<ExpandType>(() => {
-    if (rawData.some((item) => (item as any)[childrenColumnName])) {
+    if (rawData.some(item => (item as any)[childrenColumnName])) {
       return 'nest';
     }
 
@@ -320,6 +320,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     childrenColumnName,
     locale: tableLocale,
     expandIconColumnIndex: mergedExpandable.expandIconColumnIndex,
+    getPopupContainer,
   });
 
   const internalRowClassName = (record: RecordType, index: number, indent: number) => {
@@ -385,8 +386,8 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
       />
     );
     if (mergedPagination.position !== null && Array.isArray(mergedPagination.position)) {
-      const topPos = mergedPagination.position.find((p) => p.indexOf('top') !== -1);
-      const bottomPos = mergedPagination.position.find((p) => p.indexOf('bottom') !== -1);
+      const topPos = mergedPagination.position.find(p => p.indexOf('top') !== -1);
+      const bottomPos = mergedPagination.position.find(p => p.indexOf('bottom') !== -1);
       if (!topPos && !bottomPos) {
         bottomPaginationNode = renderPagination();
       } else {
@@ -422,7 +423,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     <div
       className={wrapperClassNames}
       style={style}
-      onTouchMove={(e) => {
+      onTouchMove={e => {
         e.preventDefault();
       }}
     >

diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js
@@ -3,6 +3,7 @@ import { mount, render } from 'enzyme';
 import Table from '..';
 import Checkbox from '../../checkbox';
 import { resetWarned } from '../../_util/warning';
+import ConfigProvider from '../../config-provider';
 
 describe('Table.rowSelection', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -567,9 +568,7 @@ describe('Table.rowSelection', () => {
       indexList.forEach(index => {
         wrapper.find('.ant-dropdown-menu-item .ant-checkbox-wrapper').at(index).simulate('click');
       });
-      wrapper
-        .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
-        .simulate('click');
+      wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     }
 
     function clickItem() {
@@ -742,4 +741,39 @@ describe('Table.rowSelection', () => {
 
     expect(onRowClick).not.toHaveBeenCalled();
   });
+
+  it('should support getPopupContainer', () => {
+    const rowSelection = {
+      selections: true,
+    };
+    const getPopupContainer = jest.fn(node => node);
+    const wrapper = mount(
+      createTable({
+        rowSelection,
+        getPopupContainer,
+      }),
+    );
+    jest.useFakeTimers();
+    wrapper.find('.ant-dropdown-trigger').simulate('mouseenter');
+    jest.runAllTimers();
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(getPopupContainer).toHaveBeenCalled();
+  });
+
+  it('should support getPopupContainer from ConfigProvider', () => {
+    const rowSelection = {
+      selections: true,
+    };
+    const wrapper = mount(
+      <ConfigProvider getPopupContainer={node => node.parentNode}>
+        {createTable({
+          rowSelection,
+        })}
+      </ConfigProvider>,
+    );
+    jest.useFakeTimers();
+    wrapper.find('.ant-dropdown-trigger').simulate('mouseenter');
+    jest.runAllTimers();
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });