@hi-ui/schema-editable-table 4.0.0-experimental.1

package/lib/cjs/features/row-operation/buttons.js

@@ -0,0 +1,91 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var useSubscription = require('@hi-ui/use-subscription');
+var schemaActionTrigger = require('@hi-ui/schema-action-trigger');
+var ctx = require('../../ctx.js');
+var actions = require('../row-edit/actions.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/** 【操作按钮组】组件 */
+function OpButtons(props) {
+  var _a;
+  var _b = ctx.useEditableSchemaTableCtx(),
+    subscription = _b.subscription,
+    rowActions = _b.rowActions,
+    restCxt = tslib.__rest(_b, ["subscription", "rowActions"]);
+  var row = props.row,
+    rowEdit = props.rowEdit;
+  // 订阅行编辑状态
+  useSubscription.useSubscribe(rowActions.editingSubscription || useSubscription.NOOP_SUBSCRIPTION, [row.index.toString()]);
+  var rowData = subscription.getValue()[row.index];
+  var isEditing = rowActions.isRowEditing(row.index);
+  // 获取编辑按钮 - 现在在组件内部调用，符合Hook规则
+  var editButtons = rowEdit ? actions.createEditButtons(rowActions, row.index) : null;
+  // 扩展ctx，添加行编辑相关功能
+  var ctx$1 = Object.assign(Object.assign({}, restCxt.exposeCtxValueRef.current()), {
+    row: row,
+    rowIndex: row.index,
+    rowEdit: {
+      isEditing: false,
+      buttons: {
+        edit: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null),
+        save: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null),
+        cancel: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null)
+      }
+    }
+  });
+  // 如果启用了行编辑，添加行编辑相关上下文
+  if (rowEdit && editButtons) {
+    ctx$1.rowEdit = {
+      isEditing: isEditing,
+      buttons: editButtons
+    };
+  }
+  // 优先使用自定义渲染
+  if (props.render) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, props.render(rowData, ctx$1));
+  }
+  // 默认渲染逻辑
+  if (rowEdit && editButtons) {
+    // 如果行处于编辑状态，显示保存和取消按钮
+    if (isEditing) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, editButtons.save, editButtons.cancel);
+    }
+    // 否则显示编辑按钮
+    else {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, editButtons === null || editButtons === void 0 ? void 0 : editButtons.edit);
+    }
+  }
+  // 否则显示普通操作按钮
+  if (!((_a = props.buttons) === null || _a === void 0 ? void 0 : _a.length)) {
+    // 如果没有按钮，则不显示任何内容
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement(schemaActionTrigger.Actions, {
+    actions: props.buttons,
+    data: rowData,
+    ctx: ctx$1,
+    maxCount: props.maxCount
+  });
+}
+exports.OpButtons = OpButtons;

package/lib/cjs/features/row-operation/cell.js

@@ -0,0 +1,43 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var ctx = require('../../ctx.js');
+var cls = require('../../utils/cls.js');
+var buttons = require('./buttons.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function OperationBodyCell(props) {
+  var row = props.row;
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab.propsRef;
+  var rowOperation = propsRef.current.rowOperation;
+  if (!rowOperation) return null;
+  // 下面的 data-key={width} 仅仅是为了避开定义未使用的变量检查
+  var width = rowOperation.width,
+    restOpts = tslib.__rest(rowOperation, ["width"]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cls.cls('operation-buttons')
+  }, /*#__PURE__*/React__default["default"].createElement(buttons.OpButtons, Object.assign({
+    "data-key": width,
+    row: row
+  }, restOpts)));
+}
+exports.OperationBodyCell = OperationBodyCell;

package/lib/cjs/features/row-operation/index.js

@@ -0,0 +1,21 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var wrapper = require('./wrapper.js');
+var RowOperation = {
+  Header: wrapper.OperationHeader,
+  Body: wrapper.OperationBody,
+  Footer: wrapper.OperationFooter
+};
+exports.RowOperation = RowOperation;

package/lib/cjs/features/row-operation/wrapper.js

