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

package/README.md

@@ -0,0 +1,11 @@
+# `@hi-ui/schema-editable-table`
+
+> TODO: description
+
+## Usage
+
+```
+const schemaEditableTable = require('@hi-ui/schema-editable-table');
+
+// TODO: DEMONSTRATE API
+```

package/lib/cjs/body/index.js

@@ -0,0 +1,110 @@
+/** @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 ahooks = require('ahooks');
+var ctx = require('../ctx.js');
+require('../container/index.js');
+var cls = require('../utils/cls.js');
+var wrapper = require('./wrapper.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);
+var BodyRow = /*#__PURE__*/React__default["default"].memo(function BodyRow(props) {
+  var _a, _b, _c, _d, _e;
+  var row = props.row;
+  var _useTableContainer = ctx$1.useTableContainer(),
+    virtualize = _useTableContainer.virtualize;
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab.propsRef;
+  var realCells = row.getVisibleCells();
+  var rowStyle = (_a = props.getRowStyle) === null || _a === void 0 ? void 0 : _a.call(props, row.original, {
+    row: row
+  });
+  var leftCells = row.getLeftVisibleCells();
+  var rightCells = row.getRightVisibleCells();
+  var centerCells = row.getCenterVisibleCells();
+  ahooks.useMount(function () {
+    var _a, _b, _c;
+    (_c = (_b = (_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.on) === null || _b === void 0 ? void 0 : _b.rowMounted) === null || _c === void 0 ? void 0 : _c.call(_b, {
+      row: row
+    });
+  });
+  return /*#__PURE__*/React__default["default"].createElement("tr", {
+    // tr
+    key: row.id,
+    style: rowStyle,
+    className: cls.cls('body-row'),
+    "data-index": row.index,
+    "data-id": row.id
+  }, leftCells.map(function (cell) {
+    return /*#__PURE__*/React__default["default"].createElement(wrapper.BodyCellWrapper, {
+      key: cell.id,
+      cell: cell,
+      fixed: true
+    });
+  }), ((_c = (_b = virtualize === null || virtualize === void 0 ? void 0 : virtualize.colPadding) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0) > 0 && /*#__PURE__*/React__default["default"].createElement("td", null), ((virtualize === null || virtualize === void 0 ? void 0 : virtualize.columns) || centerCells).map(function (cellOrVirtual) {
+    var cell = 'index' in cellOrVirtual ? realCells[cellOrVirtual.index] : cellOrVirtual;
+    // 固定列不参与中间部分渲染
+    if (cell.column.getIsPinned()) return null;
+    return /*#__PURE__*/React__default["default"].createElement(wrapper.BodyCellWrapper, {
+      key: cell.id,
+      cell: cell
+    });
+  }), ((_e = (_d = virtualize === null || virtualize === void 0 ? void 0 : virtualize.colPadding) === null || _d === void 0 ? void 0 : _d.right) !== null && _e !== void 0 ? _e : 0) > 0 && /*#__PURE__*/React__default["default"].createElement("td", null), rightCells.map(function (cell) {
+    return /*#__PURE__*/React__default["default"].createElement(wrapper.BodyCellWrapper, {
+      key: cell.id,
+      cell: cell,
+      fixed: true
+    });
+  }));
+});
+var Body = /*#__PURE__*/React__default["default"].memo(function Body(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _useEditableSchemaTab2 = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab2.table;
+  var _useTableContainer2 = ctx$1.useTableContainer(),
+    virtualize = _useTableContainer2.virtualize;
+  var _table$getRowModel = table.getRowModel(),
+    realRows = _table$getRowModel.rows;
+  return /*#__PURE__*/React__default["default"].createElement("tbody", {
+    className: cls.cls('body', props.className)
+  }, ((_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 = 'id' in rowOrVirtual ? rowOrVirtual : realRows[rowOrVirtual.index];
+    if (!row) return null;
+    return /*#__PURE__*/React__default["default"].createElement(BodyRow, {
+      key: row.id,
+      row: row,
+      getRowStyle: props.getRowStyle
+    });
+  }), ((_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
+    }
+  }))));
+});
+exports["default"] = Body;

