@kdcloudjs/table 1.1.5-canary.9 → 1.1.6-canary.1

package/lib/table/pipeline/features/autoFill.js

@@ -7,81 +7,165 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableWidthKey = exports.autoFillTableWidth = exports.FILL_COLUMN_CODE = void 0;
 
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var _maxSafeInteger = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/max-safe-integer"));
+
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
 var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
 var _calculations = require("../../base/calculations");
 
 var _utils = require("../../utils");
 
 var _styles = require("../../base/styles");
 
+var _columnResizeWidth = require("./columnResizeWidth");
+
 var FILL_COLUMN_CODE = '$_fill_column_&';
 exports.FILL_COLUMN_CODE = FILL_COLUMN_CODE;
 var tableWidthKey = 'tableWidth';
 exports.tableWidthKey = tableWidthKey;
-var fillColumnWidthKey = 'fillColumnWidth';
+var FLEX_COLUMN_COUNT = (0, _symbol.default)('flexCount');
 
 var autoFillTableWidth = function autoFillTableWidth() {
   return function (pipeline) {
-    var width = pipeline.getStateAtKey(fillColumnWidthKey, 0);
-    var columns = pipeline.getColumns();
-    var fillColumns = (0, _find.default)(columns).call(columns, function (col) {
-      return col.code === FILL_COLUMN_CODE;
-    });
-
-    if (fillColumns) {
-      fillColumns.width = width;
+    var flexColumnResult = findFlexColumns(pipeline);
+    var flexCount = flexColumnResult.get(FLEX_COLUMN_COUNT);
+
+    if (flexCount) {
+      // 设置了flex宽度，flex列平分剩余宽度
+      var remainingWidth = getTableRemainingWidth(pipeline) || 0;
+
+      if (remainingWidth > 0) {
+        // 保存剩余的flex总和和剩余宽度总和宽度
+        var residualFlexCount = flexCount;
+        var residualFlexWidth = remainingWidth;
+        var columnSize = pipeline.getFeatureOptions(_columnResizeWidth.COLUMN_SIZE_KEY) || {};
+        pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col, recursiveFlatMapInfo) {
+          var isLeaf = recursiveFlatMapInfo.isLeaf;
+
+          if (isLeaf && isValidFlexColumn(col, pipeline)) {
+            var code = col.code,
+                _col$features = col.features,
+                features = _col$features === void 0 ? {} : _col$features;
+            var flex = features.flex,
+                _features$minWidth = features.minWidth,
+                minWidth = _features$minWidth === void 0 ? 0 : _features$minWidth,
+                _features$maxWidth = features.maxWidth,
+                maxWidth = _features$maxWidth === void 0 ? _maxSafeInteger.default : _features$maxWidth;
+            var usedRemainingWidth = Math.floor(remainingWidth * flex / flexCount);
+            var preColWidth = col.width; // 如果当前已经是最后一个flex列，将剩余的宽度添加到该列，其他计算相应的列
+
+            col.width = clamp(minWidth, preColWidth + (residualFlexCount === flex ? residualFlexWidth : usedRemainingWidth), maxWidth);
+            residualFlexCount -= flex;
+            residualFlexWidth -= col.width - preColWidth;
+            columnSize[code] = col.width;
+          }
+
+          return col;
+        }));
+        pipeline.setFeatureOptions(_columnResizeWidth.COLUMN_SIZE_KEY, columnSize);
+      }
     } else {
-      var rightNestedLockCount = (0, _calculations.getLeftNestedLockCount)((0, _slice.default)(columns).call(columns).reverse());
-      var spliceIndex = columns.length - rightNestedLockCount;
-      var _fillColumns = {
-        name: '',
-        code: FILL_COLUMN_CODE,
-        width: width,
-        features: {
-          resizeable: false
-        },
-        getCellProps: function getCellProps(value, record, rowIndex) {
-          return {
-            className: _styles.Classes.emptyColCell
-          };
-        }
-      };
-      (0, _splice.default)(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
+      // 未设置了flex宽度，创建占位列
+      var columns = pipeline.getColumns();
+      var fillColumns = (0, _find.default)(columns).call(columns, function (col) {
+        return col.code === FILL_COLUMN_CODE;
+      });
+      var width = getTableRemainingWidth(pipeline) || 0;
+
+      if (fillColumns) {
+        fillColumns.width = width;
+      } else {
+        var rightNestedLockCount = (0, _calculations.getLeftNestedLockCount)((0, _slice.default)(columns).call(columns).reverse());
+        var spliceIndex = columns.length - rightNestedLockCount;
+        var _fillColumns = {
+          name: '',
+          code: FILL_COLUMN_CODE,
+          width: width,
+          features: {
+            resizeable: false
+          },
+          getCellProps: function getCellProps(value, record, rowIndex) {
+            return {
+              className: _styles.Classes.emptyColCell
+            };
+          }
+        };
+        (0, _splice.default)(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
+      }
+
+      pipeline.columns(columns);
     }
 
-    pipeline.columns(columns);
-    setAutoFillWidth(pipeline);
     return pipeline;
+
+    function findFlexColumns(pipeline) {
+      var result = new _map.default([[FLEX_COLUMN_COUNT, 0]]);
+      dfs(pipeline.getColumns(), result);
+      return result;
+
+      function dfs(columns, result) {
+        columns.forEach(function (col) {
+          if ((0, _utils.isLeafNode)(col)) {
+            if (isValidFlexColumn(col, pipeline)) {
+              result.set(FLEX_COLUMN_COUNT, result.get(FLEX_COLUMN_COUNT) + col.features.flex);
+            }
+          } else {
+            dfs(col.children, result);
+          }
+        });
+      }
+    }
   };
 };
 
 exports.autoFillTableWidth = autoFillTableWidth;
 
