@qn-pandora/pandora-component 5.0.2 → 5.1.1

package/lib/components/Table/ColumnSetting/style.css

@@ -1,7 +1,6 @@
 .pandora-sdk-table-column-setting-popover {
   padding: 10px;
   width: 100%;
-  width: 600px;
   max-height: 300px;
   overflow-y: auto;
 }
@@ -29,9 +28,6 @@
       flex-wrap: wrap;
 }
 .pandora-sdk-table-column-setting-content > div {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 33.33%;
-          flex: 0 0 33.33%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
@@ -48,7 +44,8 @@
   cursor: move;
 }
 .pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox {
-  width: 120px;
+  width: 100%;
+  min-width: 120px;
   overflow: hidden;
 }
 .pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox > span:nth-child(2) {

package/lib/components/Table/ColumnSetting/style.less

@@ -3,7 +3,6 @@
 .@{sdk-prefix}-table-column-setting-popover {
   padding: 10px;
   width: 100%;
-  width: 600px;
   .@{sdk-prefix}-table-column-setting-header {
     border-bottom: 1px solid @border-color-base;
     display: flex;
@@ -29,7 +28,6 @@
 }
 
 .@{sdk-prefix}-table-column-setting-content > div {
-  flex: 0 0 33.33%;
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
@@ -41,7 +39,8 @@
       cursor: move;
     }
     .@{sdk-prefix}-table-column-setting-checkbox {
-      width: 120px;
+      width: 100%;
+      min-width: 120px;
       overflow: hidden;
     }
     .@{sdk-prefix}-table-column-setting-checkbox > span:nth-child(2) {

package/lib/components/Table/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TableProps, ColumnType, ColumnGroupType } from 'antd/es/table';
-import { TableRowSelection } from 'antd/es/table/interface';
+import type { TableRowSelection, RowSelectMethod } from 'antd/es/table/interface';
 import { IOption } from './ColumnSetting';
 /**
  * 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
@@ -85,8 +85,6 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     columns: IKeyValues[];
     sortConfig: {
         sortKeys: string[];
-        fixedRightKeys: string[];
-        fixedLeftKeys: string[];
     };
     settingFields: ISaveFieldItem[];
     UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
@@ -104,11 +102,14 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     };
     get resizable(): false | ({
         x?: string | number | true | undefined;
-        y?: string | number | undefined;
+        y?: string | number | undefined; /**
+         * 禁用当前操作
+         */
     } & {
         scrollToFirstRowOnChange?: boolean | undefined;
     }) | undefined;
     get sortable(): boolean;
+    get showSetting(): boolean;
     updateSettingConfig(columns: Array<IColumnType<T>>): void;
     initSettingConfig(): void;
     updateSettingFields(columns: Array<IColumnType<T>>, settingFields: ISaveFieldItem[]): void;
@@ -117,18 +118,20 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     transfromColumns(columns: IKeyValues[], needEmptyColumn?: boolean): IKeyValues<any>[];
     getColumns(): IKeyValues<any>[];
     getRowKey(row: any, index: number): any;
-    getSortCoulmns(columns: IKeyValues[]): IKeyValues<any>[];
+    sortCoulmns(columns: IKeyValues[]): IKeyValues<any>[];
     setIndeterminate(indeterminate: boolean): void;
     setCheckAll(checkAll: boolean): void;
     setHiddenColumn(hiddenColumn?: string[]): void;
     setColumns(columns: IKeyValues[]): void;
     setSortKeys(columns: string[]): void;
     setSettingFields(columns: ISaveFieldItem[]): void;
-    setFixedRightKeys(columns: string[]): void;
-    setFixedLeftKeys(columns: string[]): void;
     setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
-    handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
-    onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
+    handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[], info: {
+        type: RowSelectMethod;
+    }): void;
+    onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[], info: {
+        type: RowSelectMethod;
+    }): void;
     handleCheckAllChange(e: any): void;
     handleBatchOptionClick(option: IOptionItem): void;
     getRowClassName(record: any, index: number, indent: number): string;

package/lib/components/Table/index.js