package/lib/cjs/body/wrapper.js

@@ -0,0 +1,132 @@
+/** @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 classname = require('@hi-ui/classname');
+var reactTable = require('@tanstack/react-table');
+var schemaUtils = require('@hi-ui/schema-utils');
+var ctx = require('../ctx.js');
+var wrapper = require('../features/row-expanding/wrapper.js');
+var fixed = require('../utils/fixed.js');
+var cls = require('../utils/cls.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+// NOTE 此处注释：适配【行展开功能】时留
+// 识别到此处包装器如果打开 memo，会导致【外部命令式设置行展开状态】时，icon 的状态会展示错误
+// 原因在于，此处包装器会隔离外部设置状态后引发的重渲染，导致下面的 RowExpandingWrapper 无法重渲染
+// 最初增加 memo 的目的是提升渲染性能，此处移除时经评估和实测后并不会引起突出的损耗
+// 因此决定暂时移除 memo，后续如果引起问题再重新考虑使用订阅的方式触发下层组件重渲染
+// export const BodyCellWrapper2 = React.memo(function BodyCellWrapper(props) {
+//   return <>留一个占位</>
+// })
+function BodyCellWrapper(props) {
+  var _a, _b, _c;
+  var cell = props.cell;
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    globalStaticRef = _useEditableSchemaTab.globalStaticRef;
+  // 开启 fixed 时才去获取固定单元格的样式
+  var fixed$1 = props.fixed ? fixed.getFixedStyles(cell.column, {
+    globalStaticRef: globalStaticRef
+  }) : {};
+  var fixedClassName = (fixed$1.className || []).map(function (c) {
+    return "cell--" + c;
+  });
+  var renderCase = useRenderCase();
+  var renderCaseMap = {
+    basic: BasicEl,
+    expanding: ExpandingEl,
+    grouping: GroupingEl
+  };
+  var CaseEl = renderCaseMap[renderCase];
+  // 获取动态属性
+  var dynamicAttrs = (_b = (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.bodyCell) === null || _b === void 0 ? void 0 : _b.call(_a, {
+    cell: cell,
+    row: cell.row,
+    rowData: cell.row.$getRealtimeRowData() || {},
+    renderCase: renderCase
+  });
+  var style = schemaUtils.mergeValues(fixed$1.style, dynamicAttrs === null || dynamicAttrs === void 0 ? void 0 : dynamicAttrs.style);
+  var textAlign = (_c = cell.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.align;
+  return /*#__PURE__*/React__default["default"].createElement("td", Object.assign({}, dynamicAttrs, {
+    className: classname.cx(cls.cls.apply(void 0, ['body-cell'].concat(fixedClassName)), dynamicAttrs === null || dynamicAttrs === void 0 ? void 0 : dynamicAttrs.className),
+    style: style,
+    "data-text-align": textAlign,
+    "data-id": cell.id
+  }), /*#__PURE__*/React__default["default"].createElement(CaseEl, {
+    renderCase: renderCase,
+    cell: cell,
+    textAlign: textAlign
+  }));
+}
+function useRenderCase() {
+  var _useEditableSchemaTab2 = ctx.useEditableSchemaTableCtx(),
+    globalStaticRef = _useEditableSchemaTab2.globalStaticRef;
+  var _globalStaticRef$curr = globalStaticRef.current,
+    enableRowExpanding = _globalStaticRef$curr.enableRowExpanding,
+    enableRowGrouping = _globalStaticRef$curr.enableRowGrouping;
+  if (enableRowGrouping) return 'grouping';
+  if (enableRowExpanding) return 'expanding';
+  return 'basic';
+}
+// 普通基本元素
+function BasicEl(props) {
+  var cell = props.cell;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()));
+}
+// 可展开元素
+function ExpandingEl(props) {
+  var cell = props.cell,
+    textAlign = props.textAlign;
+  return /*#__PURE__*/React__default["default"].createElement(wrapper.RowExpandingWrapper, {
+    renderCase: props.renderCase,
+    cell: cell,
+    textAlign: textAlign
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()));
+}
+function GroupingEl(props) {
+  var cell = props.cell,
+    textAlign = props.textAlign;
+  var cellIndex = cell.column.getIndex();
+  /** 是否聚合单元格 */
+  var isAggregated = cell.getIsAggregated();
+  /** 是否无效的聚合单元格 */
+  // || undefined 是为了放在data-*属性上时 false 时不会显示
+  var isInvalidAggregatedCell = isAggregated && cellIndex !== 0 || undefined;
+  /** 是否分组单元格 */
+  var isGrouped = cell.getIsGrouped();
+  // 当前行时分组行，且当前单元格是 placeholder 单元格，则不渲染
+  /** 是否当前行是分组行 */
+  var isRowGrouped = cell.row.getIsGrouped();
+  /** 是否当前单元格是 placeholder 单元格 */
+  var isPlaceholder = cell.getIsPlaceholder();
+  var hideRealEl =
+  // 无效的聚合单元格
+  isInvalidAggregatedCell ||
+  // 分组单元格
+  isGrouped ||
+  // 当前行是分组行，且当前单元格是 placeholder 单元格
+  isRowGrouped && isPlaceholder;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hideRealEl ? null : ( /*#__PURE__*/React__default["default"].createElement(wrapper.RowExpandingWrapper, {
+    renderCase: props.renderCase,
+    cell: cell,
+    textAlign: textAlign
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))));
+}
+exports.BodyCellWrapper = BodyCellWrapper;

