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

package/lib/cjs/container/hooks.js

@@ -0,0 +1,102 @@
+/** @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 reactVirtual = require('@tanstack/react-virtual');
+var ctx = require('../ctx.js');
+var _const = require('../const.js');
+function useRowVirtualizer(options) {
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table,
+    tableContainerRef = _useEditableSchemaTab.tableContainerRef;
+  var virtualizer = reactVirtual.useVirtualizer(Object.assign({
+    count: table.getRowModel().rows.length,
+    getScrollElement: function getScrollElement() {
+      return tableContainerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return _const.ROW_HEIGHT;
+    },
+    overscan: 5
+  }, options));
+  var virtualItems = virtualizer.getVirtualItems();
+  var padding = !virtualItems.length ? {
+    start: 0,
+    end: 0
+  } : {
+    start: virtualItems[0].start,
+    end: virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end
+  };
+  return {
+    virtualItems: virtualItems,
+    padding: padding
+  };
+}
+function useColumnVirtualizer(options) {
+  var _useEditableSchemaTab2 = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab2.table,
+    tableContainerRef = _useEditableSchemaTab2.tableContainerRef;
+  var virtualizer = reactVirtual.useVirtualizer(Object.assign({
+    count: table.getVisibleLeafColumns().length,
+    getScrollElement: function getScrollElement() {
+      return tableContainerRef.current;
+    },
+    estimateSize: function estimateSize(index) {
+      return table.getVisibleLeafColumns()[index].getSize();
+    },
+    horizontal: true,
+    overscan: 3
+  }, options));
+  var virtualItems = virtualizer.getVirtualItems();
+  var padding = !virtualItems.length ? {
+    start: 0,
+    end: 0
+  } : {
+    start: virtualItems[0].start,
+    end: virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end
+  };
+  return {
+    virtualItems: virtualItems,
+    padding: padding
+  };
+}
+function useTableScroll() {
+  var _useEditableSchemaTab3 = ctx.useEditableSchemaTableCtx(),
+    tableContainerRef = _useEditableSchemaTab3.tableContainerRef;
+  React.useEffect(function () {
+    var container = tableContainerRef.current;
+    if (!container) return;
+    var handleScroll = function handleScroll() {
+      var scrollLeft = container.scrollLeft,
+        scrollWidth = container.scrollWidth,
+        clientWidth = container.clientWidth;
+      // 左侧是否有可滚动空间
+      var hasLeftSpace = scrollLeft > 0;
+      // 右侧是否有可滚动空间
+      var hasRightSpace = Math.abs(scrollWidth - clientWidth - scrollLeft) > 1;
+      // 根据两侧是否有可滚动空间来切换对应的类名
+      container.classList.toggle('editable-schema-table--scrolling-right', hasLeftSpace);
+      container.classList.toggle('editable-schema-table--scrolling-left', hasRightSpace);
+    };
+    container.addEventListener('scroll', handleScroll);
+    // 初始化时触发一次
+    handleScroll();
+    return function () {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [tableContainerRef]);
+}
+exports.useColumnVirtualizer = useColumnVirtualizer;
+exports.useRowVirtualizer = useRowVirtualizer;
+exports.useTableScroll = useTableScroll;

package/lib/cjs/container/index.js

@@ -0,0 +1,69 @@
+/** @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 useInitialRender = require('../hooks/use-initial-render.js');
+var base = require('./base.js');
+var rowVirtual = require('./row-virtual.js');
+var columnVirtual = require('./column-virtual.js');
+var fullVirtual = require('./full-virtual.js');
+var wrapper = require('./wrapper.js');
+var hooks = require('./hooks.js');
+require('@hi-ui/schema-action-trigger');
+require('@hi-ui/schema-utils');
+require('@hi-ui/pagination');
+require('@hi-ui/use-subscription');
+require('lodash-es');
+require('@tanstack/react-table');
+require('ahooks');
+require('../utils/cls.js');
+require('@hi-ui/checkbox');
+require('@hi-ui/radio');
+require('@hi-ui/space');
+require('@hi-ui/switch');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function TableContainer(props) {
+  var virtualizeConfig = props.virtualize;
+  useInitialRender.useInitialRender(); // 初次渲染时容器组件尚未加载，导致白屏，因此在组件挂在后强制更新一次
+  hooks.useTableScroll(); // 滚动时给容器增加类名，用于控制阴影效果
+  // 根据配置选择合适的容器
+  if ((virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.row) && (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.column)) {
+    return /*#__PURE__*/React__default["default"].createElement(fullVirtual.FullVirtualContainer, {
+      rowOptions: virtualizeConfig.row,
+      columnOptions: virtualizeConfig.column
+    }, props.children);
+  }
+  if (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.row) {
+    return /*#__PURE__*/React__default["default"].createElement(rowVirtual.RowVirtualContainer, {
+      options: virtualizeConfig.row
+    }, props.children);
+  }
+  if (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.column) {
+    return /*#__PURE__*/React__default["default"].createElement(columnVirtual.ColumnVirtualContainer, {
+      options: virtualizeConfig.column
+    }, props.children);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(base.NonVirtualContainer, null, props.children);
+}
+// 导出组件
+TableContainer.Header = wrapper.TableHeader;
+TableContainer.Body = wrapper.TableBody;
+TableContainer.Footer = wrapper.TableFooter;
+exports.TableContainer = TableContainer;

