@qn-pandora/pandora-component 4.4.3 → 4.4.5

package/es/components/Table/index.js

@@ -66,7 +66,7 @@ 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 } from 'lodash';
+import { size, xor, union, unionBy, differenceBy, get, isEqual, includes, isNumber, isArray } 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';
@@ -78,6 +78,11 @@ 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 = {}));
 /**
  * pandora2.0风格的表格
  */
@@ -89,6 +94,12 @@ var Table = /** @class */ (function (_super) {
         _this.checkAll = false;
         _this.hiddenColumn = _this.props.hiddenColumns;
         _this.columns = [];
+        _this.sortConfig = {
+            sortKeys: [],
+            fixedRightKeys: [],
+            fixedLeftKeys: []
+        };
+        _this.settingFields = [];
         return _this;
     }
     Table.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
@@ -119,13 +130,23 @@ var Table = /** @class */ (function (_super) {
                     : selectedRowsOfCurrentPage);
             }
         }
-        if (isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
+        if (!isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
             this.setHiddenColumn(nextProps.hiddenColumns);
         }
         if (nextProps.columns !== this.props.columns) {
-            this.setColumns(nextProps.scroll && nextProps.draggable
-                ? this.getResizeColumns(nextProps.columns)
-                : nextProps.columns);
+            if ((nextProps.scroll && nextProps.draggable === true) ||
+                nextProps.draggable === ETableSettingType.RESIZE) {
+                this.updateSettingConfig(nextProps.columns);
+                this.setColumns(this.getResizeColumns(nextProps.columns));
+            }
+            else {
+                this.setColumns(nextProps.columns || []);
+            }
+        }
+    };
+    Table.prototype.componentWillUnmount = function () {
+        if (this.props.saveSettingKey) {
+            localStorage.setItem(this.props.saveSettingKey, JSON.stringify(this.settingFields));
         }
     };
     Object.defineProperty(Table.prototype, "selectedRowKeys", {
@@ -202,7 +223,9 @@ var Table = /** @class */ (function (_super) {
                     });
                 }
             });
-            return options;
+            return this.sortConfig.sortKeys
+                .map(function (key) { return options.find(function (option) { return option.value === key; }); })
+                .filter(function (f) { return !!f; });
         },
         enumerable: true,
         configurable: true
@@ -233,6 +256,100 @@ var Table = /** @class */ (function (_super) {
         enumerable: true,
         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);
+        },
+        enumerable: true,
+        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);
+        },
+        enumerable: true,
+        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;
+            }
+        }
+        this.updateSettingFields(this.props.columns, settingFields);
+    };
+    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; }));
+        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);
+    };
     // 隐藏key
     Table.prototype.handleHideColumnsChange = function (keys) {
         var _a, _b;
@@ -241,33 +358,55 @@ 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 });
+        });
         this.setHiddenColumn(keys);
+        this.setSettingFields(newSettingFields);
         (_b = (_a = this.props).onHiddenColumnsChange) === null || _b === void 0 ? void 0 : _b.call(_a, keys);
     };
-    Table.prototype.getColumns = function () {
-        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass;
+    Table.prototype.getSortedColumns = function () {
+        var _this = this;
         var hiddenColumn = this.hiddenColumn || [];
-        if (!showColumnSetting) {
-            return this.columns;
-        }
-        // 获取到列设置的options
-        var columnsSettingOptions = this.columnsSettingOptions;
         var selectedCols = __spread((this.columns || []).filter(function (item) {
             if (item.configurable === false || !includes(hiddenColumn, item.key)) {
                 return true;
             }
             return false;
         }));
-        var length = selectedCols.length;
+        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.prototype.getColumns = function () {
+        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass;
+        if (!showColumnSetting) {
+            return this.columns;
+        }
+        // 获取到列设置的options
+        var columnsSettingOptions = this.columnsSettingOptions;
+        var allCols = this.getSortedColumns();
+        var length = allCols.length;
         if (length > 0) {
-            var lastCol = selectedCols.pop();
             var title = (React.createElement("span", { className: SDK_PREFIX + "-last-column-title" },
-                lastCol.title,
                 React.createElement("span", { className: SDK_PREFIX + "-last-column-setting" },
-                    React.createElement(ColumnSetting, { options: columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, overlayClass: columnSettingOverlayClass }))));
-            selectedCols.push(__assign(__assign({}, lastCol), { title: title }));
+                    React.createElement(ColumnSetting, { options: columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, onMove: this.setSortKeys, overlayClass: columnSettingOverlayClass }))));
+            allCols.push({
+                title: title,
+                dataIndex: '__setting__',
+                key: '__setting__',
+                width: 40,
+                fixed: 'right'
+            });
         }
