@qn-pandora/pandora-component 5.1.0 → 5.1.2

package/es/components/Table/index.js

@@ -66,11 +66,10 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
-import { size, xor, union, unionBy, differenceBy, get, isEqual, includes, isNumber, isArray } from 'lodash';
+import { size, xor, union, unionBy, differenceBy, get, isEqual, includes, isNumber, isUndefined } from 'lodash';
 import { Table as AntTable, Checkbox } from 'antd';
 import { ConfigContext } from 'antd/es/config-provider';
 import { toaster as toasterStore } from '@qn-pandora/app-sdk';
-import { EmptyIcon } from '@qn-pandora/pandora-component-icons';
 import bind from '../../utils/bind';
 import { formatString } from '../../utils/language';
 import { SDK_PREFIX } from '../../constants/style';
@@ -78,11 +77,15 @@ import { TableLocale } from '../../constants/language/table/type';
 import { ColumnTag } from './ColumnTag/ColumnTag';
 import ColumnSetting from './ColumnSetting';
 import ResizableTitle from './ResizableTitle';
-export var ETableSettingType;
-(function (ETableSettingType) {
-    ETableSettingType["SORT"] = "sort";
-    ETableSettingType["RESIZE"] = "resize";
-})(ETableSettingType || (ETableSettingType = {}));
+import EmptyText from './EmptyText';
+import { addEmptyColumn, getSortAndHiddenKeys, getSortedCoulmns, getColumnKeys, getResizeColumns, getLocalSettings } from './util';
+import { ETableSettingType } from './type';
+export * from './type';
+/**
+ * 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
+ * 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
+ * 传入selectedRowKeys值。
+ */
 /**
  * pandora2.0风格的表格
  */