package/lib/cjs/cell/aggregated.js

@@ -0,0 +1,76 @@
+/** @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 lodashEs = require('lodash-es');
+var tag = require('@hi-ui/tag');
+var schemaFields = require('@hi-ui/schema-fields');
+var ctx = require('../ctx.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);
+var AggregatedCell = /*#__PURE__*/React__default["default"].memo(function AggregatedCell(props) {
+  var _a;
+  var row = props.row;
+  var groupingValue = row.groupingValue,
+    groupingColumnId = row.groupingColumnId;
+  var _useEditTableCtx = ctx.useEditableSchemaTableCtx(),
+    propsRef = _useEditTableCtx.propsRef;
+  // TODO 待增加自定义颜色配置传入
+  var color = React.useMemo(function () {
+    var name = schemaFields.ColorEnumPreset[lodashEs.random(0, schemaFields.ColorEnumPreset.length - 1)];
+    return schemaFields.colorPreset[name];
+  }, []);
+  // 如果groupingColumnId为空，则无法显示
+  if (lodashEs.isNil(groupingColumnId)) return null;
+  // 处理空值情况，识别特殊标记__EMPTY_VALUE__
+  var displayValue = groupingValue === _const.EMPTY_VALUE ? '空值' : groupingValue;
+  // 当前被分组的列，经聚合函数处理后的值
+  var groupingColumnAggregatedValue = row.$getAggregatedValue(groupingColumnId);
+  var dftEl = /*#__PURE__*/React__default["default"].createElement("span", {
+    "data-grouping-column-id": groupingColumnId,
+    className: "flex-center",
+    style: {
+      gap: 4
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(tag.Tag, {
+    color: color.fore,
+    background: color.back
+  }, displayValue)), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      fontSize: 12
+    }
+  }, "\u5171 ", groupingColumnAggregatedValue, " \u6761"));
+  // 自定义【有效聚合单元格】渲染逻辑
+  if ((_a = propsRef.current.customCell) === null || _a === void 0 ? void 0 : _a.renderAggregatedCell) {
+    return propsRef.current.customCell.renderAggregatedCell(Object.assign(Object.assign({}, props), {
+      groupingValue: groupingValue,
+      groupingColumnId: groupingColumnId,
+      groupingColumnAggregatedValue: groupingColumnAggregatedValue,
+      displayValue: displayValue,
+      dftEl: dftEl,
+      color: color
+    }));
+  }
+  return dftEl;
+}
+// propsAreEqual暂时置空
+);
+
+exports["default"] = AggregatedCell;

