@dtjoy/dt-design 1.0.1 → 1.0.2

package/esm/_util/gapSize.d.ts

@@ -0,0 +1,3 @@
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+export declare function isPresetSize(size?: SizeType | string | number): size is SizeType;
+export declare function isValidGapNumber(size?: SizeType | string | number): size is number;

package/esm/_util/gapSize.js

@@ -0,0 +1,10 @@
+export function isPresetSize(size) {
+  return ['small', 'middle', 'large'].includes(size);
+}
+export function isValidGapNumber(size) {
+  if (!size) {
+    // The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it.
+    return false;
+  }
+  return typeof size === 'number' && !Number.isNaN(size);
+}

package/esm/_util/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useOrientation';

package/esm/_util/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useOrientation";

package/esm/_util/hooks/useOrientation.d.ts

@@ -0,0 +1,2 @@
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];

package/esm/_util/hooks/useOrientation.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+var isValidOrientation = function isValidOrientation(orientation) {
+  return orientation === 'horizontal' || orientation === 'vertical';
+};
+export var useOrientation = function useOrientation(orientation, vertical, legacyDirection) {
+  return useMemo(function () {
+    var validOrientation = isValidOrientation(orientation);
+    var mergedOrientation;
+    if (validOrientation) {
+      mergedOrientation = orientation || 'horizontal';
+    } else if (typeof vertical === 'boolean') {
+      mergedOrientation = vertical ? 'vertical' : 'horizontal';
+    } else {
+      var validLegacyDirection = isValidOrientation(legacyDirection);
+      mergedOrientation = validLegacyDirection ? legacyDirection || 'horizontal' : 'horizontal';
+    }
+    return [mergedOrientation, mergedOrientation === 'vertical'];
+  }, [legacyDirection, orientation, vertical]);
+};

package/esm/_util/isNonNullable.d.ts

@@ -0,0 +1,2 @@
+declare const isNonNullable: <T>(val: T) => val is NonNullable<T>;
+export default isNonNullable;

package/esm/_util/isNonNullable.js

@@ -0,0 +1,4 @@
+var isNonNullable = function isNonNullable(val) {
+  return val !== undefined && val !== null;
+};
+export default isNonNullable;

package/esm/_util/type.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
+export declare type Primitive = null | undefined | string | number | boolean | symbol | bigint;
 /** https://github.com/Microsoft/TypeScript/issues/29729 */
-export declare type LiteralUnion<T extends string> = T | (string & {});
+export declare type LiteralUnion<T, U extends Primitive = string> = T | (U & Record<never, never>);
 export declare type AnyObject = Record<string, any>;
 export declare type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
 /**

package/esm/blockHeader/index.js

@@ -1,4 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -15,11 +16,9 @@ import { QuestionOutlined, UpOutlined } from '@dtinsight/react-icons';
 import { Tooltip } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
 import classNames from 'classnames';
-// import useLocale from '../locale/useLocale';
 import "./style";
-import stles from "./style/index.less";
-console.log(stles);
 import { toTooltipProps } from "../_util";
+import Collapsible from "../collapsible";
 function isControlled(props) {
   return props.expand !== undefined;
 }
@@ -59,15 +58,13 @@ var BlockHeader = function BlockHeader(props) {
     _useState2 = _slicedToArray(_useState, 2),
     internalExpand = _useState2[0],
     setInternalExpand = _useState2[1];
-  // const locale = useLocale('BlockHeader');
-
   var currentExpand = isControlled(props) ? expand : internalExpand;
 
   // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
   var showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
   var tooltipProps = toTooltipProps(tooltip);
   var bottomStyle;
-  if (spaceBottom) bottomStyle = showCollapse && currentExpand ? {
+  if (spaceBottom) bottomStyle = showCollapse && !currentExpand ? {
     marginBottom: 0
   } : {
     marginBottom: spaceBottom
@@ -94,7 +91,9 @@ var BlockHeader = function BlockHeader(props) {
     className: "title__text"
   }, title), tooltipProps !== null && tooltipProps !== void 0 && tooltipProps.title ? /*#__PURE__*/React.createElement("div", {
     className: "title__tooltip"
-  }, /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(QuestionOutlined, null))) : null, description ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltipProps, {
+    className: classNames(tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className, 'anticon')
+  }), /*#__PURE__*/React.createElement(QuestionOutlined, null))) : null, description ? /*#__PURE__*/React.createElement("div", {
     className: "title__description"
   }, description) : null), addonAfter && /*#__PURE__*/React.createElement("div", {
     className: "title__addon-after"
@@ -102,14 +101,16 @@ var BlockHeader = function BlockHeader(props) {
     className: "title__collapse"
   }, /*#__PURE__*/React.createElement("div", {
     className: "collapse__text"
-  }), /*#__PURE__*/React.createElement(UpOutlined, {
-    className: classNames('collapse__icon', {
+  }, currentExpand ? '收起' : '展开'), /*#__PURE__*/React.createElement(UpOutlined, {
+    className: classNames('collapse__icon', 'anticon', {
       'collapse__icon--up': currentExpand,
       'collapse__icon--down': !currentExpand
     })
-  }))), children && /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(Collapsible, {
+    isOpen: !currentExpand
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefixCls, "__content"), contentClassName, _defineProperty({}, "".concat(prefixCls, "__content--active"), currentExpand || !showCollapse)),
     style: contentStyle
-  }, children));
+  }, children)));
 };
 export default BlockHeader;

