@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,111 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { Classes } from '../../../base/styles';
+import FilterPanel from './FilterPanel';
+import DefaultFilterContent from './DefaultFilterContent';
+import { calculatePopupRelative } from '../../../utils';
+var HEADER_ICON_OFFSET_Y = 6 + 1; //padding-top + border
+
+var HEADER_ICON_OFFSET_X = 16 + 1; //padding-left+ border
+
+var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 4px;\n  cursor: pointer;\n  transform: translateY(-50%);\n  top: 50%;\n  height: 12px; \n"])));
+
+function Filter(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 12 : _ref$size,
+      style = _ref.style,
+      className = _ref.className,
+      FilterPanelContent = _ref.FilterPanelContent,
+      filterIcon = _ref.filterIcon,
+      setFilter = _ref.setFilter,
+      setFilterModel = _ref.setFilterModel,
+      filterModel = _ref.filterModel,
+      isFilterActive = _ref.isFilterActive,
+      stopClickEventPropagation = _ref.stopClickEventPropagation;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showPanel = _React$useState2[0],
+      setShowPanel = _React$useState2[1];
+
+  var iconRef = React.useRef(null);
+
+  var hidePanel = function hidePanel() {
+    return setShowPanel(false);
+  };
+
+  var handleMouseDown = function handleMouseDown(e) {
+    e.stopPropagation(); // 阻止触发拖拽
+  };
+
+  var renderPanelContent = function renderPanelContent() {
+    if (FilterPanelContent) {
+      return /*#__PURE__*/React.createElement(FilterPanelContent, {
+        setFilter: setFilter,
+        filterModel: filterModel,
+        isFilterActive: isFilterActive,
+        hidePanel: hidePanel
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(DefaultFilterContent, {
+        setFilterModel: setFilterModel,
+        filterModel: filterModel,
+        isFilterActive: isFilterActive,
+        hidePanel: hidePanel
+      });
+    }
+  };
+
+  var renderPanel = function renderPanel(ele) {
+    var position = calculatePopupRelative(ele, document.body, {
+      x: HEADER_ICON_OFFSET_X,
+      y: HEADER_ICON_OFFSET_Y
+    });
+    var style = {
+      position: 'absolute',
+      zIndex: 1050
+    };
+    return /*#__PURE__*/React.createElement(FilterPanel, {
+      style: style,
+      onClose: hidePanel,
+      position: position,
+      filterIcon: filterIcon
+    }, renderPanelContent());
+  };
+
+  var handleIconClick = function handleIconClick(e) {
+    if (stopClickEventPropagation) {
+      e.stopPropagation();
+    }
+
+    setShowPanel(true);
+  };
+
+  return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
+    style: style,
+    className: className,
+    onMouseDown: handleMouseDown,
+    ref: iconRef
+  }, /*#__PURE__*/React.createElement("span", {
+    className: Classes.filterIcon,
+    onClick: handleIconClick
+  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "64 64 896 896",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+  }))), showPanel && /*#__PURE__*/createPortal(renderPanel(iconRef.current), document.body));
+}
+
+export default Filter;

