@dtjoy/dt-design 1.1.2 → 1.1.5

package/{esm → es}/button/index.js

@@ -6,16 +6,28 @@ import React from 'react';
 import { Button as AntdButton } from 'antd';
 import clsx from 'clsx';
 import "./style";
-function Button(_ref) {
+/** Map custom types to antd-compatible types */
+function mapButtonType(type) {
+  if (type === 'secondary' || type === 'tertiary') {
+    return 'default';
+  }
+  return type;
+}
+var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'middle' : _ref$size,
     type = _ref.type,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(AntdButton, _extends({
-    className: clsx(className),
+    ref: ref,
+    className: clsx(className, {
+      'dt-btn-secondary': type === 'secondary',
+      'dt-btn-tertiary': type === 'tertiary'
+    }),
     size: size,
-    type: type
+    type: mapButtonType(type)
   }, rest));
-}
+});
+Button.displayName = 'Button';
 export default Button;

package/es/button/style/index.d.ts

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

package/{esm → es}/button/style/index.less

@@ -1,59 +1,62 @@
-@import '../../style/themes/index.less';
-@import './mixin.less';
-
-@btn-prefix-cls: ~'@{ant-prefix}-btn';
-
-.ant-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  padding:  0;
-
-  .apply-btn-size(4px 16px; 14px; 16px; 8px);
-
-  &-sm {
-    .apply-btn-size(2px 12px; 12px; 12px; 2px);
-  }
-
-  &-lg {
-    .apply-btn-size(3px 40px; 14px; 18px; 8px);
-  }
-
-  &-circle {
-    padding-inline: 0;
-    border-radius: 50%;
-  }
-
-
-  // 主按钮
-  &-primary {
-    .btn-hover-variant(#fff; #225fdb; #225fdb);
-    .generate-btn-disabled(@disabled-color; #f9f9f9; @disabled-color);
-  }
-
-  // 次按钮
-  &-secondary {
-    color: @primary-color;
-    border-color: @primary-color;
-
-    .btn-hover-variant(@primary-color; fade(@primary-color, 10%); @primary-color);
-    .generate-btn-disabled(@primary-color-disabled; @disabled-color; @border-color-base);
-  }
-
-  // 三级按钮
-  &-tertiary {
-    background-color: #f3f3f3;
-    border-color: @border-color-base;
-
-    .btn-hover-variant(@primary-color; fade(@primary-color, 10%); @primary-color);
-    .generate-btn-disabled(@primary-color-disabled; @disabled-color; @border-color-base);
-  }
-
-  // 默认按钮
-  &-default {
-    .generate-btn-disabled(transparent; @disabled-color; @border-color-base);
-  }
-}
-
-
+@import '../../style/themes/index.less';
+@import './mixin.less';
+
+@btn-prefix-cls: ~'dt-btn';
+
+.ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding:  0;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  .apply-btn-size(4px 16px; 14px; 16px; 8px);
+
+  &-sm {
+    .apply-btn-size(2px 12px; 12px; 12px; 2px);
+  }
+
+  &-lg {
+    .apply-btn-size(3px 40px; 14px; 18px; 8px);
+  }
+
+  &-circle {
+    border-radius: 50%;
+    padding-inline: 0;
+  }
+
+
+  // 主按钮
+  &-primary {
+    .btn-hover-variant(#fff; #225fdb; #225fdb);
+    .generate-btn-disabled(@disabled-color; #f9f9f9; @disabled-color);
+  }
+
+  // 默认按钮
+  &-default {
+    .generate-btn-disabled(transparent; @disabled-color; @border-color-base);
+  }
+}
+
+// 自定义按钮类型：JS 侧为 secondary/tertiary 类型附加 dt-btn-secondary / dt-btn-tertiary 类
+.@{btn-prefix-cls} {
+  // 次按钮
+  &-secondary {
+    color: @primary-color;
+    border-color: @primary-color;
+
+    .btn-hover-variant(@primary-color; fade(@primary-color, 10%); @primary-color);
+    .generate-btn-disabled(@primary-color-disabled; @disabled-color; @border-color-base);
+  }
+
+  // 三级按钮
+  &-tertiary {
+    background-color: #f3f3f3;
+    border-color: @border-color-base;
+
+    .btn-hover-variant(@primary-color; fade(@primary-color, 10%); @primary-color);
+    .generate-btn-disabled(@primary-color-disabled; @disabled-color; @border-color-base);
+  }
+}
+
+

package/{esm → es}/button/style/mixin.less

@@ -1,39 +1,40 @@
-// ===================== 按钮尺寸处理 =====================
-.apply-btn-size(@padding; @font-size; @icon-size: 16px; @gap: 8px) {
-  padding: @padding;
-  font-size: @font-size;
-
-  .anticon {
-    font-size: @icon-size;
-    + span {
-      margin-left: @gap;
-    }
-  }
-}
-
-// ===================== 禁用状态生成器 =====================
-// 参数: 背景色, 文字颜色, 边框颜色
-.generate-btn-disabled(@bg; @color; @border) {
-  &[disabled],
-  &[disabled]:hover,
-  &[disabled]:active,
-  &[disabled]:focus {
-    color: @color;
-    background: @bg;
-    border-color: @border;
-    cursor: not-allowed;
-    opacity: 1;
-    box-shadow: none;
-    text-shadow: none;
-  }
-}
-
-// ===================== 交互状态快捷配置 =====================
-.btn-hover-variant(@color; @bg; @border) {
-  &:hover,
-  &:focus {
-    color: @color;
-    background: @bg;
-    border-color: @border;
-  }
-}
+// ===================== 按钮尺寸处理 =====================
+.apply-btn-size(@padding; @font-size; @icon-size: 16px; @gap: 8px) {
+  padding: @padding;
+  font-size: @font-size;
+
+  .anticon {
+    font-size: @icon-size;
+
+    + span {
+      margin-left: @gap;
+    }
+  }
+}
+
+// ===================== 禁用状态生成器 =====================
+// 参数: 背景色, 文字颜色, 边框颜色
+.generate-btn-disabled(@bg; @color; @border) {
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    color: @color;
+    text-shadow: none;
+    background: @bg;
+    border-color: @border;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+  }
+}
+
+// ===================== 交互状态快捷配置 =====================
+.btn-hover-variant(@color; @bg; @border) {
+  &:hover,
+  &:focus {
+    color: @color;
+    background: @bg;
+    border-color: @border;
+  }
+}

package/es/collapsible/index.d.ts

@@ -0,0 +1,102 @@
+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/{esm → es}/collapsible/index.js

@@ -16,7 +16,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
-import { isEqual, pick } from 'lodash-es';
+import isEqual from 'lodash/isEqual';
+import pick from 'lodash/pick';
 import "./style";
 import { ConfigConsumer } from 'antd/lib/config-provider/context';
 import clsx from 'clsx';
@@ -50,7 +51,7 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
         domHeight = _this$state.domHeight,
         isTransitioning = _this$state.isTransitioning,
         visible = _this$state.visible;
-      var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+      var prefixCls = getPrefixCls('collapsible', customizePrefixCls);
       var wrapperStyle = _objectSpread({
         overflow: 'hidden',
         height: isOpen ? domHeight : collapseHeight,

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

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

package/{esm → es}/collapsible/style/index.less

@@ -1,24 +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;
-}
+@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/es/collapsible-action-items/index.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ButtonProps } from '@dtjoy/dt-design';
+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/{esm/collapsibleActionItems → es/collapsible-action-items}/index.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button } from "./..";
-import { Divider, Dropdown, Menu } from 'antd';
-import { globalConfig } from 'antd/es/config-provider';
+import { Divider, Dropdown } from 'antd';
+import { globalConfig } from 'antd/lib/config-provider';
 import "./style";
 import clsx from 'clsx';
 var CollapsibleActionItems = function CollapsibleActionItems(props) {
@@ -24,9 +24,8 @@ var CollapsibleActionItems = function CollapsibleActionItems(props) {
   var isOverMaxCount = actionItems.length > maxCount;
   var prefixCls = globalConfig().getPrefixCls('collapsible-action-items');
   var getActionItemNode = function getActionItemNode(item) {
-    var isCollapse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var customRender = item.render ? item.render() : null;
-    if (!isCollapse) return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "__btn"),
       key: item.key,
       onClick: function onClick() {
@@ -36,22 +35,20 @@ var CollapsibleActionItems = function CollapsibleActionItems(props) {
       type: "link",
       disabled: item.disabled
     }, buttonProps), item.name));
