@dtjoy/dt-design 1.0.1 → 1.0.3

package/lib/button/style/mixin.less

@@ -0,0 +1,47 @@
+.btn-size-small() {
+    @padding: 2px 12px;
+    @icon-font-size: 12px;
+    @text-font-size: 12px;
+    @icon-text-margin: 2px;
+}
+.btn-size-middle() {
+    @padding: 4px 16px;
+    @icon-font-size: 16px;
+    @text-font-size: 14px;
+    @icon-text-margin: 8px;
+}
+.btn-size-large() {
+    @padding: 3px 40px;
+    @icon-font-size: 18px;
+    @text-font-size: 14px;
+    @icon-text-margin: 8px;
+}
+
+// 禁用状态配置（同样用混入）
+.btn-disabled-primary() {
+    @bg: @disabled-color;
+    @color: #F9F9F9;
+    @border: @disabled-color;
+}
+.btn-disabled-secondary-tertiary() {
+    @bg: @primary-color-disabled;
+    @color: @disabled-color;
+    @border: @border-color-base;
+}
+.btn-disabled-default() {
+    @bg: transparent;
+    @color: @disabled-color;
+    @border: @border-color-base;
+}
+
+// ===================== 工具混入 =====================
+.generate-btn-disabled(@bg, @color, @border) {
+    &[disabled],
+    &[disabled]:hover {
+        background: @bg;
+        color: @color;
+        border-color: @border;
+        cursor: not-allowed;
+        opacity: 1;
+    }
+}

package/lib/collapsible/index.d.ts

@@ -0,0 +1,97 @@
+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;

package/lib/collapsible/index.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+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 {
+  static defaultProps = {
+    isOpen: false,
+    duration: 250,
+    motion: true,
+    keepDOM: false,
+    lazyRender: false,
+    collapseHeight: 0,
+    fade: false
+  };
+  prefixCls = 'collapsible';
+  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 = {
+      domInRenderTree: false,
+      domHeight: 0,
+      visible: this.props.isOpen || false,
+      isTransitioning: false,
+      cacheIsOpen: this.props.isOpen || false
+    };
+    this.prefixCls = `${(0, _configProvider.globalConfig)().getPrefixCls(this.prefixCls)}`;
+    this.foundation = {
+      updateDOMInRenderTree: val => this.setState({
+        domInRenderTree: val
+      }),
+      updateDOMHeight: val => this.setState({
+        domHeight: val
+      }),
+      updateVisible: val => this.setState({
+        visible: val
+      }),
+      updateIsTransitioning: val => this.setState({
+        isTransitioning: val
+      })
+    };
+  }
+  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) {
+      inRenderTree = !(entry.borderBoxSize[0].blockSize === 0 && entry.borderBoxSize[0].inlineSize === 0);
+    } else {
+      inRenderTree = !(entry.contentRect.height === 0 && entry.contentRect.width === 0);
+    }
+    let height = 0;
+    if (entry.borderBoxSize) {
+      height = Math.ceil(entry.borderBoxSize[0].blockSize);
+    } else {
+      const target = entry.target;
+      height = target.clientHeight;
+    }
+    return {
+      isShown: inRenderTree,
+      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;
+    if (isOpenChanged) {
+      if (props.isOpen || !props.motion) {
+        newState.visible = props.isOpen;
+      }
+    }
+    if (props.motion && isOpenChanged) {
+      newState.isTransitioning = true;
+    }
+    newState.cacheIsOpen = props.isOpen;
+    return newState;
+  }
+  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]));
+    if (changedPropKeys.includes('reCalcKey') && this.domRef.current) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
+    if (changedStateKeys.includes('domInRenderTree') && this.state.domInRenderTree && this.domRef.current) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
+  }
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+  render() {
+    const {
+      isOpen,
+      collapseHeight,
+      fade,
+      motion,
+      duration,
+      style,
+      className,
+      id,
+      keepDOM,
+      lazyRender,
+      onMotionEnd
+    } = this.props;
+    const {
+      domHeight,
+      isTransitioning,
+      visible
+    } = this.state;
+    const wrapperStyle = {
+      overflow: 'hidden',
+      height: isOpen ? domHeight : collapseHeight,
+      opacity: isOpen || !fade || collapseHeight !== 0 ? 1 : 0,
+      transitionDuration: `${motion && isTransitioning ? duration : 0}ms`,
+      ...style
+    };
+    const wrapperCls = (0, _classnames.default)(`${this.prefixCls}-wrapper`, {
+      [`${this.prefixCls}-transition`]: motion && isTransitioning
+    }, className);
+    const shouldRender = keepDOM && (lazyRender ? this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
+    if (shouldRender && !this.hasBeenRendered) {
+      this.hasBeenRendered = true;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", _extends({
+      className: wrapperCls,
+      style: wrapperStyle,
+      onTransitionEnd: () => {
+        if (!isOpen) {
+          this.foundation.updateVisible(false);
+        }
+        this.foundation.updateIsTransitioning(false);
+        onMotionEnd?.();
+      }
+    }, this.getDataAttr(this.props)), /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.domRef,
+      style: {
+        overflow: 'hidden'
+      },
+      id: id
+    }, shouldRender && this.props.children));
+  }
+}
+if (process.env.NODE_ENV !== 'production') {
+  Collapsible.displayName = 'Collapsible';
+}
+var _default = exports.default = Collapsible;

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

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