package/lib/cjs/container/row-virtual.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.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var ctx = require('./ctx.js');
+var hooks = require('./hooks.js');
+var colGroup = require('./col-group.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function RowVirtualContainer(props) {
+  var headerRef = React.useRef(null);
+  var bodyRef = React.useRef(null);
+  var footerRef = React.useRef(null);
+  var _useRowVirtualizer = hooks.useRowVirtualizer(props.options),
+    rows = _useRowVirtualizer.virtualItems,
+    rowPadding = _useRowVirtualizer.padding;
+  var colGroup$1 = /*#__PURE__*/React__default["default"].createElement(colGroup.TableColGroup, null);
+  return /*#__PURE__*/React__default["default"].createElement(ctx.TableContainerContext.Provider, {
+    value: {
+      headerRef: headerRef,
+      bodyRef: bodyRef,
+      footerRef: footerRef,
+      colGroup: colGroup$1,
+      virtualize: {
+        rows: rows,
+        rowPadding: {
+          top: rowPadding.start,
+          bottom: rowPadding.end
+        }
+      }
+    }
+  }, props.children);
+}
+exports.RowVirtualContainer = RowVirtualContainer;

package/lib/cjs/container/wrapper.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 React = require('react');
+var schemaTableExtensions = require('@hi-ui/schema-table-extensions');
+var ctx$1 = require('../ctx.js');
+var wrapper = require('../features/row-selection/wrapper.js');
+var index = require('../features/row-operation/index.js');
+var cls = require('../utils/cls.js');
+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 TableHeader(_ref) {
+  var children = _ref.children,
+    sticky = _ref.sticky,
+    stickyOffset = _ref.stickyOffset;
+  var _a = ctx.useTableContainer(),
+    headerRef = _a.headerRef,
+    rest = tslib.__rest(_a, ["headerRef"]);
+  var _useEditableSchemaTab = ctx$1.useEditableSchemaTableCtx().propsRef.current,
+    rowSelection = _useEditableSchemaTab.rowSelection,
+    rowOperation = _useEditableSchemaTab.rowOperation;
+  var className = cls.cls('header-wrapper', {
+    'header-wrapper--sticky': sticky
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: headerRef,
+    className: className,
+    style: sticky && stickyOffset !== undefined ? {
+      top: stickyOffset
+    } : undefined
+  }, rowSelection ? /*#__PURE__*/React__default["default"].createElement(wrapper.RowSelection.Header, null) : null, /*#__PURE__*/React__default["default"].createElement("table", {
+    className: cls.cls('main-content')
+  }, rest.colGroup, children), rowOperation ? /*#__PURE__*/React__default["default"].createElement(index.RowOperation.Header, null) : null);
+}
+function TableBody(props) {
+  var _a = ctx.useTableContainer(),
+    bodyRef = _a.bodyRef,
+    rest = tslib.__rest(_a, ["bodyRef"]);
+  var _useEditableSchemaTab2 = ctx$1.useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab2.propsRef,
+    globalStaticRef = _useEditableSchemaTab2.globalStaticRef;
+  var _propsRef$current = propsRef.current,
+    rowSelection = _propsRef$current.rowSelection,
+    rowOperation = _propsRef$current.rowOperation;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: bodyRef,
+    className: cls.cls('body-wrapper')
+  }, globalStaticRef.current.isEmpty ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "full-box flex-center"
+  }, /*#__PURE__*/React__default["default"].createElement(schemaTableExtensions.Empty, null))) : ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, rowSelection ? /*#__PURE__*/React__default["default"].createElement(wrapper.RowSelection.Body, null) : null, /*#__PURE__*/React__default["default"].createElement("table", {
+    className: cls.cls('main-content')
+  }, rest.colGroup, props.children), rowOperation ? /*#__PURE__*/React__default["default"].createElement(index.RowOperation.Body, null) : null)));
+}
+function TableFooter(_ref2) {
+  var children = _ref2.children,
+    sticky = _ref2.sticky,
+    stickyOffset = _ref2.stickyOffset;
+  var _a = ctx.useTableContainer(),
+    footerRef = _a.footerRef,
+    rest = tslib.__rest(_a, ["footerRef"]);
+  var _useEditableSchemaTab3 = ctx$1.useEditableSchemaTableCtx().propsRef.current,
+    rowSelection = _useEditableSchemaTab3.rowSelection,
+    rowOperation = _useEditableSchemaTab3.rowOperation;
+  var className = cls.cls('footer-wrapper', {
+    'footer-wrapper--sticky': sticky
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: footerRef,
+    className: className,
+    style: sticky && stickyOffset !== undefined ? {
+      bottom: stickyOffset
+    } : undefined
+  }, rowSelection ? /*#__PURE__*/React__default["default"].createElement(wrapper.RowSelection.Footer, null) : null, /*#__PURE__*/React__default["default"].createElement("table", {
+    className: cls.cls('main-content')
+  }, rest.colGroup, children), rowOperation ? /*#__PURE__*/React__default["default"].createElement(index.RowOperation.Footer, null) : null);
+}
+exports.TableBody = TableBody;
+exports.TableFooter = TableFooter;
+exports.TableHeader = TableHeader;

