one-design-next 0.0.4-alpha.57

package/dist/table/index.js

@@ -0,0 +1,791 @@
+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 = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText"],
+  _excluded2 = ["onSort", "title", "popover", "popoverProps", "popoverIcon"],
+  _excluded3 = ["onSort", "filters", "filteredValue", "filterMultiple", "onFilter", "onFilterChange", "title", "popover", "popoverProps", "popoverIcon", "ellipsisPopoverProps", "render"];
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import RcTable from 'rc-table';
+import React, { useState } from 'react';
+import Button from "../button";
+import Checkbox from "../checkbox";
+import Icon from "../icon";
+import Popover from "../popover";
+import Radio from "../radio";
+import "./style";
+import TableCellContent from "./TableCellContent";
+import { useSelection } from "./useSelection";
+
+// 过滤器组件
+
+var FilterComponent = function FilterComponent(_ref) {
+  var filters = _ref.filters,
+    filteredValue = _ref.filteredValue,
+    filterMultiple = _ref.filterMultiple,
+    onFilterChange = _ref.onFilterChange,
+    onVisibleChange = _ref.onVisibleChange;
+  // 内部临时状态
+  var _useState = useState(filteredValue || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    tempFilteredValue = _useState2[0],
+    setTempFilteredValue = _useState2[1];
+
+  // 重置到当前外部状态
+  React.useEffect(function () {
+    setTempFilteredValue(filteredValue || []);
+  }, [filteredValue]);
+  var handleConfirm = function handleConfirm() {
+    onFilterChange(tempFilteredValue);
+    onVisibleChange(false);
+  };
+  var handleReset = function handleReset() {
+    setTempFilteredValue([]);
+    onFilterChange([]);
+    onVisibleChange(false);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-table-filter-dropdown": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-table-filter-menu": true
+  }, filterMultiple ? /*#__PURE__*/React.createElement(Checkbox.Group, {
+    vertical: true,
+    value: tempFilteredValue.map(function (v) {
+      return String(v);
+    }),
+    onChange: function onChange(checkedValues) {
+      var actualValues = checkedValues.map(function (v) {
+        var originalFilter = filters.find(function (f) {
+          return String(f.value) === v;
+        });
+        return originalFilter === null || originalFilter === void 0 ? void 0 : originalFilter.value;
+      }).filter(function (v) {
+        return v !== undefined;
+      });
+      setTempFilteredValue(actualValues);
+    },
+    options: filters.map(function (filter) {
+      return {
+        label: String(filter.text),
+        value: String(filter.value)
+      };
+    })
+  }) : /*#__PURE__*/React.createElement(Radio.Group, {
+    vertical: true,
+    value: tempFilteredValue.length > 0 ? String(tempFilteredValue[0]) : '',
+    onChange: function onChange(value) {
+      if (value) {
+        var _filters$find;
+        var originalValue = (_filters$find = filters.find(function (f) {
+          return String(f.value) === value;
+        })) === null || _filters$find === void 0 ? void 0 : _filters$find.value;
+        setTempFilteredValue(originalValue !== undefined ? [originalValue] : []);
+      } else {
+        setTempFilteredValue([]);
+      }
+    },
+    options: filters.map(function (filter) {
+      return {
+        label: String(filter.text),
+        value: String(filter.value)
+      };
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-table-filter-footer": true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleReset,
+    "data-odn-table-filter-reset": true,
+    light: true
+  }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleConfirm,
+    "data-odn-table-filter-confirm": true,
+    intent: "primary"
+  }, "\u786E\u5B9A")));
+};
+var Table = function Table(_ref2) {
+  var dataSource = _ref2.dataSource,
+    columns = _ref2.columns,
+    _ref2$bordered = _ref2.bordered,
+    bordered = _ref2$bordered === void 0 ? false : _ref2$bordered,
+    _ref2$striped = _ref2.striped,
+    striped = _ref2$striped === void 0 ? false : _ref2$striped,
+    _ref2$loading = _ref2.loading,
+    loading = _ref2$loading === void 0 ? false : _ref2$loading,
+    rowExpansion = _ref2.rowExpansion,
+    rowSelection = _ref2.rowSelection,
+    _ref2$sortBgVisible = _ref2.sortBgVisible,
+    sortBgVisible = _ref2$sortBgVisible === void 0 ? true : _ref2$sortBgVisible,
+    getCellProps = _ref2.getCellProps,
+    getHeaderCellProps = _ref2.getHeaderCellProps,
+    globalPopoverIcon = _ref2.popoverIcon,
+    className = _ref2.className,
+    style = _ref2.style,
+    emptyText = _ref2.emptyText,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  // 渲染带 popover 的标题
+  var renderTitleWithPopover = function renderTitleWithPopover(titleContent, popover, popoverProps, popoverIcon) {
+    if (!popover) {
+      return titleContent;
+    }
+
+    // 优先使用列级别的 popoverIcon，如果没有则使用全局的 popoverIcon
+    var effectivePopoverIcon = popoverIcon || globalPopoverIcon;
+    if (effectivePopoverIcon) {
+      // 独立图标模式
+      return /*#__PURE__*/React.createElement(React.Fragment, null, titleContent, /*#__PURE__*/React.createElement(Popover, _extends({
+        popup: popover
+      }, popoverProps), /*#__PURE__*/React.createElement(Icon, {
+        name: effectivePopoverIcon,
+        "data-odn-table-popover-icon": true
+      })));
+    } else {
+      // 下划线模式
+      return /*#__PURE__*/React.createElement(Popover, _extends({
+        popup: popover
+      }, popoverProps), /*#__PURE__*/React.createElement("span", {
+        "data-odn-table-popover-text": true
+      }, titleContent));
+    }
+  };
+
+  // 处理自定义 render 函数，将结构化参数转换为 rc-table 期望的格式
+  var processColumns = function processColumns(cols) {
+    return cols.map(function (col, colIndex) {
+      if ('children' in col) {
+        // 列分组：递归处理子列
+        var onSort = col.onSort,
+          title = col.title,
+          popover = col.popover,
+          popoverProps = col.popoverProps,
+          popoverIcon = col.popoverIcon,
+          restCol = _objectWithoutProperties(col, _excluded2);
+        return _objectSpread(_objectSpread({}, restCol), {}, {
+          title: renderTitleWithPopover(title, popover, popoverProps, popoverIcon),
+          children: processColumns(col.children)
+        });
+      } else {
+        // 普通列：转换 render 函数和排序属性
+        var _onSort = col.onSort,
+          filters = col.filters,
+          _filteredValue = col.filteredValue,
+          _col$filterMultiple = col.filterMultiple,
+          filterMultiple = _col$filterMultiple === void 0 ? true : _col$filterMultiple,
+          onFilter = col.onFilter,
+          onFilterChange = col.onFilterChange,
+          _title = col.title,
+          _popover = col.popover,
+          _popoverProps = col.popoverProps,
+          _popoverIcon = col.popoverIcon,
+          ellipsisPopoverProps = col.ellipsisPopoverProps,
+          render = col.render,
+          _restCol = _objectWithoutProperties(col, _excluded3);
+
+        // 计算排序背景样式
+        var getSortBackgroundStyle = function getSortBackgroundStyle(rowIndex) {
+          var isHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+          if (!sortBgVisible || !col.sortOrder) return {};
+          var totalCells = dataSource.length + 1; // +1 for header
+          var cellIndex = isHeader ? 0 : rowIndex + 1;
+
+          // 根据排序方向调整渐变
+          var isAscend = col.sortOrder === 'ascend';
+
+          // 计算当前单元格在整体渐变中的位置范围 (0-1)
+          var cellStartPosition = cellIndex / totalCells;
+          var cellEndPosition = (cellIndex + 1) / totalCells;
+
+          // 计算当前单元格开始和结束位置对应的透明度
+          var getOpacityAtPosition = function getOpacityAtPosition(position) {
+            if (isAscend) {
+              // 升序：从 0 到 0.05
+              return position * 0.05;
+            } else {
+              // 降序：从 0.05 到 0
+              return (1 - position) * 0.05;
+            }
+          };
+          var startOpacity = getOpacityAtPosition(cellStartPosition);
+          var endOpacity = getOpacityAtPosition(cellEndPosition);
+
+          // 使用 color-mix 生成颜色
+          var startColor = "color-mix(in srgb, var(--odn-color-primary) ".concat(startOpacity * 100, "%, transparent)");
+          var endColor = "color-mix(in srgb, var(--odn-color-primary) ".concat(endOpacity * 100, "%, transparent)");
+          return {
+            background: "linear-gradient(180deg, ".concat(startColor, " 0%, ").concat(endColor, " 100%)")
+          };
+        };
+        return _objectSpread(_objectSpread({}, _restCol), {}, {
+          onCell: function onCell(row, index) {
+            var _col$getCellProps;
+            var rowIndex = index || 0;
+            var cellProps = getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps({
+              row: row,
+              rowIndex: rowIndex,
+              col: col,
+              colIndex: colIndex
+            });
+            var colCellProps = (_col$getCellProps = col.getCellProps) === null || _col$getCellProps === void 0 ? void 0 : _col$getCellProps.call(col, {
+              row: row,
+              rowIndex: rowIndex
+            });
+            var sortBgStyle = getSortBackgroundStyle(rowIndex, false);
+            return _objectSpread(_objectSpread(_objectSpread({}, cellProps), colCellProps), {}, {
+              style: _objectSpread(_objectSpread(_objectSpread({}, cellProps === null || cellProps === void 0 ? void 0 : cellProps.style), colCellProps === null || colCellProps === void 0 ? void 0 : colCellProps.style), sortBgStyle)
+            });
+          },
+          onHeaderCell: function onHeaderCell() {
+            var _col$getHeaderCellPro;
+            var headerProps = getHeaderCellProps === null || getHeaderCellProps === void 0 ? void 0 : getHeaderCellProps({
+              col: col,
+              colIndex: colIndex
+            });
+            var colHeaderProps = (_col$getHeaderCellPro = col.getHeaderCellProps) === null || _col$getHeaderCellPro === void 0 ? void 0 : _col$getHeaderCellPro.call(col);
+            var sortBgStyle = getSortBackgroundStyle(0, true);
+            return _objectSpread(_objectSpread(_objectSpread({}, headerProps), colHeaderProps), {}, {
+              style: _objectSpread(_objectSpread(_objectSpread({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.style), colHeaderProps === null || colHeaderProps === void 0 ? void 0 : colHeaderProps.style), sortBgStyle)
+            });
+          },
+          render: col.render ? function (value, row, rowIndex) {
+            var renderedContent = col.render({
+              row: row,
+              col: col,
+              rowIndex: rowIndex,
+              colIndex: colIndex
+            });
+
+            // 如果启用了 ellipsis 且渲染的内容是字符串，使用 TableCellContent 包装
+            if (col.ellipsis && typeof renderedContent === 'string') {
+              return /*#__PURE__*/React.createElement(TableCellContent, {
+                content: renderedContent,
+                ellipsis: !!col.ellipsis,
+                popoverProps: ellipsisPopoverProps
+              });
+            }
+            return renderedContent;
+          } : col.ellipsis ? function (value) {
+            // 如果启用了 ellipsis 且值是字符串，使用 TableCellContent 包装
+            if (typeof value === 'string') {
+              return /*#__PURE__*/React.createElement(TableCellContent, {
+                content: value,
+                ellipsis: !!col.ellipsis,
+                popoverProps: ellipsisPopoverProps
+              });
+            }
+            return value;
+          } : undefined,
+          // 处理排序
+          sorter: _onSort ? true : undefined,
+          sortOrder: col.sortOrder,
+          title: function () {
+            // 创建过滤器组件
+            var FilterPopover = filters && filters.length > 0 ? function () {
+              var _useState3 = useState(false),
+                _useState4 = _slicedToArray(_useState3, 2),
+                visible = _useState4[0],
+                setVisible = _useState4[1];
+              return /*#__PURE__*/React.createElement(Popover, {
+                trigger: "click",
+                arrowed: false,
+                placement: "bottom",
+                popupStyle: {
+                  padding: 0
+                },
+                visible: visible,
+                onVisibleChange: function onVisibleChange(vis) {
+                  if (!vis) {
+                    // 点击外层关闭时，执行确定操作
+                    setVisible(false);
+                  } else {
+                    setVisible(true);
+                  }
+                },
+                popup: /*#__PURE__*/React.createElement(FilterComponent, {
+                  filters: filters,
+                  filteredValue: _filteredValue,
+                  filterMultiple: filterMultiple,
+                  onFilterChange: onFilterChange,
+                  onVisibleChange: setVisible
+                })
+              }, /*#__PURE__*/React.createElement("span", {
+                "data-odn-table-column-filter": true,
+                "data-odn-table-column-filter-active": _filteredValue && _filteredValue.length > 0
+              }, /*#__PURE__*/React.createElement(Icon, {
+                name: "filter-filled"
+              })));
+            }() : null;
+
+            // 渲染标题内容
+            if (_onSort && FilterPopover) {
+              // 既有排序又有过滤
+              return /*#__PURE__*/React.createElement("div", {
+                "data-odn-table-column-header": true
+              }, /*#__PURE__*/React.createElement("div", {
+                "data-odn-table-column-sorter": true,
+                "data-odn-table-column-sorter-order": col.sortOrder,
+                onClick: function onClick() {
+                  // 切换排序状态：null → descend → ascend → null
+                  var newSortOrder;
+                  if (col.sortOrder === null || col.sortOrder === undefined) {
+                    newSortOrder = 'descend';
+                  } else if (col.sortOrder === 'descend') {
+                    newSortOrder = 'ascend';
+                  } else {
+                    newSortOrder = null;
+                  }
+                  _onSort(newSortOrder);
+                }
+              }, /*#__PURE__*/React.createElement("div", {
+                "data-odn-table-column-sorter-title": true
+              }, renderTitleWithPopover(_title, _popover, _popoverProps, _popoverIcon)), /*#__PURE__*/React.createElement("span", {
+                "data-odn-table-column-sorter-inner": true,
+                "aria-hidden": "true"
+              }, /*#__PURE__*/React.createElement("svg", {
+                "data-odn-table-column-sorter-up": true,
+                viewBox: "0 0 16 16"
+              }, /*#__PURE__*/React.createElement("path", {
+                d: "M7.41437 2.73204C7.71461 2.35674 8.28543 2.35674 8.58567 2.73204L11.0252 5.78145C11.4181 6.27253 11.0684 6.99998 10.4396 6.99998L5.56049 6.99998C4.93161 6.99998 4.58198 6.27253 4.97484 5.78145L7.41437 2.73204Z"
+              })), /*#__PURE__*/React.createElement("svg", {
+                "data-odn-table-column-sorter-down": true,
+                viewBox: "0 0 16 16"
+              }, /*#__PURE__*/React.createElement("path", {
+                d: "M8.58567 13.2679C8.28543 13.6432 7.71461 13.6432 7.41437 13.2679L4.97484 10.2185C4.58198 9.72743 4.93161 8.99998 5.56049 8.99998H10.4396C11.0684 8.99998 11.4181 9.72743 11.0252 10.2185L8.58567 13.2679Z"
+              })))), FilterPopover);
+            } else if (_onSort) {
+              // 只有排序
+              return /*#__PURE__*/React.createElement("div", {
+                "data-odn-table-column-sorter": true,
+                "data-odn-table-column-sorter-order": col.sortOrder,
+                onClick: function onClick() {
+                  // 切换排序状态：null → descend → ascend → null
+                  var newSortOrder;
+                  if (col.sortOrder === null || col.sortOrder === undefined) {
+                    newSortOrder = 'descend';
+                  } else if (col.sortOrder === 'descend') {
+                    newSortOrder = 'ascend';
+                  } else {
+                    newSortOrder = null;
+                  }
+                  _onSort(newSortOrder);
+                }
+              }, /*#__PURE__*/React.createElement("div", {
+                "data-odn-table-column-sorter-title": true
+              }, renderTitleWithPopover(_title, _popover, _popoverProps, _popoverIcon)), /*#__PURE__*/React.createElement("span", {
+                "data-odn-table-column-sorter-inner": true,
+                "aria-hidden": "true"
+              }, /*#__PURE__*/React.createElement("svg", {
+                "data-odn-table-column-sorter-up": true,
+                viewBox: "0 0 16 16"
+              }, /*#__PURE__*/React.createElement("path", {
+                d: "M7.41437 2.73204C7.71461 2.35674 8.28543 2.35674 8.58567 2.73204L11.0252 5.78145C11.4181 6.27253 11.0684 6.99998 10.4396 6.99998L5.56049 6.99998C4.93161 6.99998 4.58198 6.27253 4.97484 5.78145L7.41437 2.73204Z"
+              })), /*#__PURE__*/React.createElement("svg", {
+                "data-odn-table-column-sorter-down": true,
+                viewBox: "0 0 16 16"
+              }, /*#__PURE__*/React.createElement("path", {
+                d: "M8.58567 13.2679C8.28543 13.6432 7.71461 13.6432 7.41437 13.2679L4.97484 10.2185C4.58198 9.72743 4.93161 8.99998 5.56049 8.99998H10.4396C11.0684 8.99998 11.4181 9.72743 11.0252 10.2185L8.58567 13.2679Z"
+              }))));
+            } else if (FilterPopover) {
+              // 只有过滤
+              return /*#__PURE__*/React.createElement("div", {
+                "data-odn-table-column-header": true
+              }, renderTitleWithPopover(_title, _popover, _popoverProps, _popoverIcon), FilterPopover);
+            } else {
+              // 既没有排序也没有过滤
+              return renderTitleWithPopover(_title, _popover, _popoverProps, _popoverIcon);
+            }
+          }()
+        });
+      }
+    });
+  };
+  var rcColumns = processColumns(columns);
+
+  // 使用 useSelection hook 处理行选择逻辑
+  var _useSelection = useSelection({
+      dataSource: dataSource,
+      rowSelection: rowSelection,
+      columns: rcColumns
+    }),
+    finalColumns = _useSelection.columns,
+    onSelectionRowClick = _useSelection.onRowClick;
+
+  // 是否支持行的操作，以下情况：
+  // 1. 行选择
+  // 2. 行展开
+  var trClickable = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectOnRowClick) || (rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.expandOnRowClick);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-table": true,
+    "data-odn-table-bordered": bordered,
+    "data-odn-table-striped": striped,
+    "data-odn-table-tr-clickable": trClickable,
+    "data-odn-table-loading": loading,
+    className: className,
+    style: style
+  }, /*#__PURE__*/React.createElement(RcTable, _extends({
+    prefixCls: "odn-table",
+    data: dataSource,
+    columns: finalColumns,
+    rowKey: "key",
+    onRow: function onRow(row) {
+      return {
+        onClick: function onClick(e) {
+          onSelectionRowClick === null || onSelectionRowClick === void 0 || onSelectionRowClick(row, e);
+        }
+      };
+    },
+    expandable: rowExpansion ? _objectSpread(_objectSpread({
+      expandIcon: function expandIcon(params) {
+        var expanded = params.expanded,
+          onExpand = params.onExpand,
+          row = params.record;
+        var icon = expanded ? 'down' : 'right';
+        return /*#__PURE__*/React.createElement("div", {
+          onClick: function onClick(e) {
+            return onExpand(row, e);
+          }
+        }, /*#__PURE__*/React.createElement(Icon, {
+          name: icon,
+          "data-odn-table-expand-icon": true
+        }));
+      }
+    }, rowExpansion), {}, {
+      expandRowByClick: rowExpansion.expandOnRowClick,
+      expandedRowKeys: rowExpansion.expandedRowKeys,
+      onExpandedRowsChange: rowExpansion.onExpandedRowsChange ? function (keys) {
+        rowExpansion.onExpandedRowsChange(keys.map(String));
+      } : undefined
+    }) : undefined,
+    emptyText: emptyText || /*#__PURE__*/React.createElement("div", {
+      "data-odn-table-empty": true
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "66",
+      height: "68",
+      viewBox: "0 0 66 68",
+      fill: "none"
+    }, /*#__PURE__*/React.createElement("g", {
+      filter: "url(#filter0_d_946_245875)"
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6 21C6 18.7909 7.79086 17 10 17H47C49.2091 17 51 18.7909 51 21V49C51 51.2091 49.2091 53 47 53H10C7.79086 53 6 51.2091 6 49V21Z",
+      fill: "url(#paint0_linear_946_245875)"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: "url(#filter1_d_946_245875)"
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15 8.25C15 6.04086 16.7909 4.25 19 4.25H56C58.2091 4.25 60 6.04086 60 8.25V55.75C60 57.9591 58.2091 59.75 56 59.75H19C16.7909 59.75 15 57.9591 15 55.75V8.25Z",
+      fill: "url(#paint1_linear_946_245875)"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: "url(#filter2_d_946_245875)"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "21.75",
+      y: "32.75",
+      width: "4.5",
+      height: "18.75",
+      rx: "2",
+      fill: "url(#paint2_linear_946_245875)"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: "url(#filter3_d_946_245875)"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "30.75",
+      y: "27.5",
+      width: "4.5",
+      height: "24",
+      rx: "2",
+      fill: "url(#paint3_linear_946_245875)"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: "url(#filter4_d_946_245875)"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "39.75",
+      y: "37.25",
+      width: "4.5",
+      height: "14.25",
+      rx: "2",
+      fill: "url(#paint4_linear_946_245875)"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: "url(#filter5_d_946_245875)"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "48.75",
+      y: "35",
+      width: "4.5",
+      height: "16.5",
+      rx: "2",
+      fill: "url(#paint5_linear_946_245875)"
+    })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+      id: "filter0_d_946_245875",
+      x: "0",
+      y: "13",
+      width: "57",
+      height: "48",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+      result: "hardAlpha"
+    }), /*#__PURE__*/React.createElement("feOffset", {
+      dy: "2"
+    }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "3"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.768627 0 0 0 0 0.780392 0 0 0 0 0.8 0 0 0 0.1 0"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in2: "BackgroundImageFix",
+      result: "effect1_dropShadow_946_245875"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow_946_245875",
+      result: "shape"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: "filter1_d_946_245875",
+      x: "9",
+      y: "0.25",
+      width: "57",
+      height: "67.5",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+      result: "hardAlpha"
+    }), /*#__PURE__*/React.createElement("feOffset", {
+      dy: "2"
+    }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "3"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.768627 0 0 0 0 0.780392 0 0 0 0 0.8 0 0 0 0.1 0"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in2: "BackgroundImageFix",
+      result: "effect1_dropShadow_946_245875"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow_946_245875",
+      result: "shape"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: "filter2_d_946_245875",
+      x: "15.75",
+      y: "28.75",
+      width: "16.5",
+      height: "30.75",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+      result: "hardAlpha"
+    }), /*#__PURE__*/React.createElement("feOffset", {
+      dy: "2"
+    }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "3"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.768627 0 0 0 0 0.780392 0 0 0 0 0.8 0 0 0 0.1 0"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in2: "BackgroundImageFix",
+      result: "effect1_dropShadow_946_245875"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow_946_245875",
+      result: "shape"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: "filter3_d_946_245875",
+      x: "24.75",
+      y: "23.5",
+      width: "16.5",
+      height: "36",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+      result: "hardAlpha"
+    }), /*#__PURE__*/React.createElement("feOffset", {
+      dy: "2"
+    }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "3"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.768627 0 0 0 0 0.780392 0 0 0 0 0.8 0 0 0 0.1 0"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in2: "BackgroundImageFix",
+      result: "effect1_dropShadow_946_245875"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow_946_245875",
+      result: "shape"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: "filter4_d_946_245875",
+      x: "33.75",
+      y: "33.25",
+      width: "16.5",
+      height: "26.25",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+      result: "hardAlpha"
+    }), /*#__PURE__*/React.createElement("feOffset", {
+      dy: "2"
+    }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "3"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.768627 0 0 0 0 0.780392 0 0 0 0 0.8 0 0 0 0.1 0"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in2: "BackgroundImageFix",
+      result: "effect1_dropShadow_946_245875"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow_946_245875",
+      result: "shape"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: "filter5_d_946_245875",
+      x: "42.75",
+      y: "31",
+      width: "16.5",
+      height: "28.5",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+      result: "hardAlpha"
+    }), /*#__PURE__*/React.createElement("feOffset", {
+      dy: "2"
+    }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "3"
+    }), /*#__PURE__*/React.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.768627 0 0 0 0 0.780392 0 0 0 0 0.8 0 0 0 0.1 0"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in2: "BackgroundImageFix",
+      result: "effect1_dropShadow_946_245875"
+    }), /*#__PURE__*/React.createElement("feBlend", {
+      mode: "normal",
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow_946_245875",
+      result: "shape"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: "paint0_linear_946_245875",
+      x1: "50.9543",
+      y1: "52.9268",
+      x2: "50.9543",
+      y2: "17",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#EDEFF2"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#DFE1E6"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: "paint1_linear_946_245875",
+      x1: "15.0802",
+      y1: "4.25",
+      x2: "15.0802",
+      y2: "59.5522",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#E6E8ED"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#F2F4F7"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: "paint2_linear_946_245875",
+      x1: "26.2454",
+      y1: "51.4619",
+      x2: "26.2454",
+      y2: "32.75",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#DFE1E6"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#C4C7CC"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: "paint3_linear_946_245875",
+      x1: "35.2454",
+      y1: "51.4512",
+      x2: "35.2454",
+      y2: "27.5",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#DFE1E6"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#C4C7CC"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: "paint4_linear_946_245875",
+      x1: "44.2454",
+      y1: "51.471",
+      x2: "44.2454",
+      y2: "37.25",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#DFE1E6"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#C4C7CC"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: "paint5_linear_946_245875",
+      x1: "53.2454",
+      y1: "51.4665",
+      x2: "53.2454",
+      y2: "35",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#DFE1E6"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#C4C7CC"
+    })))), "\u6570\u636E\u4E3A\u7A7A")
+  }, props)));
+};
+export default Table;