fix: useGetDataindexColumns render bug

hemengke1997 · Jan 11, 2022 · e40f422 · e40f422
1 parent add6d73
commit e40f422
Show file tree

Hide file tree

Showing 16 changed files with 2,209 additions and 268 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,7 +2,7 @@ const { defineConfig } = require('eslint-define-config');
 
 module.exports = defineConfig({
   parser: '@typescript-eslint/parser',
-  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  extends: ['react-app', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
   plugins: ['@typescript-eslint'],
   // "off" or 0 - turn the rule off
   // "warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
@@ -12,5 +12,6 @@ module.exports = defineConfig({
     'arrow-body-style': 'off',
     'prefer-arrow-callback': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 });
diff --git a/example/package.json b/example/package.json
@@ -7,10 +7,10 @@
   },
   "dependencies": {
     "@ant-design/pro-table": "^2.61.9",
-    "antd": "^4.18.2",
+    "@minko-fe/use-antd-resizable-header": "link:..",
+    "antd": "4.17.4",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "use-antd-resizable-header": "link:.."
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -7,7 +7,6 @@ import '@minko-fe/use-antd-resizable-header/dist/style.css';
 import 'antd/es/table/style/index.css';
 import { useReducer } from 'react';
 import { useMemo } from 'react';
-import { useEffect } from 'react';
 
 const data: any[] = [];
 for (let i = 0; i < 100; i++) {
@@ -24,77 +23,86 @@ for (let i = 0; i < 100; i++) {
 function App() {
   const [x, setX] = useReducer((s) => s + 1, 0);
 
-  const columns = [
-    {
-      title: 'Name',
-      width: 100,
-      dataIndex: 'name',
-      key: 'name',
-      fixed: 'left',
-    },
-    {
-      title: 'Age',
-      width: 100,
-      dataIndex: 'age',
-      key: 'age',
-    },
-    {
-      title: 'x',
-      width: 100,
-      dataIndex: 'x',
-      key: 'x',
-    },
-    {
-      title: 'y',
-      width: 100,
-      dataIndex: 'y',
-      key: 'y',
-    },
-    {
-      title: 'Column 1',
-      dataIndex: 'address',
-    },
-    {
-      title: 'test render',
-      dataIndex: 'testRender',
-      width: 200,
-      render: () => {
-        return <div onClick={() => setX()}>{x}</div>;
+  const columns = useMemo(
+    () => [
+      {
+        title: 'Name',
+        width: 100,
+        dataIndex: 'name',
+        key: 'name',
+        fixed: 'left',
       },
-    },
-    {
-      title: 'Action',
-      key: 'operation',
-      fixed: 'right',
-      width: 100,
-      render: (record: any) => {
-        return <span>{record?.address || ''}</span>;
+      {
+        title: 'Age',
+        width: 100,
+        dataIndex: 'age',
+        key: 'age',
       },
-    },
-  ];
+      {
+        title: 'x',
+        width: 100,
+        dataIndex: 'x',
+        key: 'x',
+      },
+      {
+        title: 'y',
+        width: 100,
+        dataIndex: 'y',
+        key: 'y',
+      },
+      {
+        title: 'Column 1',
+        dataIndex: 'address',
+      },
+      {
+        title: 'test render',
+        dataIndex: 'testRender',
+        width: 200,
+        render: () => {
+          return <div onClick={() => setX()}>{x}</div>;
+        },
+      },
+      {
+        title: 'Action',
+        key: 'operation',
+        fixed: 'right',
+        width: 100,
+        render: (text, record) => {
+          return <span>{record?.age}</span>;
+        },
+      },
+    ],
+    [x],
+  );
 
-  const { components, resizableColumns, tableWidth } = useARH({ columns: useMemo(() => columns, [x]) });
+  const { components, resizableColumns, tableWidth } = useARH({
+    columns,
+    columnsState: {
+      persistenceType: 'localStorage',
+      persistenceKey: 'tttt',
+    },
+  });
 
-  const {
-    components: proComponents,
-    resizableColumns: proResizableColumns,
-    tableWidth: proTableWidth,
-  } = useARH({ columns: useMemo(() => columns, [x]) });
+  // const {
+  //   components: proComponents,
+  //   resizableColumns: proResizableColumns,
+  //   tableWidth: proTableWidth,
+  // } = useARH({ columns: useMemo(() => columns, [x]) });
 
-  useEffect(() => {
-    console.log(proTableWidth, 'proTableWidth');
-  }, [proTableWidth]);
+  // useEffect(() => {
+  //   console.log(proTableWidth, 'proTableWidth');
+  // }, [proTableWidth]);
 
   return (
     <div className="App">
       <Table columns={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }}></Table>
-
+      {/*
       <ProTable
         columns={proResizableColumns}
         components={proComponents}
         dataSource={data}
         scroll={{ x: proTableWidth }}
-      ></ProTable>
+      ></ProTable> */}
     </div>
   );
 }

diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,
@@ -19,8 +15,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
-    "./src",
-    "./vite.config.ts"
-  ]
+  "include": ["./src", "./vite.config.ts"]
 }