package/lib/cjs/ctx.js

@@ -0,0 +1,32 @@
+/** @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');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var EditableSchemaTableCtx = /*#__PURE__*/React__default["default"].createContext(null);
+function useEditableSchemaTableCtx() {
+  var ctx = React__default["default"].useContext(EditableSchemaTableCtx);
+  if (!ctx) throw new Error('useEditableSchemaTableCtx must be used within a EditableSchemaTable');
+  return ctx;
+}
+exports.EditTableCtx = EditableSchemaTableCtx;
+exports.EditableSchemaTableCtx = EditableSchemaTableCtx;
+exports.useEditTableCtx = useEditableSchemaTableCtx;
+exports.useEditableSchemaTableCtx = useEditableSchemaTableCtx;

package/lib/cjs/features/_overrides/aggregated.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.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var grouping = require('../../utils/grouping.js');
+var CustomAggregatedFeature = {
+  createRow: function createRow(row, table) {
+    // 参考代码来源
+    // https://github.com/TanStack/table/blob/66fbe3a74b129e700e4667d1d5e1b29dd0a7b723/packages/table-core/src/utils/getGroupedRowModel.ts#L94-L127
+    row.$getAggregatedValue = function getRowAggregateValue(columnId) {
+      var column = table.getColumn(columnId);
+      // 有缓存直接去取
+      if (columnId in row._groupingValuesCache) {
+        return row._groupingValuesCache[columnId];
+      }
+      var aggregateFn = column === null || column === void 0 ? void 0 : column.getAggregationFn();
+      if (aggregateFn) {
+        var groupedRows = row.subRows;
+        // 原版使用 flattenBy 方法生成叶节点，会将中间的节点也包含进去，不符合 IPDTable 的分组逻辑
+        // 因此此处使用 getGroupedLeafRows 方法，生成结果仅包含叶节点
+        // const leafRows = flattenBy(groupedRows, (row) => row.subRows)
+        var leafRows = grouping.getGroupedLeafRows(groupedRows);
+        row._groupingValuesCache[columnId] = aggregateFn(columnId, leafRows, groupedRows);
+        return row._groupingValuesCache[columnId];
+      }
+    };
+  },
+  createCell: function createCell(cell, column, row) {
+    cell.$getAggregatedValue = function getCellAggregatedValue() {
+      return row.$getAggregatedValue(column.id);
+    };
+  }
+};
+exports.CustomAggregatedFeature = CustomAggregatedFeature;