package/lib/cjs/cell/dependency.js

@@ -0,0 +1,97 @@
+/** @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 schemaUtils = require('@hi-ui/schema-utils');
+var schemaFields = require('@hi-ui/schema-fields');
+var schemaForm = require('@hi-ui/schema-form');
+function execCellDepsProcess(ctx) {
+  // 直接先处理值依赖
+  execCellValueDepFn(ctx);
+  // 再处理 Props 依赖
+  execCellPropsDepFn(ctx);
+}
+/**
+ * 处理表格单元格中的值依赖逻辑
+ */
+function execCellValueDepFn(ctx) {
+  var _rowIndex, _tableValue$mergeSile;
+  var fieldProps = ctx.fieldProps;
+  var field = fieldProps.field;
+  // 检查字段是否有依赖配置
+  if (!field.dependency) return; // 没有配置依赖，直接退出
+  var _field$dependency = field.dependency,
+    deps = _field$dependency.deps,
+    depValueFn = _field$dependency.value;
+  if (!deps.length || !depValueFn) return; // 没有依赖或依赖函数，直接退出
+  var rowIndex = ctx.rowIndex,
+    changedDepValues = ctx.changedDepValues;
+  var currentDepValues = changedDepValues[rowIndex];
+  // 依赖值不存在，直接退出
+  if (!currentDepValues) return;
+  // 检查依赖的字段是否存在于当前变更的值上
+  // NOTE 此处仅检测了第一层的属性，暂时不支持嵌套属性的情况
+  var hasChanged = deps.some(function (name) {
+    return name in (currentDepValues || {});
+  });
+  // 依赖字段变更，才需要执行 depValueFn
+  if (!hasChanged) return;
+  var rowData = ctx.rowData,
+    dataKey = ctx.dataKey,
+    changedFieldNames = ctx.changedFieldNames,
+    tableValue = ctx.tableValue;
+  var nextValue = depValueFn(currentDepValues, {
+    allValues: rowData,
+    changedDepKeys: changedFieldNames || [],
+    rowIndex: rowIndex,
+    dataKey: dataKey,
+    formRef: {
+      current: null
+    },
+    // TODO 待更新实现
+    batchUpdate: schemaFields.BatchDepUpdate.update
+  });
+  var finalValue = schemaFields.BatchDepUpdate.getValues(dataKey, nextValue);
+  var _a = finalValue,
+    _b = dataKey,
+    fieldValue = _a[_b],
+    restDepValues = tslib.__rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
+  // 关键赋值
+  fieldProps.value = fieldValue;
+  fieldProps.ctx.formBinding.value = fieldValue;
+  // 还要合并到 TableValue 上，但是不再触发订阅
+  tableValue.mergeSilently((_tableValue$mergeSile = {}, _tableValue$mergeSile[rowIndex] = (_rowIndex = {}, _rowIndex[dataKey] = nextValue, _rowIndex), _tableValue$mergeSile));
+  // 存在批量更新的值时，一并写到 TableValue 上，并且触发订阅
+  schemaUtils.Schedular.nextMicro(function () {
+    var _tableValue$mergeValu;
+    tableValue.mergeValue((_tableValue$mergeValu = {}, _tableValue$mergeValu[rowIndex] = restDepValues, _tableValue$mergeValu));
+  });
+}
+/**
+ * 处理表格单元格中的 Props 依赖逻辑
+ */
+function execCellPropsDepFn(ctx) {
+  var nextField = schemaForm.generateDepPropsField(ctx.fieldProps.field, {
+    formRef: {},
+    depValues: ctx.changedDepValues[ctx.rowIndex],
+    changedDepKeys: ctx.changedFieldNames || [],
+    allValues: ctx.rowData
+  });
+  ctx.fieldProps.field = nextField;
+  ctx.fieldProps.ctx.field = nextField;
+}
+exports.execCellDepsProcess = execCellDepsProcess;
+exports.execCellPropsDepFn = execCellPropsDepFn;
+exports.execCellValueDepFn = execCellValueDepFn;