-var setAutoFillWidth = function setAutoFillWidth(pipeline) {
+function getColumnWidthSum(pipeline) {
+  return dfs(pipeline.getColumns());
+
+  function dfs(columns) {
+    return columns.reduce(function (acc, col) {
+      var width = col.width,
+          code = col.code;
+
+      if ((0, _utils.isLeafNode)(col) && code !== FILL_COLUMN_CODE) {
+        var resizeColumn = pipeline.getFeatureOptions(_columnResizeWidth.COLUMN_SIZE_KEY);
+        return acc + (resizeColumn && resizeColumn[code]) || width;
+      } else {
+        return acc + dfs(col.children);
+      }
+    }, 0);
+  }
+}
+
+function getTableRemainingWidth(pipeline) {
   var tableWidth = pipeline.getStateAtKey(tableWidthKey);
   if (!tableWidth) return;
-  var columnWidthSum = 0;
-  pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
-    var width = col.width,
-        code = col.code;
-
-    if ((0, _utils.isLeafNode)(col) && code !== FILL_COLUMN_CODE) {
-      var resizeColumn = pipeline.getStateAtKey('columnResize');
-      columnWidthSum += resizeColumn && resizeColumn[code] || width;
-    }
+  var remainingWidth = Math.floor(tableWidth - getColumnWidthSum(pipeline));
+  return remainingWidth > 0 ? remainingWidth : 0;
+}
 
-    return col;
-  }));
-  var fillColumnWidth = Math.floor(tableWidth - columnWidthSum);
-  fillColumnWidth = fillColumnWidth > 0 ? fillColumnWidth : 0;
-  var preWidth = pipeline.getStateAtKey(fillColumnWidthKey, 0);
+function isValidFlexColumn(col, pipeline) {
+  var _a;
 
-  if (preWidth !== fillColumnWidth) {
-    pipeline.setStateAtKey('fillColumnWidth', fillColumnWidth);
+  var resizeColumn = pipeline.getFeatureOptions(_columnResizeWidth.RESIZED_COLUMN_KEY); // 拖拽列自动禁止flex
+
+  if (resizeColumn === null || resizeColumn === void 0 ? void 0 : resizeColumn.has(col.code)) {
+    return false;
   }
-};
+
+  var flex = (_a = col.features) === null || _a === void 0 ? void 0 : _a.flex;
+  return typeof flex === 'number' && flex > 0;
+}
+
+function clamp(min, x, max) {
+  return Math.max(min, Math.min(max, x));
+}

package/lib/table/pipeline/features/columnResizeWidth.d.ts

@@ -20,5 +20,7 @@ export interface ColumnResizeOptions {
     onChangeSize?(nextSize: ColumnSize): void;
     afterChangeSize?(nextSize: ColumnSize, changedColumnSize: ChangedColumnSize[]): void;
 }