package/es/table/pipeline/features/filter/FilterPanel.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+interface PositionType {
+    x: number;
+    y: number;
+}
+export interface FilterPanel {
+    onClose: () => any;
+    position: PositionType;
+    style?: CSSProperties;
+    filterIcon: ReactNode;
+    children?: ReactNode;
+}
+declare function FilterPanel({ style, children, position, filterIcon, onClose }: {
+    style: any;
+    children: any;
+    position: any;
+    filterIcon: any;
+    onClose: any;
+}): JSX.Element;
+export default FilterPanel;

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
+var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
+
+var useWindowEvents = function useWindowEvents(func, evens) {
+  React.useEffect(function () {
+    evens.forEach(function (event) {
+      return window.addEventListener(event, func, true);
+    });
+    return function () {
+      return evens.forEach(function (event) {
+        return window.removeEventListener(event, func, true);
+      });
+    };
+  }, [evens, func]);
+};
+
+function FilterPanel(_ref) {
+  var style = _ref.style,
+      children = _ref.children,
+      position = _ref.position,
+      filterIcon = _ref.filterIcon,
+      onClose = _ref.onClose;
+
+  var _useState = useState(position),
+      _useState2 = _slicedToArray(_useState, 2),
+      perfectPosition = _useState2[0],
+      setPerfectPosition = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      opaque = _useState4[0],
+      setOpaque = _useState4[1];
+
+  var ref = React.useRef(null);
+
+  var isContainPanel = function isContainPanel(e) {
+    return isElementInEventPath(ref.current, e);
+  };
+
+  useEffect(function () {
+    setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
+    setOpaque(true);
+  }, [position]);
+  useWindowEvents(function (e) {
+    return !isContainPanel(e) && onClose();
+  }, ['mousedown']);
+  return /*#__PURE__*/React.createElement(FilterPanelStyle, {
+    style: _extends(_extends({}, style), {
+      left: perfectPosition.x,
+      top: perfectPosition.y,
+      opacity: opaque ? 1 : 0
+    }),
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'popup-header'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: 'popup-header-icon'
+  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
+    width: 14,
+    height: 14,
+    viewBox: "64 64 896 896",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "popup-body"
+  }, children));
+}
+
+export default FilterPanel;

package/es/table/pipeline/features/filter/__test__/Filter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/table/pipeline/features/filter/__test__/Filter.test.js

@@ -0,0 +1,29 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React from 'react';
+import { mount } from 'enzyme';
+import { Classes } from '../../../../base/styles';
+import Filter from '../Filter';
+import DefaultFilterContent from '../DefaultFilterContent';
+var NAME = 'Filter';
+var setFilter = jest.fn();
+var setFilterModel = jest.fn();
+describe("".concat(NAME), function () {
+  it('render and test event', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Filter, {
+      setFilter: setFilter,
+      setFilterModel: setFilterModel,
+      filterModel: {
+        filter: []
+      },
+      stopClickEventPropagation: true,
+      isFilterActive: true
+    }));
+
+    _findInstanceProperty(wrapper).call(wrapper, ".".concat(Classes.filterIcon)).at(0).simulate('click');
+
+    _findInstanceProperty(wrapper).call(wrapper, 'div').at(0).simulate('mousedown');
+
+    expect(_findInstanceProperty(wrapper).call(wrapper, DefaultFilterContent).length).toBe(1);
+    wrapper.unmount();
+  });
+});

package/es/table/pipeline/features/filter/index.d.ts

@@ -0,0 +1,4 @@
+export { default as FilterPanel } from './FilterPanel';
+export { default as DefaultFilterContent } from './DefaultFilterContent';
+export { default as Filter } from './Filter';
+export { DEFAULT_FILTER_OPTIONS } from './util';

package/es/table/pipeline/features/filter/index.js

@@ -0,0 +1,4 @@
+export { default as FilterPanel } from './FilterPanel';
+export { default as DefaultFilterContent } from './DefaultFilterContent';
+export { default as Filter } from './Filter';
+export { DEFAULT_FILTER_OPTIONS } from './util';

package/es/table/pipeline/features/filter/util.d.ts

@@ -0,0 +1,10 @@
+declare const DEFAULT_FILTER_OPTIONS: ({
+    title: string;
+    key: string;
+    filter: (value: any) => (data: any) => any;
+} | {
+    title: string;
+    key: string;
+    filter: () => (data: any) => boolean;
+})[];
+export { DEFAULT_FILTER_OPTIONS };

package/es/table/pipeline/features/filter/util.js

