@dtjoy/dt-design 1.0.6 → 1.0.8

package/lib/collapsible/index.d.ts

@@ -1,97 +1,102 @@
-import React from 'react';
-import './style';
-interface BaseComponentProps {
-    /**
-     * 	类名
-     */
-    className?: string;
-    /**
-     * 样式
-     */
-    style?: React.CSSProperties;
-    /**
-     * id
-     */
-    id?: string;
-    'data-*'?: string;
-}
-export interface CollapsibleProps extends BaseComponentProps {
-    /**
-     * 是否开启动画
-     */
-    motion?: boolean;
-    /**
-     * 子元素
-     */
-    children?: React.ReactNode;
-    /**
-     * 是否展开内容区域
-     */
-    isOpen?: boolean;
-    /**
-     * 动画执行的时间
-     */
-    duration?: number;
-    /**
-     * 是否保留隐藏的面板 DOM 树，默认销毁
-     */
-    keepDOM?: boolean;
-    /**
-     * 配合 keepDOM 使用，为 true 时挂载时不会渲染组件
-     */
-    lazyRender?: boolean;
-    /**
-     * 折叠高度
-     */
-    collapseHeight?: number;
-    /**
-     * 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算
-     */
-    reCalcKey?: number | string;
-    /**
-     * 动画结束的回调
-     */
-    onMotionEnd?: () => void;
-    /**
-     * 是否开启淡入淡出
-     */
-    fade?: boolean;
-}
-interface CollapsibleState {
-    domInRenderTree: boolean;
-    domHeight: number;
-    visible: boolean;
-    isTransitioning: boolean;
-    cacheIsOpen: boolean;
-}
-declare class Collapsible extends React.Component<CollapsibleProps, CollapsibleState> {
-    static defaultProps: {
-        isOpen: boolean;
-        duration: number;
-        motion: boolean;
-        keepDOM: boolean;
-        lazyRender: boolean;
-        collapseHeight: number;
-        fade: boolean;
-    };
-    prefixCls: string;
-    foundation: any;
-    private domRef;
-    private resizeObserver;
-    private hasBeenRendered;
-    static displayName: string;
-    constructor(props: CollapsibleProps);
-    private handleResize;
-    private isChildrenInRenderTree;
-    static getEntryInfo: (entry: ResizeObserverEntry) => {
-        isShown: boolean;
-        height: number;
-    };
-    private getDataAttr;
-    componentDidMount(): void;
-    static getDerivedStateFromProps(props: CollapsibleProps, prevState: CollapsibleState): Partial<CollapsibleState>;
-    componentDidUpdate(prevProps: Readonly<CollapsibleProps>, prevState: Readonly<CollapsibleState>): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-export default Collapsible;
+import React from 'react';
+import './style';
+import type { ConfigConsumerProps } from 'antd/lib/config-provider';
+interface BaseComponentProps {
+    /**
+     *  类名
+     */
+    className?: string;
+    /**
+     * 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * id
+     */
+    id?: string;
+    'data-*'?: string;
+}
+export interface CollapsibleProps extends BaseComponentProps {
+    /**
+     * 是否开启动画
+     */
+    motion?: boolean;
+    /**
+     * 子元素
+     */
+    children?: React.ReactNode;
+    /**
+     * 是否展开内容区域
+     */
+    isOpen?: boolean;
+    /**
+     * 动画执行的时间
+     */
+    duration?: number;
+    /**
+     * 是否保留隐藏的面板 DOM 树，默认销毁
+     */
+    keepDOM?: boolean;
+    /**
+     * 配合 keepDOM 使用，为 true 时挂载时不会渲染组件
+     */
+    lazyRender?: boolean;
+    /**
+     * 折叠高度
+     */
+    collapseHeight?: number;
+    /**
+     * 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算
+     */
+    reCalcKey?: number | string;
+    /**
+     * 动画结束的回调
+     */
+    onMotionEnd?: () => void;
+    /**
+     * 是否开启淡入淡出
+     */
+    fade?: boolean;
+    /**
+     * 样式前缀
+     */
+    prefixCls?: string;
+}
+interface CollapsibleState {
+    domInRenderTree: boolean;
+    domHeight: number;
+    visible: boolean;
+    isTransitioning: boolean;
+    cacheIsOpen: boolean;
+}
+declare class Collapsible extends React.Component<CollapsibleProps, CollapsibleState> {
+    static defaultProps: {
+        isOpen: boolean;
+        duration: number;
+        motion: boolean;
+        keepDOM: boolean;
+        lazyRender: boolean;
+        collapseHeight: number;
+        fade: boolean;
+    };
+    static displayName: string;
+    foundation: any;
+    private domRef;
+    private resizeObserver;
+    private hasBeenRendered;
+    constructor(props: CollapsibleProps);
+    static getEntryInfo: (entry: ResizeObserverEntry) => {
+        isShown: boolean;
+        height: number;
+    };
+    static getDerivedStateFromProps(props: CollapsibleProps, prevState: CollapsibleState): Partial<CollapsibleState>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<CollapsibleProps>, prevState: Readonly<CollapsibleState>): void;
+    componentWillUnmount(): void;
+    renderCollapsible: ({ getPrefixCls }: ConfigConsumerProps) => React.JSX.Element;
+    render(): React.JSX.Element;
+    private handleResize;
+    private isChildrenInRenderTree;
+    private getDataAttr;
+}
+export default Collapsible;