package/lib/cjs/cell/editing.js

@@ -0,0 +1,89 @@
+/** @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 ahooks = require('ahooks');
+var lodashEs = require('lodash-es');
+var schemaUtils = require('@hi-ui/schema-utils');
+var ctx = require('../ctx.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function useEditingCellFormBinding(props) {
+  var _a;
+  var getValue = props.getValue,
+    index = props.row.index,
+    id = props.column.id,
+    table = props.table;
+  var _useEditTableCtx = ctx.useEditableSchemaTableCtx(),
+    globalStaticRef = _useEditTableCtx.globalStaticRef;
+  var enableRowEdit = globalStaticRef.current.enableRowEdit;
+  var initialValue = getValue();
+  var valueRef = React__default["default"].useRef(initialValue);
+  valueRef.current = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.getCellValue(index, id);
+  var forceUpdate = ahooks.useUpdate();
+  var updateValue = ahooks.useMemoizedFn(function (nextValue) {
+    var _a;
+    (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.updateData(index, id, nextValue);
+    // 行编辑模式下，强制更新
+    if (enableRowEdit) forceUpdate();
+  }
+  // 移除了此处的防抖函数，原因有2
+  // 1. useDebounceFn 内部会在组件卸载时取消，导致 updateValue 失效，无法更新值
+  // 2. 大部分内置组件已在更上游处理防抖逻辑，此处没有必要再额外处理了
+  );
+
+  var handleChange = function handleChange(eventOrValue) {
+    var nextValue = normalizeValueFromChange(eventOrValue);
+    valueRef.current = nextValue;
+    updateValue(nextValue);
+  };
+  var handleBlur = function handleBlur() {
+    // 行编辑模式下，失焦时保持激活状态，不更新值
+    if (enableRowEdit) return;
+    // 延迟一小会儿再更新值
+    schemaUtils.Schedular.nextMicro(function () {
+      updateValue(valueRef.current);
+    });
+  };
+  return {
+    // NOTE 此处value已被废弃，会在外部由真实的值覆盖
+    value: valueRef.current,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    invalid: undefined
+  };
+}
+// fork from https://github.com/XiaoMi/hiui/blob/master/packages/ui/form/src/use-form.ts#L303
+function normalizeValueFromChange(eventOrValue) {
+  if (!lodashEs.isObjectLike(eventOrValue) || !eventOrValue.target) {
+    return eventOrValue;
+  }
+  var event = eventOrValue;
+  // @see https://reactjs.org/docs/events.html#event-pooling
+  if (lodashEs.isFunction(event.persist)) {
+    event.persist();
+  }
+  var target = event.target || event.currentTarget;
+  // 待验证 // 待支持更多类型
+  if (target.type === 'checkbox') return target.checked;
+  if (target.type === 'radio') return target.checked;
+  return target.value;
+}
+exports.normalizeValueFromChange = normalizeValueFromChange;
+exports.useEditingCellFormBinding = useEditingCellFormBinding;

package/lib/cjs/cell/footer.js

@@ -0,0 +1,64 @@
+/** @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 lodashEs = require('lodash-es');
+var useSubscription = require('@hi-ui/use-subscription');
+var schemaUtils = require('@hi-ui/schema-utils');
+var ctx = require('../ctx.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var FooterCell = /*#__PURE__*/React__default["default"].memo(function FooterCell(props) {
+  var _NumberUtil$chain;
+  var _a;
+  var field = (_a = props.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.field;
+  var _b = ctx.useEditableSchemaTableCtx(),
+    table = _b.table,
+    subscription = _b.subscription,
+    globalStaticRef = _b.globalStaticRef,
+    restCtx = tslib.__rest(_b, ["table", "subscription", "globalStaticRef"]);
+  var invalidField = !field;
+  var isNotNumber = (field === null || field === void 0 ? void 0 : field.valueType) !== 'number';
+  var isNotAvailable = invalidField || isNotNumber;
+  // 用于在任意字段变更时触发重渲染，因此不关心返回结果
+  useSubscription.useSubscribeList(subscription, undefined, {
+    // field 不存在或者字段类型不是 number 时，不创建订阅
+    skipSubscribe: isNotAvailable
+  });
+  // 有效字段，且开启了筛选，则订阅筛选状态
+  // 不关心实际的筛选结果，仅用来触发更新
+  var filterState = globalStaticRef.current.enableFilter && !isNotAvailable ? restCtx.filterState : useSubscription.NOOP_SUBSCRIPTION;
+  useSubscription.useSubscribe(filterState, undefined);
+  // 首列固定展示 // TODO 待支持动态首列配置
+  var colIndex = props.column.getIndex();
+  var _enableRowSelection = globalStaticRef.current.enableRowSelection;
+  if (colIndex === 0 && !_enableRowSelection) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "\u5408\u8BA1");
+  if (isNotAvailable) return null;
+  var tableData = subscription.getValue();
+  var filteredRows = table.getFilteredRowModel().flatRows;
+  var fieldData = filteredRows.map(function (row) {
+    return lodashEs.get(tableData, [row.index, field.dataIndex]);
+  });
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (_NumberUtil$chain = schemaUtils.NumberUtil.chain(0)).add.apply(_NumberUtil$chain, fieldData).format(2));
+}
+// propsAreEqual暂时置空
+);
+
+exports["default"] = FooterCell;

