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

package/lib/esm/body/wrapper.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.
+ */
+import React from 'react';
+import { cx } from '@hi-ui/classname';
+import { flexRender } from '@tanstack/react-table';
+import { mergeValues } from '@hi-ui/schema-utils';
+import { useEditableSchemaTableCtx } from '../ctx.js';
+import { RowExpandingWrapper } from '../features/row-expanding/wrapper.js';
+import { getFixedStyles } from '../utils/fixed.js';
+import { cls } from '../utils/cls.js';
+
+// 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 = useEditableSchemaTableCtx(),
+    globalStaticRef = _useEditableSchemaTab.globalStaticRef;
+  // 开启 fixed 时才去获取固定单元格的样式
+  var fixed = props.fixed ? getFixedStyles(cell.column, {
+    globalStaticRef: globalStaticRef
+  }) : {};
+  var fixedClassName = (fixed.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 = mergeValues(fixed.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.createElement("td", Object.assign({}, dynamicAttrs, {
+    className: cx(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.createElement(CaseEl, {
+    renderCase: renderCase,
+    cell: cell,
+    textAlign: textAlign
+  }));
+}
+function useRenderCase() {
+  var _useEditableSchemaTab2 = 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.createElement(React.Fragment, null, flexRender(cell.column.columnDef.cell, cell.getContext()));
+}
+// 可展开元素
+function ExpandingEl(props) {
+  var cell = props.cell,
+    textAlign = props.textAlign;
+  return /*#__PURE__*/React.createElement(RowExpandingWrapper, {
+    renderCase: props.renderCase,
+    cell: cell,
+    textAlign: textAlign
+  }, 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.createElement(React.Fragment, null, hideRealEl ? null : ( /*#__PURE__*/React.createElement(RowExpandingWrapper, {
+    renderCase: props.renderCase,
+    cell: cell,
+    textAlign: textAlign
+  }, flexRender(cell.column.columnDef.cell, cell.getContext()))));
+}
+export { BodyCellWrapper };

package/lib/esm/cell/aggregated.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.
+ */
+import React, { useMemo } from 'react';
+import { random, isNil } from 'lodash-es';
+import { Tag } from '@hi-ui/tag';
+import { ColorEnumPreset, colorPreset } from '@hi-ui/schema-fields';
+import { useEditableSchemaTableCtx } from '../ctx.js';
+import { EMPTY_VALUE } from '../const.js';
+var AggregatedCell = /*#__PURE__*/React.memo(function AggregatedCell(props) {
+  var _a;
+  var row = props.row;
+  var groupingValue = row.groupingValue,
+    groupingColumnId = row.groupingColumnId;
+  var _useEditTableCtx = useEditableSchemaTableCtx(),
+    propsRef = _useEditTableCtx.propsRef;
+  // TODO 待增加自定义颜色配置传入
+  var color = useMemo(function () {
+    var name = ColorEnumPreset[random(0, ColorEnumPreset.length - 1)];
+    return colorPreset[name];
+  }, []);
+  // 如果groupingColumnId为空，则无法显示
+  if (isNil(groupingColumnId)) return null;
+  // 处理空值情况，识别特殊标记__EMPTY_VALUE__
+  var displayValue = groupingValue === EMPTY_VALUE ? '空值' : groupingValue;
+  // 当前被分组的列，经聚合函数处理后的值
+  var groupingColumnAggregatedValue = row.$getAggregatedValue(groupingColumnId);
+  var dftEl = /*#__PURE__*/React.createElement("span", {
+    "data-grouping-column-id": groupingColumnId,
+    className: "flex-center",
+    style: {
+      gap: 4
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tag, {
+    color: color.fore,
+    background: color.back
+  }, displayValue)), /*#__PURE__*/React.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暂时置空
+);
+
+export { AggregatedCell as default };

package/lib/esm/cell/dependency.js

@@ -0,0 +1,90 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+/** @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.
+ */
+import { __rest } from 'tslib';
+import { Schedular } from '@hi-ui/schema-utils';
+import { BatchDepUpdate } from '@hi-ui/schema-fields';
+import { generateDepPropsField } from '@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: BatchDepUpdate.update
+  });
+  var finalValue = BatchDepUpdate.getValues(dataKey, nextValue);
+  var _a = finalValue,
+    _b = dataKey,
+    fieldValue = _a[_b],
+    restDepValues = __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 上，并且触发订阅
+  Schedular.nextMicro(function () {
+    var _tableValue$mergeValu;
+    tableValue.mergeValue((_tableValue$mergeValu = {}, _tableValue$mergeValu[rowIndex] = restDepValues, _tableValue$mergeValu));
+  });
+}
+/**
+ * 处理表格单元格中的 Props 依赖逻辑
+ */
+function execCellPropsDepFn(ctx) {
+  var nextField = 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;
+}
+export { execCellDepsProcess, execCellPropsDepFn, execCellValueDepFn };

package/lib/esm/cell/editing.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.
+ */
+import React from 'react';
+import { useUpdate, useMemoizedFn } from 'ahooks';
+import { isObjectLike, isFunction } from 'lodash-es';
+import { Schedular } from '@hi-ui/schema-utils';
+import { useEditableSchemaTableCtx } from '../ctx.js';
+function useEditingCellFormBinding(props) {
+  var _a;
+  var getValue = props.getValue,
+    index = props.row.index,
+    id = props.column.id,
+    table = props.table;
+  var _useEditTableCtx = useEditableSchemaTableCtx(),
+    globalStaticRef = _useEditTableCtx.globalStaticRef;
+  var enableRowEdit = globalStaticRef.current.enableRowEdit;
+  var initialValue = getValue();
+  var valueRef = React.useRef(initialValue);
+  valueRef.current = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.getCellValue(index, id);
+  var forceUpdate = useUpdate();
+  var updateValue = 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;
+    // 延迟一小会儿再更新值
+    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 (!isObjectLike(eventOrValue) || !eventOrValue.target) {
+    return eventOrValue;
+  }
+  var event = eventOrValue;
+  // @see https://reactjs.org/docs/events.html#event-pooling
+  if (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;
+}
+export { normalizeValueFromChange, useEditingCellFormBinding };

package/lib/esm/cell/footer.js

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

package/lib/esm/cell/header.js

@@ -0,0 +1,63 @@
+/** @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.
+ */
+import React from 'react';
+import EllipsisTooltip from '@hi-ui/ellipsis-tooltip';
+import { useEditableSchemaTableCtx } from '../ctx.js';
+import { cls } from '../utils/cls.js';
+import { isSystemCol } from '../const.js';
+import 'lodash-es';
+import { getHeaderActions } from '../features/header-actions/get-actions.js';
+var HeaderCell = /*#__PURE__*/React.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 = 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 (isSystemCol(column.id)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls('header-cell-content'),
+      "data-text-align": textAlign
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cls('header-cell-content-title')
+    }, field.title));
+  }
+  // 表头操作
+  var actions = 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.createElement("div", {
+    className: 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.createElement("span", {
+    className: cls('header-cell-content-title')
+  }, /*#__PURE__*/React.createElement(EllipsisTooltip, null, field.title)), /*#__PURE__*/React.createElement("span", {
+    className: cls('header-cell-content-actions')
+  }, actions === null || actions === void 0 ? void 0 : actions.elements));
+}
+// propsAreEqual暂时置空
+);
+
+export { HeaderCell as default };

package/lib/esm/cell/index.js

@@ -0,0 +1,192 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React from 'react';
+import { isEqual } from 'lodash-es';
+import { isSimpleCase, SimpleCase, EditableCase, useMatchFieldClass, useReadonly, runDynamicEditable, ReadonlyCase } from '@hi-ui/schema-fields';
+import { useSubscribeList } from '@hi-ui/use-subscription';
+import { SELECTED_OPTION_RAW } from '../const.js';
+import { useEditableSchemaTableCtx } from '../ctx.js';
+import { useRuntimeRowEditable } from '../features/row-edit/hooks.js';
+import '@hi-ui/button';
+import { useEditingCellFormBinding } from './editing.js';
+import { execCellDepsProcess } from './dependency.js';
+import '@hi-ui/ellipsis-tooltip';
+import '../utils/cls.js';
+import '@tanstack/react-table';
+import '@hi-ui/schema-utils';
+import '@hi-ui/schema-table-extensions';
+import '@hi-ui/tag';
+var EditableCell = /*#__PURE__*/React.memo(function EditableCellCore(props) {
+  var _a, _b;
+  var field = (_a = props.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.field;
+  var formBinding = useEditingCellFormBinding(props);
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    tableValue = _useEditableSchemaTab.subscription,
+    globalStaticRef = _useEditableSchemaTab.globalStaticRef;
+  var enableRowEdit = globalStaticRef.current.enableRowEdit;
+  var rowIndex = props.row.index;
+  var dataKey = props.column.id;
+  var rowData = tableValue.getValue()[rowIndex];
+  var fieldDeps = (((_b = field === null || field === void 0 ? void 0 : field.dependency) === null || _b === void 0 ? void 0 : _b.deps) || []).map(function (dep) {
+    return [rowIndex, dep];
+  });
+  var _c = useSubscribeList(tableValue, [[rowIndex, dataKey]].concat(fieldDeps), {
+      // 此处单元格全部可编辑，全部创建监听
+      skipSubscribe: false,
+      // 行编辑模式下，从 draft 中获取值
+      getFieldValueFromDraft: enableRowEdit
+    }),
+    fieldValue = _c.fieldValue,
+    changedDepValues = _c.changedDepValues,
+    rest = __rest(_c, ["fieldValue", "changedDepValues"]);
+  if (!field) return null;
+  formBinding.value = fieldValue;
+  var nextField = Object.assign(Object.assign({}, field), {
+    payload: Object.assign(Object.assign({}, field.payload), {
+      setSelectedRawOption: function setSelectedRawOption(values) {
+        var _a;
+        if (enableRowEdit) {
+          var _Object$assign, _rowIndex, _tableValue$mergeDraf;
+          // 行编辑模式：需要获取最新的 draft 数据
+          var draftRowData = ((_a = tableValue.getDraft()) === null || _a === void 0 ? void 0 : _a[rowIndex]) || {};
+          var currentData = draftRowData[SELECTED_OPTION_RAW] || {};
+          var updatedData = Object.assign(Object.assign({}, currentData), (_Object$assign = {}, _Object$assign[dataKey] = values, _Object$assign));
+          tableValue.mergeDraft((_tableValue$mergeDraf = {}, _tableValue$mergeDraf[rowIndex] = (_rowIndex = {}, _rowIndex[SELECTED_OPTION_RAW] = updatedData, _rowIndex), _tableValue$mergeDraf));
+        } else {
+          var _Object$assign2, _rowIndex2, _tableValue$mergeSile;
+          // 普通模式：从当前 rowData 获取数据
+          var _currentData = rowData[SELECTED_OPTION_RAW] || {};
+          var _updatedData = Object.assign(Object.assign({}, _currentData), (_Object$assign2 = {}, _Object$assign2[dataKey] = values, _Object$assign2));
+          tableValue.mergeSilently((_tableValue$mergeSile = {}, _tableValue$mergeSile[rowIndex] = (_rowIndex2 = {}, _rowIndex2[SELECTED_OPTION_RAW] = _updatedData, _rowIndex2), _tableValue$mergeSile));
+        }
+      }
+    })
+  });
+  var fieldProps = {
+    value: fieldValue,
+    field: nextField,
+    FieldClass: props.FieldClass,
+    ctx: {
+      field: nextField,
+      rowData: rowData,
+      rawData: rowData,
+      formBinding: formBinding,
+      rowIndex: rowIndex,
+      dataKey: dataKey,
+      formRef: {
+        current: null
+      } // TODO 待补充实现
+    },
+
+    // 行编辑模式下，失焦时保持激活状态
+    keepActiveOnBlur: enableRowEdit,
+    defaultActive: props.defaultActive
+  };
+  execCellDepsProcess({
+    fieldProps: fieldProps,
+    rowData: rowData,
+    rowIndex: rowIndex,
+    dataKey: dataKey,
+    changedDepValues: changedDepValues,
+    changedFieldNames: rest.changedFieldNames,
+    tableValue: tableValue
+  });
+  return /*#__PURE__*/React.createElement(EditableCase, Object.assign({}, fieldProps));
+}, function (prev, next) {
+  var _a;
+  // 如果 column 配置要求总是更新，则返回 false 触发重渲染
+  if ((_a = prev.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.shouldUpdate) return false;
+  // 如果 defaultActive 为 true，则直接重渲染
+  // TODO 此处仍有BUG，会在行交换时触发
+  // 暂时记录，待后续优化
+  if (prev.defaultActive) return false;
+  // NOTE Cell 暂时始终打开值比较 待补充其他case
+  // 其余时候比较关键数据是否相等
+  return isEqual(prev.getValue(), next.getValue());
+});
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore 关闭 displayName 检查
+EditableCell.displayName = 'EditableCell';
+var CustomCell = /*#__PURE__*/React.memo(
+// CustomCell 中的 Custom 是指包含自定义渲染
+function CustomCellCore(props) {
+  var _a, _b, _c, _d;
+  var field = (_a = props.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.field;
+  var _useEditableSchemaTab2 = useEditableSchemaTableCtx(),
+    tableValue = _useEditableSchemaTab2.subscription,
+    propsRef = _useEditableSchemaTab2.propsRef;
+  var FieldClass = useMatchFieldClass({
+    name: 'TableCellWrapper',
+    field: field,
+    fieldMap: (_b = props.table.options.meta) === null || _b === void 0 ? void 0 : _b.fieldMap
+  });
+  // 行编辑状态变更时会触发组件重渲染
+  var runtimeEditable = useRuntimeRowEditable(props.row.index);
+  var selfReadonly = useReadonly(field, runtimeEditable);
+  var readonly = !runDynamicEditable(field, selfReadonly, function () {
+    return {
+      type: 'edit-table',
+      rowIndex: props.row.index,
+      rowId: props.row.id,
+      columnIndex: props.column.getIndex(),
+      columnId: props.column.id,
+      rawData: props.row.$getRealtimeRowData()
+    };
+  });
+  // 2. 只读状态使用 ReadonlyCase
+  if (readonly) {
+    var dataKey = props.column.id;
+    var rowIndex = props.row.index;
+    var rowData = tableValue.getValue()[rowIndex];
+    var value = (_d = (_c = props.table.options.meta) === null || _c === void 0 ? void 0 : _c.getCellValue(rowIndex, dataKey)) !== null && _d !== void 0 ? _d : props.getValue();
+    return /*#__PURE__*/React.createElement(ReadonlyCase, {
+      usedBy: "table",
+      value: value,
+      field: field,
+      FieldClass: FieldClass,
+      ctx: {
+        field: field,
+        rowData: rowData,
+        rawData: rowData,
+        rowIndex: rowIndex,
+        dataKey: dataKey
+      }
+    });
+  }
+  // 3. 可编辑状态使用 MemoCell
+  return /*#__PURE__*/React.createElement(EditableCell, Object.assign({}, props, {
+    FieldClass: FieldClass,
+    defaultActive: propsRef.current.defaultActive
+  }));
+});
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore 关闭 displayName 检查
+CustomCell.displayName = 'CustomCell';
+// NOTE 此处之所以要分为 DftCell -> CustomCell -> EditableCell 三层，是因为需要区分出【简单】【只读】【可编辑】的字段
+// 【简单】字段：无自定义渲染，无依赖，无表单绑定，无监听，只有最单纯的 DOM 渲染
+// 【只读】字段：有自定义渲染，无依赖，无表单绑定，无监听 // TODO 后续只读部分可能会需要支持deps
+// 【可编辑】字段：有自定义渲染，有依赖，有控制，有表单绑定，有监听
+function DftCell(props) {
+  var _a;
+  var field = (_a = props.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.field;
+  if (!field) {
+    // 此处拦截，必须有 field 配置，否则报错
+    throw new Error('DftCell: field is required');
+  }
+  // 1. 简单字段且无自定义渲染，使用 SimpleCase
+  if (isSimpleCase(field)) {
+    return /*#__PURE__*/React.createElement(SimpleCase, {
+      value: props.getValue()
+    });
+  }
+  return /*#__PURE__*/React.createElement(CustomCell, Object.assign({}, props));
+}
+export { DftCell as default };