-        return selectedCols;
+        return allCols;
     };
     Table.prototype.getRowKey = function (row, index) {
         var rowKey = this.props.rowKey;
@@ -276,6 +415,11 @@ var Table = /** @class */ (function (_super) {
         }
         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; });
+    };
     Table.prototype.setIndeterminate = function (indeterminate) {
         this.indeterminate = indeterminate;
     };
@@ -288,6 +432,29 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.setColumns = function (columns) {
         this.columns = columns;
     };
+    Table.prototype.setSortKeys = function (columns) {
+        var right = this.settingFields.filter(function (f) { return f.fixed === 'right'; });
+        var left = this.settingFields.filter(function (f) { return f.fixed === true || f.fixed === 'left'; });
+        var center = this.settingFields.filter(function (f) { return !f.fixed; });
+        var newCenter = [];
+        columns.map(function (column) {
+            var find = center.find(function (f) { return f.field === column; });
+            if (find) {
+                newCenter.push(find);
+            }
+        });
+        this.setSettingFields(__spread(left, newCenter, right));
+        this.sortConfig = __assign(__assign({}, this.sortConfig), { sortKeys: columns });
+    };
+    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) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
@@ -364,35 +531,38 @@ var Table = /** @class */ (function (_super) {
             }
         });
         var sizeMap = {};
+        var setttingFields = this.settingFields;
         newColumns.forEach(function (element) {
             if (element.dataIndex && isNumber(element.width)) {
                 sizeMap[element.dataIndex] = element.width;
             }
         });
-        if (this.props.onDraggableChange) {
-            this.props.onDraggableChange(sizeMap);
+        if (this.props.onSettingChange) {
+            this.props.onSettingChange(setttingFields);
         }
-        else if (this.props.dragSaveKey) {
-            localStorage.setItem(this.props.dragSaveKey, JSON.stringify(sizeMap));
+        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 sizeMap;
-        if (this.props.dragSaveKey) {
-            var sizeStr = localStorage.getItem(this.props.dragSaveKey);
-            sizeMap = !!sizeStr && JSON.parse(sizeStr);
-            if (sizeMap) {
-                columns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
-                    var dataIndex = get(col, 'dataIndex');
-                    var width = sizeMap[dataIndex];
-                    return isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
-                });
-            }
+        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) {
-            if (get(it, 'resizable') && _this.props.draggable) {
+            if (get(it, 'resizable') && _this.resizable) {
                 return __assign(__assign({}, it), { ellipsis: {
                         showTitle: true
                     }, onHeaderCell: function (col) { return ({
@@ -409,7 +579,11 @@ var Table = /** @class */ (function (_super) {
         return transformColumns;
     };
     Table.prototype.componentDidMount = function () {
-        this.setColumns(this.props.draggable && this.props.scroll
+        var _a;
+        if (this.sortable || this.resizable) {
+            this.initSettingConfig();
+        }
+        this.setColumns(this.resizable && ((_a = this.settingFields) === null || _a === void 0 ? void 0 : _a.length)
             ? this.getResizeColumns(this.props.columns)
             : this.props.columns);
     };
@@ -423,7 +597,7 @@ var Table = /** @class */ (function (_super) {
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
                     ? this.rowSelection
-                    : this.props.rowSelection, rowClassName: this.getRowClassName, components: __assign(__assign({}, (components || {})), (draggable && scroll
+                    : this.props.rowSelection, rowClassName: this.getRowClassName, components: __assign(__assign({}, (components || {})), (this.resizable
                     ? {
                         header: {
                             cell: ResizableTitle
@@ -466,6 +640,14 @@ var Table = /** @class */ (function (_super) {
         observable.ref,
         __metadata("design:type", Array)
     ], Table.prototype, "columns", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Object)
+    ], Table.prototype, "sortConfig", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Array)
+    ], Table.prototype, "settingFields", void 0);
     __decorate([
         computed,
         __metadata("design:type", Object),
@@ -501,12 +683,49 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "columnKeys", null);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "resizable", null);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __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);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "initSettingConfig", null);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "updateSettingFields", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
         __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),
@@ -519,6 +738,12 @@ 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,
@@ -547,6 +772,34 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setColumns", null);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "setSortKeys", null);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __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),

package/es/components/Table/style.css

@@ -1724,6 +1724,7 @@ textarea.ant-pagination-options-quick-jumper input {
 }
 .pandora-sdk-last-column-title .pandora-sdk-last-column-setting {
   position: absolute;
+  top: 12px;
   right: 12px;
 }
 .ant-table-thead > tr > th > .ant-table-column-sorters {

package/es/components/Table/style.less

@@ -316,6 +316,7 @@
 .@{sdk-prefix}-last-column-title {
   .@{sdk-prefix}-last-column-setting {
     position: absolute;
+    top: 12px;
     right: 12px;
   }
 }