@kdcloudjs/table 1.1.4-canary.2 → 1.1.5-canary.1

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

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colGroupExtendable = void 0;
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../../base/styles");
+
+var _templateObject;
+
+var ExtendIconStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size:12px;\n  margin-left:4px;\n"])));
+
+var stateKey = 'colExtend';
+
+var ExpandIcon = function ExpandIcon(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      size = _ref.size,
+      isExtend = _ref.isExtend;
+  return isExtend ? /*#__PURE__*/_react.default.createElement("svg", {
+    className: className,
+    width: size,
+    height: size,
+    style: style,
+    viewBox: "96 96 896 896"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M678.347087 178.347087C690.550972 166.143203 690.550972 146.356797 678.347087 134.152913C666.143203 121.949029 646.356797 121.949029 634.152913 134.152913L290.402913 477.902913C278.199029 490.106797 278.199029 509.893203 290.402913 522.097087L634.152913 865.847087C646.356797 878.050972 666.143203 878.050972 678.347087 865.847087C690.550972 853.643203 690.550972 833.856797 678.347087 821.652913L356.694175 500L678.347087 178.347087z"
+  })) : /*#__PURE__*/_react.default.createElement("svg", {
+    className: className,
+    width: size,
+    height: size,
+    style: style,
+    viewBox: "96 96 896 896"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M321.652913 178.347087C309.449029 166.143203 309.449029 146.356797 321.652913 134.152913C333.856797 121.949029 353.643203 121.949029 365.847088 134.152913L709.597087 477.902913C721.800972 490.106797 721.800972 509.893203 709.597087 522.097087L365.847088 865.847087C353.643203 878.050972 333.856797 878.050972 321.652913 865.847087C309.449029 853.643203 309.449029 833.856797 321.652913 821.652913L643.305825 500L321.652913 178.347087z"
+  }));
+};
+
+var colGroupExtendable = function colGroupExtendable() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (pipeline) {
+    var _a, _b;
+
+    var columns = pipeline.getColumns();
+    var curState = (_b = (_a = opts.extendStatus) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
+
+    var processColumns = function processColumns(columns) {
+      // 当组合列可伸缩，且处于收缩状态时，只渲染一个子列，其他不渲染
+      var toggle = function toggle(col) {
+        // 对应的 col 进行状态切换
+        var changedValue = (0, _defineProperty2.default)({}, col.code, !curState[col.code]);
+        curState[col.code] = !curState[col.code];
+        pipeline.setStateAtKey(stateKey, (0, _extends2.default)({}, curState));
+        (opts === null || opts === void 0 ? void 0 : opts.onChangeExtendStatus) && opts.onChangeExtendStatus(curState, changedValue);
+      };
+
+      var addIcon = function addIcon(col) {
+        var result = (0, _extends2.default)({}, col);
+
+        var addIconNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _internals.internals.safeRenderHeader((0, _extends2.default)({}, col)), /*#__PURE__*/_react.default.createElement(ExtendIconStyle, {
+          onClick: function onClick() {
+            toggle(col);
+          }
+        }, /*#__PURE__*/_react.default.createElement(ExpandIcon, {
+          style: {
+            userSelect: 'none',
+            marginLeft: 2,
+            flexShrink: 0,
+            cursor: "pointer",
+            verticalAlign: 'middle'
+          },
+          className: (0, _classnames.default)((0, _defineProperty2.default)({}, _styles.Classes.tableExtendIcon, true)),
+          size: 16,
+          isExtend: curState[col.code]
+        })));
+
+        result.title = addIconNode;
+        return result;
+      };
+
+      return (0, _utils.makeRecursiveMapper)(function (col) {
+        var _a;
+
+        var _ref2 = (col === null || col === void 0 ? void 0 : col.features) || {},
+            showExtendIcon = _ref2.showExtendIcon;
+
+        if (showExtendIcon === true && ((_a = col.children) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+          var _context;
+
+          col = addIcon(col);
+          curState[col.code] === false && (0, _splice.default)(_context = col.children).call(_context, 1, col.children.length);
+        }
+
+        return col;
+      })(columns);
+    };
+
+    pipeline.columns(processColumns(columns));
+    return pipeline;
+  };
+};
+
+exports.colGroupExtendable = colGroupExtendable;

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

