@kdcloudjs/table 1.2.0-canary.15 → 1.2.0-canary.16-hotfix

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

@@ -19,63 +19,50 @@ export function filter() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function step(pipeline) {
     var _a, _b;
-
     var dataSource = pipeline.getDataSource();
     var columns = pipeline.getColumns();
     var filters = opts.filters,
-        defaultFilters = opts.defaultFilters,
-        onChangeFilters = opts.onChangeFilters,
-        keepDataSource = opts.keepDataSource,
-        mode = opts.mode,
-        filterIcon = opts.filterIcon,
-        stopClickEventPropagation = opts.stopClickEventPropagation,
-        stopESCKeyDownEventPropagation = opts.stopESCKeyDownEventPropagation,
-        hideFilterPopupHeader = opts.hideFilterPopupHeader,
-        getPopupParent = opts.getPopupParent;
+      defaultFilters = opts.defaultFilters,
+      onChangeFilters = opts.onChangeFilters,
+      keepDataSource = opts.keepDataSource,
+      mode = opts.mode,
+      filterIcon = opts.filterIcon,
+      stopClickEventPropagation = opts.stopClickEventPropagation,
+      stopESCKeyDownEventPropagation = opts.stopESCKeyDownEventPropagation,
+      hideFilterPopupHeader = opts.hideFilterPopupHeader,
+      getPopupParent = opts.getPopupParent;
     var inputFilters = (_b = (_a = filters !== null && filters !== void 0 ? filters : pipeline.getStateAtKey(stateKey)) !== null && _a !== void 0 ? _a : defaultFilters) !== null && _b !== void 0 ? _b : [];
     inputFilters = mode === 'single' ? _sliceInstanceProperty(inputFilters).call(inputFilters, 0, 1) : inputFilters;
     var inputFiltersMap = new _Map(_mapInstanceProperty(inputFilters).call(inputFilters, function (filterItem) {
       return [filterItem.code, _extends({}, filterItem)];
     }));
     var localeText = pipeline.ctx.localeText;
-
     function processColumns(columns) {
       return _mapInstanceProperty(columns).call(columns, dfs);
-
       function dfs(col) {
         var _a, _b, _c, _d, _e, _f, _g;
-
         var result = _extends({}, col);
-
         var filterable = col.code && ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable);
         var filterActive = filterable && ((_c = (_b = inputFiltersMap === null || inputFiltersMap === void 0 ? void 0 : inputFiltersMap.get(col.code)) === null || _b === void 0 ? void 0 : _filterInstanceProperty(_b)) === null || _c === void 0 ? void 0 : _c.length) > 0;
-
         if (filterable) {
           var _cx;
-
           var handleFilterChanged = function handleFilterChanged(filterItem) {
             var nextFiltersMap = new _Map(inputFiltersMap);
-
             var currentFilter = _extends({
               code: col.code
             }, filterItem);
-
             if (filterItem == null) {
               nextFiltersMap.delete(col.code);
             } else {
               if (mode === 'single') {
                 nextFiltersMap.clear();
               }
-
               nextFiltersMap.set(col.code, currentFilter);
             }
-
             var nextFilters = _Array$from(_valuesInstanceProperty(nextFiltersMap).call(nextFiltersMap));
-
             onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(nextFilters, currentFilter);
             pipeline.setStateAtKey(stateKey, nextFilters);
           };
-
           var setFilter = function setFilter(filter, filterCondition) {
             handleFilterChanged(!filter ? undefined : {
               code: col.code,
@@ -83,10 +70,8 @@ export function filter() {
               filterCondition: filterCondition
             });
           };
-
           var filterPanel = (_d = col.features) === null || _d === void 0 ? void 0 : _d.filterPanel;
           var colFilterIcon = (_f = (_e = col.features) === null || _e === void 0 ? void 0 : _e.filterIcon) !== null && _f !== void 0 ? _f : filterIcon;
-
           var _Filter = /*#__PURE__*/React.createElement(Filter, {
             key: "".concat(col.code, "_filter"),
             FilterPanelContent: filterPanel,
@@ -102,47 +87,38 @@ export function filter() {
             getPopupParent: getPopupParent,
             localeText: localeText
           });
-
           if (col.renderHeader) {
             result.title = col.renderHeader(result.title, _Filter);
           } else {
             var _context, _context2;
-
             result.title = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_concatInstanceProperty(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [internals.safeRenderHeader(_extends({}, col))])), [_Filter]);
-          } // result.headerCellProps = mergeCellProps(col.headerCellProps, {
+          }
+          // result.headerCellProps = mergeCellProps(col.headerCellProps, {
           //   style: {
           //     paddingRight: '18px'
           //   }
           // })
-
         }
 
         if (!isLeafNode(col)) {
           var _context3;
-
           result.children = _mapInstanceProperty(_context3 = col.children).call(_context3, dfs);
         }
-
         return result;
       }
     }