package/lib/collapsible/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _configProvider = require("antd/es/config-provider");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _lodashEs = require("lodash-es");
 require("./style");
+var _context = require("antd/lib/config-provider/context");
+var _clsx = _interopRequireDefault(require("clsx"));
 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); }
 class Collapsible extends _react.default.Component {
@@ -21,18 +21,11 @@ class Collapsible extends _react.default.Component {
     collapseHeight: 0,
     fade: false
   };
-  prefixCls = 'collapsible';
+  static displayName;
   foundation;
   domRef = /*#__PURE__*/_react.default.createRef();
   resizeObserver = null;
   hasBeenRendered = false;
-  static displayName;
-  // public cssClasses = {
-  //     PREFIX: 'ant-collapsible',
-  //     TRANSITION: 'ant-collapsible-transition',
-  //     WRAPPER: 'ant-collapsible-wrapper',
-  // };
-
   constructor(props) {
     super(props);
     this.state = {
@@ -42,7 +35,6 @@ class Collapsible extends _react.default.Component {
       isTransitioning: false,
       cacheIsOpen: this.props.isOpen || false
     };
-    this.prefixCls = `${(0, _configProvider.globalConfig)().getPrefixCls(this.prefixCls)}`;
     this.foundation = {
       updateDOMInRenderTree: val => this.setState({
         domInRenderTree: val
@@ -58,20 +50,6 @@ class Collapsible extends _react.default.Component {
       })
     };
   }
-  handleResize = entryList => {
-    const entry = entryList[0];
-    if (entry) {
-      const entryInfo = Collapsible.getEntryInfo(entry);
-      this.foundation.updateDOMHeight(entryInfo.height);
-      this.foundation.updateDOMInRenderTree(entryInfo.isShown);
-    }
-  };
-  isChildrenInRenderTree = () => {
-    if (this.domRef.current) {
-      return this.domRef.current.offsetHeight > 0;
-    }
-    return false;
-  };
   static getEntryInfo = entry => {
     let inRenderTree;
     if (entry.borderBoxSize) {
@@ -91,26 +69,6 @@ class Collapsible extends _react.default.Component {
       height
     };
   };
-  getDataAttr = props => {
-    const dataAttrs = {};
-    Object.keys(props).forEach(key => {
-      if (key.startsWith('data-')) {
-        dataAttrs[key] = String(props[key]);
-      }
-    });
-    return dataAttrs;
-  };
-  componentDidMount() {
-    this.resizeObserver = new ResizeObserver(this.handleResize);
-    if (this.domRef.current) {
-      this.resizeObserver.observe(this.domRef.current);
-    }
-    const domInRenderTree = this.isChildrenInRenderTree();
-    this.foundation.updateDOMInRenderTree(domInRenderTree);
-    if (domInRenderTree && this.domRef.current) {
-      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
-    }
-  }
   static getDerivedStateFromProps(props, prevState) {
     const newState = {};
     const isOpenChanged = props.isOpen !== prevState.cacheIsOpen;
@@ -125,6 +83,18 @@ class Collapsible extends _react.default.Component {
     newState.cacheIsOpen = props.isOpen;
     return newState;
   }
+  componentDidMount() {
+    // eslint-disable-next-line compat/compat
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    if (this.domRef.current) {
+      this.resizeObserver.observe(this.domRef.current);
+    }
+    const domInRenderTree = this.isChildrenInRenderTree();
+    this.foundation.updateDOMInRenderTree(domInRenderTree);
+    if (domInRenderTree && this.domRef.current) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
+  }
   componentDidUpdate(prevProps, prevState) {
     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]));
@@ -141,7 +111,9 @@ class Collapsible extends _react.default.Component {
       this.resizeObserver = null;
     }
   }
-  render() {
+  renderCollapsible = ({
+    getPrefixCls
+  }) => {
     const {
       isOpen,
       collapseHeight,
@@ -153,13 +125,15 @@ class Collapsible extends _react.default.Component {
       id,
       keepDOM,
       lazyRender,
-      onMotionEnd
+      onMotionEnd,
+      prefixCls: customizePrefixCls
     } = this.props;
     const {
       domHeight,
       isTransitioning,
       visible
     } = this.state;
+    const prefixCls = getPrefixCls('splitter', customizePrefixCls);
     const wrapperStyle = {
       overflow: 'hidden',
       height: isOpen ? domHeight : collapseHeight,
@@ -167,8 +141,8 @@ class Collapsible extends _react.default.Component {
       transitionDuration: `${motion && isTransitioning ? duration : 0}ms`,
       ...style
     };
-    const wrapperCls = (0, _classnames.default)(`${this.prefixCls}-wrapper`, {
-      [`${this.prefixCls}-transition`]: motion && isTransitioning
+    const wrapperCls = (0, _clsx.default)(`${prefixCls}-wrapper`, {
+      [`${prefixCls}-transition`]: motion && isTransitioning
     }, className);
     const shouldRender = keepDOM && (lazyRender ? this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
     if (shouldRender && !this.hasBeenRendered) {
@@ -191,7 +165,33 @@ class Collapsible extends _react.default.Component {
       },
       id: id
     }, shouldRender && this.props.children));
+  };
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_context.ConfigConsumer, null, this.renderCollapsible);
   }
+  handleResize = entryList => {
+    const entry = entryList[0];
+    if (entry) {
+      const entryInfo = Collapsible.getEntryInfo(entry);
+      this.foundation.updateDOMHeight(entryInfo.height);
+      this.foundation.updateDOMInRenderTree(entryInfo.isShown);
+    }
+  };
+  isChildrenInRenderTree = () => {
+    if (this.domRef.current) {
+      return this.domRef.current.offsetHeight > 0;
+    }
+    return false;
+  };
+  getDataAttr = props => {
+    const dataAttrs = {};
+    Object.keys(props).forEach(key => {
+      if (key.startsWith('data-')) {
+        dataAttrs[key] = String(props[key]);
+      }
+    });
+    return dataAttrs;
+  };
 }
 if (process.env.NODE_ENV !== 'production') {
   Collapsible.displayName = 'Collapsible';

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

@@ -1 +1 @@
-import './index.less';
+import './index.less';

package/lib/collapsibleActionItems/index.d.ts

@@ -1,24 +1,24 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { ButtonProps } from "..";
-import type { DropDownProps } from 'antd';
-import './style';
-export declare type ActionItem = {
-    key: React.Key;
-    name: ReactNode;
-    disabled?: boolean;
-    render?: () => ReactNode;
-};
-interface ICollapsibleActionItems {
-    maxCount?: number;
-    actionItems: ActionItem[];
-    className?: string;
-    divider?: ReactNode;
-    collapseIcon?: ReactNode;
-    dropdownProps?: Partial<DropDownProps>;
-    buttonProps?: Partial<ButtonProps>;
-    style?: React.CSSProperties;
-    onItemClick?: (key: React.Key) => void;
-}
-declare const CollapsibleActionItems: React.FC<ICollapsibleActionItems>;
-export default CollapsibleActionItems;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ButtonProps } from "..";
+import type { DropDownProps } from 'antd';
+import './style';
+export type ActionItem = {
+    key: React.Key;
+    name: ReactNode;
+    disabled?: boolean;
+    render?: () => ReactNode;
+};
+interface ICollapsibleActionItems {
+    maxCount?: number;
+    actionItems: ActionItem[];
+    className?: string;
+    divider?: ReactNode;
+    collapseIcon?: ReactNode;
+    dropdownProps?: Partial<DropDownProps>;
+    buttonProps?: Partial<ButtonProps>;
+    style?: React.CSSProperties;
+    onItemClick?: (key: React.Key) => void;
+}
+declare const CollapsibleActionItems: React.FC<ICollapsibleActionItems>;
+export default CollapsibleActionItems;

package/lib/collapsibleActionItems/index.js

@@ -9,8 +9,8 @@ var _icons = require("@ant-design/icons");
 var _ = require("./..");
 var _antd = require("antd");
 var _configProvider = require("antd/es/config-provider");
-var _classnames = _interopRequireDefault(require("classnames"));
 require("./style");
+var _clsx = _interopRequireDefault(require("clsx"));
 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); }
 const CollapsibleActionItems = props => {
@@ -50,7 +50,7 @@ const CollapsibleActionItems = props => {
     onClick: info => onItemClick?.(info.key)
   }, actionItems.slice(maxCount - 1).map(item => getActionItemNode(item, true))) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, className),