-    return /*#__PURE__*/React.createElement(Menu.Item, {
-      key: item.key,
-      disabled: item.disabled
-    }, customRender || item.name);
   };
   var displayAction = actionItems.slice(0, isOverMaxCount ? maxCount - 1 : maxCount).map(function (item) {
-    return getActionItemNode(item, false);
+    return getActionItemNode(item);
   });
-  var dropdownMenu = isOverMaxCount ? /*#__PURE__*/React.createElement(Menu, {
-    "data-testid": "action-dropdown-menu",
-    onClick: function onClick(info) {
-      return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(info.key);
-    }
-  }, actionItems.slice(maxCount - 1).map(function (item) {
-    return getActionItemNode(item, true);
-  })) : null;
+  var collapsedItems = isOverMaxCount ? actionItems.slice(maxCount - 1) : [];
+  var menuItems = React.useMemo(function () {
+    return collapsedItems.map(function (item) {
+      return {
+        key: item.key,
+        disabled: item.disabled,
+        label: item.render ? item.render() : item.name
+      };
+    });
+  }, [collapsedItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(prefixCls, className),
     style: style
@@ -60,9 +57,14 @@ var CollapsibleActionItems = function CollapsibleActionItems(props) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: actionItem.key
     }, actionItem, showDivider && divider);
-  }), dropdownMenu && /*#__PURE__*/React.createElement(Dropdown, _extends({
+  }), collapsedItems.length > 0 && /*#__PURE__*/React.createElement(Dropdown, _extends({
     placement: 'bottomRight',
-    overlay: dropdownMenu,
+    menu: {
+      items: menuItems,
+      onClick: function onClick(info) {
+        return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(info.key);
+      }
+    },
     getPopupContainer: function getPopupContainer(triggerNode) {
       var _triggerNode$parentEl;
       return (_triggerNode$parentEl = triggerNode.parentElement) !== null && _triggerNode$parentEl !== void 0 ? _triggerNode$parentEl : document.body;

package/es/collapsible-action-items/style/index.d.ts

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

package/{lib/collapsibleActionItems → es/collapsible-action-items}/style/index.less

@@ -1,7 +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;
-}
+@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/es/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").AnyObject> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export default Flex;

package/{esm → es}/flex/index.js

@@ -15,13 +15,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 from 'react';
-import { ConfigContext, globalConfig } from 'antd/es/config-provider';
+import { ConfigContext, globalConfig } from 'antd/lib/config-provider';
 import clsx from 'clsx';
-import { omit } from 'lodash-es';
+import omit from 'lodash/omit';
 import "./style";
 import { isPresetSize } from "../_util/gapSize";
 import { useOrientation } from "../_util/hooks";
-import isNonNullable from "../_util/isNonNullable";
+import { isNonNullable } from "../_util/is";
 import createFlexClassNames from "./utils";
 var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var customizePrefixCls = props.prefixCls,

package/es/flex/interface.d.ts

@@ -0,0 +1,16 @@
+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/es/flex/style/index.d.ts

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