package/lib/collapsible/style/index.js

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

package/lib/collapsible/style/index.less

@@ -0,0 +1,24 @@
+@import '../../style/themes/index.less';
+
+@collapsible-prefix-cls: ~'@{ant-prefix}-collapsible';
+
+@transition-duration-collapsible-height: 250ms;
+@transition-function-collapsible-height: cubic-bezier(0.25, 0.1, 0.25, 1);
+@transition-delay-collapsible-height: 0ms;
+
+@transition-duration-collapsible-opacity: 250ms;
+@transition-function-collapsible-opacity: @ease-in;
+@transition-delay-collapsible-opacity: 0ms;
+
+// 容器基础样式
+.@{collapsible-prefix-cls}-wrapper {
+    box-sizing: border-box;
+}
+
+// 过渡动画样式
+.@{collapsible-prefix-cls}-transition {
+    transition: height @transition-duration-collapsible-height
+            @transition-function-collapsible-height @transition-delay-collapsible-height,
+        opacity @transition-duration-collapsible-opacity @transition-function-collapsible-opacity
+            @transition-delay-collapsible-opacity;
+}

package/lib/collapsibleActionItems/index.d.ts

@@ -0,0 +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;

package/lib/collapsibleActionItems/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+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");
+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 => {
+  const {
+    actionItems,
+    maxCount = 3,
+    className,
+    divider = /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+      type: "vertical"
+    }),
+    collapseIcon = /*#__PURE__*/_react.default.createElement(_icons.EllipsisOutlined, null),
+    dropdownProps,
+    buttonProps,
+    style,
+    onItemClick
+  } = props;
+  const isOverMaxCount = actionItems.length > maxCount;
+  const prefixCls = (0, _configProvider.globalConfig)().getPrefixCls('collapsible-action-items');
+  const getActionItemNode = (item, isCollapse = false) => {
+    const customRender = item.render ? item.render() : null;
+    if (!isCollapse) return /*#__PURE__*/_react.default.createElement("span", {
+      className: `${prefixCls}__btn`,
+      key: item.key,
+      onClick: () => !item.disabled && onItemClick?.(item.key)
+    }, customRender || /*#__PURE__*/_react.default.createElement(_.Button, _extends({
+      type: "link",
+      disabled: item.disabled
+    }, buttonProps), item.name));
+    return /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+      key: item.key,
+      disabled: item.disabled
+    }, customRender || item.name);
+  };
+  const displayAction = actionItems.slice(0, isOverMaxCount ? maxCount - 1 : maxCount).map(item => getActionItemNode(item, false));
+  const dropdownMenu = isOverMaxCount ? /*#__PURE__*/_react.default.createElement(_antd.Menu, {
+    "data-testid": "action-dropdown-menu",
+    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),
+    style: style
+  }, displayAction.map((actionItem, index) => {
+    const showDivider = index < actionItems.length - 1;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: actionItem.key
+    }, actionItem, showDivider && divider);
+  }), dropdownMenu && /*#__PURE__*/_react.default.createElement(_antd.Dropdown, _extends({
+    placement: 'bottomRight',
+    overlay: dropdownMenu,
+    getPopupContainer: triggerNode => triggerNode.parentElement ?? document.body
+  }, dropdownProps), /*#__PURE__*/_react.default.createElement("a", {
+    className: `${prefixCls}__icon`
+  }, collapseIcon)));
+};
+var _default = exports.default = CollapsibleActionItems;

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

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

