@aloudata/aloudata-design 2.2.0 → 2.4.0

package/dist/DataPreviewTable/index.js

@@ -103,7 +103,7 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
     columnLayout: columnLayout,
     setWidth: setColumnsWidth,
     columnRange: columnRange
-  }), dataStatus === 'pending' && /*#__PURE__*/React.createElement("div", {
+  }), dataStatus === 'pending' && tableColumns.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "ald-data-preview-loading"
   }, /*#__PURE__*/React.createElement(Spin, null)), dataStatus === 'success' && /*#__PURE__*/React.createElement(Body, {
     columns: tableColumns,

package/dist/DatePicker/index.d.ts

@@ -1,5 +1,6 @@
 import { DatePicker as AntdDatePicker, DatePickerProps as AntdDatePickerProps } from 'antd';
 import { Dayjs } from 'dayjs';
+export type { RangeValue } from 'rc-picker/lib/interface';
 declare const DatePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
     status?: "" | "warning" | "error" | undefined;
     hashId?: string | undefined;

package/dist/DatePicker/index.js

@@ -21,7 +21,6 @@ import SizeContext from "../ConfigProvider/sizeContext";
 //   WeekPickerProps,
 // } from 'antd/lib/date-picker';
 // export type { DatePickerProps };
-
 var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var customSize = props.size,
     customDisabled = props.disabled,

package/dist/Divider/index.d.ts

@@ -1,11 +1,5 @@
 import React from 'react';
 export interface IDividerProps {
-    /**
-     * @description 水平或竖直
-     * @type 'horizontal' | 'vertical'
-     * @default 'horizontal'
-     */
-    type?: 'horizontal' | 'vertical';
     /**
      * @description 类名
      * @type string
@@ -13,29 +7,17 @@ export interface IDividerProps {
      */
     className?: string;
     /**
-     * @description 嵌套的标题
-     * @type ReactNode
+     * @description 颜色
+     * @type string
      * @default --
      */
-    children?: React.ReactNode;
-    /**
-     * @description 分割线标题的位置
-     * @type 'left' | 'right' | 'center'
-     * @default 'center'
-     */
-    orientation?: 'left' | 'right' | 'center';
-    /**
-     * @description 是否是虚线
-     * @type boolean
-     * @default false
-     */
-    dashed?: boolean;
+    color?: string;
     /**
-     * @description 分割线样式对象
-     * @type CSSProperties
-     * @default --
+     * @description 尺寸
+     * @type 'small' | 'middle' | 'large'
+     * @default 'middle'
      */
-    style?: React.CSSProperties;
+    size?: 'small' | 'middle' | 'large';
 }
 declare const Divider: (props: IDividerProps) => React.JSX.Element;
 export default Divider;

package/dist/Divider/index.js

@@ -1,10 +1,20 @@
-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); }
-import { Divider as AntdDivider } from 'antd';
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classNames from 'classnames';
 import React from 'react';
 var Divider = function Divider(props) {
-  return /*#__PURE__*/React.createElement(AntdDivider, _extends({}, props, {
-    className: classNames('ald-divider', props.className)
+  var className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-divider', className, _defineProperty({}, "ald-divider-".concat(size), size))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-divider-inner",
+    style: {
+      backgroundColor: props.color
+    }
   }));
 };
 export default Divider;

package/dist/Divider/style/index.less

@@ -1,5 +1,40 @@
 @import '../../style/index.less';
 
 .ald-divider {
-  border-color: @BG60;
+  display: inline-block;
+  vertical-align: middle;
+  width: 1px;
+
+  .ald-divider-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background-color: #e5e7eb;
+    mix-blend-mode: multiply;
+  }
+
+  &-small {
+    margin-inline: 6px 6px;
+
+    .ald-divider-inner {
+      height: 12px;
+    }
+  }
+
+  &-middle {
+    margin-inline: 8px 8px;
+
+    .ald-divider-inner {
+      height: 14px;
+    }
+  }
+
+  &-large {
+    margin-inline: 12px 12px;
+
+    .ald-divider-inner {
+      height: 16px;
+    }
+  }
 }

package/dist/MemberPicker/components/MultipleOption.js

@@ -40,6 +40,7 @@ export default function MultipleList(params) {
   })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