-
     function processDataSource(dataSource) {
       var _context4, _context5;
-
       var filtersKeys = [];
       inputFiltersMap.forEach(function (value, key) {
         filtersKeys.push(key);
       });
-
       if (keepDataSource || filtersKeys.length <= 0) {
         return dataSource;
       }
-
       var columns = pipeline.getColumns();
       var columnsMap = new _Map(_mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = collectNodes(columns, 'leaf-only')).call(_context5, function (col) {
         var _a, _b;
-
         return ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable) !== false && ((_b = col.features) === null || _b === void 0 ? void 0 : _b.filterable) != null;
       })).call(_context4, function (col) {
         return [col.code, col];
@@ -150,15 +126,12 @@ export function filter() {
       var defaultFilterOptionsMap = new _Map(_mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (item) {
         return [item.key, _extends({}, item)];
       }));
-
       function isMatchedFilterCondition(record) {
         return filtersKeys.every(function (key) {
           var _a, _b;
-
           var filterItem = inputFiltersMap.get(key);
           var filterable = (_b = (_a = columnsMap.get(key)) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.filterable;
           var comparisonFn;
-
           if (typeof filterable === 'function') {
             comparisonFn = filterable;
           } else if (defaultFilterOptionsMap.get(filterItem.filterCondition)) {
@@ -167,40 +140,30 @@ export function filter() {
             console.warn("\u5217[".concat(key, "]\u672A\u914D\u7F6E\u7B5B\u9009\u51FD\u6570\uFF0C\u8BF7\u8BBE\u7F6E column.features.filterable \u6765\u4F5C\u4E3A\u8BE5\u5217\u7684\u7B5B\u9009\u51FD\u6570, \u76EE\u524D\u4F7F\u7528\u9ED8\u8BA4\u5305\u542B\u7B5B\u9009\u51FD\u6570"));
             comparisonFn = _filterInstanceProperty(defaultFilterOptionsMap.get('contain'));
           }
-
           return comparisonFn(_filterInstanceProperty(filterItem), filterItem)(internals.safeGetValue(columnsMap.get(key), record, -1), record);
         });
       }
-
       return layeredFilter(dataSource, isMatchedFilterCondition);
     }
-
     pipeline.dataSource(processDataSource(dataSource));
     pipeline.columns(processColumns(columns));
     return pipeline;
   };
 }
-
 function layeredFilter(array, matchFn) {
   return dfs(array);
-
   function dfs(rows) {
     var _context6;
-
     var parentMatched = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return _filterInstanceProperty(_context6 = _mapInstanceProperty(rows).call(rows, function (row) {
       var currentMatched = matchFn(row);
-
       if (isLeafNode(row)) {
         return (parentMatched || currentMatched) && _extends({}, row);
       }
-
       var children = row.children;
-
       var rowAfterFilterChildren = _extends(_extends({}, row), {
         children: dfs(children, parentMatched || currentMatched)
       });
-
       var matchedByChildren = !isLeafNode(rowAfterFilterChildren);
       return (parentMatched || currentMatched || matchedByChildren) && rowAfterFilterChildren;
     })).call(_context6, Boolean);

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

@@ -5,29 +5,23 @@ export function columnHover() {
   var stateKey = 'columnHover';
   return function (pipeline) {
     var _a, _b, _c, _d;
-
     var hoverColor = (_a = opts.hoverColor) !== null && _a !== void 0 ? _a : 'var(--hover-bgcolor)';
     var hoverColIndex = (_d = (_c = (_b = opts.hoverColIndex) !== null && _b !== void 0 ? _b : pipeline.getStateAtKey(stateKey)) !== null && _c !== void 0 ? _c : opts.defaultHoverColIndex) !== null && _d !== void 0 ? _d : -1;
-
     var onChangeHoverColIndex = function onChangeHoverColIndex(nextColIndex) {
       var _a;
-
       pipeline.setStateAtKey(stateKey, nextColIndex);
       (_a = opts.onChangeHoverColIndex) === null || _a === void 0 ? void 0 : _a.call(opts, nextColIndex);
     };
-
     return pipeline.mapColumns(makeRecursiveMapper(function (col, _ref) {
       var startIndex = _ref.startIndex,
-          endIndex = _ref.endIndex;
+        endIndex = _ref.endIndex;
       var range = {
         start: startIndex,
         end: endIndex
       };
-
       if (!isLeafNode(col)) {
         return col;
       }
-
       var colIndexMatched = range.start <= hoverColIndex && hoverColIndex < range.end;
       var prevGetCellProps = col.getCellProps;
       return _extends(_extends({}, col), {

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

@@ -9,32 +9,26 @@ export function columnRangeHover() {
   var stateKey = 'columnHover';
   return function columnRangeHoverStep(pipeline) {
     var _a, _b, _c, _d, _e;
-
     var hoverRange = (_c = (_b = (_a = opts.hoverRange) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : opts.defaultHoverRange) !== null && _c !== void 0 ? _c : EMPTY_RANGE;
     var hoverColor = (_d = opts.hoverColor) !== null && _d !== void 0 ? _d : 'var(--hover-bgcolor)';
     var headerHoverColor = (_e = opts.headerHoverColor) !== null && _e !== void 0 ? _e : 'var(--header-hover-bgcolor)';
-
     var onChangeHoverRange = function onChangeHoverRange(nextColIndexRange) {
       var _a;
-
       pipeline.setStateAtKey(stateKey, nextColIndexRange);
       (_a = opts.onChangeHoverRange) === null || _a === void 0 ? void 0 : _a.call(opts, nextColIndexRange);
     };
-
     return pipeline.mapColumns(makeRecursiveMapper(function (col, _ref) {
       var startIndex = _ref.startIndex,
-          endIndex = _ref.endIndex;
+        endIndex = _ref.endIndex;
       var colRange = {
         start: startIndex,
         end: endIndex
       };
       var match = colRange.end > hoverRange.start && hoverRange.end > colRange.start;
-
       if (!isLeafNode(col)) {
         if (headerHoverColor == null) {
           return col;
         }
-
         return _extends(_extends({}, col), {
           headerCellProps: mergeCellProps(col.headerCellProps, {
             onMouseEnter: function onMouseEnter() {
@@ -49,7 +43,6 @@ export function columnRangeHover() {
           })
         });
       }
-
       var prevGetCellProps = col.getCellProps;
       return _extends(_extends({}, col), {
         headerCellProps: mergeCellProps(col.headerCellProps, {

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

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -13,40 +11,34 @@ import * as op from 'rxjs/operators';
 import { mergeCellProps, collectNodes, makeRecursiveMapper, isGroupColumn } from '../../utils';
 import { internals } from '../../internals';
 import { Classes } from '../../base/styles';
+import { getEventCoordinates } from './utils/touchEventUtils';
 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(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));
 }
-
 function disableSelect(event) {
   event.preventDefault();
 }
-
 var stateKey = 'columnResize';
 export var COLUMN_SIZE_KEY = 'columnResize';
 export var RESIZED_COLUMN_KEY = 'resizedColumn';
 export var LAST_RESIZED_COLUMN_KEY = 'lastResizedColumn';
 export function columnResize() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _a, _b, _c;
-
   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;
-
     var columnSize = (_b = (_a = opts.columnSize) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
     var leafColumns = collectNodes(pipeline.getColumns(), 'leaf-only');
     leafColumns.forEach(function (_ref) {
       var code = _ref.code,
-          width = _ref.width;
-
+        width = _ref.width;
       if (columnSize[code] === undefined) {
         if (typeof width === 'number') {
           columnSize[code] = width;
@@ -54,49 +46,56 @@ export function columnResize() {
           columnSize[code] = fallbackSize;
         }
       }
-    }); // 实时存储一份最新的columnSize，与autoFill共用一份数据
+    });
+    // 实时存储一份最新的columnSize，与autoFill共用一份数据
     // 存在state里可能存到取不到最新的
-
     pipeline.setFeatureOptions(COLUMN_SIZE_KEY, columnSize);
-
     var onChangeSize = function onChangeSize(nextColumnSize) {
       window.requestAnimationFrame(function () {
         var _a;
-
         pipeline.setStateAtKey(stateKey, nextColumnSize);
         (_a = opts === null || opts === void 0 ? void 0 : opts.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, nextColumnSize);
       });
     };
-
     var handleDoubleClick = function handleDoubleClick(e, col) {
       var _a;
-
       (_a = opts.doubleClickCallback) === null || _a === void 0 ? void 0 : _a.call(opts, e, col);
     };
-
-    var handleMouseDown = function handleMouseDown(e, col) {
+    // 通用的拖拽处理逻辑
+    var handleResize = function handleResize(startEvent, col, eventType) {
       window.addEventListener('selectstart', disableSelect);
       var changedColumnSize = {};
-      var startX = e.clientX;
+      var startCoordinates = getEventCoordinates(startEvent);
+      var startX = startCoordinates.clientX;
       var children = col.children,
-          code = col.code,
-          _col$features = col.features,
-          features = _col$features === void 0 ? {} : _col$features;
+        code = col.code,
+        _col$features = col.features,
+        features = _col$features === void 0 ? {} : _col$features;
       var minWidth = features.minWidth,
-          maxWidth = features.maxWidth;
+        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$ = fromEvent(window, 'mousemove').pipe(op.takeUntil(fromEvent(window, 'mouseup')), op.map(function (e) {
-        var movingX = e.clientX;
-
+      // 根据事件类型选择不同的事件监听器
+      var moveEventName = eventType === 'mouse' ? 'mousemove' : 'touchmove';
+      var endEventName = eventType === 'mouse' ? 'mouseup' : 'touchend';
+      var moveEventOptions = eventType === 'touch' ? {
+        passive: false
+      } : undefined;
+      var endEventOptions = eventType === 'touch' ? {
+        passive: false
+      } : undefined;
+      var nextSize$ = fromEvent(window, moveEventName, moveEventOptions).pipe(op.takeUntil(fromEvent(window, endEventName, endEventOptions)), op.map(function (e) {
+        // 触摸事件需要阻止默认行为，防止页面滚动
+        if (eventType === 'touch' && e.cancelable) {
+          e.preventDefault();
+        }
+        var coordinates = getEventCoordinates(e);
+        var movingX = coordinates.clientX;
         var nextColumnSize = _extends({}, columnSize);
-
         var deltaSum = movingX - startX;
         var deltaRemaining = deltaSum;
-
         if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
           var leafChildColumns = collectNodes(children, 'leaf-only');
           var childrenWidthSum = leafChildColumns.reduce(function (sum, _ref2) {
@@ -107,7 +106,6 @@ export function columnResize() {
             var code = _ref3.code;
             var startSize = columnSize[code];
             var currentDeltaWidth = Math.round(deltaSum * startSize / childrenWidthSum);
-
             if (index < leafChildColumns.length - 1) {
               nextColumnSize[code] = clamp(realMinSize, startSize + currentDeltaWidth, realMaxSize);
               changedColumnSize[code] = nextColumnSize[code];
@@ -122,51 +120,56 @@ export function columnResize() {
           nextColumnSize[code] = clamp(realMinSize, startSize + deltaSum, realMaxSize);
           changedColumnSize[code] = nextColumnSize[code];
         }
-
         recordColumnSize = nextColumnSize;
         return nextColumnSize;
       }));
       nextSize$.subscribe({
         next: function next(nextColumnSize) {
-          onChangeSize(nextColumnSize); // 由于COLUMN_RESIZE_KEY记录的是全量的列宽，此处记录被改变过的列宽
-
+          onChangeSize(nextColumnSize);
+          // 由于COLUMN_RESIZE_KEY记录的是全量的列宽，此处记录被改变过的列宽
           var resizedColumnSet = pipeline.getFeatureOptions(RESIZED_COLUMN_KEY) || new _Set();
-
           _Object$keys(changedColumnSize).forEach(function (code) {
             resizedColumnSet.add(code, changedColumnSize[code]);
           });
-
           pipeline.setFeatureOptions(RESIZED_COLUMN_KEY, resizedColumnSet);
           pipeline.setFeatureOptions(LAST_RESIZED_COLUMN_KEY, code);
         },
         complete: function complete() {
           var _context;
-
           var changedColumnSizes = _mapInstanceProperty(_context = _Object$keys(changedColumnSize)).call(_context, function (code) {
             return {
               code: code,
               width: changedColumnSize[code]
             };
           });
-
           window.requestAnimationFrame(function () {
             var _a;
-
             (_a = opts === null || opts === void 0 ? void 0 : opts.afterChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, recordColumnSize, changedColumnSizes);
           });
           window.removeEventListener('selectstart', disableSelect);
         }
       });
     };
-
+    var handleMouseDown = function handleMouseDown(e, col) {
+      e.stopPropagation();
+      handleResize(e.nativeEvent, col, 'mouse');
+    };
+    // 触摸事件处理函数
+    var handleTouchStart = function handleTouchStart(e, col) {
+      // 阻止触摸事件的默认行为
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+      handleResize(e.nativeEvent, col, 'touch');
+    };
     var isGroup = isGroupColumn(pipeline.getColumns());
     return pipeline.mapColumns(makeRecursiveMapper(function (col) {
       var _a;
-
       var prevTitle = internals.safeRenderHeader(col);
       var code = col.code,
-          features = col.features,
-          width = col.width;
+        features = col.features,
+        width = col.width;
       return _extends(_extends({}, col), {
         width: (_a = columnSize[code]) !== null && _a !== void 0 ? _a : width,
         title: /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle, (features === null || features === void 0 ? void 0 : features.resizeable) !== false && (isGroup ? /*#__PURE__*/React.createElement(TableHeaderGroupCellResize, {
@@ -176,6 +179,9 @@ export function columnResize() {
           },
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
+          },
+          onTouchStart: function onTouchStart(e) {
+            return handleTouchStart(e, col);
           }
         }) : /*#__PURE__*/React.createElement(TableHeaderCellResize, {
           className: Classes.tableHeaderCellResize,
@@ -184,6 +190,9 @@ export function columnResize() {
           },
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
+          },
+          onTouchStart: function onTouchStart(e) {
+            return handleTouchStart(e, col);
           }
         }))),
         headerCellProps: mergeCellProps(col.headerCellProps, {