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

package/lib/esm/features/row-selection/indicator.js

@@ -0,0 +1,159 @@
+/** @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, { useRef } from 'react';
+import Space from '@hi-ui/space';
+import Switch from '@hi-ui/switch';
+import { getPaginationRowModel } from '@tanstack/react-table';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+import { cls } from '../../utils/cls.js';
+import 'lodash-es';
+import 'ahooks';
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+var dftFormatter = function dftFormatter(selectedCount) {
+  return "\u5DF2\u9009 " + selectedCount + " \u9879";
+};
+function RowSelectionIndicator() {
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table,
+    propsRef = _useEditableSchemaTab.propsRef;
+  // 经过性能优化，已移除额外订阅
+  // 此时保留，反而会导致本组件重复重渲染
+  // 保留此处注释，用以后续调整
+  // const { rowSelectionState } = useEditableSchemaTableCtx()
+  // useSubscribe(rowSelectionState)
+  var selectedCount = table.$getRowSelection().selectedRowKeys.length;
+  var _ref = propsRef.current.rowSelection || {},
+    _ref$enableIndicator = _ref.enableIndicator,
+    enableIndicator = _ref$enableIndicator === void 0 ? {} : _ref$enableIndicator;
+  var _enableIndicator$form = enableIndicator.formatter,
+    formatter = _enableIndicator$form === void 0 ? dftFormatter : _enableIndicator$form,
+    enableOnlyShowSelected = enableIndicator.enableOnlyShowSelected;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls('row-selection-indicator')
+  }, /*#__PURE__*/React.createElement(Space, {
+    wrap: false,
+    style: {
+      whiteSpace: 'nowrap'
+    },
+    separator: enableOnlyShowSelected ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'rgba(0, 0, 0, 0.06)'
+      }
+    }, "|") : null
+  }, /*#__PURE__*/React.createElement("span", null, formatter(selectedCount)), enableOnlyShowSelected ? /*#__PURE__*/React.createElement(OnlyShowSelected, {
+    selectedCount: selectedCount
+  }) : null));
+}
+function OnlyShowSelected(_ref2) {
+  var selectedCount = _ref2.selectedCount;
+  var _useEditableSchemaTab2 = useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab2.table,
+    subscription = _useEditableSchemaTab2.subscription,
+    setDynamicOpts = _useEditableSchemaTab2.setDynamicOpts;
+  var checkedRef = useRef(false);
+  // 如果未选中行，且未开启开关，则禁用
+  var disabled = selectedCount === 0 && !checkedRef.current;
+  var prePaginationState = useRef();
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Switch, {
+    disabled: disabled,
+    content: ['开', '关'],
+    onChange: function onChange(checked) {
+      checkedRef.current = checked;
+      if (checked) {
+        var keys = table.$getRowSelection().selectedRowKeys;
+        var rowDataList = [];
+        for (var _iterator = _createForOfIteratorHelperLoose(keys), _step; !(_step = _iterator()).done;) {
+          var rowId = _step.value;
+          var data = table.$getRealtimeRowData(rowId) || table.$selectedRowsCache.get(rowId);
+          if (data) rowDataList.push(data);
+        }
+        // 先静默更新内部订阅
+        subscription.setValue(rowDataList, {
+          silent: true
+        });
+        // 再更新分页状态
+        table.setPagination(function (state) {
+          // 暂存分页状态
+          prePaginationState.current = state;
+          var rowCount = rowDataList.length;
+          return Object.assign(Object.assign({}, state), {
+            pageIndex: 0,
+            rowCount: rowCount,
+            $fromCustom: true
+          });
+        });
+        // 最后换成前端分页
+        setDynamicOpts({
+          manualPagination: false,
+          getPaginationRowModel: getPaginationRowModel()
+        });
+      } else {
+        // 先恢复内部订阅
+        subscription.setValue(subscription.getPrevValue(), {
+          silent: true
+        });
+        // 再恢复分页状态
+        table.setPagination(function (state) {
+          var preState = prePaginationState.current;
+          // 清空暂存的分页状态
+          prePaginationState.current = undefined;
+          return Object.assign(Object.assign({}, preState), {
+            $fromCustom: false
+          });
+        });
+        // 最后恢复成后端分页
+        setDynamicOpts({
+          manualPagination: true,
+          getPaginationRowModel: undefined
+        });
+      }
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: 'relative',
+      top: 1,
+      marginLeft: 8,
+      userSelect: 'none'
+    }
+  }, "\u4EC5\u663E\u793A\u5DF2\u9009"));
+}
+export { RowSelectionIndicator };