+    disabled: disabled,
     onClick: function onClick(e) {
       onNextLevel === null || onNextLevel === void 0 ? void 0 : onNextLevel(user);
       e.stopPropagation();

package/dist/Menu/style/index.less

@@ -6,7 +6,6 @@
 
 @menu-item-horizontal-padding: 12px;
 @menu-width: 168px + 2 * @menu-item-horizontal-padding;
-@max-menu-width: 300px;
 
 .menuContainerStyle {
   display: flex;
@@ -19,7 +18,6 @@
   background: var(--alias-colors-bg-skeleton-subtler, #fff);
   box-shadow: 0 10px 18px -2px #00000014;
   min-width: @menu-width;
-  max-width: @max-menu-width;
   z-index: 999;
 }
 
@@ -53,7 +51,6 @@
     background: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
     width: 100%;
     line-height: 20px;
-    max-width: @max-menu-width;
     cursor: pointer;
   }
 

package/dist/Radio/components/Group/index.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
 import { IRadioGroupProps } from '../../interface/radioGroup';
-export declare const RadioGroupContext: React.Context<Omit<IRadioGroupProps, "children" | "className"> & {
-    sliderRef?: React.RefObject<HTMLDivElement> | undefined;
-}>;
+export declare const RadioGroupContext: React.Context<Omit<IRadioGroupProps, "className" | "children">>;
 export default function RadioGroup(props: IRadioGroupProps): React.JSX.Element;

package/dist/Radio/components/Group/index.js

@@ -10,7 +10,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import React, { createContext, useRef } from 'react';
+import React, { createContext } from 'react';
 import DisabledContext from 'antd/lib/config-provider/DisabledContext';
 export var RadioGroupContext = /*#__PURE__*/createContext({});
 export default function RadioGroup(props) {
@@ -23,8 +23,6 @@ export default function RadioGroup(props) {
     type = _props$type === void 0 ? 'radio' : _props$type,
     className = props.className,
     customDisabled = props.disabled;
-  // 滑块的ref
-  var sliderRef = useRef(null);
   // 该hooks与useState相同，但是当props中有value值时，优先使用value的值
   var _useMergedState = useMergedState(props.defaultValue, {
       value: props === null || props === void 0 ? void 0 : props.value
@@ -38,8 +36,6 @@ export default function RadioGroup(props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var onRadioChange = function onRadioChange(selectedValue) {
     var lastValue = value;
-    // const val = ev.target.value;
-    // console.log(selectValue);
     setValue(selectedValue);
     var onChange = props.onChange;
     if (onChange && selectedValue !== lastValue) {
@@ -59,13 +55,9 @@ export default function RadioGroup(props) {
       radioGroupStyle: radioGroupStyle,
       size: size,
       type: type,
-      sliderRef: sliderRef,
       disabled: mergedDisabled
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: getWrapperClass()
-  }, children, type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-radio-filled-slider'),
-    ref: sliderRef
-  }) : null));
+  }, children));
 }

package/dist/Radio/components/Radio/index.js

@@ -6,7 +6,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classNames from 'classnames';
 import _ from 'lodash';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import { getUUID } from "../../../_utils/hooks/useId";
 import { RadioGroupContext } from "../Group";
 export default function Radio(props) {
@@ -57,15 +57,6 @@ export default function Radio(props) {
       'ald-radio-wrapper-disabled': radioProps.disabled
     });
   };