@@ -0,0 +1,114 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var cls = require('../../utils/cls.js');
+var ctx = require('../../ctx.js');
+require('../../container/index.js');
+var _const = require('../../const.js');
+var cell = require('./cell.js');
+var ctx$1 = require('../../container/ctx.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function OperationTable(props) {
+  var _a;
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab.propsRef;
+  var width = ((_a = propsRef.current.rowOperation) === null || _a === void 0 ? void 0 : _a.width) || _const.ROW_OPERATION_COL_WIDTH;
+  return /*#__PURE__*/React__default["default"].createElement("table", {
+    // table
+    className: cls.cls('mock-operation'),
+    "data-is-operation": true,
+    style: {
+      width: width,
+      flexBasis: width
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("colgroup", null, /*#__PURE__*/React__default["default"].createElement("col", {
+    style: {
+      width: width,
+      minWidth: width
+    }
+  })), props.children);
+}
+function OperationHeader() {
+  var _a, _b;
+  var _useEditableSchemaTab2 = ctx.useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab2.propsRef;
+  var cellText = (_b = (_a = propsRef.current.rowOperation) === null || _a === void 0 ? void 0 : _a.headerText) !== null && _b !== void 0 ? _b : '操作';
+  return /*#__PURE__*/React__default["default"].createElement(OperationTable, null, /*#__PURE__*/React__default["default"].createElement("thead", {
+    className: cls.cls('header')
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('header-row')
+  }, /*#__PURE__*/React__default["default"].createElement("th", {
+    className: cls.cls('header-cell'),
+    "data-text-align": "center"
+  }, cellText))));
+}
+function OperationBody() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _useEditableSchemaTab3 = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab3.table;
+  var _useTableContainer = ctx$1.useTableContainer(),
+    virtualize = _useTableContainer.virtualize;
+  var _table$getRowModel = table.getRowModel(),
+    realRows = _table$getRowModel.rows;
+  return /*#__PURE__*/React__default["default"].createElement(OperationTable, null, /*#__PURE__*/React__default["default"].createElement("tbody", {
+    className: cls.cls('body')
+  }, ((_b = (_a = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0) > 0 && ( /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('body-row', 'virtual-spacer', 'virtual-spacer-top')
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      height: (_d = (_c = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _c === void 0 ? void 0 : _c.top) !== null && _d !== void 0 ? _d : 0
+    }
+  }))), ((virtualize === null || virtualize === void 0 ? void 0 : virtualize.rows) || realRows).map(function (rowOrVirtual) {
+    var row = 'index' in rowOrVirtual ? realRows[rowOrVirtual.index] : rowOrVirtual;
+    if (!row) return null;
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      key: row.id,
+      className: cls.cls('body-row'),
+      "data-index": row.index,
+      "data-id": row.id
+    }, /*#__PURE__*/React__default["default"].createElement("td", {
+      className: cls.cls('body-cell'),
+      "data-text-align": "center"
+    }, /*#__PURE__*/React__default["default"].createElement(cell.OperationBodyCell, {
+      row: row
+    })));
+  }), ((_f = (_e = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _e === void 0 ? void 0 : _e.bottom) !== null && _f !== void 0 ? _f : 0) > 0 && ( /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('body-row', 'virtual-spacer', 'virtual-spacer-bottom')
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      height: (_h = (_g = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _g === void 0 ? void 0 : _g.bottom) !== null && _h !== void 0 ? _h : 0
+    }
+  })))));
+}
+// 暂时用不上，预留位置待扩展
+function OperationFooter() {
+  return /*#__PURE__*/React__default["default"].createElement(OperationTable, null, /*#__PURE__*/React__default["default"].createElement("tfoot", {
+    className: cls.cls('footer')
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('footer-row')
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
+    className: cls.cls('footer-cell'),
+    "data-text-align": "center"
+  }))));
+}
+exports.OperationBody = OperationBody;
+exports.OperationFooter = OperationFooter;
+exports.OperationHeader = OperationHeader;

package/lib/cjs/features/row-selection/cell.js

