@kdcloudjs/table 1.2.0-canary.1 → 1.2.0-canary.3

package/es/table/common-views.js

@@ -7,7 +7,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { MenuClasses, Classes } from './base/styles';
 export var InlineFlexCell = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n"])));
-export var ExpansionCell = styled(InlineFlexCell)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.", " {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), Classes.leaf, Classes.expanded);
+export var ExpansionCell = styled(function (props) {
+  return /*#__PURE__*/React.createElement(InlineFlexCell, _extends({}, props));
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.", " {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), Classes.leaf, Classes.expanded);
 
 function CaretDownIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({

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

@@ -14,7 +14,9 @@ import { mergeCellProps, collectNodes, makeRecursiveMapper, isGroupColumn } from
 import { internals } from '../../internals';
 import { Classes } from '../../base/styles';
 var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    left: calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n  }\n"])));
-var TableHeaderGroupCellResize = styled(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
+var TableHeaderGroupCellResize = styled(function (props) {
+  return /*#__PURE__*/React.createElement(TableHeaderCellResize, _extends({}, props));
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
 
 function clamp(min, x, max) {
   return Math.max(min, Math.min(max, x));

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

@@ -6,6 +6,9 @@ import React from 'react';
 import { internals } from '../../internals';
 import { always, arrayUtils } from '../../utils/others';
 import { collectNodes, mergeCellProps } from '../../utils';
+var fullRowsSetKey = 'fullRowsSetKey';
+var allEnableKeys = 'allEnableKeys';
+var selectValueSetKey = 'selectValueSetKey';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -36,10 +39,9 @@ export function multiSelect() {
         action: action
       });
     };
-
-    var dataSource = pipeline.getDataSource();
     /** dataSource 中包含的所有 keys */
 
+
     var fullKeySet = new _Set();
     /** 所有有效的 keys（disable 状态为 false） */
 
@@ -48,7 +50,7 @@ export function multiSelect() {
     var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
 
     var isAnyChecked = false;
-    var flatDataSource = collectNodes(dataSource);
+    var flatDataSource = collectNodes(pipeline.getDataSource());
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
@@ -76,6 +78,8 @@ export function multiSelect() {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,
         onChange: function onChange(_) {
+          var allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
           if (isAllChecked) {
             _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
           } else {
@@ -96,9 +100,11 @@ export function multiSelect() {
           var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
           var checkboxCellProps = {};
           var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+          var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
 
-          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
-            var prevChecked = set.has(rowKey);
+          if (fullRowsSet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = selectValueSet.has(rowKey);
             var disabled = isDisabled(row, rowIndex);
             checkboxCellProps = {
               style: {
@@ -122,7 +128,8 @@ export function multiSelect() {
           }
 
           var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
-          var checked = set.has(key);
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
+          var checked = selectValueSet.has(key);
           return /*#__PURE__*/React.createElement(Checkbox, {
             checked: checked,
             disabled: isDisabled(row, rowIndex),
@@ -161,8 +168,9 @@ export function multiSelect() {
 
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
+      var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
 
-      if (!fullKeySet.has(rowKey)) {
+      if (!fullRowsSet.has(rowKey)) {
         // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
         return;
       }
@@ -170,7 +178,8 @@ export function multiSelect() {
       var style = {};
       var className;
       var onClick;
-      var checked = set.has(rowKey);
+      var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
+      var checked = selectValueSet.has(rowKey);
 
       if (opts.highlightRowWhenSelected && checked) {
         className = 'highlight';
@@ -197,22 +206,32 @@ export function multiSelect() {
         style: style,
         onClick: onClick
       };
-    });
+    }); // 只保留一份到pipeline， 避免行数据过多时内容被握住
+
+    pipeline.setFeatureOptions(fullRowsSetKey, fullKeySet);
+    pipeline.setFeatureOptions(allEnableKeys, allKeys);
+    pipeline.setFeatureOptions(selectValueSetKey, set);
+    fullKeySet = null;
+    allKeys = null;
+    set = null;
     return pipeline;
 
     function onCheckboxChange(prevChecked, key, batch) {
       var batchKeys = [key];
 
       if (batch && lastKey) {
-        var lastIdx = allKeys.indexOf(lastKey);
-        var cntIdx = allKeys.indexOf(key);
+        var _allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
+        var lastIdx = _allKeys.indexOf(lastKey);
+
+        var cntIdx = _allKeys.indexOf(key);
 
         var _ref = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
             _ref2 = _slicedToArray(_ref, 2),
             start = _ref2[0],
             end = _ref2[1];
 
-        batchKeys = _sliceInstanceProperty(allKeys).call(allKeys, start, end + 1);
+        batchKeys = _sliceInstanceProperty(_allKeys).call(_allKeys, start, end + 1);
       }
 
       if (prevChecked) {

package/lib/table/common-views.js

@@ -22,7 +22,9 @@ var _templateObject, _templateObject2, _templateObject3;
 var InlineFlexCell = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n"])));
 
 exports.InlineFlexCell = InlineFlexCell;
-var ExpansionCell = (0, _styledComponents.default)(InlineFlexCell)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.", " {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), _styles.Classes.leaf, _styles.Classes.expanded);
+var ExpansionCell = (0, _styledComponents.default)(function (props) {
+  return /*#__PURE__*/_react.default.createElement(InlineFlexCell, (0, _extends2.default)({}, props));
+})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.", " {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), _styles.Classes.leaf, _styles.Classes.expanded);
 exports.ExpansionCell = ExpansionCell;
 
 function CaretDownIcon(props) {

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

@@ -46,7 +46,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var TableHeaderCellResize = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    left: calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n  }\n"])));
 
-var TableHeaderGroupCellResize = (0, _styledComponents.default)(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
+var TableHeaderGroupCellResize = (0, _styledComponents.default)(function (props) {
+  return /*#__PURE__*/_react.default.createElement(TableHeaderCellResize, (0, _extends2.default)({}, props));
+})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
 
 function clamp(min, x, max) {
   return Math.max(min, Math.min(max, x));

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

@@ -23,6 +23,10 @@ var _others = require("../../utils/others");
 
 var _utils = require("../../utils");
 
+var fullRowsSetKey = 'fullRowsSetKey';
+var allEnableKeys = 'allEnableKeys';
+var selectValueSetKey = 'selectValueSetKey';
+
 function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -53,10 +57,9 @@ function multiSelect() {
         action: action
       });
     };
-
-    var dataSource = pipeline.getDataSource();
     /** dataSource 中包含的所有 keys */
 
+
     var fullKeySet = new _set.default();
     /** 所有有效的 keys（disable 状态为 false） */
 
@@ -65,7 +68,7 @@ function multiSelect() {
     var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
 
     var isAnyChecked = false;
-    var flatDataSource = (0, _utils.collectNodes)(dataSource);
+    var flatDataSource = (0, _utils.collectNodes)(pipeline.getDataSource());
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
@@ -94,6 +97,8 @@ function multiSelect() {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,
         onChange: function onChange(_) {
+          var allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
           if (isAllChecked) {
             _onChange(_others.arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
           } else {
@@ -115,9 +120,11 @@ function multiSelect() {
 
           var checkboxCellProps = {};
           var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+          var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _set.default();
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _set.default();
 
-          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
-            var prevChecked = set.has(rowKey);
+          if (fullRowsSet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = selectValueSet.has(rowKey);
             var disabled = isDisabled(row, rowIndex);
             checkboxCellProps = {
               style: {
@@ -142,7 +149,8 @@ function multiSelect() {
 
           var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
-          var checked = set.has(key);
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _set.default();
+          var checked = selectValueSet.has(key);
           return /*#__PURE__*/_react.default.createElement(Checkbox, {
             checked: checked,
             disabled: isDisabled(row, rowIndex),
@@ -180,7 +188,9 @@ function multiSelect() {
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
-      if (!fullKeySet.has(rowKey)) {
+      var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _set.default();
+
+      if (!fullRowsSet.has(rowKey)) {
         // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
         return;
       }
@@ -188,7 +198,8 @@ function multiSelect() {
       var style = {};
       var className;
       var onClick;
-      var checked = set.has(rowKey);
+      var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _set.default();
+      var checked = selectValueSet.has(rowKey);
 
       if (opts.highlightRowWhenSelected && checked) {
         className = 'highlight';
@@ -215,22 +226,32 @@ function multiSelect() {
         style: style,
         onClick: onClick
       };
-    });
+    }); // 只保留一份到pipeline， 避免行数据过多时内容被握住
+
+    pipeline.setFeatureOptions(fullRowsSetKey, fullKeySet);
+    pipeline.setFeatureOptions(allEnableKeys, allKeys);
+    pipeline.setFeatureOptions(selectValueSetKey, set);
+    fullKeySet = null;
+    allKeys = null;
+    set = null;
     return pipeline;
 
     function onCheckboxChange(prevChecked, key, batch) {
       var batchKeys = [key];
 
       if (batch && lastKey) {
-        var lastIdx = allKeys.indexOf(lastKey);
-        var cntIdx = allKeys.indexOf(key);
+        var _allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
+        var lastIdx = _allKeys.indexOf(lastKey);
+
+        var cntIdx = _allKeys.indexOf(key);
 
         var _ref = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
             _ref2 = (0, _slicedToArray2.default)(_ref, 2),
             start = _ref2[0],
             end = _ref2[1];
 
-        batchKeys = (0, _slice.default)(allKeys).call(allKeys, start, end + 1);
+        batchKeys = (0, _slice.default)(_allKeys).call(_allKeys, start, end + 1);
       }
 
       if (prevChecked) {

package/package.json

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