-
-  // filled button模式下，更改滑块的位置
-  useEffect(function () {
-    var _groupContext$sliderR;
-    if (radioProps.checked && groupContext !== null && groupContext !== void 0 && (_groupContext$sliderR = groupContext.sliderRef) !== null && _groupContext$sliderR !== void 0 && _groupContext$sliderR.current && labelRef !== null && labelRef !== void 0 && labelRef.current) {
-      groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft - 2, "px");
-      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth, "px");
-    }
-  }, [groupContext.sliderRef, radioProps.checked]);
   var onChange = function onChange() {
     if (groupContext !== null && groupContext !== void 0 && groupContext.onChange) {
       // input事件的value会被toString，所以此处进行一个覆盖
@@ -89,29 +80,6 @@ export default function Radio(props) {
   }), /*#__PURE__*/React.createElement("span", {
     className: "ald-radio-inner"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "ald-radio-desc",
-    onMouseEnter: function onMouseEnter() {
-      if (radioProps.checked) {
-        var _groupContext$sliderR2, _groupContext$sliderR3;
-        (_groupContext$sliderR2 = groupContext.sliderRef) === null || _groupContext$sliderR2 === void 0 ? void 0 : (_groupContext$sliderR3 = _groupContext$sliderR2.current) === null || _groupContext$sliderR3 === void 0 ? void 0 : _groupContext$sliderR3.classList.add('ald-radio-fill-slider-hover');
-      }
-    },
-    onMouseLeave: function onMouseLeave() {
-      if (radioProps.checked) {
-        var _groupContext$sliderR4, _groupContext$sliderR5, _groupContext$sliderR6, _groupContext$sliderR7;
-        (_groupContext$sliderR4 = groupContext.sliderRef) === null || _groupContext$sliderR4 === void 0 ? void 0 : (_groupContext$sliderR5 = _groupContext$sliderR4.current) === null || _groupContext$sliderR5 === void 0 ? void 0 : _groupContext$sliderR5.classList.remove('ald-radio-fill-slider-hover');
-        (_groupContext$sliderR6 = groupContext.sliderRef) === null || _groupContext$sliderR6 === void 0 ? void 0 : (_groupContext$sliderR7 = _groupContext$sliderR6.current) === null || _groupContext$sliderR7 === void 0 ? void 0 : _groupContext$sliderR7.classList.remove('ald-radio-fill-slider-active');
-      }
-    },
-    onMouseDown: function onMouseDown() {
-      if (radioProps.checked) {
-        var _groupContext$sliderR8, _groupContext$sliderR9;
-        (_groupContext$sliderR8 = groupContext.sliderRef) === null || _groupContext$sliderR8 === void 0 ? void 0 : (_groupContext$sliderR9 = _groupContext$sliderR8.current) === null || _groupContext$sliderR9 === void 0 ? void 0 : _groupContext$sliderR9.classList.add('ald-radio-fill-slider-active');
-      }
-    },
-    onMouseUp: function onMouseUp() {
-      var _groupContext$sliderR10, _groupContext$sliderR11;
-      if (radioProps.checked) (_groupContext$sliderR10 = groupContext.sliderRef) === null || _groupContext$sliderR10 === void 0 ? void 0 : (_groupContext$sliderR11 = _groupContext$sliderR10.current) === null || _groupContext$sliderR11 === void 0 ? void 0 : _groupContext$sliderR11.classList.remove('ald-radio-fill-slider-active');
-    }
+    className: "ald-radio-desc"
   }, props.children));
 }

package/dist/Radio/style/index.less

@@ -167,40 +167,6 @@
   }
 }
 