@@ -95,9 +98,7 @@ var Table = /** @class */ (function (_super) {
         _this.hiddenColumn = _this.props.hiddenColumns;
         _this.columns = [];
         _this.sortConfig = {
-            sortKeys: [],
-            fixedRightKeys: [],
-            fixedLeftKeys: []
+            sortKeys: []
         };
         _this.settingFields = [];
         return _this;
@@ -113,30 +114,34 @@ var Table = /** @class */ (function (_super) {
                 (lastRowSelection &&
                     !isEqual(lastRowSelection.selectedRowKeys, rowSelection.selectedRowKeys)))) {
             var selectedRowKeys_1 = rowSelection.selectedRowKeys || [];
-            var dataSource = nextProps.dataSource;
-            var selectedRowKeysOfCurrentPage_1 = (dataSource || [])
-                .map(this.getRowKey)
-                .filter(function (item) { return selectedRowKeys_1.includes(item); });
-            var selectedRowsOfCurrentPage = (dataSource || []).filter(function (item, index) {
-                return selectedRowKeysOfCurrentPage_1.indexOf(_this.getRowKey(item, index)) > -1;
+            var _a = nextProps.dataSource, dataSource = _a === void 0 ? [] : _a;
+            var selectedRowKeysOfCurrentPage_1 = [];
+            var selectedRowsOfCurrentPage_1 = [];
+            dataSource.forEach(function (item, index) {
+                var rowKey = _this.getRowKey(item, index);
+                if (selectedRowKeys_1.includes(rowKey)) {
+                    selectedRowKeysOfCurrentPage_1.push(rowKey);
+                    selectedRowsOfCurrentPage_1.push(item);
+                }
             });
             // 数据源变化时重新设置多选框是否为全选状态或部分选中状态
-            this.setCheckboxStatus(selectedRowKeysOfCurrentPage_1, nextProps.dataSource);
+            this.setCheckboxStatus(selectedRowsOfCurrentPage_1, size(nextProps.dataSource));
             // 更新外部组件rowSelection状态
             // this.onRowSelectionChange(selectedRowKeys, selectedRowsOfCurrentPage)
             if (rowSelection && rowSelection.onChange) {
                 rowSelection.onChange(union(selectedRowKeysOfCurrentPage_1, selectedRowKeys_1), selectedRows && rowKey
-                    ? unionBy(selectedRowsOfCurrentPage, selectedRows, rowKey)
-                    : selectedRowsOfCurrentPage);
+                    ? unionBy(selectedRowsOfCurrentPage_1, selectedRows, rowKey)
+                    : selectedRowsOfCurrentPage_1, { type: 'single' });
             }
         }
+        // 更新隐藏的key
         if (!isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
             this.setHiddenColumn(nextProps.hiddenColumns);
         }
         if (nextProps.columns !== this.props.columns) {
             if ((nextProps.scroll && nextProps.draggable === true) ||
                 nextProps.draggable === ETableSettingType.RESIZE) {
-                this.updateSettingConfig(nextProps.columns);
+                this.updateSettingFields(nextProps.columns, this.settingFields, nextProps.hiddenColumns || []);
                 this.setColumns(this.getResizeColumns(nextProps.columns));
             }
             else {
@@ -151,8 +156,7 @@ var Table = /** @class */ (function (_super) {
     };
     Object.defineProperty(Table.prototype, "selectedRowKeys", {
         get: function () {
-            var rowSelection = this.props.rowSelection;
-            return (rowSelection && rowSelection.selectedRowKeys) || [];
+            return get(this.props.rowSelection, 'selectedRowKeys', []);
         },
         enumerable: false,
         configurable: true
@@ -188,167 +192,80 @@ var Table = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Table.prototype, "emptyTextComp", {
-        get: function () {
-            var emptyText = this.props.emptyText;
-            if (!emptyText) {
-                return (React.createElement("div", { className: SDK_PREFIX + "-table-empty" },
-                    React.createElement("div", { className: SDK_PREFIX + "-table-empty-icon" },
-                        React.createElement(EmptyIcon, null)),
-                    React.createElement("div", { className: SDK_PREFIX + "-table-empty-text" }, formatString(TableLocale.empty, this.context.locale))));
-            }
-            if (typeof emptyText === 'string' || typeof emptyText === 'number') {
-                return (React.createElement("div", { className: SDK_PREFIX + "-table-empty" },
-                    React.createElement("div", { className: SDK_PREFIX + "-table-empty-icon" },
-                        React.createElement(EmptyIcon, null)),
-                    React.createElement("div", { className: SDK_PREFIX + "-table-empty-text" }, emptyText)));
-            }
-            return emptyText;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Table.prototype, "columnsSettingOptions", {
         // 列设置 options
         get: function () {
             var options = [];
             var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
-            columns.forEach(function (col) {
-                if (col.key &&
-                    col.key.toString().length > 0 &&
-                    col.configurable !== false) {
+            // sortKeys 来保证数据的准确性
+            this.sortConfig.sortKeys.forEach(function (key) {
+                var target = columns.find(function (col) { var _a; return ((_a = col.key) === null || _a === void 0 ? void 0 : _a.toString()) === key; });
+                if (target && target.key) {
                     options.push({
-                        label: col.colTitle || col.title,
-                        value: col.key.toString()
+                        label: target.colTitle || target.title,
+                        value: target.key.toString()
                     });
                 }
             });
-            return this.sortConfig.sortKeys
-                .map(function (key) { return options.find(function (option) { return option.value === key; }); })
-                .filter(function (f) { return !!f; });
+            return options;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "columnKeys", {
         get: function () {
-            var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
-            var allKeys = [];
-            var unconfigableKeys = [];
-            var resetKeys = [];
-            columns.forEach(function (col) {
-                if (col.key) {
-                    if (col.configurable === false) {
-                        unconfigableKeys.push(col.key.toString());
-                    }
-                    else {
-                        resetKeys.push(col.key.toString());
-                    }
-                    allKeys.push(col.key.toString());
-                }
-            });
-            return {
-                allKeys: allKeys,
-                unconfigableKeys: unconfigableKeys,
-                resetKeys: resetKeys
-            };
+            return getColumnKeys(this.props.columns || []);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "resizable", {
         get: function () {
-            var _a, _b;
-            return ((((_a = this.props) === null || _a === void 0 ? void 0 : _a.draggable) === true ||
-                ((_b = this.props) === null || _b === void 0 ? void 0 : _b.draggable) === ETableSettingType.RESIZE) &&
-                this.props.scroll);
+            var _a = this.props, draggable = _a.draggable, scroll = _a.scroll;
+            return !!((draggable === true || draggable === ETableSettingType.RESIZE) &&
+                scroll);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "sortable", {
         get: function () {
-            var _a, _b;
-            return (((_a = this.props) === null || _a === void 0 ? void 0 : _a.draggable) === true ||
-                ((_b = this.props) === null || _b === void 0 ? void 0 : _b.draggable) === ETableSettingType.SORT);
+            var draggable = this.props.draggable;
+            return draggable === true || draggable === ETableSettingType.SORT;
         },
         enumerable: false,
         configurable: true
     });
-    Table.prototype.updateSettingConfig = function (columns) {
-        this.updateSettingFields(columns, this.settingFields);
-    };
-    Table.prototype.initSettingConfig = function () {
-        var saveSettingKey = this.props.saveSettingKey;
-        var settingFields = [];
-        if (saveSettingKey) {
-            var settingStr = localStorage.getItem(saveSettingKey);
-            var settingConfig = !!settingStr && JSON.parse(settingStr);
-            if (isArray(settingConfig)) {
-                settingFields = settingConfig;
+    Object.defineProperty(Table.prototype, "showSetting", {
+        // 是否支持列设置按钮
+        get: function () {
+            // showColumnSetting 需要同 draggable 配合使用
+            // 1、showColumnSetting = false, 不显示
+            // 2、draggable = sort 或者 draggable === true时才显示
+            // 3、draggable === resize 且 showColumnSetting = true时才显示（resize模式下必须显示设置showColumnSetting=true，才会显示列设置按钮）
+            var _a = this.props, showColumnSetting = _a.showColumnSetting, draggable = _a.draggable;
+            if (showColumnSetting === false)
+                return false;
+            if (draggable === ETableSettingType.SORT || draggable === true)
+                return true;
+            if (draggable === ETableSettingType.RESIZE && showColumnSetting === true) {
+                return true;
             }
-        }
-        this.updateSettingFields(this.props.columns, settingFields);
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Table.prototype.initSettingConfig = function () {
+        var _a = this.props, saveSettingKey = _a.saveSettingKey, columns = _a.columns, _b = _a.hiddenColumns, hiddenColumns = _b === void 0 ? [] : _b;
+        var settingFields = getLocalSettings(saveSettingKey);
+        this.updateSettingFields(columns, settingFields, hiddenColumns);
     };
-    Table.prototype.updateSettingFields = function (columns, settingFields) {
-        var _a = this.props.hiddenColumns, hiddenColumns = _a === void 0 ? [] : _a;
-        var sortableColumns = [];
-        var leftColumns = [];
-        var rightColumns = [];
-        var hideKeys = [];
-        // 已配置的列和实际的对不上
-        // 可能新增或者删除列的情况
-        var newSettingFields = [];
-        // 已配置列
-        // 旧类型数据为对象类型，未配置
-        settingFields.map(function (field) {
-            var find = columns.find(function (column) { var _a; return ((_a = column) === null || _a === void 0 ? void 0 : _a.dataIndex) === field.field; });
-            if (find) {
-                if (field.hide) {
-                    hideKeys.push(field.field);
-                }
-                if (!find.fixed) {
-                    sortableColumns.push(field);
-                }
-                else if (find.fixed === 'left' || find.fixed === true) {
-                    leftColumns.push(field);
-                }
-                else {
-                    rightColumns.push(field);
-                }
-            }
-        });
-        // 未配置过的列
-        columns
-            .filter(function (f) { return !settingFields.find(function (field) { return field.field === f.dataIndex; }); })
-            .map(function (column) {
-            if (column.dataIndex) {
-                if (!column.fixed) {
-                    sortableColumns.push({
-                        field: column.dataIndex.toString(),
-                        fixed: column.fixed
-                    });
-                }
-                else if (column.fixed === 'left' || column.fixed === true) {
-                    leftColumns.push({
-                        field: column.dataIndex.toString(),
-                        fixed: column.fixed
-                    });
-                }
-                else {
-                    rightColumns.push({
-                        field: column.dataIndex.toString(),
-                        fixed: column.fixed
-                    });
-                }
-            }
-        });
-        this.setFixedLeftKeys(leftColumns.map(function (t) { return t.field; }));
-        this.setFixedRightKeys(rightColumns.map(function (t) { return t.field; }));
+    Table.prototype.updateSettingFields = function (columns, settingFields, hiddenColumns) {
+        var _a = getSortAndHiddenKeys(columns, settingFields, hiddenColumns), sortableColumns = _a.sortableColumns, resultHiddenColumns = _a.hiddenColumns;
         this.setSortKeys(sortableColumns.map(function (t) { return t.field; }));
-        this.setHiddenColumn(__spread(new Set(__spread(hiddenColumns, hideKeys))));
-        newSettingFields = __spread(leftColumns, sortableColumns, rightColumns);
-        this.setSettingFields(newSettingFields);
+        this.setHiddenColumn(resultHiddenColumns);
+        this.setSettingFields(sortableColumns);
     };
     // 隐藏key
     Table.prototype.handleHideColumnsChange = function (keys) {
@@ -359,66 +276,46 @@ var Table = /** @class */ (function (_super) {
             return toasterStore.warning(formatString(TableLocale.hide_column_tooltip, this.context.locale));
         }
         var newSettingFields = this.settingFields.map(function (field) {
-            if (includes(keys, field.field)) {
-                return __assign(__assign({}, field), { hide: true });
-            }
-            return __assign(__assign({}, field), { hide: false });
+            return __assign(__assign({}, field), { hide: includes(keys, field.field) });
         });
         this.setHiddenColumn(keys);
         this.setSettingFields(newSettingFields);
         (_b = (_a = this.props).onHiddenColumnsChange) === null || _b === void 0 ? void 0 : _b.call(_a, keys);
     };
-    Table.prototype.getSortedColumns = function () {
-        var _this = this;
-        var hiddenColumn = this.hiddenColumn || [];
-        var selectedCols = __spread((this.columns || []).filter(function (item) {
-            if (item.configurable === false || !includes(hiddenColumn, item.key)) {
-                return true;
+    Table.prototype.getColumns = function () {
+        // 注意： 如果没有传columns, 可能渲染的是table 的children ,无需在处理columns
+        /**
+         * <Table>
+         *  <Table.Column title="name" dataIndex="name"></Table.Column>
+         *  <Table.Column title="age" dataIndex="name"></Table.Column>
+         * </Table>
+         */
+        if (isUndefined(this.columns))
+            return this.columns;
+        var _a = this.props, columnSettingOverlayClass = _a.columnSettingOverlayClass, needEmptyColumn = _a.needEmptyColumn;
+        // 显示列设置按钮，默认就会开启列隐藏功能
+        // 1、看是否支持排序， 排序 + 列隐藏, 排序用 sort 函数就行（sort 函数具有列隐藏的能力）
+        // 2、看是否 resize， resize + 列隐藏  可能需要添加空白列  addEmptyColumn
+        var allCols = __spread(this.columns);
+        if (!this.showSetting) {
+            // 如果不显示列设置按钮, 那么排序功能不支持
+            if (this.resizable) {
+                allCols = addEmptyColumn(allCols, this.hiddenColumn, this.resizable && needEmptyColumn);
             }
-            return false;
-        }));
-        var fixedRightColumn = this.columns.filter(function (column) {
-            return includes(_this.sortConfig.fixedRightKeys, column.key);
-        });
-        var fixedLeftColumn = this.columns.filter(function (column) {
-            return includes(_this.sortConfig.fixedLeftKeys, column.key);
-        });
-        return __spread(fixedLeftColumn, this.getSortCoulmns(selectedCols), fixedRightColumn);
-    };
-    // 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
-    // 空白列添加到右固定列的前面
-    Table.prototype.transfromColumns = function (columns, needEmptyColumn) {
-        if (!this.resizable || needEmptyColumn === false)
-            return columns;
-        var cols = __spread(columns);
-        var firstFixedRightIndex = cols.findIndex(function (item) { return get(item, 'fixed') === 'right'; });
-        var column = {
-            title: '',
-            dataIndex: '__empty__',
-            key: '__empty__'
-        };
-        if (firstFixedRightIndex === -1) {
-            cols.push(column);
+            return allCols;
         }
-        else {
-            cols.splice(firstFixedRightIndex, 0, column);
+        if (this.sortable) {
+            allCols = getSortedCoulmns(allCols, this.sortConfig.sortKeys || [], this.hiddenColumn || []);
         }
-        return cols;
-    };
-    Table.prototype.getColumns = function () {
-        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass, needEmptyColumn = _a.needEmptyColumn;
-        if (!showColumnSetting) {
-            return this.transfromColumns(this.columns, needEmptyColumn);
+        if (this.resizable) {
+            allCols = addEmptyColumn(allCols, this.hiddenColumn, this.resizable && needEmptyColumn);
         }
-        // 获取到列设置的options
-        var columnsSettingOptions = this.columnsSettingOptions;
-        var allCols = this.getSortedColumns();
-        this.transfromColumns(allCols, needEmptyColumn);
+        // 需要添加设置按钮
         var length = allCols.length;
         if (length > 0) {
             var title = (React.createElement("span", { className: SDK_PREFIX + "-last-column-title" },
                 React.createElement("span", { className: SDK_PREFIX + "-last-column-setting" },
-                    React.createElement(ColumnSetting, { options: columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, onMove: this.setSortKeys, overlayClass: columnSettingOverlayClass }))));
+                    React.createElement(ColumnSetting, { options: this.columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, onMove: this.setSortKeys, overlayClass: columnSettingOverlayClass, sortable: this.sortable }))));
             allCols.push({
                 title: title,
                 dataIndex: '__setting__',
@@ -432,14 +329,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.getRowKey = function (row, index) {
         var rowKey = this.props.rowKey;
         if (typeof rowKey === 'function') {
-            return rowKey(row, index);
+            return rowKey(row, index).toString();
         }
-        return rowKey ? row[rowKey] : index;
-    };
-    Table.prototype.getSortCoulmns = function (columns) {
-        return this.sortConfig.sortKeys
-            .map(function (key) { return columns.find(function (column) { return column.dataIndex === key; }); })
-            .filter(function (f) { return !!f; });
+        return rowKey && typeof rowKey == 'string' ? get(row, rowKey) : index;
     };
     Table.prototype.setIndeterminate = function (indeterminate) {
         this.indeterminate = indeterminate;
@@ -470,39 +362,32 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.setSettingFields = function (columns) {
         this.settingFields = columns;
     };
-    Table.prototype.setFixedRightKeys = function (columns) {
-        this.sortConfig = __assign(__assign({}, this.sortConfig), { fixedRightKeys: columns });
-    };
-    Table.prototype.setFixedLeftKeys = function (columns) {
-        this.sortConfig = __assign(__assign({}, this.sortConfig), { fixedLeftKeys: columns });
-    };
     // 设置全选checkout的状态
-    Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSource) {
+    Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSourceLength) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
-        if (dataSource === void 0) { dataSource = []; }
         this.setIndeterminate(!!selectedRowsOfCurrentPage.length &&
-            selectedRowsOfCurrentPage.length < size(dataSource));
+            selectedRowsOfCurrentPage.length < dataSourceLength);
         this.setCheckAll(!!selectedRowsOfCurrentPage.length &&
-            selectedRowsOfCurrentPage.length === size(dataSource));
+            selectedRowsOfCurrentPage.length === dataSourceLength);
     };
-    Table.prototype.handleSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage) {
+    Table.prototype.handleSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage, info) {
         var dataSource = this.props.dataSource;
         // 更新CheckBox状态
-        this.setCheckboxStatus(selectedRowsOfCurrentPage, dataSource);
+        this.setCheckboxStatus(selectedRowsOfCurrentPage, size(dataSource));
         // 更新外部组件rowSelection状态
-        this.onRowSelectionChange(selectedRowKeys, selectedRowsOfCurrentPage);
+        this.onRowSelectionChange(selectedRowKeys, selectedRowsOfCurrentPage, info);
     };
-    Table.prototype.onRowSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage) {
+    Table.prototype.onRowSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage, info) {
         var _a = this.props, rowSelection = _a.rowSelection, selectedRows = _a.selectedRows, rowKey = _a.rowKey, dataSource = _a.dataSource;
         if (rowSelection && rowSelection.onChange) {
             if (selectedRows && rowKey) {
                 var a = differenceBy(dataSource, selectedRowsOfCurrentPage, rowKey);
                 var b = differenceBy(selectedRows, a, rowKey);
                 var rows = unionBy(b, selectedRowsOfCurrentPage, rowKey);
-                rowSelection.onChange(selectedRowKeys, rows);
+                rowSelection.onChange(selectedRowKeys, rows, info);
             }
             else {
-                rowSelection.onChange(selectedRowKeys, selectedRowsOfCurrentPage);
+                rowSelection.onChange(selectedRowKeys, selectedRowsOfCurrentPage, info);
             }
         }
     };
@@ -515,12 +400,13 @@ var Table = /** @class */ (function (_super) {
             : xor(selectedRowKeys, this.keysOfCurrentPage);
         this.setCheckAll(e.target.checked);
         this.setIndeterminate(false);
-        this.onRowSelectionChange(selectedRowKeys, currentRows);
+        this.onRowSelectionChange(selectedRowKeys, currentRows, {
+            type: selectedRowKeys.length > 0 ? 'all' : 'none'
+        });
     };
     Table.prototype.handleBatchOptionClick = function (option) {
-        if (option.onClick) {
-            option.onClick(this.selectedRowKeys);
-        }
+        var _a;
+        (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, this.selectedRowKeys);
     };
     Table.prototype.getRowClassName = function (record, index, indent) {
         var rowClassName = this.props.rowClassName;
@@ -545,87 +431,56 @@ var Table = /** @class */ (function (_super) {
         return noneSelected || disabled;
     };
     Table.prototype.handleResize = function (col, size, oldColumn) {
-        console.log('handleResize', col, size);
         var newColumns = __spread(oldColumn);
+        var sizeMap = {};
         newColumns.forEach(function (item) {
+            // 更新宽度
             if (get(item, 'dataIndex') === col.dataIndex) {
                 item.width = size.width;
             }
+            // 更新sizeMap
+            if (item.dataIndex && isNumber(item.width) && !isNaN(item.width)) {
+                sizeMap[item.dataIndex] = item.width;
+            }
         });
-        var sizeMap = {};
         var setttingFields = this.settingFields;
-        newColumns.forEach(function (element) {
-            if (element.dataIndex &&
-                isNumber(element.width) &&
-                !isNaN(element.width)) {
-                sizeMap[element.dataIndex] = element.width;
+        setttingFields.forEach(function (field) {
+            if (sizeMap[field.field]) {
+                field.width = sizeMap[field.field];
             }
         });
         if (this.props.onSettingChange) {
-            setttingFields.forEach(function (field) {
-                if (sizeMap[field.field]) {
-                    field.width = sizeMap[field.field];
-                }
-            });
             this.props.onSettingChange(setttingFields);
         }
         else if (this.resizable && this.props.saveSettingKey) {
-            setttingFields.forEach(function (field) {
-                if (sizeMap[field.field]) {
-                    field.width = sizeMap[field.field];
-                }
-            });
             this.setSettingFields(setttingFields);
         }
         this.setColumns(newColumns);
     };
     Table.prototype.getResizeColumns = function (columns) {
-        var _this = this;
-        var fields = this.settingFields;
-        if ((fields === null || fields === void 0 ? void 0 : fields.length) && isArray(fields)) {
-            columns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
-                var _a;
-                var dataIndex = get(col, 'dataIndex');
-                var width = (_a = fields === null || fields === void 0 ? void 0 : fields.find(function (f) { return f.field === dataIndex; })) === null || _a === void 0 ? void 0 : _a.width;
-                return isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
-            });
-        }
-        var transformColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (it, index) {
-            if (get(it, 'resizable') && _this.resizable) {
-                return __assign(__assign({}, it), { ellipsis: {
-                        showTitle: true
-                    }, onHeaderCell: function (col) {
-                        var _a;
-                        return ({
-                            width: col.width,
-                            // !传入newColumn，而不传入column是因为需要拿到有onHeaderCell的值，外面collumn的变化内部监听不到
-                            onResize: function (_, _a) {
-                                var size = _a.size;
-                                _this.handleResize(col, size, transformColumns);
-                            },
-                            isLastColumn: index === ((_a = (columns || [])) === null || _a === void 0 ? void 0 : _a.length) - 1
-                        });
-                    } });
-            }
-            return it;
-        });
-        return transformColumns;
+        return getResizeColumns(columns || [], this.settingFields, this.resizable, this.handleResize);
     };
     Table.prototype.componentDidMount = function () {
         var _a;
-        if (this.sortable || this.resizable) {
-            this.initSettingConfig();
+        var _b = this.props, columns = _b.columns, saveSettingKey = _b.saveSettingKey, _c = _b.hiddenColumns, hiddenColumns = _c === void 0 ? [] : _c;
+        var settingFields = getLocalSettings(saveSettingKey);
+        if (this.showSetting) {
+            this.updateSettingFields(columns, settingFields, hiddenColumns);
+        }
+        else {
+            this.setSettingFields(settingFields);
         }
-        this.setColumns(this.resizable && ((_a = this.settingFields) === null || _a === void 0 ? void 0 : _a.length)
-            ? this.getResizeColumns(this.props.columns)
-            : this.props.columns);
+        var transformColumns = this.resizable && ((_a = this.settingFields) === null || _a === void 0 ? void 0 : _a.length)
+            ? this.getResizeColumns(columns)
+            : columns;
+        this.setColumns(transformColumns);
     };
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
         var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, columns = _c.columns, components = _c.components, draggable = _c.draggable, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText", "columns", "components", "draggable"]);
         return (React.createElement("div", null,
-            React.createElement(AntTable, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale), columns: this.getColumns() }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
+            React.createElement(AntTable, __assign({ scroll: scroll, locale: __assign({ emptyText: (React.createElement(EmptyText, { locale: this.context.locale, emptyText: emptyText })) }, locale), columns: this.getColumns() }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
@@ -671,7 +526,7 @@ var Table = /** @class */ (function (_super) {
     ], Table.prototype, "hiddenColumn", void 0);
     __decorate([
         observable.ref,
-        __metadata("design:type", Array)
+        __metadata("design:type", Object)
     ], Table.prototype, "columns", void 0);
     __decorate([
         observable.ref,
@@ -683,7 +538,7 @@ var Table = /** @class */ (function (_super) {
     ], Table.prototype, "settingFields", void 0);
     __decorate([
         computed,
-        __metadata("design:type", Object),
+        __metadata("design:type", Array),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "selectedRowKeys", null);
     __decorate([
@@ -701,11 +556,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "keysOfCurrentPage", null);
-    __decorate([
-        computed,
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Table.prototype, "emptyTextComp", null);
     __decorate([
         computed,
         __metadata("design:type", Object),
@@ -727,12 +577,10 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [])
     ], Table.prototype, "sortable", null);
     __decorate([
-        bind,
-        action,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "updateSettingConfig", null);
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "showSetting", null);
     __decorate([
         bind,
         action,
@@ -744,7 +592,7 @@ var Table = /** @class */ (function (_super) {
         bind,
         action,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:paramtypes", [Array, Array, Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "updateSettingFields", null);
     __decorate([
@@ -753,18 +601,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "handleHideColumnsChange", null);
-    __decorate([
-        bind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "getSortedColumns", null);
-    __decorate([
-        bind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Boolean]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "transfromColumns", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
@@ -777,12 +613,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, Number]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "getRowKey", null);
-    __decorate([
-        bind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "getSortCoulmns", null);
     __decorate([
         bind,
         action,
@@ -808,7 +638,7 @@ var Table = /** @class */ (function (_super) {
         bind,
         action,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
+        __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setColumns", null);
     __decorate([
@@ -825,36 +655,22 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setSettingFields", null);
-    __decorate([
-        bind,
-        action,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "setFixedRightKeys", null);
-    __decorate([
-        bind,
-        action,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "setFixedLeftKeys", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:paramtypes", [Array, Number]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setCheckboxStatus", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:paramtypes", [Array, Array, Object]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "handleSelectionChange", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:paramtypes", [Array, Array, Object]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "onRowSelectionChange", null);
     __decorate([