+export declare const COLUMN_SIZE_KEY = "columnResize";
+export declare const RESIZED_COLUMN_KEY = "resizedColumn";
 export declare function columnResize(opts?: ColumnResizeOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

package/lib/table/pipeline/features/columnResizeWidth.js

@@ -11,12 +11,15 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.RESIZED_COLUMN_KEY = exports.COLUMN_SIZE_KEY = void 0;
 exports.columnResize = columnResize;
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
@@ -53,17 +56,22 @@ function disableSelect(event) {
   event.preventDefault();
 }
 
+var stateKey = 'columnResize';
+var COLUMN_SIZE_KEY = 'columnResize';
+exports.COLUMN_SIZE_KEY = COLUMN_SIZE_KEY;
+var RESIZED_COLUMN_KEY = 'resizedColumn';
+exports.RESIZED_COLUMN_KEY = RESIZED_COLUMN_KEY;
+
 function columnResize() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _a, _b, _c;
 
-  var stateKey = 'columnResize';
   var minSize = (_a = opts.minSize) !== null && _a !== void 0 ? _a : 60;
   var fallbackSize = (_b = opts.fallbackSize) !== null && _b !== void 0 ? _b : 150;
   var maxSize = (_c = opts.maxSize) !== null && _c !== void 0 ? _c : 1000;
   return function columnResizeFeature(pipeline) {
-    var _a, _b, _c;
+    var _a, _b;
 
     var columnSize = (_b = (_a = opts.columnSize) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
     var leafColumns = (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only');
@@ -78,15 +86,10 @@ function columnResize() {
           columnSize[code] = fallbackSize;
         }
       }
-    }); // 初始化 || opts.columnSize发生变化（为了autofill时能取到最新值）
-
-    if (!pipeline.getStateAtKey(stateKey) || ((_c = pipeline.ref) === null || _c === void 0 ? void 0 : _c.current.lastOptColumnSize) !== opts.columnSize) {
-      pipeline.setStateAtKey(stateKey, columnSize);
-    }
+    }); // 实时存储一份最新的columnSize，与autoFill共用一份数据
+    // 存在state里可能存到取不到最新的
 