@@ -106,9 +106,7 @@ function filter() {
 
           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;
-          result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [_internals.internals.safeRenderHeader((0, _extends2.default)((0, _extends2.default)({}, col), {
-            title: null
-          }))])), [/*#__PURE__*/_react.default.createElement(_filter2.Filter, {
+          result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [_internals.internals.safeRenderHeader((0, _extends2.default)({}, col))])), [/*#__PURE__*/_react.default.createElement(_filter2.Filter, {
             key: "filter",
             FilterPanelContent: filterPanel,
             filterIcon: colFilterIcon,

package/lib/table/pipeline/features/filter/Filter.js

@@ -25,6 +25,8 @@ var _reactDom = require("react-dom");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _styles = require("../../../base/styles");
 
 var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
@@ -37,7 +39,7 @@ var _utils = require("../../../utils");
 
 var _utils2 = require("../../../base/utils");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
 
 var _templateObject;
 
@@ -152,13 +154,21 @@ function Filter(_ref2) {
     setShowPanel(true);
   };
 
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.currentTarget.contains(e.target) && e.keyCode === _keyCode.default.ESC) {
+      setShowPanel(false);
+    }
+  };
+
   var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
   var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
     onClick: handleIconClick,
-    ref: iconWrapRef
+    onKeyDown: handleKeyDown,
+    ref: iconWrapRef,
+    tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement("span", {
     ref: iconRef,
     className: _styles.Classes.filterIcon

package/lib/table/pipeline/features/filter/FilterPanel.js

@@ -29,6 +29,8 @@ var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
 
 var _styles = require("../../../base/styles");
 
+var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -91,6 +93,13 @@ function FilterPanel(_ref) {
     !isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
     hasPopupMouseEvent.current = false;
   }, ['click']);
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.currentTarget.contains(e.target) && e.keyCode === _keyCode.default.ESC) {
+      onClose();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
     className: _styles.Classes.popup,
     style: (0, _extends2.default)((0, _extends2.default)({}, style), {
@@ -100,7 +109,9 @@ function FilterPanel(_ref) {
     }),
     onMouseDown: handleMouseEvent,
     onMouseUp: handleMouseEvent,
-    ref: ref
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    tabIndex: -1
   }, !hideFilterPopupHeader ? /*#__PURE__*/_react.default.createElement("div", {
     className: _styles.Classes.popupHeader
   }, /*#__PURE__*/_react.default.createElement("span", {

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

@@ -17,3 +17,4 @@ export { filter, FilterFeatureOptions } from './columnFilter';
 export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
 export { mergeCellHover } from './mergeCellHover';
 export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';
+export { colGroupExtendable, colGroupExtendOption } from './colGroupExtendable';

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

@@ -19,6 +19,12 @@ Object.defineProperty(exports, "buildTree", {
     return _buildTree.buildTree;
   }
 });
+Object.defineProperty(exports, "colGroupExtendable", {
+  enumerable: true,
+  get: function get() {
+    return _colGroupExtendable.colGroupExtendable;
+  }
+});
 Object.defineProperty(exports, "columnDrag", {
   enumerable: true,
   get: function get() {
@@ -170,4 +176,6 @@ var _rangeSelection = require("./rangeSelection");
 
 var _mergeCellHover = require("./mergeCellHover");
 
-var _footerDataSource = require("./footerDataSource");
+var _footerDataSource = require("./footerDataSource");
+
+var _colGroupExtendable = require("./colGroupExtendable");

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

@@ -21,6 +21,8 @@ var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-
 
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _utils = require("../../utils");
 
 var _others = require("../../utils/others");
@@ -159,14 +161,14 @@ function rangeSelection(opts) {
 
       if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
         var rowLen = pipeline.getDataSource().length;
-        var footerDataSource = pipeline.getFooterDataSource() || [];
+        var footerDataSource = pipeline.getFooterDataSource() || []; // 焦点位于可编辑的单元格内不做全选
 
-        if (columns.length && rowLen) {
+        if (columns.length && rowLen && !getElementEditable(e.target)) {
           opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
           rangeSelectedChange({
             startRow: 0,
             endRow: rowLen - 1,
-            columns: columns,
+            columns: (0, _utils.collectNodes)(columns, 'leaf-only'),
             startColumn: columns[0],
             footerRowRange: footerDataSource.length > 0 ? {
               startRow: 0,
@@ -383,4 +385,15 @@ function getFooterRowIndex(footerRowRange) {
     startRowIndex: -1,
     endRowIndex: -1
   };
+}
+
+function getElementEditable(target) {
+  var _context2;
+
+  if (!target) return;
+
+  if ((0, _includes.default)(_context2 = ['input', 'textarea']).call(_context2, target.tagName.toLowerCase())) {
+    if (target.type === 'checkbox') return;
+    return !target.disabled && !target.readOnly;
+  }
 }

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

@@ -251,7 +251,8 @@ function treeMode() {
       columns[expandColIndex] = (0, _extends3.default)((0, _extends3.default)({}, expandCol), {
         title: /*#__PURE__*/_react.default.createElement("span", {
           style: {
-            marginLeft: iconIndent + iconWidth + iconGap
+            marginLeft: iconIndent + iconWidth + iconGap,
+            display: 'flex'
           }
         }, _internals.internals.safeRenderHeader(expandCol)),
         render: render,

package/lib/table/utils/element.d.ts

@@ -39,4 +39,5 @@ export declare function keepWithinBounds(popupParent: HTMLElement, popup: HTMLEl
     x: number;
     y: number;
 };
+export declare function hasScroll(ele: HTMLElement, isHorizontal?: boolean): boolean;
 export {};

package/lib/table/utils/element.js

@@ -7,6 +7,7 @@ exports.calculatePointerRelative = calculatePointerRelative;
 exports.calculatePopupRelative = calculatePopupRelative;
 exports.getEventPath = getEventPath;
 exports.getTargetEleInEventPath = getTargetEleInEventPath;
+exports.hasScroll = hasScroll;
 exports.isElementInEventPath = isElementInEventPath;
 exports.keepWithinBounds = keepWithinBounds;
 
@@ -240,4 +241,9 @@ function keepWithinBounds(popupParent, popup, x, y, isPerfect) {
     x: x,
     y: y
   };
+}
+
+function hasScroll(ele) {
+  var isHorizontal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return isHorizontal ? ele.scrollWidth > ele.clientWidth : ele.scrollHeight > ele.clientHeight;
 }

package/lib/table/utils/keyCode.d.ts

@@ -1,4 +1,5 @@
 declare const KeyCode: {
     ENTER: number;
+    ESC: number;
 };
 export default KeyCode;

package/lib/table/utils/keyCode.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var KeyCode = {
-  ENTER: 13
+  ENTER: 13,
+  ESC: 27
 };
 var _default = KeyCode;
 exports.default = _default;

package/package.json

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