-// filled填充样式下的滑块样式
-.ald-radio-filled-slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 0;
-  height: calc(100% - 2px - 2px); // 减去上下边距
-  margin: 2px;
-  background: var(--alias-colors-bg-skeleton-subtler, #fff);
-  border: 1px solid
-    var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
-  border-radius: var(--alias-radius-75, 6px);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  // transition: width, left, height 0.3s, 0.3s, 0.3s ease;
-  cursor: pointer;
-
-  &:hover,
-  &.ald-radio-fill-slider-hover {
-    border-radius: var(--alias-radius-75, 6px);
-    border: 1px solid
-      var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
-    background: var(--alias-colors-bg-skeleton-subtler, #fff);
-  }
-
-  &:active,
-  &.ald-radio-fill-slider-active {
-    border-radius: var(--alias-radius-75, 6px);
-    border: 1px solid
-      var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
-    background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
-  }
-}
-
 .ald-radio-group-icon-button {
   padding: 0 !important;
 }
@@ -212,7 +178,6 @@
   align-items: flex-start;
   box-sizing: border-box;
   padding: 0;
-  overflow: hidden;
 
   .ald-radio-label {
     color: @NL30;
@@ -319,6 +284,32 @@
     height: calc(100% - 4px);
     background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
     cursor: pointer;
+    border: 1px solid transparent;
+
+    // 选中样式
+    &.ald-radio-wrapper-checked {
+      background: var(--alias-colors-bg-skeleton-subtler, #fff);
+      border: 1px solid
+        var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+      border-radius: var(--alias-radius-75, 6px);
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px 0 rgba(0, 0, 0, 0.06);
+      cursor: pointer;
+
+      &:hover {
+        border-radius: var(--alias-radius-75, 6px);
+        border: 1px solid
+          var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
+        background: var(--alias-colors-bg-skeleton-subtler, #fff);
+      }
+
+      &:active {
+        border-radius: var(--alias-radius-75, 6px);
+        border: 1px solid
+          var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+        background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+      }
+    }
 
     &:first-of-type {
       border-radius: @border-radius-middle 0 0 @border-radius-middle;
@@ -382,10 +373,6 @@
     height: @radio-group-height-middle;
     border-radius: @border-radius-middle;
 
-    .ald-radio-filled-slider {
-      border-radius: var(--alias-radius-50, 4px);
-    }
-
     .ald-radio-icon-button-wrapper-filled {
       border-radius: var(--alias-radius-50, 4px) !important ;
     }
@@ -438,10 +425,6 @@
     height: @radio-group-height-small;
     border-radius: @border-radius-small;
 
-    .ald-radio-filled-slider {
-      border-radius: var(--alias-radius-25, 2px);
-    }
-
     .ald-radio-label {
       .ald-radio-desc {
         font-size: @font-size-small;
@@ -513,10 +496,6 @@
     height: @radio-group-height-large;
     border-radius: @border-radius-large;
 
-    .ald-radio-filled-slider {
-      border-radius: var(--alias-radius-75, 6px);
-    }
-
     .ald-radio-icon-button-wrapper-filled {
       border-radius: var(--alias-radius-75, 6px) !important ;
     }

package/dist/Select/index.js

@@ -397,7 +397,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         setIsOpen(!isOpen);
       }
     },
-    className: classNames('ald-select', className, (_classNames = {}, _defineProperty(_classNames, "ald-select-".concat(type), type === 'primary' || type === 'secondary'), _defineProperty(_classNames, 'ald-select-multiple', isMultiple), _defineProperty(_classNames, 'ald-select-single', !isMultiple), _defineProperty(_classNames, 'ald-select-large', size === 'large'), _defineProperty(_classNames, 'ald-select-small', size === 'small'), _defineProperty(_classNames, 'ald-select-disabled', mergedDisabled), _defineProperty(_classNames, 'ald-select-middle', size !== 'large' && size !== 'small'), _defineProperty(_classNames, 'ald-select-open', typeof _open === 'boolean' ? _open : isOpen), _defineProperty(_classNames, 'ald-select-focused', isFocus), _defineProperty(_classNames, "ald-select-status-".concat(mergedStatus), mergedStatus), _defineProperty(_classNames, 'ald-select-empty-show-all', type === 'primary'), _defineProperty(_classNames, 'ald-select-has-value', !_.isEmpty(value) || !_.isEmpty(currentValue)), _classNames), compactItemClassnames, hashId),
+    className: classNames('ald-select', className, (_classNames = {}, _defineProperty(_classNames, "ald-select-".concat(type), type === 'primary' || type === 'secondary'), _defineProperty(_classNames, 'ald-select-multiple', isMultiple), _defineProperty(_classNames, 'ald-select-single', !isMultiple), _defineProperty(_classNames, 'ald-select-large', size === 'large'), _defineProperty(_classNames, 'ald-select-small', size === 'small'), _defineProperty(_classNames, 'ald-select-disabled', mergedDisabled), _defineProperty(_classNames, 'ald-select-middle', size !== 'large' && size !== 'small'), _defineProperty(_classNames, 'ald-select-open', typeof _open === 'boolean' ? _open : isOpen), _defineProperty(_classNames, 'ald-select-focused', isFocus && type === 'secondary'), _defineProperty(_classNames, "ald-select-status-".concat(mergedStatus), mergedStatus), _defineProperty(_classNames, 'ald-select-empty-show-all', type === 'primary'), _defineProperty(_classNames, 'ald-select-has-value', !_.isEmpty(value) || !_.isEmpty(currentValue)), _classNames), compactItemClassnames, hashId),
     spellCheck: false,
     style: Object.assign(styleVar, style)
   }, !!prefix && /*#__PURE__*/React.createElement("span", {

package/dist/Switch/index.js

@@ -5,7 +5,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Switch as AntdSwitch } from 'antd';
+import { getMergedStatus, getStatusClassNames } from 'antd/lib/_util/statusUtils';
 import DisabledContext from 'antd/lib/config-provider/DisabledContext';
+import { FormItemInputContext } from 'antd/lib/form/context';
 import classnames from 'classnames';
 import React, { useContext, useEffect, useState } from 'react';
 import SizeContext from "../ConfigProvider/sizeContext";
@@ -31,6 +33,9 @@ var Switch = function Switch(_ref) {
   // ===================== Disabled =====================
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  var _useContext = useContext(FormItemInputContext),
+    contextStatus = _useContext.status;
+  var mergedStatus = getMergedStatus(contextStatus);
   var onChangeCB = function onChangeCB(isChecked, event) {
     if (checked === undefined) {
       setUserChecked(isChecked);
@@ -47,7 +52,7 @@ var Switch = function Switch(_ref) {
     className: classnames(className, 'ald-switch', "ald-switch-".concat(size), {
       'ald-switch-disabled': currentDisabled,
       'ald-switch-checked': userChecked
-    })
+    }, getStatusClassNames('ald-switch', mergedStatus))
   }, /*#__PURE__*/React.createElement(AntdSwitch, {
     disabled: currentDisabled,
     loading: loading,

package/dist/Switch/style/index.less

@@ -1,4 +1,5 @@
 @import '../../style/index.less';
+@import './status.less';
 
 @switch-btn-width-large: 36px;
 @switch-btn-height-large: 20px;

package/dist/Switch/style/status.less

@@ -0,0 +1,12 @@
+.ald-switch.ald-switch.ald-switch-status {
+  &-error {
+    .ald-switch-btn:not(.ant-switch-checked) {
+      box-shadow: 0 0 0 1px var(--alias-colors-icon-inverse-default, #fff),
+        0 0 0 2.5px var(--alias-color-icon-danger, #ef4444);
+    }
+
+    .ald-switch-btn.ant-switch-checked {
+      background-color: var(--alias-color-icon-danger, #ef4444);
+    }
+  }
+}

package/dist/Table/components/Cell.d.ts

@@ -1,6 +1,6 @@
 import { Column, Row } from '@tanstack/react-table';
 import React from 'react';
-export default function Cell<T>(props: IProps<T>): React.JSX.Element;
+export default function CellWithErrorBoundary<T>(props: IProps<T>): React.JSX.Element;
 export interface IProps<T> {
     row: Row<T>;
     column: Column<T>;

package/dist/Table/components/Cell.js

@@ -1,8 +1,9 @@
 import classnames from 'classnames';
 import _ from 'lodash';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { prefixCls } from "../helper";
-export default function Cell(props) {
+import ErrorBoundary from "./ErrorBoundary";
+function Cell(props) {
   var column = props.column,
     row = props.row;
   var meta = column.columnDef.meta;
@@ -17,4 +18,25 @@ export default function Cell(props) {
   }, ellipsis ? /*#__PURE__*/React.createElement("div", {
     className: prefixCls('td-ellipsis-content')
   }, node) : node);
+}
+export default function CellWithErrorBoundary(props) {
+  var column = props.column;
+  var meta = column.columnDef.meta;
+  var dataIndex = meta.dataIndex,
+    onError = meta.onError;
+  var reportError = useCallback(function (err, stack) {
+    if (onError) {
+      onError({
+        error: err,
+        stack: stack,
+        extra: {
+          place: 'bodyCell',
+          dataIndex: dataIndex
+        }
+      });
+    }
+  }, [onError, dataIndex]);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    onError: reportError
+  }, /*#__PURE__*/React.createElement(Cell, props));
 }

package/dist/Table/components/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    onError: (error: Error, stack: string) => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/Table/components/ErrorBoundary.js

@@ -0,0 +1,56 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import React from 'react';
+import { prefixCls } from "../helper";
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+  var _super = _createSuper(ErrorBoundary);
+  function ErrorBoundary(props) {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      // 在这里上报错误信息
+      this.props.onError(error, info.componentStack);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        // 你可以渲染任何自定义后备 UI
+        return /*#__PURE__*/React.createElement("div", {
+          className: prefixCls('td-default')
+        }, "\u53D1\u751F\u4E86\u9519\u8BEF");
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      // 更新状态，以便下一次渲染将显示后备 UI。
+      return {
+        hasError: true
+      };
+    }
+  }]);
+  return ErrorBoundary;
+}(React.Component);
+export { ErrorBoundary as default };

package/dist/Table/helper.d.ts

@@ -1,18 +1,28 @@
 /// <reference types="react" />
-import { ITableColumn } from './types';
-export declare function getTableColumns<TDataItem extends object>({ columns, columnSizing, totalWidth, }: {
+import { ITableColumn, ITableProps } from './types';
+export declare function getTableColumns<TDataItem extends object>({ columns, columnSizing, totalWidth, onError, }: {
     columns: ITableColumn<TDataItem>[];
     columnSizing: boolean;
     totalWidth: number;
+    onError: ITableProps<TDataItem>['onError'];
 }): {
     accessorKey: string;
     header: (props: import("./components/Header").IProps<TDataItem>) => import("react").JSX.Element;
     cell: (props: import("./components/Cell").IProps<TDataItem>) => import("react").JSX.Element;
     size: number;
-    meta: ITableColumn<TDataItem>;
+    meta: {
+        onError: ((errorInfo: import("./types").ITableCellErrorInfo) => void) | undefined;
+        title: import("react").ReactNode;
+        dataIndex?: string | undefined;
+        width?: string | number | undefined;
+        render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
+        ellipsis?: boolean | undefined;
+        noPadding?: boolean | undefined;
+        align?: "center" | "left" | "right" | undefined;
+    };
 }[];
 /**
- * 计算
+ * 计算列宽
  * @param columns
  * @param columnSizing
  * @param totalWidth