@qn-pandora/pandora-component 4.4.2 → 4.4.4

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,11 +130,12 @@ 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.setColumns((nextProps.scroll && nextProps.draggable === true) ||
+                nextProps.draggable === ETableSettingType.RESIZE
                 ? this.getResizeColumns(nextProps.columns)
                 : nextProps.columns);
         }
@@ -202,7 +214,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 +247,114 @@ 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);
+        },
+        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.initSettingConfig = function () {
+        var _this = this;
+        var _a = this.props, saveSettingKey = _a.saveSettingKey, _b = _a.hiddenColumns, hiddenColumns = _b === void 0 ? [] : _b;
+        var settingFields = [];
+        var sortableColumns = [];
+        var leftColumns = [];
+        var rightColumns = [];
+        var hideKeys = [];
+        if (saveSettingKey) {
+            // 支持排序或拖拽
+            var sizeStr = localStorage.getItem(saveSettingKey);
+            settingFields = (!!sizeStr && JSON.parse(sizeStr)) || [];
+            // 已配置的列和实际的对不上
+            // 可能新增或者删除列的情况
+            var newSettingFields = [];
+            if ((settingFields === null || settingFields === void 0 ? void 0 : settingFields.length) && isArray(settingFields)) {
+                // 已配置列
+                // 旧类型数据为对象类型，未配置
+                settingFields.map(function (field) {
+                    var find = _this.columns.find(function (column) { return column.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);
+                        }
+                    }
+                });
+                // 未配置过的列
+                this.columns
+                    .filter(function (f) { return !settingFields.find(function (field) { return field.field === f.dataIndex; }); })
+                    .map(function (column) {
+                    if (!column.fixed) {
+                        sortableColumns.push({
+                            field: column.dataIndex,
+                            fixed: column.fixed
+                        });
+                    }
+                    else if (column.fixed === 'left' || column.fixed === true) {
+                        leftColumns.push({
+                            field: column.dataIndex,
+                            fixed: column.fixed
+                        });
+                    }
+                    else {
+                        rightColumns.push({
+                            field: column.dataIndex,
+                            fixed: column.fixed
+                        });
+                    }
+                });
+            }
+            else {
+                // 从未配置过的列
+                this.columns.map(function (column) {
+                    if (!column.fixed) {
+                        sortableColumns.push({
+                            field: column.dataIndex,
+                            fixed: column.fixed
+                        });
+                    }
+                    else if (column.fixed === 'left' || column.fixed === true) {
+                        leftColumns.push({
+                            field: column.dataIndex,
+                            fixed: column.fixed
+                        });
+                    }
+                    else {
+                        rightColumns.push({
+                            field: column.dataIndex,
+                            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 +363,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 +420,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 +437,32 @@ 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) {
+        if (this.props.saveSettingKey) {
+            localStorage.setItem(this.props.saveSettingKey, JSON.stringify(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 +539,42 @@ 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) {
+        var fields;
+        if (this.props.saveSettingKey) {
+            var sizeStr = localStorage.getItem(this.props.saveSettingKey);
+            fields = !!sizeStr && JSON.parse(sizeStr);
+            if (fields) {
                 columns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
+                    var _a;
                     var dataIndex = get(col, 'dataIndex');
-                    var width = sizeMap[dataIndex];
+                    var width = (_a = 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,9 +591,12 @@ var Table = /** @class */ (function (_super) {
         return transformColumns;
     };
     Table.prototype.componentDidMount = function () {
-        this.setColumns(this.props.draggable && this.props.scroll
+        this.setColumns(this.resizable && this.props.scroll
             ? this.getResizeColumns(this.props.columns)
             : this.props.columns);
+        if (this.sortable || this.resizable) {
+            this.initSettingConfig();
+        }
     };
     Table.prototype.render = function () {
         var _a, _b;
@@ -423,7 +608,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 && scroll
                     ? {
                         header: {
                             cell: ResizableTitle
@@ -466,6 +651,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 +694,35 @@ 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", []),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "initSettingConfig", 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 +735,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 +769,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;
   }
 }