@@ -0,0 +1,114 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var checkbox = require('@hi-ui/checkbox');
+var radio = require('@hi-ui/radio');
+var schemaUtils = require('@hi-ui/schema-utils');
+var ctx = require('../../ctx.js');
+var cls = require('../../utils/cls.js');
+var _const = require('./const.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function SelectionHeaderCell() {
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table,
+    propsRef = _useEditableSchemaTab.propsRef;
+  // // 经过性能优化，已移除额外订阅
+  // // 此时保留，反而会导致本组件重复重渲染
+  // // 保留此处注释，用以后续调整
+  // const { rowSelectionState } = useEditableSchemaTableCtx()
+  // useSubscribe(rowSelectionState)
+  var rowSelection = propsRef.current.rowSelection;
+  if (!rowSelection) return null; // 其实走不到，仅用来收窄类型
+  var _rowSelection$type = rowSelection.type,
+    type = _rowSelection$type === void 0 ? _const.dftSelectionType : _rowSelection$type;
+  /** 修复 <th> 元素嵌套在另一个 <th> 元素中，违反 HTML 规范的问题 */
+  if (type === 'radio') return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cls.cls('header-cell')
+  });
+  // NOTE: 表头全选更改为仅选择当页数据
+  var checked = table.getIsAllPageRowsSelected();
+  var indeterminate = table.getIsSomePageRowsSelected();
+  var handleChange = function handleCheckAllChange(event) {
+    var innerHandler = table.getToggleAllPageRowsSelectedHandler();
+    innerHandler(event);
+    // 稍微延迟一下，等待内部状态完成更新
+    schemaUtils.Schedular.nextMicro(function () {
+      var _a;
+      var checked = table.getIsAllPageRowsSelected();
+      var indeterminate = table.getIsSomePageRowsSelected();
+      (_a = rowSelection.onCheckAllChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, {
+        checked: checked,
+        indeterminate: indeterminate
+      });
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(checkbox.Checkbox
+  // Checkbox
+  , {
+    // Checkbox
+    checked: checked,
+    indeterminate: indeterminate,
+    onChange: handleChange
+  });
+}
+function SelectionBodyCell(props) {
+  var row = props.row;
+  var _useEditableSchemaTab2 = ctx.useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab2.propsRef;
+  var rowSelection = propsRef.current.rowSelection;
+  var _ref = rowSelection || {},
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? _const.dftSelectionType : _ref$type;
+  // // 经过性能优化，已移除额外订阅
+  // // 此时保留，反而会导致本组件重复重渲染
+  // // 保留此处注释，用以后续调整
+  // const { rowSelectionState } = useEditableSchemaTableCtx<TData>()
+  // const { enableDynamicRowSelection } = rowSelection || {}
+  // useSubscribe(
+  //   rowSelectionState,
+  //   // 如果启用了动态行可选状态支持，则不订阅(相当于订阅全部变化)
+  //   enableDynamicRowSelection ? undefined : [row.id]
+  // )
+  if (!rowSelection) return null; // 其实走不到，仅用来收窄类型
+  var SelectComp = type === 'radio' ? radio.Radio : checkbox.Checkbox;
+  function handleChange(event) {
+    var innerHandler = row.getToggleSelectedHandler();
+    innerHandler(event);
+    // 上面是行本身的变化处理逻辑
+    // 下面是存在父行的情况，需要处理父行的选中状态
+    row.$afterToggleSelected();
+  }
+  // 根据组件类型决定是否传递 indeterminate 属性
+  var commonProps = {
+    checked: row.getIsSelected(),
+    onChange: handleChange,
+    disabled: !row.getCanSelect()
+  };
+  // 只有 Checkbox 支持 indeterminate 属性
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React__default["default"].createElement(SelectComp, Object.assign({}, commonProps, {
+      indeterminate: row.getIsSomeSelected()
+    }));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(SelectComp, Object.assign({}, commonProps));
+}
+exports.SelectionBodyCell = SelectionBodyCell;
+exports.SelectionHeaderCell = SelectionHeaderCell;

package/lib/cjs/features/row-selection/const.js

@@ -0,0 +1,16 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var dftSelectionType = 'checkbox';
+exports.dftSelectionType = dftSelectionType;

package/lib/cjs/features/row-selection/hooks/index.js

@@ -0,0 +1,29 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var useSubscription = require('@hi-ui/use-subscription');
+require('ahooks');
+require('lodash-es');
+require('react');
+require('../../../utils/cls.js');
+require('@tanstack/react-table');
+
+// 暂时没有太多逻辑，仅在此处包装
+function useRowSelectionState() {
+  var rowSelectionState = useSubscription.useSubscription({});
+  return {
+    rowSelectionState: rowSelectionState
+  };
+}
+exports.useRowSelectionState = useRowSelectionState;

package/lib/cjs/features/row-selection/hooks/use-click-select.js

@@ -0,0 +1,70 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var ctx = require('../../../ctx.js');
+var cls = require('../../../utils/cls.js');
+require('lodash-es');
+require('@tanstack/react-table');
+require('ahooks');
+var useClickSelect = function useClickSelect() {
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    tableContainerRef = _useEditableSchemaTab.tableContainerRef,
+    propsRef = _useEditableSchemaTab.propsRef,
+    table = _useEditableSchemaTab.table;
+  React.useEffect(function () {
+    var _a, _b;
+    // 只在开启点击行选择时启用
+    if (!((_b = (_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.rowSelection) === null || _b === void 0 ? void 0 : _b.enableClickSelect)) return;
+    if (!tableContainerRef.current) return;
+    var container = tableContainerRef.current;
+    var selector = "." + cls.cls('body-wrapper') + " ." + cls.cls('main-content');
+    var tableEl = container.querySelector(selector);
+    if (!tableEl) return;
+    var handleClick = function handleClick(event) {
+      var _a, _b, _c;
+      var target = event.target;
+      // TODO 此处还能还有其他的待排除元素，待识别后更新
+      // 排除 input 元素的点击
+      if (((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'INPUT') return;
+      // 排除 svg 元素的点击
+      if (((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'SVG') return;
+      if (((_c = target.tagName) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === 'PATH') return;
+      // 排除 HiUI 的表单项
+      if (target.className.includes('hi')) {
+        //  Select 等使用 MockInput 的组件
+        if (target.className.includes('mock-input')) return;
+        // 日期选择器组件
+        if (target.className.includes('date-picker')) return;
+        // 多选选择器组件
+        if (target.className.includes('tag-input-mock')) return;
+      }
+      // 查找当前点击的行元素
+      var rowEl = target.closest('tr[data-id]');
+      if (!rowEl) return;
+      var rowId = rowEl.getAttribute('data-id');
+      if (!rowId) return;
+      // 获取行实例并触发选中
+      var row = table.getRow(rowId);
+      if (!row) return;
+      row.toggleSelected();
+      row.$afterToggleSelected();
+    };
+    tableEl.addEventListener('click', handleClick);
+    return function () {
+      tableEl.removeEventListener('click', handleClick);
+    };
+  }, [tableContainerRef, propsRef, table]);
+};
+exports.useClickSelect = useClickSelect;

package/lib/cjs/features/row-selection/hooks/use-opts.js

@@ -0,0 +1,120 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var ahooks = require('ahooks');
+var lodashEs = require('lodash-es');
+function useRowSelectionOpts(ctx) {
+  var rowSelection = ctx.rowSelection,
+    innerRef = ctx.innerRef;
+  // 挂载时将默认选中的行同步至内部状态
+  ahooks.useMount(function () {
+    if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.dftSelectedRowKeys) {
+      var globalActionsRef = innerRef.current.globalActionsRef;
+      var keys = rowSelection.dftSelectedRowKeys;
+      globalActionsRef.current.setSelectedRowKeys(keys);
+    }
+  });
+  return {
+    // 启用行选择
+    enableRowSelection: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableRowSelection) ? function enableRowSelection(row) {
+      var _a;
+      var tableValue = innerRef.current.subscription;
+      var rowData = tableValue.getValue()[row.index];
+      return (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableRowSelection) === null || _a === void 0 ? void 0 : _a.call(rowSelection, rowData, {
+        row: row
+      });
+    } : true,
+    // 启用子行选择
+    enableSubRowSelection: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableSubRowSelection) ? function enableSubRowSelection(row) {
+      var _a;
+      var tableValue = innerRef.current.subscription;
+      var rowData = tableValue.getValue()[row.index];
+      return (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableSubRowSelection) === null || _a === void 0 ? void 0 : _a.call(rowSelection, rowData, {
+        row: row
+      });
+    } : true,
+    // 单选模式下只允许选择一行
+    enableMultiRowSelection: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) !== 'radio',
+    // 选中状态变化时触发onChange
+    onRowSelectionChange: function onRowSelectionChange(updater) {
+      var _a;
+      if (!rowSelection) return;
+      var _innerRef$current = innerRef.current,
+        table = _innerRef$current.table,
+        rowSelectionState = _innerRef$current.rowSelectionState;
+      var state = table.getState().rowSelection;
+      var newState = typeof updater === 'function' ? updater(state) : updater;
+      // 如果行选择状态没有变化，则不更新
+      if (lodashEs.isEqual(state, newState)) return;
+      // 先同步到订阅上
+      var preState = rowSelectionState.getValue();
+      // #region generate next state
+      var nextState = {};
+      // 请勿感到迷惑，此处把 preState 的 key 全部拿出来设置一遍值
+      // 是因为取消选择时 newState 里是一个空对象，而不是 {[key]: false}，会导致状态丢失
+      for (var key in preState) {
+        nextState[key] = !!newState[key];
+      }
+      // 这里则是再加一步保险，确保 newState 的 key 全部设置一遍值
+      // 其实不加也无所谓，因为 newState 的 key 是来自 preState 的
+      for (var _key in newState) {
+        nextState[_key] = !!newState[_key];
+      }
+      // #endregion
+      rowSelectionState.mergeValue(nextState);
+      // 构造数据回传给外部
+      var _table$$getRowSelecti = table.$getRowSelection(newState),
+        selectedRows = _table$$getRowSelecti.selectedRows,
+        selectedRowKeys = _table$$getRowSelecti.selectedRowKeys,
+        selectedRowEntries = _table$$getRowSelecti.selectedRowEntries;
+      // 更新选中行原始数据的缓存，内部会做判断，仅在启用 preserveSelectedRows 时才更新
+      table.$updateSelectedRowsCache(selectedRowEntries);
+      // 最后再更新内部状态 // 最后再触发重渲染
+      table.setState(function (state) {
+        return Object.assign(Object.assign({}, state), {
+          rowSelection: newState
+        });
+      });
+      (_a = rowSelection.onChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, {
+        keys: selectedRowKeys,
+        rows: selectedRows
+      });
+    }
+  };
+}
+/** 如果开启了后端分页，并且没有配置 preserveSelectedRows，则需要在分页变化时清空选中状态 */
+function resetRowSelectionAfterPaginationChange(ctx) {
+  var _a;
+  var globalStaticRef = ctx.innerRef.current.globalStaticRef;
+  var enableAsyncData = globalStaticRef.current.enableAsyncData;
+  // 如果开启了后端分页，并且没有配置preserveSelectedRows，则需要清空选中状态
+  if (enableAsyncData) {
+    var propsRef = ctx.innerRef.current.propsRef;
+    var preserveSelectedRows = (_a = propsRef.current.rowSelection) === null || _a === void 0 ? void 0 : _a.preserveSelectedRows;
+    // 并且没有配置 preserveSelectedRows
+    if (!preserveSelectedRows) {
+      // 并且页数发生变化
+      var state = ctx.state,
+        newState = ctx.newState;
+      var hasPageIndexChanged = state.pageIndex !== newState.pageIndex;
+      // 则清空选中状态
+      if (hasPageIndexChanged) {
+        var table = ctx.innerRef.current.table;
+        table.setRowSelection({});
+      }
+    }
+  }
+}
+exports.resetRowSelectionAfterPaginationChange = resetRowSelectionAfterPaginationChange;
+exports.useRowSelectionOpts = useRowSelectionOpts;

package/lib/cjs/features/row-selection/hooks/use-set-selected-row-keys.js

@@ -0,0 +1,48 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var lodashEs = require('lodash-es');
+function useSetSelectedRowKeys(ctx) {
+  var innerRef = ctx.innerRef;
+  var setSelectedRowKeys = React.useCallback(function setSelectedRowKeys(keys) {
+    var table = innerRef.current.table;
+    // 传入 null 时，清空所有选中的行
+    if (keys === null) {
+      table.setRowSelection({});
+      return;
+    }
+    var nextKeys = Array.isArray(keys) ? keys :
+    // 如果 keys 是函数，则取出当前选中的全部行的ID
+    keys(Object.keys(table.getState().rowSelection));
+    // 函数返回 null 也可清空所有选中的行
+    if (nextKeys === null) {
+      table.setRowSelection({});
+      return;
+    }
+    // 只要不是 undefined 或者 null 都认为是有效的
+    var validKeys = nextKeys.filter(function (key) {
+      return !lodashEs.isNil(key);
+    });
+    if (validKeys.length === 0) return;
+    // 有效的key全部认为要被选中
+    var newState = Object.fromEntries(validKeys.map(function (key) {
+      return [key, true];
+    }));
+    // 设置行选择状态
+    table.setRowSelection(newState);
+  }, [innerRef]);
+  return setSelectedRowKeys;
+}
+exports.useSetSelectedRowKeys = useSetSelectedRowKeys;