package/lib/esm/features/row-selection/wrapper.js

@@ -0,0 +1,107 @@
+/** @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 { cls } from '../../utils/cls.js';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+import '../../container/index.js';
+import { useSyncHoverStyle } from './hooks/use-sync-hover-style.js';
+import { useClickSelect } from './hooks/use-click-select.js';
+import { SelectionHeaderCell, SelectionBodyCell } from './cell.js';
+import '@hi-ui/use-subscription';
+import 'ahooks';
+import 'lodash-es';
+import '@hi-ui/space';
+import '@hi-ui/switch';
+import '@tanstack/react-table';
+import { useTableContainer } from '../../container/ctx.js';
+function SelectionTable(props) {
+  var width = 50;
+  return /*#__PURE__*/React.createElement("table", {
+    className: cls('mock-selection'),
+    "data-is-selection": true
+  }, /*#__PURE__*/React.createElement("colgroup", null, /*#__PURE__*/React.createElement("col", {
+    style: {
+      width: width,
+      minWidth: width
+    }
+  })), props.children);
+}
+function SelectionHeader() {
+  return /*#__PURE__*/React.createElement(SelectionTable, null, /*#__PURE__*/React.createElement("thead", {
+    className: cls('header'),
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: cls('header-row')
+  }, /*#__PURE__*/React.createElement("th", {
+    className: cls('header-cell'),
+    "data-text-align": "center"
+  }, /*#__PURE__*/React.createElement(SelectionHeaderCell, null)))));
+}
+function SelectionBody() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table;
+  var _useTableContainer = useTableContainer(),
+    virtualize = _useTableContainer.virtualize;
+  var _table$getRowModel = table.getRowModel(),
+    realRows = _table$getRowModel.rows;
+  // 同步表格行的 hover 状态
+  useSyncHoverStyle();
+  // 点击行选择 // 内部有开关决定是否启用
+  useClickSelect();
+  return /*#__PURE__*/React.createElement(SelectionTable, null, /*#__PURE__*/React.createElement("tbody", {
+    className: 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.createElement("tr", {
+    className: cls('body-row', 'virtual-spacer', 'virtual-spacer-top')
+  }, /*#__PURE__*/React.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.createElement("tr", {
+      key: row.id,
+      className: cls('body-row'),
+      "data-index": row.index,
+      "data-id": row.id
+    }, /*#__PURE__*/React.createElement("td", {
+      className: cls('body-cell'),
+      "data-text-align": "center"
+    }, /*#__PURE__*/React.createElement(SelectionBodyCell, {
+      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.createElement("tr", {
+    className: cls('body-row', 'virtual-spacer', 'virtual-spacer-bottom')
+  }, /*#__PURE__*/React.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 SelectionFooter() {
+  return /*#__PURE__*/React.createElement(SelectionTable, null, /*#__PURE__*/React.createElement("tfoot", {
+    className: cls('footer')
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: cls('footer-row')
+  }, /*#__PURE__*/React.createElement("td", {
+    className: cls('footer-cell'),
+    "data-text-align": "center"
+  }))));
+}
+var RowSelection = {
+  Header: SelectionHeader,
+  Body: SelectionBody,
+  Footer: SelectionFooter
+};
+export { RowSelection };

package/lib/esm/features/setting-bridge.js

@@ -0,0 +1,50 @@
+/** @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 { useMemo } from 'react';
+
+/**
+ * 将字段配置转换为列设置需要的格式
+ */
+function mapFieldsToColumns(fields) {
+  return fields.map(function (field) {
+    var _a, _b;
+    return {
+      id: field.dataIndex,
+      title: (typeof field.title === 'string' ? field.title : field._titleText) || field.dataIndex,
+      fixed: ((_a = field.control) === null || _a === void 0 ? void 0 : _a.fixed) || false,
+      hidden: (_b = field.control) === null || _b === void 0 ? void 0 : _b.hidden
+    };
+  });
+}
+function useTableSetting(props) {
+  var columns = useMemo(function () {
+    return mapFieldsToColumns(props.fields);
+  }, [props.fields]);
+  // 处理列设置变更
+  var handleSettingChange = function handleSettingChange(result) {
+    var _a, _b;
+    var table = (_a = props.tableRef.current) === null || _a === void 0 ? void 0 : _a.table;
+    if (!table) return;
+    (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, result);
+    table.setState(function (state) {
+      return Object.assign(Object.assign({}, state), {
+        columnOrder: result.keys,
+        columnPinning: result.grouped.fixed,
+        columnVisibility: result.grouped.visibility
+      });
+    });
+  };
+  return {
+    columns: columns,
+    storageKey: props.storageKey,
+    onChange: handleSettingChange
+  };
+}
+export { mapFieldsToColumns, useTableSetting };

package/lib/esm/features/sorter/bridge.js

@@ -0,0 +1,53 @@
+/** @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, { useEffect } from 'react';
+import { TableSorter } from '@hi-ui/schema-table-extensions';
+import { useSubscribe } from '@hi-ui/use-subscription';
+import { getBoolConfig, mergeProps } from '@hi-ui/schema-utils';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+function TableSorterBridge(props) {
+  var _a;
+  var column = props.column,
+    sorterConfig = props.sorter;
+  var _useEditTableCtx = useEditableSchemaTableCtx(),
+    sorterState = _useEditTableCtx.sorterState,
+    propsRef = _useEditTableCtx.propsRef;
+  var _React$useState = React.useState(null),
+    direction = _React$useState[0],
+    setDirection = _React$useState[1];
+  // 列的排序状态会受到全局排序状态的影响
+  // 全局变更时，主动触发一次自身的重渲染
+  useSubscribe(sorterState);
+  // 外部主动设置时自动更新至内部
+  var sorterValue = column.getIsSorted();
+  useEffect(function () {
+    setDirection(sorterValue || null);
+  }, [sorterValue]);
+  var handleChange = function handleChange(direction) {
+    setDirection(direction);
+    // 取消排序时，需要主动清除排序状态
+    if (direction === null) {
+      column.clearSorting();
+      return;
+    }
+    var isDesc = direction === 'desc';
+    // toggleSorting 需要手动传入是否降序，是否可多排序
+    column.toggleSorting(isDesc, column.getCanMultiSort());
+  };
+  var fieldTooltipConfig = getBoolConfig(sorterConfig === null || sorterConfig === void 0 ? void 0 : sorterConfig.tooltip, {});
+  var propsTooltipConfig = (_a = propsRef.current.sorter) === null || _a === void 0 ? void 0 : _a.tooltip;
+  var tooltip = fieldTooltipConfig || propsTooltipConfig ? mergeProps(propsTooltipConfig, fieldTooltipConfig) : undefined;
+  return /*#__PURE__*/React.createElement(TableSorter, {
+    direction: direction,
+    onChange: handleChange,
+    tooltip: tooltip
+  });
+}
+export { TableSorterBridge };

package/lib/esm/features/sorter/get-sorter-config.js

@@ -0,0 +1,41 @@
+/** @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 { getBoolConfig, localCompare } from '@hi-ui/schema-utils';
+function getSorterConfig(field, ctx) {
+  var _a;
+  var sorterConfig = (_a = field.control) === null || _a === void 0 ? void 0 : _a.sorter;
+  if (!sorterConfig) return undefined;
+  var propsRef = ctx.propsRef;
+  var tableSorterConfig = propsRef.current.sorter;
+  var config = getBoolConfig(sorterConfig, {
+    sortingFn: 'textLocalCompare'
+  }, {
+    mergeDft: true
+  });
+  if (config) {
+    // 如果配置为 textLocalCompare，则使用内置的 textLocalCompare 函数
+    if (config.sortingFn === 'textLocalCompare') config.sortingFn = textLocalCompare;
+    // 如果字段配置了 sortUndefined，则优先使用字段配置的 sortUndefined
+    // 否则使用表格配置的 sortUndefined
+    config.sortUndefined = config.sortUndefined || (tableSorterConfig === null || tableSorterConfig === void 0 ? void 0 : tableSorterConfig.sortUndefined);
+  }
+  return config;
+}
+function textLocalCompare(rowA, rowB, columnId) {
+  try {
+    var a = rowA.getValue(columnId);
+    var b = rowB.getValue(columnId);
+    return localCompare(a, b);
+  } catch (error) {
+    console.log('textLocalCompare', error);
+    return 0;
+  }
+}
+export { getSorterConfig };

package/lib/esm/features/sorter/index.js

@@ -0,0 +1,24 @@
+/** @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 { useSubscription } from '@hi-ui/use-subscription';
+import '@tanstack/react-table';
+import '../../utils/cls.js';
+import 'react';
+import 'lodash-es';
+import 'ahooks';
+import '@hi-ui/schema-utils';
+import '@hi-ui/schema-table-extensions';
+function useSorterState() {
+  var sorterState = useSubscription([]);
+  return {
+    sorterState: sorterState
+  };
+}
+export { useSorterState };

package/lib/esm/features/sorter/use-opts.js

@@ -0,0 +1,75 @@
+/** @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 { getSortedRowModel } from '@tanstack/react-table';
+import '../../utils/cls.js';
+import 'react';
+import 'lodash-es';
+import 'ahooks';
+import { ensureStateFields } from '../../utils/state-merge.js';
+function useSorterOpts(ctx) {
+  var innerRef = ctx.innerRef,
+    propsRef = ctx.propsRef,
+    staticOptsRef = ctx.staticOptsRef;
+  return getSorterOptions({
+    innerRef: innerRef,
+    propsRef: propsRef,
+    staticOptsRef: staticOptsRef
+  });
+}
+/**
+ * 获取表格排序配置选项
+ */
+function getSorterOptions(ctx) {
+  var _ctx$staticOptsRef$cu = ctx.staticOptsRef.current,
+    enableSorter = _ctx$staticOptsRef$cu.enableSorter,
+    enableRemoteSorter = _ctx$staticOptsRef$cu.enableRemoteSorter;
+  if (!enableSorter) return {};
+  var sorterOpts = ctx.propsRef.current.sorter;
+  if (!sorterOpts) return {};
+  var onSortingChange = function onSortingChange(updater) {
+    var _a, _b;
+    var innerRef = ctx.innerRef;
+    var _innerRef$current = innerRef.current,
+      table = _innerRef$current.table,
+      propsRef = _innerRef$current.propsRef;
+    var state = table.getState().sorting;
+    var newState = typeof updater === 'function' ? updater(state) : updater;
+    // 先更新内部状态
+    table.setState(function (state) {
+      return Object.assign(Object.assign({}, state), {
+        sorting: newState
+      });
+    });
+    // 再更新订阅
+    innerRef.current.sorterState.setValue(newState);
+    // 通知外部更新
+    var notifyState = ensureStateFields(state, newState, 'desc', undefined);
+    (_b = (_a = propsRef.current.sorter) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, notifyState, {
+      rawState: newState
+    });
+  };
+  if (enableRemoteSorter) {
+    return {
+      manualSorting: true,
+      enableMultiSort: sorterOpts.enableMultiSort,
+      maxMultiSortColCount: sorterOpts.maxMultiSortColCount,
+      onSortingChange: onSortingChange
+    };
+  }
+  return {
+    manualSorting: false,
+    enableMultiSort: sorterOpts.enableMultiSort,
+    maxMultiSortColCount: sorterOpts.maxMultiSortColCount,
+    // 前端排序,使用 getSortedRowModel
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: onSortingChange
+  };
+}
+export { getSorterOptions, useSorterOpts };

package/lib/esm/field-bridge/bridge.js

@@ -0,0 +1,92 @@
+/** @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, { useRef, useEffect } from 'react';
+import { omit } from 'lodash-es';
+import { useControllableValue } from 'ahooks';
+import { useSchemaFormCtx } from '@hi-ui/schema-form';
+import { mergeProps } from '@hi-ui/schema-utils';
+import '../container/index.js';
+import '../utils/cls.js';
+import '@hi-ui/classname';
+import '@tanstack/react-table';
+import '@hi-ui/icons';
+import '@hi-ui/schema-hooks';
+import '../cell/index.js';
+import { EditableSchemaTable } from '../table.js';
+import '@tanstack/react-virtual';
+import '@hi-ui/schema-action-trigger';
+import '@hi-ui/pagination';
+import '@hi-ui/use-subscription';
+import '@hi-ui/checkbox';
+import '@hi-ui/radio';
+import '@hi-ui/space';
+import '@hi-ui/switch';
+import '@babel/runtime/regenerator';
+import 'tslib';
+import '@hi-ui/schema-table-extensions';
+import '@babel/runtime/helpers/esm/createClass';
+import 'immer';
+import '@hi-ui/use-id';
+import '@babel/runtime/helpers/esm/inheritsLoose';
+import '@hi-ui/schema-fields';
+import { Toolbar } from './toolbar.js';
+function EditTableBridge(props) {
+  var _a, _b, _c;
+  var wrapperElRef = useRef(null);
+  var _useSchemaFormCtx = useSchemaFormCtx(),
+    formRef = _useSchemaFormCtx.formRef;
+  var tableCtxRef = useRef(null);
+  var _useControllableValue = useControllableValue(props),
+    values = _useControllableValue[0],
+    setValues = _useControllableValue[1];
+  // value 变更时，需经过 subscription 主动设置，方可生效
+  useEffect(function () {
+    var _a;
+    var complete = !props.doNotCompleteRerender;
+    (_a = tableCtxRef.current) === null || _a === void 0 ? void 0 : _a.subscription.setValue(props.value || [], {
+      complete: complete
+    });
+  }, [props.value, tableCtxRef, props.doNotCompleteRerender]);
+  var handleValuesChange = function handleValuesChange(changed, allValues) {
+    var _a;
+    // console.log('handleValuesChange',changed, allValues)
+    (_a = props.onValuesChange) === null || _a === void 0 ? void 0 : _a.call(props, changed, allValues);
+    setValues(allValues);
+  };
+  var finalProps = mergeProps({
+    fields: props.fields,
+    sticky: true
+  }, omit(props, [
+  // 移除无关的属性
+  'value', 'defaultValue', 'onChange', 'innerCtxRef', 'catchInnerCtx']));
+  // 捕获内部引用
+  (_a = props.catchInnerCtx) === null || _a === void 0 ? void 0 : _a.call(props, {
+    tableCtx: tableCtxRef.current
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pro-edit-table",
+    ref: wrapperElRef
+  }, props.toolbar === false ? null : ( /*#__PURE__*/React.createElement(Toolbar, {
+    ctx: {
+      tableFields: finalProps.fields,
+      tableCtxRef: tableCtxRef,
+      fullscreenElRef: wrapperElRef,
+      formRef: formRef,
+      readonly: props.readonly
+    },
+    left: (_b = props.toolbar) === null || _b === void 0 ? void 0 : _b.left,
+    right: props.actions || ((_c = props.toolbar) === null || _c === void 0 ? void 0 : _c.right)
+  })), /*#__PURE__*/React.createElement(EditableSchemaTable, Object.assign({}, finalProps, {
+    defaultValue: values,
+    innerCtxRef: tableCtxRef,
+    onValuesChange: handleValuesChange
+  })));
+}
+export { EditTableBridge };

package/lib/esm/field-bridge/index.js

@@ -0,0 +1,44 @@
+/** @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 _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { ProField } from '@hi-ui/schema-fields';
+import { EditTableBridge } from './bridge.js';
+var ProEditTable = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProEditTable, _ProField);
+  function ProEditTable() {
+    return _ProField.apply(this, arguments) || this;
+  }
+  var _proto = ProEditTable.prototype;
+  _proto.render = function render(data, ctx) {
+    if (data === void 0) {
+      data = [];
+    }
+    var fieldProps = this.getFieldProps({
+      fields: []
+    }, ctx);
+    return /*#__PURE__*/React.createElement(EditTableBridge, Object.assign({}, fieldProps, {
+      value: data,
+      readonly: true
+    }));
+  };
+  _proto.renderCell = function renderCell() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null); // 表格不允许嵌套在单元格中
+  };
+
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var fieldProps = this.getFieldProps({
+      fields: []
+    }, ctx);
+    return /*#__PURE__*/React.createElement(EditTableBridge, Object.assign({}, fieldProps));
+  };
+  return ProEditTable;
+}(ProField);
+export { EditTableBridge, ProEditTable };