package/esm/blockHeader/style/index.d.ts

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

package/esm/blockHeader/style/index.js

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

package/esm/blockHeader/style/index.less

@@ -129,14 +129,15 @@
         }
     }
     &__content {
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        transition: opacity 0.5s ease, height 0.5s ease;
+        padding: 16px 24px;
+
+        // opacity: 0;
+        // height: 0;
+        // overflow: hidden;
+        // transition: opacity 0.5s ease, height 0.5s ease;
         &--active {
-            opacity: 1;
-            padding: 16px 24px;
-            height: auto;
+            // opacity: 1;
+            // height: auto;
         }
     }
 }

package/esm/button/style/index.less

@@ -1,120 +1,134 @@
 @import '../../style/themes/index.less';
+@import './mixin.less';
 
-@prefix-cls: ~'@{ant-prefix}-btn';
+@btn-prefix-cls: ~'@{ant-prefix}-btn';
 
-.@{prefix-cls} {
+.@{btn-prefix-cls} {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 4px 16px;
 
+    // 引用中尺寸配置（核心：先调用混入，再取值）
+    .btn-size-middle();
+    padding: @padding;
+
+    // 图标样式
     &__icon {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: inherit;
         line-height: 0;
-        // 因为 dtstack-icon 组件的 font-size 是 16px，现在需要继承 Button 组件的 font-size
+
         .dtstack-icon {
             font-size: inherit;
         }
 
+        // 小尺寸图标
         &--small {
-            font-size: 12px;
+            .btn-size-small();
+            font-size: @icon-font-size;
         }
-
+        // 中尺寸图标
         &--middle {
-            font-size: 16px;
+            .btn-size-middle();
+            font-size: @icon-font-size;
         }
-
+        // 大尺寸图标
         &--large {
-            font-size: 18px;
+            .btn-size-large();
+            font-size: @icon-font-size;
         }
 
-        & + .@{prefix-cls}__text {
+        // 图标与文字间距
+        & + .@{btn-prefix-cls}__text {
             &--small {
-                margin-left: 2px;
+                .btn-size-small();
+                margin-left: @icon-text-margin;
             }
-
             &--middle {
-                margin-left: 8px;
+                .btn-size-middle();
+                margin-left: @icon-text-margin;
             }
-
             &--large {
-                margin-left: 8px;
+                .btn-size-large();
+                margin-left: @icon-text-margin;
             }
         }
     }
 
+    // 文字样式
     &__text {
         display: inline-block;
 
         &--small {
-            font-size: 12px;
+            .btn-size-small();
+            font-size: @text-font-size;
         }
-
         &--middle {
-            font-size: 14px;
+            .btn-size-middle();
+            font-size: @text-font-size;
         }
-
         &--large {
-            font-size: 14px;
+            .btn-size-large();
+            font-size: @text-font-size;
         }
     }
 
+    // 尺寸变体
     &-sm {
-        padding: 2px 12px;
+        .btn-size-small();
+        padding: @padding;
     }
-
     &-lg {
-        padding: 3px 40px;
+        .btn-size-large();
+        padding: @padding;
     }
 
-    &-primary[disabled],
-    &-primary[disabled]:hover {
-        // color: @primary-color-disabled;
-        background: @disabled-color;
-        border-color: @disabled-color;
+    // 主要按钮
+    &-primary {
+        .btn-disabled-primary();
+        .generate-btn-disabled(@bg, @color, @border);
+
+        &:hover,
+        &:focus {
+            background-color: #225fdb;
+        }
     }
 
+    // 次要按钮
     &-secondary {
         border-color: @primary-color;
         color: @primary-color;
 
         &:hover,
         &:focus {
-            background-color: @item-hover-bg;
+            background-color: fade(@primary-color, 10%);
         }
+
+        .btn-disabled-secondary-tertiary();
+        .generate-btn-disabled(@bg, @color, @border);
     }
 
+    // 三级按钮
     &-tertiary {
-        // background-color: @table-title-fill-bg;
+        background-color: #f3f3f3;
         border-color: @border-color-base;
 
         &:hover,
         &:focus {
-            background-color: @item-hover-bg;
+            background-color: fade(@primary-color, 10%);
             border-color: @primary-color;
             color: @primary-color;
         }
-    }
 
-    &-secondary,
-    &-tertiary {
-        &[disabled],
-        &[disabled]:hover {
-            background: #f3f3f3;
-            color: @disabled-color;
-            border-color: @border-color-base;
-        }
+        .btn-disabled-secondary-tertiary();
+        .generate-btn-disabled(@bg, @color, @border);
     }
 
+    // 默认按钮
     &-default {
-        &[disabled],
-        &[disabled]:hover {
-            background: transparent;
-            color: @disabled-color;
-            border-color: @border-color-base;
-        }
+        .btn-disabled-default();
+        .generate-btn-disabled(@bg, @color, @border);
     }
 }

package/esm/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/esm/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;