one-design-next 0.0.4-alpha.57

package/dist/table/style/index.css

@@ -0,0 +1,320 @@
+html {
+  --odn-table-loading-height: 240px;
+  --odn-table-border-color: var(--odn-color-solid-black-5);
+  --odn-table-cell-bg: var(--odn-color-white);
+  --odn-table-cell-bg-hover: var(--odn-color-solid-black-1);
+  --odn-table-cell-bg-striped: var(--odn-color-solid-black-1);
+  --odn-table-cell-bg-striped-hover: var(--odn-color-solid-black-2);
+}
+
+[data-odn-table] {
+  max-width: 100%;
+}
+
+.odn-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  max-width: 100%;
+}
+.odn-table table {
+  width: 100%;
+  text-align: start;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--odn-font-size);
+  line-height: var(--odn-line-height);
+}
+
+.odn-table-body::-webkit-scrollbar,
+.odn-table-content::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.odn-table-body::-webkit-scrollbar-thumb,
+.odn-table-content::-webkit-scrollbar-thumb {
+  min-width: 14px;
+  min-height: 14px;
+  background-color: var(--odn-color-border);
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 14px;
+}
+.odn-table-body::-webkit-scrollbar-track,
+.odn-table-content::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.odn-table-cell {
+  padding: 12px;
+  overflow-wrap: break-word;
+  background-color: var(--odn-table-cell-bg);
+}
+
+.odn-table-cell-ellipsis .odn-table-cell-content {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+
+.odn-table-cell-row-hover {
+  background-color: var(--odn-table-cell-bg-hover);
+}
+
+.odn-table-summary td {
+  border-top: 1px solid var(--odn-table-border-color);
+}
+
+.odn-table-thead {
+  position: relative;
+}
+
+.odn-table-thead .odn-table-cell {
+  font-weight: 600;
+  text-align: start;
+  border-bottom: 1px solid var(--odn-table-border-color);
+  user-select: none;
+}
+
+.odn-table-tbody .odn-table-row:not(:last-child) .odn-table-cell {
+  border-bottom: 1px solid var(--odn-table-border-color);
+}
+
+[data-odn-table-bordered=true] .odn-table {
+  border-top: 1px solid var(--odn-table-border-color);
+  border-left: 1px solid var(--odn-table-border-color);
+}
+[data-odn-table-bordered=true] .odn-table-cell {
+  border-right: 1px solid var(--odn-table-border-color);
+}
+[data-odn-table-bordered=true] .odn-table-tbody .odn-table-row .odn-table-cell {
+  border-bottom: 1px solid var(--odn-table-border-color);
+}
+
+[data-odn-table-striped=true] .odn-table-thead .odn-table-cell {
+  background-color: var(--odn-table-cell-bg-striped);
+}
+[data-odn-table-striped=true] .odn-table-tbody .odn-table-row:nth-child(even) .odn-table-cell {
+  background-color: var(--odn-table-cell-bg-striped);
+}
+[data-odn-table-striped=true] .odn-table-tbody .odn-table-row:nth-child(even) .odn-table-cell.odn-table-cell-row-hover {
+  background-color: var(--odn-table-cell-bg-striped-hover);
+}
+
+[data-odn-table-selection-checkbox] {
+  vertical-align: top;
+}
+
+[data-odn-table-tr-clickable=true] .odn-table-row {
+  cursor: pointer;
+}
+
+[data-odn-table-column-filter] {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: -3px;
+  cursor: pointer;
+  color: var(--odn-color-black-8);
+}
+[data-odn-table-column-filter]:hover {
+  color: var(--odn-color-black-9);
+}
+[data-odn-table-column-filter][data-odn-table-column-filter-active=true] {
+  color: var(--odn-color-primary);
+}
+
+[data-odn-table-filter-menu] {
+  padding: 12px;
+}
+
+[data-odn-table-filter-footer] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px;
+  border-top: 1px solid var(--odn-table-border-color);
+}
+
+[data-odn-table-column-sorter] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+[data-odn-table-column-sorter-inner] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+[data-odn-table-column-sorter-title] {
+  flex: 1;
+  min-width: 0;
+}
+
+[data-odn-table-column-sorter-inner] {
+  flex: none;
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+[data-odn-table-column-sorter-up],
+[data-odn-table-column-sorter-down] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  fill: var(--odn-color-black-8);
+}
+
+[data-odn-table-column-sorter-order=ascend],
+[data-odn-table-column-sorter-order=descend] {
+  color: var(--odn-color-primary);
+}
+
+[data-odn-table-column-sorter-order=ascend] [data-odn-table-column-sorter-up] {
+  fill: var(--odn-color-primary);
+}
+
+[data-odn-table-column-sorter-order=descend] [data-odn-table-column-sorter-down] {
+  fill: var(--odn-color-primary);
+}
+
+[data-odn-table-expand-icon] {
+  display: block;
+  cursor: pointer;
+}
+
+.odn-table-cell-fix-left::after,
+.odn-table-cell-fix-right::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 1px;
+  width: 30px;
+  transition: box-shadow 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  pointer-events: none;
+  will-change: transform;
+}
+
+.odn-table-cell-fix-left::after {
+  right: 0;
+  transform: translate3d(100%, 0, 0);
+}
+
+.odn-table-cell-fix-right::after {
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+
+.odn-table-ping-left .odn-table-cell-fix-left-last::after {
+  box-shadow: inset 10px 0 8px -8px var(--odn-color-black-3);
+}
+
+.odn-table-ping-right .odn-table-cell-fix-right-first::after {
+  box-shadow: inset -10px 0 8px -8px var(--odn-color-black-3);
+}
+
+[data-odn-table-empty] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: var(--odn-table-loading-height);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--odn-color-black-9);
+}
+
+.odn-table-thead::after {
+  content: "";
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--odn-primary-color) 5%, transparent) 0%, var(--odn-primary-color) 50%, color-mix(in srgb, var(--odn-primary-color) 5%, transparent) 100%);
+  background-size: 200% 100%;
+  z-index: 1;
+}
+
+[data-odn-table-loading=true] .odn-table-thead::after {
+  display: block;
+  animation: loading-bar 2s ease-in-out infinite;
+}
+[data-odn-table-loading=true] .odn-table {
+  pointer-events: none;
+}
+[data-odn-table-loading=true] .odn-table-tbody {
+  opacity: 0.5;
+}
+
+@keyframes loading-bar {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+[data-odn-table-popover-text] {
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dashed;
+  text-underline-offset: 3px;
+}
+
+[data-odn-table-popover-icon] {
+  display: inline-block;
+  margin-left: 2px;
+  vertical-align: -3px;
+  cursor: pointer;
+  color: var(--odn-color-black-8);
+}
+[data-odn-table-popover-icon]:hover {
+  color: var(--odn-color-black-9);
+}
+
+.odn-table-sticky-holder {
+  position: sticky;
+  z-index: 3;
+}
+
+.odn-table-sticky-scroll {
+  position: sticky;
+  bottom: 0;
+  height: 8px;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid var(--odn-color-border);
+}
+
+.odn-table-sticky-scroll-bar {
+  height: 6px;
+  background-color: var(--odn-color-border);
+  border-radius: 9999px;
+  position: absolute;
+  top: calc(50% - 3px);
+}
+
+.odn-table-measure-cell {
+  padding-block: 0 !important;
+  border-block: 0 !important;
+}
+
+.odn-table-measure-cell-content {
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}

package/dist/table/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/table/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/table/useSelection.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnType as RcColumnType } from 'rc-table/lib/interface';
+import React from 'react';
+import type { TableRowSelection } from './index';
+export interface UseSelectionOptions<T> {
+    dataSource: T[];
+    rowSelection?: TableRowSelection<T>;
+    columns: RcColumnType<T>[];
+}
+export interface UseSelectionReturn<T> {
+    columns: RcColumnType<T>[];
+    onRowClick?: (record: T, event?: React.MouseEvent) => void;
+}
+export declare function useSelection<T extends Record<string, unknown>>({ dataSource, rowSelection, columns, }: UseSelectionOptions<T>): UseSelectionReturn<T>;