@@ -0,0 +1,67 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+var DEFAULT_FILTER_OPTIONS = [{
+  title: '包含',
+  key: 'contain',
+  filter: function filter(value) {
+    return function (data) {
+      if (data == null) {
+        return false;
+      }
+
+      if (typeof data === 'number') {
+        data = data + '';
+      }
+
+      return _includesInstanceProperty(data).call(data, value);
+    };
+  }
+}, {
+  title: '不包含',
+  key: 'notContain',
+  filter: function filter(value) {
+    return function (data) {
+      if (data == null) {
+        return true;
+      }
+
+      if (typeof data === 'number') {
+        data = data + '';
+      }
+
+      return !_includesInstanceProperty(data).call(data, value);
+    };
+  }
+}, {
+  title: '等于',
+  key: 'equal',
+  filter: function filter(value) {
+    return function (data) {
+      return value !== data;
+    };
+  }
+}, {
+  title: '不等于',
+  key: 'notEqual',
+  filter: function filter(value) {
+    return function (data) {
+      return value !== data;
+    };
+  }
+}, {
+  title: '为空',
+  key: 'isNull',
+  filter: function filter() {
+    return function (data) {
+      return !data;
+    };
+  }
+}, {
+  title: '不为空',
+  key: 'notIsNull',
+  filter: function filter() {
+    return function (data) {
+      return !!data;
+    };
+  }
+}];
+export { DEFAULT_FILTER_OPTIONS };

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

@@ -0,0 +1,16 @@
+export { autoRowSpan } from './autoRowSpan';
+export { buildTree } from './buildTree';
+export { columnHover, ColumnHoverFeatureOptions } from './columnHover';
+export { columnRangeHover, ColumnRangeHoverFeatureOptions } from './columnRangeHover';
+export { multiSelect, MultiSelectFeatureOptions } from './multiSelect';
+export { rowDetail, RowDetailFeatureOptions } from './rowDetail';
+export { rowGrouping, RowGroupingFeatureOptions } from './rowGrouping';
+export { singleSelect, SingleSelectFeatureOptions } from './singleSelect';
+export { sort, SortFeatureOptions } from './sort';
+export { tips } from './tips';
+export { treeMode, TreeModeFeatureOptions, treeMetaSymbol } from './treeMode';
+export { treeSelect, TreeSelectFeatureOptions } from './treeSelect';
+export { columnDrag, ColumnDragOptions } from './columnDrag';
+export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
+export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
+export { filter, FilterFeatureOptions } from './columnFilter';

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

@@ -0,0 +1,16 @@
+export { autoRowSpan } from './autoRowSpan';
+export { buildTree } from './buildTree';
+export { columnHover } from './columnHover';
+export { columnRangeHover } from './columnRangeHover';
+export { multiSelect } from './multiSelect';
+export { rowDetail } from './rowDetail';
+export { rowGrouping } from './rowGrouping';
+export { singleSelect } from './singleSelect';
+export { sort } from './sort';
+export { tips } from './tips';
+export { treeMode, treeMetaSymbol } from './treeMode';
+export { treeSelect } from './treeSelect';
+export { columnDrag } from './columnDrag';
+export { columnResize } from './columnResizeWidth';
+export { contextMenu } from './contextMenu';
+export { filter } from './columnFilter';

package/es/table/pipeline/features/multiSelect.d.ts

