fix(table): verify localStorage (#400)

* fix(table): verify localStorage & filter value
UCloud-FE · Apr 7, 2024 · cedd278 · cedd278
1 parent f921875
commit cedd278
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 7 deletions.
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
@@ -358,7 +358,7 @@ class Table extends Component {
         };
         _.each(filters, (filter, key) => {
             const column = _.find(columns, (column, i) => this.getColumnKey(column, i) === key);
-            if (!column || filter.value == null || (column.filter.multiple && !filter.value.length)) {
+            if (!column || filter.value == null || !column.filter || (column.filter.multiple && !filter.value.length)) {
                 delete filters[key];
             } else {
                 filter.column = column;

diff --git a/src/components/Table/__demo__/columnConfigButton-modalProps.jsx b/src/components/Table/__demo__/columnConfigButton-modalProps.jsx
@@ -17,7 +17,7 @@ const defaultColumnConfig = {
     }
 };
 const getColumnConfig = () => {
-    if (typeof localStorage === 'undefined') {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
         return defaultColumnConfig;
     }
     const localConfig = JSON.parse(localStorage.getItem(`${columnConfigKey}-1`));
@@ -28,7 +28,7 @@ const getColumnConfig = () => {
     }
 };
 const setColumnConfig = config => {
-    if (typeof localStorage === 'undefined') {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
         return;
     }
     localStorage.setItem(

diff --git a/src/components/Table/__demo__/columnConfigButton.jsx b/src/components/Table/__demo__/columnConfigButton.jsx
@@ -17,7 +17,7 @@ const defaultColumnConfig = {
     }
 };
 const getColumnConfig = () => {
-    if (typeof localStorage === 'undefined') {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
         return defaultColumnConfig;
     }
     const localConfig = JSON.parse(localStorage.getItem(`${columnConfigKey}-1`));
@@ -28,7 +28,7 @@ const getColumnConfig = () => {
     }
 };
 const setColumnConfig = config => {
-    if (typeof localStorage === 'undefined') {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
         return;
     }
     localStorage.setItem(

diff --git a/src/components/Table/__tests__/index.test.js b/src/components/Table/__tests__/index.test.js
@@ -175,4 +175,66 @@ describe('Table', () => {
 
         expect(onExpand).toHaveBeenCalledTimes(++onExpandTimes);
     });
+    test('getColumnConfigFromLocalStorage', () => {
+        class Demo extends React.Component {
+            render() {
+                const columnConfigKey = 'this-is-the-unique-key-of-this-table';
+                const dataSource = new Array(100).fill(null).map((v, i) => ({
+                    index: `index-${i}`,
+                    i
+                }));
+                const defaultColumnConfig = {
+                    'title-1': {
+                        disabled: true,
+                        hidden: true
+                    },
+                    'title-2': {
+                        disabled: true
+                    },
+                    'title-3': {
+                        hidden: true
+                    }
+                };
+                const columns = new Array(5).fill(null).map((v, i) => ({
+                    title: `title-${i}`,
+                    key: `title-${i}`,
+                    width: 200,
+                    render: record => <span>content {record.index}</span>
+                }));
+                return (
+                    <div>
+                        <div className="demo-wrap">
+                            <Table
+                                title={() => {
+                                    return (
+                                        <>
+                                            <Table.ColumnConfigButton />
+                                        </>
+                                    );
+                                }}
+                                defaultColumnConfig={Table.getColumnConfigFromLocalStorage(
+                                    `${columnConfigKey}-2`,
+                                    defaultColumnConfig
+                                )}
+                                onColumnConfigChange={config =>
+                                    Table.setColumnConfigToLocalStorage(`${columnConfigKey}-2`, config)
+                                }
+                                dataSource={dataSource}
+                                columns={columns}
+                                {...this.props}
+                            />
+                        </div>
+                    </div>
+                );
+            }
+        }
+
+        const wrapper = mount(<Demo />);
+        wrapper.find('.uc-fe-table-title .uc-fe-table-custom-title .uc-fe-button').at(0).simulate('click');
+        expect(document.querySelectorAll('.uc-fe-modal-wrap').length).toBe(1);
+        expect(document.querySelectorAll('.uc-fe-modal-body').length).toBe(1);
+        document.querySelectorAll('.uc-fe-modal-body')[0].querySelectorAll('.uc-fe-checkbox')[4].click();
+        expect(document.querySelectorAll('.uc-fe-modal-footer').length).toBe(1);
+        document.querySelectorAll('.uc-fe-modal-footer')[0].querySelectorAll('.uc-fe-button')[1].click();
+    });
 });
diff --git a/src/components/Table/utils.js b/src/components/Table/utils.js
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 
 export const getColumnConfigFromLocalStorage = (columnConfigKey, defaultConfig) => {
-    if (typeof localStorage === 'undefined') {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
         return defaultConfig;
     }
     const localConfig = JSON.parse(localStorage.getItem(columnConfigKey));
@@ -13,7 +13,7 @@ export const getColumnConfigFromLocalStorage = (columnConfigKey, defaultConfig)
 };
 
 export const setColumnConfigToLocalStorage = (columnConfigKey, config) => {
-    if (typeof localStorage === 'undefined') {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
         return;
     }
     localStorage.setItem(