fix: fixed resizable table with form threw error in dev #1506 (#1509)

Co-authored-by: shijia.me <[email protected]>

packages/semi-eslint-plugin/__tests__/index.js

@@ -9,7 +9,11 @@ ruleTester.run('no-import', rule['no-import'], {
     valid: [
         {
             code: 'var invalidVariable = true',
-        }
+        },
+        {
+            code: "import { Input } from '@douyinfe/semi-ui'",
+            filename: 'packages/semi-ui/table/_story/v2/fixedResizableWithForm.tsx',
+        },
     ],
     invalid: [
         {

packages/semi-eslint-plugin/src/rules/no-import.ts

@@ -62,10 +62,12 @@ const rule: Rule.RuleModule = {
                                 }
                             });
                         } else if (isImportSelf({ path: importName, fileName })) {
-                            context.report({
-                                node,
-                                messageId: "unexpectedImportSelf",
-                            });
+                            if (!fileName.includes('story')) {
+                                context.report({
+                                    node,
+                                    messageId: "unexpectedImportSelf",
+                                });
+                            }
                         }
                     }
                 }

packages/semi-foundation/table/utils.ts

@@ -65,6 +65,11 @@ export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], key
     const finalColumns: any[] = [];
     const clone = deep ? cloneDeep : lodashClone;
 
+    if (deep) {
+        const logger = new Logger('[@douyinfe/semi-ui Table]');
+        logger.warn('Should not deep merge columns from foundation since columns may have react elements. Merge columns deep from semi-ui');
+    }
+
     map(newColumns, newColumn => {
         newColumn = { ...newColumn };
         const key = getColumnKey(newColumn, keyPropNames);

packages/semi-ui/_utils/index.tsx

@@ -22,11 +22,9 @@ export function stopPropagation(e: React.MouseEvent, noImmediate?: boolean) {
 }
 
 /**
- *
- * @param {any} value
- * @param {Function} customizer
- * @returns {any}
  * use in Table, Form, Navigation
+ * 
+ * skip clone function and react element
  */
 export function cloneDeep(value: any, customizer?: (value: any) => void) {
     return cloneDeepWith(value, v => {
@@ -39,6 +37,8 @@ export function cloneDeep(value: any, customizer?: (value: any) => void) {
         if (Object.prototype.toString.call(v) === '[object Error]') {
             return v;
         }
+        // it is tricky
+        // when array length beyond max length, array.length will be 0
         if (Array.isArray(v) && v.length === 0) {
             const keys: string[] = Object.keys(v);
             if (keys.length) {
@@ -54,7 +54,7 @@ export function cloneDeep(value: any, customizer?: (value: any) => void) {
                     The maximum length of an array is 4294967295.
                     Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`
                     );
-                } catch (e){
+                } catch (e) {
 
                 }
                 return newArray;

packages/semi-ui/table/ResizableTable.tsx

@@ -8,10 +8,10 @@ import { merge, get, find, noop } from 'lodash';
 
 import { addClass, removeClass } from '@douyinfe/semi-foundation/utils/classnames';
 import { strings, numbers } from '@douyinfe/semi-foundation/table/constants';
-import { mergeColumns, assignColumnKeys, findColumn, withResizeWidth } from '@douyinfe/semi-foundation/table/utils';
+import { assignColumnKeys, findColumn, withResizeWidth } from '@douyinfe/semi-foundation/table/utils';
 
 import Table from './Table';
-import { cloneDeep } from './utils';
+import { cloneDeep, mergeColumns } from './utils';
 import getColumns from './getColumns';
 import ResizableHeaderCell from './ResizableHeaderCell';
 import { TableProps, ColumnProps } from './interface';

packages/semi-ui/table/_story/v2/fixedResizableWithForm.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed resizable table with form';
+/**
+ * @see https://github.com/DouyinFE/semi-design/issues/1506
+ */
+export default function App() {
+    return (
+        <div className="App">
+            <form />
+            <Table
+                resizable
+                dataSource={[]}
+                columns={[
+                    {
+                        dataIndex: 'dau',
+                        title: <div>ccc</div>,
+                        width: 300,
+                    },
+                ]}
+            />
+        </div>
+    );
+}

packages/semi-ui/table/_story/v2/index.js

@@ -12,4 +12,5 @@ export { default as FixedFilter } from './FixedFilter';
 export { default as FixedSorter } from './FixedSorter';
 export { default as stickyHeaderTable } from './stickyHeader';
 export { default as Fixed1188 } from './Fixed1188';
-export { default as EmptyFilters } from './emptyFilters';
+export { default as EmptyFilters } from './emptyFilters';
+export { default as fixedResizableWithForm } from './fixedResizableWithForm';

packages/semi-ui/table/utils.ts

@@ -1,8 +1,9 @@
-import { merge } from 'lodash';
+import { merge, clone as lodashClone, find, map } from 'lodash';
 import Logger from '@douyinfe/semi-foundation/utils/Logger';
 import { numbers } from '@douyinfe/semi-foundation/table/constants';
 import { cloneDeep } from '../_utils';
 import { TableComponents, Virtualized } from './interface';
+import { getColumnKey } from '@douyinfe/semi-foundation/table/utils';
 
 
 let scrollbarVerticalSize: number,
@@ -120,4 +121,30 @@ export function mergeComponents(components: TableComponents, virtualized: Virtua
 }
 
 export const logger = new Logger('[@douyinfe/semi-ui Table]');
+
+export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], keyPropNames: any[] = null, deep = true) {
+    const finalColumns: any[] = [];
+    const clone = deep ? cloneDeep : lodashClone;
+
+    map(newColumns, newColumn => {
+        newColumn = { ...newColumn };
+        const key = getColumnKey(newColumn, keyPropNames);
+
+        const oldColumn = key != null && find(oldColumns, item => getColumnKey(item, keyPropNames) === key);
+
+        if (oldColumn) {
+            finalColumns.push(
+                clone({
+                    ...oldColumn,
+                    ...newColumn,
+                })
+            );
+        } else {
+            finalColumns.push(clone(newColumn));
+        }
+    });
+
+    return finalColumns;
+}
+
 export { cloneDeep };