package/lib/cjs/cell/header.js

@@ -0,0 +1,76 @@
+/** @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 EllipsisTooltip = require('@hi-ui/ellipsis-tooltip');
+var ctx = require('../ctx.js');
+var cls = require('../utils/cls.js');
+var _const = require('../const.js');
+require('lodash-es');
+var getActions = require('../features/header-actions/get-actions.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var EllipsisTooltip__default = /*#__PURE__*/_interopDefaultCompat(EllipsisTooltip);
+var HeaderCell = /*#__PURE__*/React__default["default"].memo(function HeaderCell(props) {
+  var _a, _b, _c, _d, _e;
+  var column = props.column,
+    table = props.table;
+  var field = (_a = props.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.field;
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    globalStaticRef = _useEditableSchemaTab.globalStaticRef;
+  var invalidField = !field;
+  if (invalidField) return null;
+  // 文本对齐
+  var textAlign = (_b = props.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.align;
+  // 系统列仅包含展示功能
+  if (_const.isSystemCol(column.id)) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: cls.cls('header-cell-content'),
+      "data-text-align": textAlign
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: cls.cls('header-cell-content-title')
+    }, field.title));
+  }
+  // 表头操作
+  var actions = getActions.getHeaderActions({
+    column: column,
+    table: table,
+    field: field,
+    globalStaticRef: globalStaticRef
+  });
+  var hoverOnly = ((_d = (_c = field.control) === null || _c === void 0 ? void 0 : _c.hoverOnly) !== null && _d !== void 0 ? _d : globalStaticRef.current.enableHeaderActionHoverOnly) || undefined;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cls.cls('header-cell-content'),
+    "data-text-align": textAlign,
+    "data-has-children": field.children ? true : undefined,
+    "data-has-filter": (actions === null || actions === void 0 ? void 0 : actions.filterAvailable) || undefined,
+    "data-has-sorter": (actions === null || actions === void 0 ? void 0 : actions.sorterAvailable) || undefined,
+    "data-actions-count": (actions === null || actions === void 0 ? void 0 : actions.elements.length) || undefined,
+    "data-is-required": (_e = field.control) === null || _e === void 0 ? void 0 : _e.required,
+    "data-hover-only": hoverOnly
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cls.cls('header-cell-content-title')
+  }, /*#__PURE__*/React__default["default"].createElement(EllipsisTooltip__default["default"], null, field.title)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cls.cls('header-cell-content-actions')
+  }, actions === null || actions === void 0 ? void 0 : actions.elements));
+}
+// propsAreEqual暂时置空
+);
+
+exports["default"] = HeaderCell;