package/lib/collapsibleActionItems/style/index.js

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

package/lib/collapsibleActionItems/style/index.less

@@ -0,0 +1,7 @@
+@import '../../style/themes/index.less';
+
+@collapsible-action-items-prefix-cls: ~'@{ant-prefix}-collapsible-action-items';
+
+.@{collapsible-action-items-prefix-cls}__icon {
+    font-size: 16px;
+}

package/lib/flex/index.d.ts

@@ -0,0 +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;

package/lib/flex/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _gapSize = require("../_util/gapSize");
+var _hooks = require("../_util/hooks");
+var _isNonNullable = _interopRequireDefault(require("../_util/isNonNullable"));
+var _utils = _interopRequireDefault(require("./utils"));
+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 Flex = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    rootClassName,
+    className,
+    style,
+    flex,
+    gap,
+    vertical,
+    orientation,
+    component: Component = 'div',
+    children,
+    ...othersProps
+  } = props;
+  const {
+    direction: ctxDirection
+  } = _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), {
+    [`${prefixCls}-rtl`]: ctxDirection === 'rtl',
+    [`${prefixCls}-gap-${gap}`]: (0, _gapSize.isPresetSize)(gap),
+    [`${prefixCls}-vertical`]: mergedVertical === 'vertical'
+  });
+  const mergedStyle = {
+    ...style
+  };
+  if ((0, _isNonNullable.default)(flex)) {
+    mergedStyle.flex = flex;
+  }
+  if ((0, _isNonNullable.default)(gap) && !(0, _gapSize.isPresetSize)(gap)) {
+    mergedStyle.gap = gap;
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    ref: ref,
+    className: mergedCls,
+    style: mergedStyle
+  }, (0, _lodashEs.omit)(othersProps, ['justify', 'wrap', 'align'])), children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  Flex.displayName = 'Flex';
+}
+var _default = exports.default = Flex;

package/lib/flex/interface.d.ts

@@ -0,0 +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>;
+}

package/lib/flex/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

package/lib/flex/style/index.js

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

package/lib/flex/style/index.less

@@ -0,0 +1,77 @@
+@import '../../style/themes/index.less';
+
+@flex-prefix-cls: ~'@{ant-prefix}-flex';
+
+// 属性与值的映射
+@align-items-values: {
+    stretch: stretch;
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    baseline: baseline;
+};
+
+@justify-content-values: {
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    space-between: space-between;
+    space-around: space-around;
+    space-evenly: space-evenly;
+};
+
+@flex-wrap-values: {
+    nowrap: nowrap;
+    wrap: wrap;
+    wrap-reverse: wrap-reverse;
+};
+
+.@{flex-prefix-cls} {
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    // 方向
+    &-vertical {
+        flex-direction: column;
+    }
+    &-rtl {
+        direction: rtl;
+    }
+    &:empty {
+        display: none;
+    }
+
+    // 间距 (Gap)
+    &-gap-small {
+        gap: @padding-xs;
+    }
+    &-gap-middle {
+        gap: @padding-md;
+    }
+    &-gap-large {
+        gap: @padding-lg;
+    }
+
+    // 使用 Loops/Each 抽象重复代码
+    // flex-wrap
+    each(@flex-wrap-values, .(@value, @key) {
+        &-wrap-@{key} {
+            flex-wrap: @value;
+        }
+    });
+
+    // align-items
+    each(@align-items-values, .(@value, @key) {
+        &-align-@{key} {
+            align-items: @value;
+        }
+    });
+
+    // justify-content
+    each(@justify-content-values, .(@value, @key) {
+        &-justify-@{key} {
+            justify-content: @value;
+        }
+    });
+}

package/lib/flex/utils.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FlexProps } from './interface';
+export declare const flexWrapValues: React.CSSProperties['flexWrap'][];
+export declare const justifyContentValues: React.CSSProperties['justifyContent'][];
+export declare const alignItemsValues: React.CSSProperties['alignItems'][];
+declare const createFlexClassNames: (prefixCls: string, props: FlexProps) => string;
+export default createFlexClassNames;