+    className: (0, _clsx.default)(prefixCls, className),
     style: style
   }, displayAction.map((actionItem, index) => {
     const showDivider = index < actionItems.length - 1;

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

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

package/lib/flex/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import './style';
-import type { FlexProps } from './interface';
-declare const Flex: React.ForwardRefExoticComponent<FlexProps<import("../_util/type").AnyObject> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-export default Flex;
+import React from 'react';
+import './style';
+import type { FlexProps } from './interface';
+declare const Flex: React.ForwardRefExoticComponent<FlexProps<import("../_util/type").AnyObject> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+export default Flex;

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 _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 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, _classnames.default)(className, rootClassName, prefixCls, (0, _utils.default)(prefixCls, props), {
+  const mergedCls = (0, _clsx.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/interface.d.ts

@@ -1,16 +1,16 @@
-import type React from 'react';
-import { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { Orientation } from '../_util/hooks';
-import type { AnyObject, CustomComponent, LiteralUnion } from '../_util/type';
-export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLElement> {
-    prefixCls?: string;
-    rootClassName?: string;
-    vertical?: boolean;
-    orientation?: Orientation;
-    wrap?: boolean | React.CSSProperties['flexWrap'];
-    justify?: React.CSSProperties['justifyContent'];
-    align?: React.CSSProperties['alignItems'];
-    flex?: React.CSSProperties['flex'];
-    gap?: LiteralUnion<SizeType, React.CSSProperties['gap']>;
-    component?: CustomComponent<P>;
-}
+import type React from 'react';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { Orientation } from '../_util/hooks';
+import type { AnyObject, CustomComponent, LiteralUnion } from '../_util/type';
+export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+    rootClassName?: string;
+    vertical?: boolean;
+    orientation?: Orientation;
+    wrap?: boolean | React.CSSProperties['flexWrap'];
+    justify?: React.CSSProperties['justifyContent'];
+    align?: React.CSSProperties['alignItems'];
+    flex?: React.CSSProperties['flex'];
+    gap?: LiteralUnion<SizeType, React.CSSProperties['gap']>;
+    component?: CustomComponent<P>;
+}

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

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