package/dist/table/useSelection.js

@@ -0,0 +1,259 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["popover", "popoverProps"],
+  _excluded2 = ["popover", "popoverProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import React from 'react';
+import Checkbox from "../checkbox";
+import Popover from "../popover";
+import Radio from "../radio";
+export function useSelection(_ref) {
+  var dataSource = _ref.dataSource,
+    rowSelection = _ref.rowSelection,
+    columns = _ref.columns;
+  var processedColumns = _toConsumableArray(columns);
+
+  // 行点击处理函数
+  var onRowClick;
+  if (rowSelection) {
+    var selectedRowKeys = rowSelection.selectedRowKeys || [];
+    var selectionType = rowSelection.type || 'checkbox';
+
+    // 统一的单行选择处理
+    var handleRowSelect = function handleRowSelect(record, checked) {
+      if (!(rowSelection !== null && rowSelection !== void 0 && rowSelection.onChange)) return;
+      var recordKey = record.key;
+      var newSelectedRowKeys;
+      if (selectionType === 'radio') {
+        // 单选模式：直接设置为当前选中的项
+        newSelectedRowKeys = [recordKey];
+      } else {
+        // 多选模式
+        if (checked) {
+          // 选中：添加 key
+          newSelectedRowKeys = selectedRowKeys.includes(recordKey) ? selectedRowKeys : [].concat(_toConsumableArray(selectedRowKeys), [recordKey]);
+        } else {
+          // 取消选中：移除 key
+          newSelectedRowKeys = selectedRowKeys.filter(function (key) {
+            return key !== recordKey;
+          });
+        }
+      }
+      var selectedRecords = dataSource.filter(function (item) {
+        return newSelectedRowKeys.includes(item.key);
+      });
+      rowSelection.onChange(newSelectedRowKeys, {
+        selectedRows: selectedRecords
+      });
+    };
+
+    // 行点击处理
+    onRowClick = function onRowClick(record, event) {
+      if (!(rowSelection !== null && rowSelection !== void 0 && rowSelection.selectOnRowClick)) return;
+
+      // 检查是否点击的是选择控件，如果是则不处理行点击
+      var target = event === null || event === void 0 ? void 0 : event.target;
+      if (target && (target.closest('[data-odn-table-selection-checkbox]') || target.closest('[data-odn-table-selection-radio]'))) {
+        return;
+      }
+      var recordKey = record.key;
+
+      // 检查行是否被禁用
+      if (selectionType === 'checkbox') {
+        var _rowSelection$getChec;
+        var checkboxProps = (_rowSelection$getChec = rowSelection.getCheckboxProps) === null || _rowSelection$getChec === void 0 ? void 0 : _rowSelection$getChec.call(rowSelection, record);
+        if (checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.disabled) return;
+
+        // 多选：切换选中状态
+        var isSelected = selectedRowKeys.includes(recordKey);
+        handleRowSelect(record, !isSelected);
+      } else if (selectionType === 'radio') {
+        var _rowSelection$getRadi;
+        var radioProps = (_rowSelection$getRadi = rowSelection.getRadioProps) === null || _rowSelection$getRadi === void 0 ? void 0 : _rowSelection$getRadi.call(rowSelection, record);
+        if (radioProps !== null && radioProps !== void 0 && radioProps.disabled) return;
+
+        // 单选：直接选中
+        handleRowSelect(record, true);
+      }
+    };
+    if (selectionType === 'checkbox') {
+      // 多选逻辑
+      var showSelectAll = rowSelection.selectAll !== false; // 默认为 true
+
+      // 获取所有可选择的行的 key
+      var getSelectableRowKeys = function getSelectableRowKeys() {
+        return dataSource.filter(function (record) {
+          var _rowSelection$getChec2;
+          var checkboxProps = (_rowSelection$getChec2 = rowSelection.getCheckboxProps) === null || _rowSelection$getChec2 === void 0 ? void 0 : _rowSelection$getChec2.call(rowSelection, record);
+          return !(checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.disabled);
+        }).map(function (record) {
+          return record.key;
+        });
+      };
+
+      // 判断是否全选
+      var isAllSelected = function isAllSelected() {
+        var selectableKeys = getSelectableRowKeys();
+        return selectableKeys.length > 0 && selectableKeys.every(function (key) {
+          return selectedRowKeys.includes(key);
+        });
+      };
+
+      // 判断是否部分选中
+      var isIndeterminate = function isIndeterminate() {
+        var selectableKeys = getSelectableRowKeys();
+        var selectedCount = selectableKeys.filter(function (key) {
+          return selectedRowKeys.includes(key);
+        }).length;
+        return selectedCount > 0 && selectedCount < selectableKeys.length;
+      };
+
+      // 全选/取消全选处理
+      var handleSelectAll = function handleSelectAll(checked) {
+        if (!(rowSelection !== null && rowSelection !== void 0 && rowSelection.onChange)) return;
+        var selectableKeys = getSelectableRowKeys();
+        var selectableRecords = dataSource.filter(function (record) {
+          var _rowSelection$getChec3;
+          var checkboxProps = (_rowSelection$getChec3 = rowSelection.getCheckboxProps) === null || _rowSelection$getChec3 === void 0 ? void 0 : _rowSelection$getChec3.call(rowSelection, record);
+          return !(checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.disabled);
+        });
+        var newSelectedRowKeys;
+        if (checked) {
+          // 全选：添加所有可选择的 key
+          newSelectedRowKeys = _toConsumableArray(new Set([].concat(_toConsumableArray(selectedRowKeys), _toConsumableArray(selectableKeys))));
+        } else {
+          // 取消全选：移除所有可选择的 key
+          newSelectedRowKeys = selectedRowKeys.filter(function (key) {
+            return !selectableKeys.includes(key);
+          });
+        }
+        rowSelection.onChange(newSelectedRowKeys, {
+          selectedRows: selectableRecords
+        });
+      };
+
+      // 添加多选列到 columns 开头
+      processedColumns.unshift({
+        title: showSelectAll ? /*#__PURE__*/React.createElement(Checkbox, {
+          "data-odn-table-selection-checkbox-all": true,
+          "data-odn-table-selection-checkbox": true,
+          checked: isAllSelected(),
+          indeterminate: isIndeterminate(),
+          onChange: function onChange(checked) {
+            return handleSelectAll(checked);
+          }
+        }) : '',
+        key: 'selection',
+        width: rowSelection.width || 40,
+        align: rowSelection.align,
+        render: function render(value, record, rowIndex) {
+          var _rowSelection$getChec4;
+          var recordKey = record.key;
+          var isSelected = selectedRowKeys.includes(recordKey);
+          var checkboxProps = (_rowSelection$getChec4 = rowSelection.getCheckboxProps) === null || _rowSelection$getChec4 === void 0 ? void 0 : _rowSelection$getChec4.call(rowSelection, record);
+          var _ref2 = checkboxProps || {},
+            popover = _ref2.popover,
+            popoverProps = _ref2.popoverProps,
+            restCheckboxProps = _objectWithoutProperties(_ref2, _excluded);
+          var checkbox = /*#__PURE__*/React.createElement(Checkbox, _extends({
+            "data-odn-table-selection-checkbox": true,
+            checked: isSelected,
+            onChange: function onChange(checked) {
+              return handleRowSelect === null || handleRowSelect === void 0 ? void 0 : handleRowSelect(record, checked);
+            }
+          }, restCheckboxProps));
+          var defaultNode = popover ? /*#__PURE__*/React.createElement(Popover, _extends({
+            popup: popover,
+            placement: "left"
+          }, popoverProps), checkbox) : checkbox;
+
+          // 如果提供了自定义 render 函数，使用它
+          if (rowSelection.render) {
+            return rowSelection.render({
+              row: record,
+              rowIndex: rowIndex,
+              node: defaultNode
+            });
+          }
+          return defaultNode;
+        }
+      });
+    } else if (selectionType === 'radio') {
+      // 单选逻辑
+      var handleRadioChange = function handleRadioChange(value) {
+        var selectedRecord = dataSource.find(function (item) {
+          return item.key === value;
+        });
+        if (selectedRecord) {
+          handleRowSelect(selectedRecord, true);
+        }
+      };
+
+      // 为每行创建单选选项
+      var radioOptions = dataSource.map(function (record) {
+        var _rowSelection$getRadi2;
+        var recordKey = record.key;
+        var radioProps = (_rowSelection$getRadi2 = rowSelection.getRadioProps) === null || _rowSelection$getRadi2 === void 0 ? void 0 : _rowSelection$getRadi2.call(rowSelection, record);
+        return {
+          label: '',
+          // 空标签，因为表格行本身就是标签
+          value: recordKey,
+          disabled: (radioProps === null || radioProps === void 0 ? void 0 : radioProps.disabled) || false
+        };
+      });
+
+      // 添加单选列到 columns 开头
+      processedColumns.unshift({
+        title: '',
+        key: 'selection',
+        width: rowSelection.width || 40,
+        align: rowSelection.align,
+        render: function render(value, record, rowIndex) {
+          var _rowSelection$getRadi3;
+          var radioProps = (_rowSelection$getRadi3 = rowSelection.getRadioProps) === null || _rowSelection$getRadi3 === void 0 ? void 0 : _rowSelection$getRadi3.call(rowSelection, record);
+          var _ref3 = radioProps || {},
+            popover = _ref3.popover,
+            popoverProps = _ref3.popoverProps,
+            restRadioProps = _objectWithoutProperties(_ref3, _excluded2);
+          var radio = /*#__PURE__*/React.createElement("div", {
+            "data-odn-table-selection-radio": true
+          }, /*#__PURE__*/React.createElement(Radio.Group, {
+            value: selectedRowKeys[0] || '',
+            onChange: handleRadioChange,
+            options: [_objectSpread(_objectSpread({}, radioOptions[rowIndex]), restRadioProps)]
+          }));
+          var defaultNode = popover ? /*#__PURE__*/React.createElement(Popover, _extends({
+            popup: popover,
+            placement: "left"
+          }, popoverProps), radio) : radio;
+
+          // 如果提供了自定义 render 函数，使用它
+          if (rowSelection.render) {
+            return rowSelection.render({
+              row: record,
+              rowIndex: rowIndex,
+              node: defaultNode
+            });
+          }
+          return defaultNode;
+        }
+      });
+    }
+  }
+  return {
+    columns: processedColumns,
+    onRowClick: rowSelection !== null && rowSelection !== void 0 && rowSelection.selectOnRowClick ? onRowClick : undefined
+  };
+}

package/dist/tabs/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './style';
+export declare const MOTION_CONFIG: {
+    readonly visualDuration: 0.15;
+    readonly bounce: 0;
+};
+export type TabItemValue = string | number;
+export interface TabItem<T extends TabItemValue = TabItemValue> {
+    value: T;
+    label: React.ReactNode | ((item: TabItem<T>, index: number, active: boolean) => React.ReactNode);
+    disabled?: boolean;
+}
+export interface TabsBaseProps<T extends TabItemValue = TabItemValue> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart' | 'onDragEndCapture' | 'onDragCapture'> {
+    gap?: number;
+    items?: TabItem<T>[];
+    value?: T;
+    onChange?: (e: React.MouseEvent<HTMLDivElement>, value: T) => void;
+    itemClassName?: string | ((item: TabItem<T>, index: number) => string);
+    itemStyle?: React.CSSProperties | ((item: TabItem<T>, index: number) => React.CSSProperties);
+    activeItemClassName?: string | ((item: TabItem<T>, index: number) => string);
+    activeItemStyle?: React.CSSProperties | ((item: TabItem<T>, index: number) => React.CSSProperties);
+}
+export interface TabsVerticalProps<T extends TabItemValue = TabItemValue> extends TabsBaseProps<T> {
+    indicatorWrapperClassName?: string;
+    indicatorWrapperStyle?: React.CSSProperties;
+    indicatorClassName?: string;
+    indicatorStyle?: React.CSSProperties;
+}
+export interface TabsDividerProps<T extends TabItemValue = TabItemValue> extends TabsBaseProps<T> {
+    dividerClassName?: string;
+    dividerStyle?: React.CSSProperties;
+}
+export interface TabsButtonGroupProps<T extends TabItemValue = TabItemValue> extends TabsBaseProps<T> {
+    indicatorClassName?: string;
+    indicatorStyle?: React.CSSProperties;
+}
+export interface TabsTabsProps<T extends TabItemValue = TabItemValue> extends TabsBaseProps<T> {
+    indicatorClassName?: string;
+    indicatorStyle?: React.CSSProperties;
+}
+export interface TabsTagProps<T extends TabItemValue = TabItemValue> extends TabsBaseProps<T> {
+}
+declare const Tabs: {
+    (): React.JSX.Element;
+    Default: <T extends TabItemValue>({ gap, items, value, onChange, itemClassName, itemStyle, activeItemClassName, activeItemStyle, indicatorClassName, indicatorStyle, style, ...props }: TabsTabsProps<T>) => React.JSX.Element;
+    ButtonGroup: <T_1 extends TabItemValue>({ gap, items, value, onChange, itemClassName, itemStyle, activeItemClassName, activeItemStyle, indicatorClassName, indicatorStyle, style, ...props }: TabsButtonGroupProps<T_1>) => React.JSX.Element;
+    Vertical: <T_2 extends TabItemValue>({ gap, items, value, onChange, itemClassName, itemStyle, activeItemClassName, activeItemStyle, indicatorWrapperClassName, indicatorWrapperStyle, indicatorClassName, indicatorStyle, ...props }: TabsVerticalProps<T_2>) => React.JSX.Element;
+    Divider: <T_3 extends TabItemValue>({ gap, items, value, onChange, itemClassName, itemStyle, activeItemClassName, activeItemStyle, dividerClassName, dividerStyle, style, className, ...props }: TabsDividerProps<T_3>) => React.JSX.Element;
+    Tag: <T_4 extends TabItemValue>({ gap, items, value, onChange, itemClassName, itemStyle, activeItemClassName, activeItemStyle, style, ...props }: TabsTagProps<T_4>) => React.JSX.Element;
+};
+export default Tabs;