@@ -0,0 +1,27 @@
+import { ArtColumn } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface MultiSelectFeatureOptions {
+    /** 非受控用法：默认选中的值 */
+    defaultValue?: string[];
+    /** 非受控用法：默认 lastKey */
+    defaultLastKey?: string;
+    /** 受控用法：当前选中的 keys */
+    value?: string[];
+    /** 受控用法：上一次操作对应的 rowKey */
+    lastKey?: string;
+    /** 受控用法：状态改变回调  */
+    onChange?: (nextValue: string[], key: string, keys: string[], action: 'check' | 'uncheck' | 'check-all' | 'uncheck-all') => void;
+    /** 复选框所在列的位置 */
+    checkboxPlacement?: 'start' | 'end';
+    /** 复选框所在列的 column 配置，可指定 width，lock, title, align, features 等属性 */
+    checkboxColumn?: Partial<ArtColumn>;
+    /** 是否高亮被选中的行 */
+    highlightRowWhenSelected?: boolean;
+    /** 判断一行中的 checkbox 是否要禁用 */
+    isDisabled?(row: any, rowIndex: number): boolean;
+    /** 点击事件的响应区域 */
+    clickArea?: 'checkbox' | 'cell' | 'row';
+    /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+}
+export declare function multiSelect(opts?: MultiSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,208 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import React from 'react';
+import { internals } from '../../internals';
+import { always, arrayUtils } from '../../utils/others';
+import { mergeCellProps } from '../../utils';
+export function multiSelect() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function multiSelectStep(pipeline) {
+    var _context;
+
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+
+    var stateKey = 'multiSelect';
+    var Checkbox = pipeline.ctx.components.Checkbox;
+
+    if (Checkbox == null) {
+      throw new Error('使用 multiSelect 之前需要设置 pipeline.ctx.components.Checkbox');
+    }
+
+    var primaryKey = pipeline.ensurePrimaryKey('multiSelect');
+    var isDisabled = (_a = opts.isDisabled) !== null && _a !== void 0 ? _a : always(false);
+    var clickArea = (_b = opts.clickArea) !== null && _b !== void 0 ? _b : 'checkbox';
+    var value = (_f = (_e = (_c = opts.value) !== null && _c !== void 0 ? _c : (_d = pipeline.getStateAtKey(stateKey)) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : opts.defaultValue) !== null && _f !== void 0 ? _f : [];
+    var lastKey = (_k = (_j = (_g = opts.lastKey) !== null && _g !== void 0 ? _g : (_h = pipeline.getStateAtKey(stateKey)) === null || _h === void 0 ? void 0 : _h.lastKey) !== null && _j !== void 0 ? _j : opts.defaultLastKey) !== null && _k !== void 0 ? _k : '';
+
+    var _onChange = function onChange(nextValue, key, keys, action) {
+      var _a;
+
+      (_a = opts.onChange) === null || _a === void 0 ? void 0 : _a.call(opts, nextValue, key, keys, action);
+      pipeline.setStateAtKey(stateKey, {
+        value: nextValue,
+        lastKey: key
+      }, {
+        keys: keys,
+        action: action
+      });
+    };
+
+    var dataSource = pipeline.getDataSource();
+    /** dataSource 中包含的所有 keys */
+
+    var fullKeySet = new _Set();
+    /** 所有有效的 keys（disable 状态为 false） */
+
+    var allKeys = [];
+    dataSource.forEach(function (row, rowIndex) {
+      var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
+      fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
+
+      if (!isDisabled(row, rowIndex)) {
+        allKeys.push(rowKey);
+      }
+    });
+    var set = new _Set(value);
+    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.createElement(Checkbox, {
+      checked: isAllChecked,
+      indeterminate: !isAllChecked && isAnyChecked,
+      onChange: function onChange(_) {
+        if (isAllChecked) {
+          _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
+        } else {
+          _onChange(arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
+        }
+      }
+    });
+
+    var checkboxColumn = _extends(_extends({
+      name: '是否选中',
+      title: defaultCheckboxColumnTitle,
+      width: 50,
+      align: 'center'
+    }, opts.checkboxColumn), {
+      getCellProps: function getCellProps(value, row, rowIndex) {
+        var _a, _b;
+
+        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);
+
+        if (fullKeySet.has(rowKey) && clickArea === 'cell') {
+          var prevChecked = set.has(rowKey);
+          var disabled = isDisabled(row, rowIndex);
+          checkboxCellProps = {
+            style: {
+              cursor: disabled ? 'not-allowed' : 'pointer'
+            },
+            onClick: disabled ? undefined : function (e) {
+              if (opts.stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              onCheckboxChange(prevChecked, rowKey, e.shiftKey);
+            }
+          };
+        }
+
+        return mergeCellProps(preCellProps, checkboxCellProps);
+      },
+      render: function render(_, row, rowIndex) {
+        var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
+        var checked = set.has(key);
+        return /*#__PURE__*/React.createElement(Checkbox, {
+          checked: checked,
+          disabled: isDisabled(row, rowIndex),
+          onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
+            var _a; // 这里要同时兼容 antd 和 fusion 的用法
+            // fusion: arg2?.nativeEvent
+            // antd: arg1.nativeEvent
+
+
+            var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
+
+            if (nativeEvent) {
+              if (opts.stopClickEventPropagation) {
+                nativeEvent.stopPropagation();
+              }
+
+              onCheckboxChange(checked, key, nativeEvent.shiftKey);
+            }
+          } : undefined
+        });
+      }
+    });
+
+    var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
+
+    var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
+
+    if (checkboxPlacement === 'start') {
+      nextColumns.unshift(checkboxColumn);
+    } else {
+      nextColumns.push(checkboxColumn);
+    }
+
+    pipeline.columns(nextColumns);
+    pipeline.appendRowPropsGetter(function (row, rowIndex) {
+      var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+      if (!fullKeySet.has(rowKey)) {
+        // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
+        return;
+      }
+
+      var style = {};
+      var className;
+      var onClick;
+      var checked = set.has(rowKey);
+
+      if (opts.highlightRowWhenSelected && checked) {
+        className = 'highlight';
+      }
+
+      if (clickArea === 'row') {
+        var disabled = isDisabled(row, rowIndex);
+
+        if (!disabled) {
+          style.cursor = 'pointer';
+
+          onClick = function onClick(e) {
+            if (opts.stopClickEventPropagation) {
+              e.stopPropagation();
+            }
+
+            onCheckboxChange(checked, rowKey, e.shiftKey);
+          };
+        }
+      }
+
+      return {
+        className: className,
+        style: style,
+        onClick: onClick
+      };
+    });
+    return pipeline;
+
+    function onCheckboxChange(prevChecked, key, batch) {
+      var batchKeys = [key];
+
+      if (batch && lastKey) {
+        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);
+      }
+
+      if (prevChecked) {
+        _onChange(arrayUtils.diff(value, batchKeys), key, batchKeys, 'uncheck');
+      } else {
+        _onChange(arrayUtils.merge(value, batchKeys), key, batchKeys, 'check');
+      }
+    }
+  };
+}