package/lib/cjs/features/_overrides/getter.js

@@ -0,0 +1,61 @@
+/** @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 reactTable = require('@tanstack/react-table');
+var CustomGetterFeature = {
+  createTable: function createTable(table) {
+    table.$getInnerRef = function $getInnerRef() {
+      var _a;
+      // @ts-expect-error innerRef
+      return (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.innerRef;
+    };
+    table.$getCell = function $getCell(cellId) {
+      var firstUnderscoreIndex = cellId.indexOf('_');
+      var rowId = cellId.slice(0, firstUnderscoreIndex);
+      var columnId = cellId.slice(firstUnderscoreIndex + 1);
+      var row = table.getRow(rowId);
+      if (!row) return null;
+      var column = table.getColumn(columnId);
+      if (!column) return null;
+      return reactTable.createCell(table, row, column, columnId);
+    };
+    table.$getRealtimeRowData = function getTableRealtimeRowData(rowId) {
+      var _a;
+      try {
+        var row = table.getRow(rowId);
+        if (!row) return undefined;
+        var subscription = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.subscription;
+        if (!subscription) return undefined;
+        var rowIndex = row.index;
+        return subscription.getValue()[rowIndex];
+      } catch (error) {
+        return undefined;
+      }
+    };
+  },
+  createRow: function createRow(row, table) {
+    row.$getRealtimeRowData = function getRealtimeRowData() {
+      // 这里的 row.original 实际上没用
+      // getRealtimeRowData 会返回 undefined 是因为 rowId 可能会被用户误传
+      // 但此处的 rowId 是不会错误的，所以只是留一个 fallback
+      return table.$getRealtimeRowData(row.id) || row.original;
+    };
+  },
+  createCell: function createCell(cell, column, row) {
+    cell.$getRealtimeRowData = function getRealtimeCellRowData() {
+      return row.$getRealtimeRowData();
+    };
+  }
+};
+exports.CustomGetterFeature = CustomGetterFeature;

package/lib/cjs/features/_overrides/grouping.js

@@ -0,0 +1,40 @@
+/** @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 _const = require('../../const.js');
+require('../../utils/cls.js');
+var grouping = require('../../utils/grouping.js');
+
+/**
+ * 自定义分组特性
+ * 主要用于处理分组值为null或undefined的情况，将不同类型的空值统一为一个特殊标记
+ * 这样所有的空值都会被归为同一组，而不是分散在不同的组中
+ */
+var CustomGroupingFeature = {
+  createRow: function createRow(row) {
+    // 保存原始的getGroupingValue方法
+    var originalGetGroupingValue = row.getGroupingValue;
+    // 重写getGroupingValue方法，统一处理空值
+    row.getGroupingValue = function (columnId) {
+      // 获取原始分组值
+      var value = originalGetGroupingValue.call(this, columnId);
+      // 如果是空值，统一返回特殊标记
+      if (grouping.isEmptyValue(value)) {
+        return _const.EMPTY_VALUE;
+      }
+      return value;
+    };
+  }
+};
+exports.CustomGroupingFeature = CustomGroupingFeature;

package/lib/cjs/features/_overrides/overrides.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';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var useOpts = require('../pagination/use-opts.js');
+
+// 内置 Feature 的覆写逻辑
+var OverridesFeature = {
+  createTable: function createTable(table) {
+    // 覆写 resetPagination 方法
+    if (!table.originalResetPagination) table.originalResetPagination = table.resetPagination;
+    table.resetPagination = function resetPagination(defaultState) {
+      var _a;
+      // 先从分页状态中取行数，否则从 table 实例数据上取
+      // 原因是后端分页时，table 实例上只有一页的数据，不准
+      var rowCount = (_a = table.getState().pagination.rowCount) !== null && _a !== void 0 ? _a : table.getRowCount();
+      if (defaultState) {
+        var pageSize = useOpts.dftPageSize;
+        table.setPagination({
+          pageIndex: 0,
+          pageSize: pageSize,
+          rowCount: rowCount
+        });
+      } else {
+        var pagination = table.initialState.pagination;
+        table.setPagination(Object.assign(Object.assign({}, pagination), {
+          rowCount: rowCount
+        }));
+      }
+    };
+  }
+};
+exports.OverridesFeature = OverridesFeature;