@dtjoy/dt-design 1.0.2 → 1.0.3

package/esm/statusTag/index.js

@@ -9,7 +9,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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; }
 import React, { useMemo } from 'react';
-import { SpinOutlined } from '@dtinsight/react-icons';
+import { LoadingOutlined } from '@ant-design/icons';
 import { Spin } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
 import classNames from 'classnames';
@@ -17,19 +17,19 @@ import "./style";
 export var PRESET_COLOR_TYPES = Object.freeze(['blue', 'yellow', 'green', 'gray', 'red', 'purple', 'cyan', 'pink']);
 export var STATUS_TAG_TYPES = Object.freeze(['default', 'outline', 'fill']);
 var DEFAULT_OPACITY = 0.15;
-/**
- * 校验是否为预设颜色
- * @param color 待校验颜色值
+/**
+ * 校验是否为预设颜色
+ * @param color 待校验颜色值
  */
 function isPresetColor(color) {
   if (!color || typeof color !== 'string') return false;
   return PRESET_COLOR_TYPES.includes(color);
 }
 
-/**
- * 计算颜色的透明版本
- * @param color 原始颜色（支持hex/rgb/rgba）
- * @param opacity 透明度（默认0.15）
+/**
+ * 计算颜色的透明版本
+ * @param color 原始颜色（支持hex/rgb/rgba）
+ * @param opacity 透明度（默认0.15）
  */
 function calculateTransparentColor(color) {
   var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_OPACITY;
@@ -95,7 +95,7 @@ var StatusTag = /*#__PURE__*/React.memo(function (props) {
     };
   }, [color, icon, prefixCls]);
   var loadingIndicator = useMemo(function () {
-    return /*#__PURE__*/React.createElement(SpinOutlined, {
+    return /*#__PURE__*/React.createElement(LoadingOutlined, {
       className: "".concat(prefixCls, "__icon ").concat(prefixCls, "__icon--loading")
     });
   }, [prefixCls]);

package/lib/blockHeader/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactIcons = require("@dtinsight/react-icons");
+var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _configProvider = require("antd/es/config-provider");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -82,8 +82,8 @@ const BlockHeader = function (props) {
   }, title), tooltipProps?.title ? /*#__PURE__*/_react.default.createElement("div", {
     className: `title__tooltip`
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, _extends({}, tooltipProps, {
-    className: (0, _classnames.default)(tooltipProps?.className, 'anticon')
-  }), /*#__PURE__*/_react.default.createElement(_reactIcons.QuestionOutlined, null))) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(tooltipProps?.className)
+  }), /*#__PURE__*/_react.default.createElement(_icons.QuestionCircleOutlined, null))) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
     className: `title__description`
   }, description) : null), addonAfter && /*#__PURE__*/_react.default.createElement("div", {
     className: `title__addon-after`
@@ -91,8 +91,8 @@ const BlockHeader = function (props) {
     className: `title__collapse`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "collapse__text"
-  }, currentExpand ? '收起' : '展开'), /*#__PURE__*/_react.default.createElement(_reactIcons.UpOutlined, {
-    className: (0, _classnames.default)('collapse__icon', 'anticon', {
+  }, currentExpand ? '收起' : '展开'), /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, {
+    className: (0, _classnames.default)('collapse__icon', {
       'collapse__icon--up': currentExpand,
       'collapse__icon--down': !currentExpand
     })

package/lib/blockHeader/style/index.less

@@ -85,7 +85,7 @@
             &__tooltip {
                 display: flex;
                 margin-right: 4px;
-                font-size: 16px;
+                font-size: 14px;
                 color: #b1b4c5;
                 cursor: pointer;
             }

package/lib/collapsible/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _configProvider = require("antd/es/config-provider");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _lodash = require("lodash");
+var _lodashEs = require("lodash-es");
 require("./style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -126,8 +126,8 @@ class Collapsible extends _react.default.Component {
     return newState;
   }
   componentDidUpdate(prevProps, prevState) {
-    const changedPropKeys = Object.keys((0, _lodash.pick)(this.props, ['reCalcKey'])).filter(key => !(0, _lodash.isEqual)(this.props[key], prevProps[key]));
-    const changedStateKeys = Object.keys((0, _lodash.pick)(this.state, ['domInRenderTree'])).filter(key => !(0, _lodash.isEqual)(this.state[key], prevState[key]));
+    const changedPropKeys = Object.keys((0, _lodashEs.pick)(this.props, ['reCalcKey'])).filter(key => !(0, _lodashEs.isEqual)(this.props[key], prevProps[key]));
+    const changedStateKeys = Object.keys((0, _lodashEs.pick)(this.state, ['domInRenderTree'])).filter(key => !(0, _lodashEs.isEqual)(this.state[key], prevState[key]));
     if (changedPropKeys.includes('reCalcKey') && this.domRef.current) {
       this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
     }

package/lib/flex/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _configProvider = require("antd/es/config-provider");
-var _clsx = require("clsx");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _lodashEs = require("lodash-es");
 require("./style");
 var _gapSize = require("../_util/gapSize");
@@ -34,7 +34,7 @@ const Flex = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = _react.default.useContext(_configProvider.ConfigContext);
   const prefixCls = customizePrefixCls || (0, _configProvider.globalConfig)().getPrefixCls('flex');
   const [mergedVertical] = (0, _hooks.useOrientation)(orientation, vertical);
-  const mergedCls = (0, _clsx.clsx)(className, rootClassName, prefixCls, (0, _utils.default)(prefixCls, props), {
+  const mergedCls = (0, _classnames.default)(className, rootClassName, prefixCls, (0, _utils.default)(prefixCls, props), {
     [`${prefixCls}-rtl`]: ctxDirection === 'rtl',
     [`${prefixCls}-gap-${gap}`]: (0, _gapSize.isPresetSize)(gap),
     [`${prefixCls}-vertical`]: mergedVertical === 'vertical'

package/lib/flex/utils.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.justifyContentValues = exports.flexWrapValues = exports.default = exports.alignItemsValues = void 0;
-var _clsx = require("clsx");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const flexWrapValues = exports.flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
 const justifyContentValues = exports.justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
 const alignItemsValues = exports.alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];
@@ -30,7 +31,7 @@ const genClsJustify = (prefixCls, props) => {
   return justifyCls;
 };
 const createFlexClassNames = (prefixCls, props) => {
-  return (0, _clsx.clsx)({
+  return (0, _classnames.default)({
     ...genClsWrap(prefixCls, props),
     ...genClsAlign(prefixCls, props),
     ...genClsJustify(prefixCls, props)

package/lib/index.d.ts

@@ -1,10 +1,10 @@
-import '@dtinsight/react-icons/dist/index.css';
 export { default as BlockHeader } from './blockHeader';
 export type { ButtonProps } from './button';
 export { default as Button } from './button';
 export { default as Flex } from './flex';
 export type { FlexProps } from './flex/interface';
 export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as OverflowList } from './overflowList';
 export { default as Resize } from './resize';
 export { default as Splitter } from './splitter';
 export * from './splitter';

package/lib/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   Button: true,
   Flex: true,
   CollapsibleActionItems: true,
+  OverflowList: true,
   Resize: true,
   Splitter: true,
   Collapsible: true,
@@ -43,6 +44,12 @@ Object.defineProperty(exports, "Flex", {
     return _flex.default;
   }
 });
+Object.defineProperty(exports, "OverflowList", {
+  enumerable: true,
+  get: function () {
+    return _overflowList.default;
+  }
+});
 Object.defineProperty(exports, "Resize", {
   enumerable: true,
   get: function () {
@@ -61,11 +68,11 @@ Object.defineProperty(exports, "StatusTag", {
     return _statusTag.default;
   }
 });
-require("@dtinsight/react-icons/dist/index.css");
 var _blockHeader = _interopRequireDefault(require("./blockHeader"));
 var _button = _interopRequireDefault(require("./button"));
 var _flex = _interopRequireDefault(require("./flex"));
 var _collapsibleActionItems = _interopRequireDefault(require("./collapsibleActionItems"));
+var _overflowList = _interopRequireDefault(require("./overflowList"));
 var _resize = _interopRequireDefault(require("./resize"));
 var _splitter = _interopRequireWildcard(require("./splitter"));
 Object.keys(_splitter).forEach(function (key) {

package/lib/overflowList/index.d.ts

@@ -0,0 +1,39 @@
+import React, { Component, ReactElement, ReactNode } from 'react';
+import './style';
+export declare type OverflowItem<T = Record<string, any>> = T;
+export interface OverflowListProps<T = Record<string, any>> {
+    items: OverflowItem<T>[];
+    visibleItemRenderer: (item: OverflowItem<T>, index: number) => ReactElement;
+    overflowRenderer: (overflowItems: OverflowItem<T>[]) => ReactNode | ReactNode[];
+    className?: string;
+    style?: React.CSSProperties;
+    renderMode?: 'collapse' | 'scroll';
+    collapseFrom?: 'start' | 'end';
+    minVisibleItems?: number;
+    onOverflow?: (overflowItems: OverflowItem<T>[]) => void;
+}
+interface OverflowListState {
+    visibleCount: number;
+    isMeasuring: boolean;
+}
+declare class OverflowList<T extends object> extends Component<OverflowListProps<T>, OverflowListState> {
+    static defaultProps: {
+        items: never[];
+        collapseFrom: string;
+        minVisibleItems: number;
+        renderMode: string;
+    };
+    static displayName: string;
+    private containerRef;
+    private overflowRef;
+    private itemRefs;
+    private prefixCls;
+    constructor(props: OverflowListProps<T>);
+    componentDidMount(): void;
+    componentUpdate(prevProps: OverflowListProps<T>): void;
+    private measureAndAdjust;
+    private getOverflowItems;
+    renderCollapse(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default OverflowList;

package/lib/overflowList/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style");
+var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class OverflowList extends _react.Component {
+  static defaultProps = {
+    items: [],
+    collapseFrom: 'end',
+    minVisibleItems: 0,
+    renderMode: 'collapse'
+  };
+  static displayName;
+  containerRef = /*#__PURE__*/(0, _react.createRef)();
+  overflowRef = /*#__PURE__*/(0, _react.createRef)();
+  itemRefs = new Map();
+  prefixCls = 'overflow-list';
+  constructor(props) {
+    super(props);
+    this.prefixCls = (0, _configProvider.globalConfig)().getPrefixCls(this.prefixCls);
+    this.state = {
+      visibleCount: props.items.length,
+      isMeasuring: props.renderMode === 'collapse'
+    };
+  }
+  componentDidMount() {
+    if (this.props.renderMode === 'collapse') {
+      this.measureAndAdjust();
+    }
+  }
+  componentUpdate(prevProps) {
+    if (prevProps.items !== this.props.items || prevProps.renderMode !== this.props.renderMode) {
+      this.setState({
+        isMeasuring: true,
+        visibleCount: this.props.items.length
+      }, this.measureAndAdjust);
+    }
+  }
+  measureAndAdjust = () => {
+    const container = this.containerRef.current;
+    if (!container || this.props.renderMode !== 'collapse') return;
+    const {
+      items,
+      minVisibleItems,
+      collapseFrom,
+      onOverflow
+    } = this.props;
+    const containerWidth = container.offsetWidth;
+    const overflowWidth = this.overflowRef.current?.offsetWidth ?? 0;
+    let totalWidth = 0;
+    let newVisibleCount = 0;
+    for (let i = 0; i < items.length; i++) {
+      const index = collapseFrom === 'end' ? i : items.length - 1 - i;
+      const itemWidth = this.itemRefs.get(index)?.getBoundingClientRect().width ?? 0;
+      const isLast = i === items.length - 1;
+      const limit = isLast ? containerWidth : containerWidth - overflowWidth;
+      if (totalWidth + itemWidth <= limit || newVisibleCount < (minVisibleItems || 0)) {
+        totalWidth += itemWidth;
+        newVisibleCount++;
+      } else {
+        break;
+      }
+    }
+    this.setState({
+      visibleCount: newVisibleCount,
+      isMeasuring: false
+    }, () => {
+      if (onOverflow) {
+        onOverflow(this.getOverflowItems(newVisibleCount));
+      }
+    });
+  };
+  getOverflowItems = count => {
+    const {
+      items,
+      collapseFrom
+    } = this.props;
+    return collapseFrom === 'end' ? items.slice(count) : items.slice(0, items.length - count);
+  };
+  renderCollapse() {
+    const {
+      items,
+      visibleItemRenderer,
+      overflowRenderer,
+      collapseFrom,
+      style,
+      className
+    } = this.props;
+    const {
+      visibleCount,
+      isMeasuring
+    } = this.state;
+    const overflowItems = this.getOverflowItems(visibleCount);
+    const hasOverflow = overflowItems.length > 0;
+    const containerStyle = {
+      maxWidth: '100%',
+      visibility: 'visible',
+      ...style
+    };
+    const renderItems = () => {
+      return items.map((item, i) => {
+        const isVisible = isMeasuring || (collapseFrom === 'end' ? i < visibleCount : i >= items.length - visibleCount);
+        if (!isVisible) return null;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: i,
+          ref: el => {
+            if (el) this.itemRefs.set(i, el);else this.itemRefs.delete(i);
+          },
+          className: `${this.prefixCls}-item`
+        }, visibleItemRenderer(item, i));
+      });
+    };
+    const overflowNode = (hasOverflow || isMeasuring) && /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.overflowRef,
+      className: `${this.prefixCls}-overflow`
+    }, overflowRenderer(isMeasuring ? items : overflowItems));
+    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
+      onResize: () => this.setState({
+        isMeasuring: true
+      }, this.measureAndAdjust)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.containerRef,
+      className: (0, _classnames.default)(this.prefixCls, className),
+      style: containerStyle
+    }, collapseFrom === 'start' && overflowNode, renderItems(), collapseFrom === 'end' && overflowNode));
+  }
+  render() {
+    return this.renderCollapse();
+  }
+}
+if (process.env.NODE_ENV === 'development') {
+  OverflowList.displayName = 'OverflowList';
+}
+var _default = exports.default = OverflowList;

package/lib/overflowList/style/index.d.ts

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

package/lib/overflowList/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/overflowList/style/index.less

@@ -0,0 +1,9 @@
+@import "../../style/themes/index.less";
+
+@overflow-list-prefix-cls: ~"@{ant-prefix}-overflow-list";
+
+.@{overflow-list-prefix-cls} {
+  display: flex;
+  flex-wrap: nowrap;
+  min-width: 0;
+}

package/lib/resizeObserver/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+interface BaseProps {
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+export interface ResizeEntry {
+    contentRect: DOMRectReadOnly;
+    target: Element;
+}
+export interface ReactResizeObserverProps extends BaseProps {
+    onResize?: (entries: ResizeEntry[]) => void;
+    observeParent?: boolean;
+    observerProperty?: ObserverProperty;
+    delayTick?: number;
+    children: React.ReactElement;
+}
+export declare enum ObserverProperty {
+    Width = "width",
+    Height = "height",
+    All = "all"
+}
+export default class ReactResizeObserver extends React.Component<ReactResizeObserverProps> {
+    static defaultProps: {
+        onResize: () => void;
+        observeParent: boolean;
+        observerProperty: ObserverProperty;
+        delayTick: number;
+    };
+    observer: ResizeObserver | null;
+    childNode: HTMLElement | null;
+    element: Element | null;
+    _parentNode: HTMLElement | null;
+    formerPropertyValue: Map<Element, number>;
+    constructor(props: ReactResizeObserverProps);
+    getElement: () => Element | null;
+    handleResizeEventTriggered: (entries: ResizeEntry[]) => void;
+    observeElement: (force?: boolean) => void;
+    mergeRef: (ref: React.Ref<any>, node: HTMLElement) => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ReactResizeObserverProps): void;
+    componentWillUnmount(): void;
+    render(): React.ReactElement;
+}
+export {};

package/lib/resizeObserver/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ObserverProperty = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+let ObserverProperty = exports.ObserverProperty = /*#__PURE__*/function (ObserverProperty) {
+  ObserverProperty["Width"] = "width";
+  ObserverProperty["Height"] = "height";
+  ObserverProperty["All"] = "all";
+  return ObserverProperty;
+}({});
+class ReactResizeObserver extends _react.default.Component {
+  static defaultProps = {
+    onResize: () => {},
+    observeParent: false,
+    observerProperty: ObserverProperty.All,
+    delayTick: 0
+  };
+  observer = null;
+  childNode = null;
+  element = null;
+  _parentNode = null;
+  formerPropertyValue = new Map();
+  constructor(props) {
+    super(props);
+    if (typeof window !== 'undefined' && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.handleResizeEventTriggered);
+    }
+  }
+  getElement = () => {
+    try {
+      // eslint-disable-next-line react/no-find-dom-node
+      return (0, _reactDom.findDOMNode)(this.childNode || this);
+    } catch (error) {
+      return null;
+    }
+  };
+  handleResizeEventTriggered = entries => {
+    const {
+      observerProperty,
+      onResize
+    } = this.props;
+    if (observerProperty === ObserverProperty.All) {
+      onResize?.(entries);
+    } else {
+      const finalEntries = [];
+      for (const entry of entries) {
+        const currentValue = entry.contentRect[observerProperty];
+        if (this.formerPropertyValue.has(entry.target)) {
+          if (currentValue !== this.formerPropertyValue.get(entry.target)) {
+            this.formerPropertyValue.set(entry.target, currentValue);
+            finalEntries.push(entry);
+          }
+        } else {
+          this.formerPropertyValue.set(entry.target, currentValue);
+          finalEntries.push(entry);
+        }
+      }
+      if (finalEntries.length > 0) {
+        onResize?.(finalEntries);
+      }
+    }
+  };
+  observeElement = (force = false) => {
+    if (!this.observer) return;
+    const element = this.getElement();
+    if (!(element && element instanceof Element)) {
+      this.observer.disconnect();
+      return;
+    }
+    if (element === this.element && !force) {
+      return;
+    } else {
+      this.observer.disconnect();
+      this.element = element;
+    }
+    this.observer.observe(element);
+    if (this.props.observeParent && element.parentNode) {
+      const parentNode = element.parentNode;
+      if (parentNode.ownerDocument && parentNode.ownerDocument.defaultView && parentNode instanceof parentNode.ownerDocument.defaultView.HTMLElement) {
+        this._parentNode = parentNode;
+        this.observer.observe(parentNode);
+      }
+    }
+  };
+  mergeRef = (ref, node) => {
+    this.childNode = node;
+    // 转发外部ref
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (typeof ref === 'object' && ref && 'current' in ref) {
+      ref.current = node;
+    }
+  };
+  componentDidMount() {
+    this.observeElement?.();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.observeParent !== prevProps.observeParent) {
+      this.observeElement?.(true);
+    }
+  }
+  componentWillUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    this.element = null;
+    this._parentNode = null;
+    this.formerPropertyValue.clear();
+  }
+  render() {
+    const {
+      children,
+      className,
+      style,
+      ...rest
+    } = this.props;
+    const child = _react.default.Children.only(children);
+    const childRef = child.ref;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      ...rest,
+      className: className ? `${child.props.className || ''} ${className}` : child.props.className,
+      style: {
+        ...child.props.style,
+        ...style
+      },
+      ref: node => this.mergeRef(childRef, node)
+    });
+  }
+}
+exports.default = ReactResizeObserver;

package/lib/splitter/SplitBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactIcons = require("@dtinsight/react-icons");
+var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
@@ -144,8 +144,8 @@ const SplitBar = props => {
   const transformStyle = {
     [`--${splitBarPrefixCls}-preview-offset`]: `${constrainedOffset}px`
   };
-  const StartIcon = vertical ? _reactIcons.UpOutlined : _reactIcons.LeftOutlined;
-  const EndIcon = vertical ? _reactIcons.DownOutlined : _reactIcons.RightOutlined;
+  const StartIcon = vertical ? _icons.UpOutlined : _icons.LeftOutlined;
+  const EndIcon = vertical ? _icons.DownOutlined : _icons.RightOutlined;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: splitBarPrefixCls,
     role: "separator",

package/lib/splitter/Splitter.js

@@ -8,8 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _configProvider = require("antd/es/config-provider");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
-var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
-var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _useEvent = _interopRequireDefault(require("rc-util/es/hooks/useEvent"));
+var _warning = _interopRequireDefault(require("rc-util/es/warning"));
 var _useItems = _interopRequireDefault(require("./hooks/useItems"));
 var _useResizable = _interopRequireDefault(require("./hooks/useResizable"));
 var _useResize = _interopRequireDefault(require("./hooks/useResize"));
@@ -20,8 +20,7 @@ require("./style/index.less");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); } /* eslint-disable react/no-array-index-key */ // 替换 v5 配置为 v4 ConfigContext
-// 替换 devUseWarning 为 v4 原生 warning
+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); }
 const Splitter = props => {
   const {
     prefixCls: customizePrefixCls,
@@ -110,18 +109,9 @@ const Splitter = props => {
     onResize?.(nextSizes);
     onResizeEnd?.(nextSizes);
   });
-
-  // ======================== Styles ========================
-  // 构建 v4 风格类名（移除 cssinjs 相关 hash 和变量类）
   const containerClassName = (0, _classnames.default)(prefixCls, className, `${prefixCls}-${layout}`, {
     [`${prefixCls}-rtl`]: isRTL
-  }, rootClassName
-  // 移除 v5 cssinjs 类名
-  // contextClassName,
-  // cssVarCls,
-  // rootCls,
-  // hashId
-  );
+  }, rootClassName);
 
   // ======================== Render ========================
   const maskCls = `${prefixCls}-mask`;
@@ -134,13 +124,9 @@ const Splitter = props => {
     }
     return mergedSizes;
   }, [itemPtgSizes]);
-
-  // 合并样式（移除 v5 上下文样式）
   const mergedStyle = {
     ...style
   };
-
-  // 移除 wrapCSSVar 包装（v4 无需 cssinjs 变量注入）
   return /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
     onResize: onContainerResize
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -152,8 +138,6 @@ const Splitter = props => {
       prefixCls: prefixCls,
       size: panelSizes[idx]
     }));
-
-    // Split Bar
     let splitBar = null;
     const resizableInfo = resizableInfos[idx];
     if (resizableInfo) {