-    if (pipeline.ref) {
-      pipeline.ref.current.lastOptColumnSize = opts.columnSize;
-    }
+    pipeline.setFeatureOptions(COLUMN_SIZE_KEY, columnSize);
 
     var onChangeSize = function onChangeSize(nextColumnSize) {
       window.requestAnimationFrame(function () {
@@ -94,17 +97,13 @@ function columnResize() {
 
         pipeline.setStateAtKey(stateKey, nextColumnSize);
         (_a = opts === null || opts === void 0 ? void 0 : opts.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, nextColumnSize);
-
-        if (opts.columnSize) {
-          if (pipeline.ref) {
-            pipeline.ref.current.lastOptColumnSize = nextColumnSize; // 这里记录由列宽拖拽导致的opts.columnSize变化,避免重复渲染
-          }
-        }
       });
     };
 
     var handleDoubleClick = function handleDoubleClick(e, col) {
-      opts === null || opts === void 0 ? void 0 : opts.doubleClickCallback(e, col);
+      var _a;
+
+      (_a = opts.doubleClickCallback) === null || _a === void 0 ? void 0 : _a.call(opts, e, col);
     };
 
     var handleMouseDown = function handleMouseDown(e, col) {
@@ -112,7 +111,14 @@ function columnResize() {
       var changedColumnSize = {};
       var startX = e.clientX;
       var children = col.children,
-          code = col.code;
+          code = col.code,
+          _col$features = col.features,
+          features = _col$features === void 0 ? {} : _col$features;
+      var minWidth = features.minWidth,
+          maxWidth = features.maxWidth;
+      var realMinSize = typeof minWidth === 'number' ? minWidth : minSize;
+      var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
+      var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
       var recordColumnSize = columnSize;
       e.stopPropagation();
       var nextSize$ = (0, _rxjs.fromEvent)(window, 'mousemove').pipe(op.takeUntil((0, _rxjs.fromEvent)(window, 'mouseup')), op.map(function (e) {
@@ -133,17 +139,17 @@ function columnResize() {
             var currentDeltaWidth = Math.round(deltaSum * startSize / childrenWidthSum);
 
             if (index < leafChildColumns.length - 1) {
-              nextColumnSize[code] = clamp(minSize, startSize + currentDeltaWidth, maxSize);
+              nextColumnSize[code] = clamp(realMinSize, startSize + currentDeltaWidth, realMaxSize);
               changedColumnSize[code] = nextColumnSize[code];
               deltaRemaining -= currentDeltaWidth;
             } else {
-              nextColumnSize[code] = clamp(minSize, startSize + deltaRemaining, maxSize);
+              nextColumnSize[code] = clamp(realMinSize, startSize + deltaRemaining, realMaxSize);
               changedColumnSize[code] = nextColumnSize[code];
             }
           });
         } else {
           var startSize = columnSize[code];
-          nextColumnSize[code] = clamp(minSize, startSize + deltaSum, maxSize);
+          nextColumnSize[code] = clamp(realMinSize, startSize + deltaSum, realMaxSize);
           changedColumnSize[code] = nextColumnSize[code];
         }
 
@@ -151,7 +157,15 @@ function columnResize() {
         return nextColumnSize;
       }));
       nextSize$.subscribe({
-        next: onChangeSize,
+        next: function next(nextColumnSize) {
+          onChangeSize(nextColumnSize); // 由于COLUMN_RESIZE_KEY记录的是全量的列宽，此处记录被改变过的列宽
+
+          var resizedColumnSet = pipeline.getFeatureOptions(RESIZED_COLUMN_KEY) || new _set.default();
+          (0, _keys.default)(changedColumnSize).forEach(function (code) {
+            resizedColumnSet.add(code, changedColumnSize[code]);
+          });
+          pipeline.setFeatureOptions(RESIZED_COLUMN_KEY, resizedColumnSet);
+        },
         complete: function complete() {
           var _context;
 

package/lib/table/pipeline/features/multiSelect.js

@@ -61,6 +61,10 @@ function multiSelect() {
     /** 所有有效的 keys（disable 状态为 false） */
 
     var allKeys = [];
+    var set = new _set.default(value);
+    var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
+
+    var isAnyChecked = false;
     var flatDataSource = (0, _utils.collectNodes)(dataSource);
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
@@ -68,23 +72,24 @@ function multiSelect() {
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
 
       if (!isDisabled(row, rowIndex)) {
-        allKeys.push(rowKey);
+        allKeys.push(rowKey); // 存在一个非选中，则不再进行判断
+
+        if (isAllChecked) {
+          isAllChecked = set.has(rowKey);
+        } // 存在一个选中，则不再进行判断
+
+
+        if (!isAnyChecked) {
+          isAnyChecked = set.has(rowKey);
+        }
       }
-    });
-    var set = new _set.default(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
+    }); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
     var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
 
     if (!hiddenSelectColumn) {
       var _context;
 
-      var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
-        return set.has(key);
-      });
-      var isAnyChecked = allKeys.some(function (key) {
-        return set.has(key);
-      });
-
       var defaultCheckboxColumnTitle = /*#__PURE__*/_react.default.createElement(Checkbox, {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,

package/lib/table/pipeline/features/rangeSelection.js

@@ -93,16 +93,16 @@ function rangeSelection(opts) {
 
       if (clickCell) {
         if (event.shiftKey) {
-          var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
+          var _lastClickCell = pipeline.getFeatureOptions(lastClickCellKey);
 
           if (_lastClickCell) {
             setRangeSelection(_lastClickCell, clickCell);
           } else {
             // 第一次进来就按住shift键，这时候要记住点击的单元格
-            pipeline.setStateAtKey(lastClickCellKey, clickCell);
+            pipeline.setFeatureOptions(lastClickCellKey, clickCell);
           }
         } else {
-          pipeline.setStateAtKey(lastClickCellKey, clickCell);
+          pipeline.setFeatureOptions(lastClickCellKey, clickCell);
           setRangeSelection(clickCell, clickCell);
         }
       }

package/lib/table/pipeline/features/sort.js

@@ -198,6 +198,10 @@ function sort() {
         return dataSource;
       }
 
+      if (sortMap.size === 0) {
+        return dataSource;
+      }
+
       var sortColumnsMap = new _map.default((0, _map2.default)(_context = (0, _filter.default)(_context2 = (0, _utils.collectNodes)(columns, 'leaf-only')).call(_context2, function (col) {
         var _a, _b;
 

package/lib/table/pipeline/pipeline.js

@@ -318,8 +318,9 @@ function useTablePipeline(ctx) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var ref = (0, _react.useRef)({});
-  ref.current.featureOptions = {};
+  var ref = (0, _react.useRef)({
+    featureOptions: {}
+  });
   return new TablePipeline({
     state: state,
     setState: setState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.1.5-canary.9",
+  "version": "1.1.6-canary.1",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [