chore: warning for mix useage (#696)

Author: zombieJ

src/Table.tsx

@@ -26,6 +26,7 @@
 
 import * as React from 'react';
 import isVisible from 'rc-util/lib/Dom/isVisible';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
@@ -64,7 +65,7 @@ import { getPathValue, mergeObject, validateValue, getColumnsKey } from './utils
 import ResizeContext from './context/ResizeContext';
 import useStickyOffsets from './hooks/useStickyOffsets';
 import ColGroup from './ColGroup';
-import { getExpandableProps, getDataAndAriaProps } from './utils/legacyUtil';
+import { getExpandableProps } from './utils/legacyUtil';
 import Panel from './Panel';
 import Footer, { FooterComponents } from './Footer';
 import { findAllChildrenKeys, renderExpandIcon } from './utils/expandUtil';
@@ -338,6 +339,17 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     [getRowKey, mergedExpandedKeys, mergedData, onExpand, onExpandedRowsChange],
   );
 
+  // Warning if use `expandedRowRender` and nest children in the same time
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    expandedRowRender &&
+    mergedData.some((record: RecordType) => {
+      return Array.isArray(record?.[mergedChildrenColumnName]);
+    })
+  ) {
+    warning(false, '`expandedRowRender` should not use with nested Table');
+  }
+
   // ====================== Column ======================
   const [componentWidth, setComponentWidth] = React.useState(0);
 
@@ -725,7 +737,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     );
   }
 
-  const ariaProps = getDataAndAriaProps(props);
+  const ariaProps = pickAttrs(props, { aria: true, data: true });
 
   let fullTable = (
     <div

src/utils/legacyUtil.ts

@@ -1,5 +1,5 @@
 import warning from 'rc-util/lib/warning';
-import { ExpandableConfig, LegacyExpandableProps } from '../interface';
+import type { ExpandableConfig, LegacyExpandableProps } from '../interface';
 
 export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE';
 
@@ -38,18 +38,3 @@ export function getExpandableProps<RecordType>(
 
   return legacyExpandableConfig;
 }
-
-/**
- * Returns only data- and aria- key/value pairs
- * @param {object} props
- */
-export function getDataAndAriaProps(props: object) {
-  /* eslint-disable no-param-reassign */
-  return Object.keys(props).reduce((memo, key) => {
-    if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
-      memo[key] = props[key];
-    }
-    return memo;
-  }, {});
-  /* eslint-enable */
-}

tests/ExpandRow.spec.js

@@ -499,4 +499,14 @@ describe('Table.Expand', () => {
     );
     expect(wrapper.find('.rc-table-expanded-row').length).toBe(0);
   });
+
+  it('warning for use `expandedRowRender` and nested table in the same time', () => {
+    resetWarned();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(createTable({ expandedRowRender, data: [{ children: [] }] }));
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: `expandedRowRender` should not use with nested Table',
+    );
+    errorSpy.mockRestore();
+  });
 });