@@ -120,9 +120,7 @@ var Table = /** @class */ (function (_super) {
         _this.hiddenColumn = _this.props.hiddenColumns;
         _this.columns = [];
         _this.sortConfig = {
-            sortKeys: [],
-            fixedRightKeys: [],
-            fixedLeftKeys: []
+            sortKeys: []
         };
         _this.settingFields = [];
         return _this;
@@ -152,7 +150,7 @@ var Table = /** @class */ (function (_super) {
             if (rowSelection && rowSelection.onChange) {
                 rowSelection.onChange(lodash_1.union(selectedRowKeysOfCurrentPage_1, selectedRowKeys_1), selectedRows && rowKey
                     ? lodash_1.unionBy(selectedRowsOfCurrentPage, selectedRows, rowKey)
-                    : selectedRowsOfCurrentPage);
+                    : selectedRowsOfCurrentPage, { type: 'single' });
             }
         }
         if (!lodash_1.isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
@@ -239,15 +237,14 @@ var Table = /** @class */ (function (_super) {
             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) {
+                if (col.key && col.key.toString().length > 0) {
                     options.push({
                         label: col.colTitle || col.title,
                         value: col.key.toString()
                     });
                 }
             });
+            // sortKeys 来保证数据的准确性
             return this.sortConfig.sortKeys
                 .map(function (key) { return options.find(function (option) { return option.value === key; }); })
                 .filter(function (f) { return !!f; });
@@ -263,7 +260,8 @@ var Table = /** @class */ (function (_super) {
             var resetKeys = [];
             columns.forEach(function (col) {
                 if (col.key) {
-                    if (col.configurable === false) {
+                    // 不可配置，或者列固定的列，（在这里统称不可配置的列）
+                    if (col.configurable === false || col.fixed) {
                         unconfigableKeys.push(col.key.toString());
                     }
                     else {
@@ -300,6 +298,19 @@ var Table = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Table.prototype, "showSetting", {
+        get: function () {
+            // showColumnSetting 需要同 draggable 配合使用, 如果设置不显示列设置按钮， 则不需要显示，其他时候只有 draggable = sort 或者 draggable === true时才显示，
+            var _a = this.props, showColumnSetting = _a.showColumnSetting, draggable = _a.draggable;
+            if (showColumnSetting === false)
+                return false;
+            if (draggable === ETableSettingType.SORT || draggable === true)
+                return true;
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Table.prototype.updateSettingConfig = function (columns) {
         this.updateSettingFields(columns, this.settingFields);
     };
@@ -307,10 +318,15 @@ var Table = /** @class */ (function (_super) {
         var saveSettingKey = this.props.saveSettingKey;
         var settingFields = [];
         if (saveSettingKey) {
-            var settingStr = localStorage.getItem(saveSettingKey);
-            var settingConfig = !!settingStr && JSON.parse(settingStr);
-            if (lodash_1.isArray(settingConfig)) {
-                settingFields = settingConfig;
+            try {
+                var settingStr = localStorage.getItem(saveSettingKey);
+                var settingConfig = !!settingStr && JSON.parse(settingStr);
+                if (lodash_1.isArray(settingConfig)) {
+                    settingFields = settingConfig;
+                }
+            }
+            catch (error) {
+                throw new Error("parse " + saveSettingKey + " error: " + error + ", please check the data format");
             }
         }
         this.updateSettingFields(this.props.columns, settingFields);
@@ -318,12 +334,9 @@ var Table = /** @class */ (function (_super) {
     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) {
@@ -332,14 +345,8 @@ var Table = /** @class */ (function (_super) {
                 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);
+                    sortableColumns.push(field);
                 }
             }
         });
@@ -348,32 +355,18 @@ var Table = /** @class */ (function (_super) {
             .filter(function (f) { return !settingFields.find(function (field) { return field.field === f.dataIndex; }); })
             .map(function (column) {
             if (column.dataIndex) {
-                if (!column.fixed) {
+                // 不是列固定，并且可配置，才可以展示拖拽
+                if (!(column.fixed || column.configurable === false)) {
                     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);
+        this.setSettingFields(sortableColumns);
     };
     // 隐藏key
     Table.prototype.handleHideColumnsChange = function (keys) {
@@ -394,21 +387,28 @@ var Table = /** @class */ (function (_super) {
         (_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 || !lodash_1.includes(hiddenColumn, item.key)) {
-                return true;
+        var fixedRightColumn = [];
+        var fixedLeftColumn = [];
+        var selectedCols = [];
+        var unconfigurableCols = [];
+        var source = this.columns || [];
+        source.forEach(function (column) {
+            if (column.fixed === 'left' || column.fixed === true) {
+                fixedLeftColumn.push(column);
+            }
+            else if (column.fixed === 'right') {
+                fixedRightColumn.push(column);
+            }
+            else if (column.configurable === false) {
+                unconfigurableCols.push(column);
+            }
+            else if (!lodash_1.includes(hiddenColumn, column.key)) {
+                selectedCols.push(column);
             }
-            return false;
-        }));
-        var fixedRightColumn = this.columns.filter(function (column) {
-            return lodash_1.includes(_this.sortConfig.fixedRightKeys, column.key);
-        });
-        var fixedLeftColumn = this.columns.filter(function (column) {
-            return lodash_1.includes(_this.sortConfig.fixedLeftKeys, column.key);
         });
-        return __spread(fixedLeftColumn, this.getSortCoulmns(selectedCols), fixedRightColumn);
+        // 顺序应该是： 左固定列、不可配置列、排序列、右固定列
+        return __spread(fixedLeftColumn, unconfigurableCols, (this.sortable ? this.sortCoulmns(selectedCols) : selectedCols), fixedRightColumn);
     };
     // 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
     // 空白列添加到右固定列的前面
@@ -431,12 +431,14 @@ var Table = /** @class */ (function (_super) {
         return cols;
     };
     Table.prototype.getColumns = function () {
-        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass, needEmptyColumn = _a.needEmptyColumn;
-        if (!showColumnSetting) {
+        var _a = this.props, columnSettingOverlayClass = _a.columnSettingOverlayClass, needEmptyColumn = _a.needEmptyColumn;
+        // 如果不显示列设置按钮，直接返回columns
+        if (!this.showSetting) {
             return this.transfromColumns(this.columns, needEmptyColumn);
         }
         // 获取到列设置的options
         var columnsSettingOptions = this.columnsSettingOptions;
+        // 列排序或者列隐藏
         var allCols = this.getSortedColumns();
         this.transfromColumns(allCols, needEmptyColumn);
         var length = allCols.length;
@@ -461,7 +463,7 @@ var Table = /** @class */ (function (_super) {
         }
         return rowKey ? row[rowKey] : index;
     };
-    Table.prototype.getSortCoulmns = function (columns) {
+    Table.prototype.sortCoulmns = function (columns) {
         return this.sortConfig.sortKeys
             .map(function (key) { return columns.find(function (column) { return column.dataIndex === key; }); })
             .filter(function (f) { return !!f; });
@@ -495,12 +497,6 @@ 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) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
@@ -510,24 +506,24 @@ var Table = /** @class */ (function (_super) {
         this.setCheckAll(!!selectedRowsOfCurrentPage.length &&
             selectedRowsOfCurrentPage.length === lodash_1.size(dataSource));
     };
-    Table.prototype.handleSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage) {
+    Table.prototype.handleSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage, info) {
         var dataSource = this.props.dataSource;
         // 更新CheckBox状态
         this.setCheckboxStatus(selectedRowsOfCurrentPage, 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 = lodash_1.differenceBy(dataSource, selectedRowsOfCurrentPage, rowKey);
                 var b = lodash_1.differenceBy(selectedRows, a, rowKey);
                 var rows = lodash_1.unionBy(b, selectedRowsOfCurrentPage, rowKey);
-                rowSelection.onChange(selectedRowKeys, rows);
+                rowSelection.onChange(selectedRowKeys, rows, info);
             }
             else {
-                rowSelection.onChange(selectedRowKeys, selectedRowsOfCurrentPage);
+                rowSelection.onChange(selectedRowKeys, selectedRowsOfCurrentPage, info);
             }
         }
     };
@@ -540,7 +536,9 @@ var Table = /** @class */ (function (_super) {
             : lodash_1.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) {
@@ -638,7 +636,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.componentDidMount = function () {
         var _a;
-        if (this.sortable || this.resizable) {
+        if (this.showSetting) {
             this.initSettingConfig();
         }
         this.setColumns(this.resizable && ((_a = this.settingFields) === null || _a === void 0 ? void 0 : _a.length)
@@ -751,6 +749,11 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "sortable", null);
+    __decorate([
+        mobx_1.computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "showSetting", null);
     __decorate([
         bind_1.default,
         mobx_1.action,
@@ -807,7 +810,7 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
-    ], Table.prototype, "getSortCoulmns", null);
+    ], Table.prototype, "sortCoulmns", null);
     __decorate([
         bind_1.default,
         mobx_1.action,
@@ -850,20 +853,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setSettingFields", null);
-    __decorate([
-        bind_1.default,
-        mobx_1.action,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "setFixedRightKeys", null);
-    __decorate([
-        bind_1.default,
-        mobx_1.action,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "setFixedLeftKeys", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
@@ -873,13 +862,13 @@ var Table = /** @class */ (function (_super) {
     __decorate([
         bind_1.default,
         __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_1.default,
         __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([