package/es/table/pipeline/features/rowDetail.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import { TablePipeline } from '../pipeline';
+interface expandIconProps extends React.SVGProps<SVGElement> {
+    expanded: boolean;
+}
+export interface RowDetailFeatureOptions {
+    /** 非受控用法：是否默认展开所有详情单元格 */
+    defaultOpenAll?: boolean;
+    /** 非受控用法：默认展开的 keys */
+    defaultOpenKeys?: string[];
+    /** 受控用法：当前展开的 keys */
+    openKeys?: string[];
+    /** 受控用法：openKeys 改变的回调 */
+    onChangeOpenKeys?(nextKeys: string[], key: string, action: 'expand' | 'collapse'): void;
+    /** 详情单元格的渲染方法 */
+    renderDetail?(row: any, rowIndex: number): ReactNode;
+    /** 是否包含详情单元格 */
+    hasDetail?(row: any, rowIndex: number): ReactNode;
+    /** 获取详情单元格所在行的 key，默认为 `(row) => row[primaryKey] + '_detail'` */
+    getDetailKey?(row: any, rowIndex: number): string;
+    /** 详情单元格 td 的额外样式 */
+    detailCellStyle?: React.CSSProperties;
+    /** 点击事件的响应区域 */
+    clickArea?: 'cell' | 'content' | 'icon';
+    /** 是否对触发展开/收拢的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+    /** 指定表格每一行元信息的记录字段 */
+    rowDetailMetaKey?: string | symbol;
+    /** 指定在哪一列设置展开按钮 */
+    expandColumnCode?: string;
+    /** 自定义展开图标 */
+    expandIcon?: (props: expandIconProps) => JSX.Element;
+}
+export declare function rowDetail(opts?: RowDetailFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};