@dtjoy/dt-design 1.0.0 → 1.0.2

package/esm/statusTag/style/index.less

@@ -0,0 +1,70 @@
+@import '../../style/themes/index.less';
+@import './mixin.less';
+@import './mixin.less';
+
+@status-tag-prefix-cls: ~'@{ant-prefix}-status-tag';
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// 主选择器
+.@{status-tag-prefix-cls} {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    height: 24px;
+    font-size: 12px;
+    color: #3d446e;
+
+    .ant-spin {
+        font-size: 14px; // 修复 antd 字体居中问题
+    }
+
+    &--border {
+        padding: 2px 12px;
+        border: 1px solid #d8dae2;
+        background-color: #fff;
+    }
+
+    &--fill {
+        padding: 2px 12px;
+    }
+
+    &--rounded {
+        border-radius: 14px;
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        margin-right: 8px;
+
+        &--default {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+        }
+
+        &--loading {
+            animation: spin 1s linear infinite;
+        }
+    }
+
+    &__text {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 22px;
+        white-space: nowrap;
+    }
+
+    // 调用颜色映射 Mixin，生成所有颜色的样式
+    .color-map();
+}

package/esm/statusTag/style/mixin.less

@@ -0,0 +1,39 @@
+.status-color(@color, @bg) {
+    &--icon {
+        color: @color;
+    }
+    &--fill {
+        color: @color;
+        background-color: @bg;
+    }
+    &--iconBg {
+        background: @color;
+    }
+}
+
+.color-map() {
+    &__yellow {
+        .status-color(#FBB310, #FFF4D9);
+    }
+    &__blue {
+        .status-color(#1d78ff, #E8F1FF);
+    }
+    &__green {
+        .status-color(#11d782, #E7FBF7);
+    }
+    &__gray {
+        .status-color(#B1B4C5, #F5F5F8);
+    }
+    &__red {
+        .status-color(#F96C5B, #FDE9E7);
+    }
+    &__purple {
+        .status-color(#AC9DFF, #EAE6FF);
+    }
+    &__cyan {
+        .status-color(#2cccdf, #E7F8FA);
+    }
+    &__pink {
+        .status-color(#FF82AE, #FFE6EF);
+    }
+}

package/esm/style/index.d.ts

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

package/esm/style/index.js

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

package/esm/style/index.less

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

package/esm/style/themes/index.less

@@ -0,0 +1,2 @@
+@import '~antd/es/style/themes/default.less';
+@import './variable.less';

package/esm/style/themes/variable.less

@@ -0,0 +1 @@
+@primary-color-disabled: #f3f3f3;

package/lib/_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/lib/_util/gapSize.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPresetSize = isPresetSize;
+exports.isValidGapNumber = isValidGapNumber;
+function isPresetSize(size) {
+  return ['small', 'middle', 'large'].includes(size);
+}
+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/lib/_util/hooks/index.d.ts

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

package/lib/_util/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useOrientation = require("./useOrientation");
+Object.keys(_useOrientation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOrientation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOrientation[key];
+    }
+  });
+});

package/lib/_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/lib/_util/hooks/useOrientation.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOrientation = void 0;
+var _react = require("react");
+const isValidOrientation = orientation => {
+  return orientation === 'horizontal' || orientation === 'vertical';
+};
+const useOrientation = (orientation, vertical, legacyDirection) => {
+  return (0, _react.useMemo)(() => {
+    const validOrientation = isValidOrientation(orientation);
+    let mergedOrientation;
+    if (validOrientation) {
+      mergedOrientation = orientation || 'horizontal';
+    } else if (typeof vertical === 'boolean') {
+      mergedOrientation = vertical ? 'vertical' : 'horizontal';
+    } else {
+      const validLegacyDirection = isValidOrientation(legacyDirection);
+      mergedOrientation = validLegacyDirection ? legacyDirection || 'horizontal' : 'horizontal';
+    }
+    return [mergedOrientation, mergedOrientation === 'vertical'];
+  }, [legacyDirection, orientation, vertical]);
+};
+exports.useOrientation = useOrientation;

package/lib/_util/isNonNullable.d.ts

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

package/lib/_util/isNonNullable.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const isNonNullable = val => {
+  return val !== undefined && val !== null;
+};
+var _default = exports.default = isNonNullable;

package/lib/_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/lib/blockHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
+import './style';
 import { LabelTooltipType } from '../_util';
-import './style.less';
 export declare type SizeType = 'small' | 'middle' | 'large';
 export interface IBlockHeaderProps {
     /** 标题 */

package/lib/blockHeader/index.js

@@ -9,13 +9,13 @@ var _reactIcons = require("@dtinsight/react-icons");
 var _antd = require("antd");
 var _configProvider = require("antd/es/config-provider");
 var _classnames = _interopRequireDefault(require("classnames"));
+require("./style");
 var _util = require("../_util");
-require("./style.less");
+var _collapsible = _interopRequireDefault(require("../collapsible"));
 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; }
-// import useLocale from '../locale/useLocale';
-
+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 isControlled(props) {
   return props.expand !== undefined;
 }
@@ -44,15 +44,13 @@ const BlockHeader = function (props) {
     titleStyle
   } = props;
   const [internalExpand, setInternalExpand] = (0, _react.useState)(defaultExpand);
-  // const locale = useLocale('BlockHeader');
-
   const currentExpand = isControlled(props) ? expand : internalExpand;
 
   // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
   const showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
   const tooltipProps = (0, _util.toTooltipProps)(tooltip);
   let bottomStyle;
-  if (spaceBottom) bottomStyle = showCollapse && currentExpand ? {
+  if (spaceBottom) bottomStyle = showCollapse && !currentExpand ? {
     marginBottom: 0
   } : {
     marginBottom: spaceBottom
@@ -83,7 +81,9 @@ const BlockHeader = function (props) {
     className: "title__text"
   }, title), tooltipProps?.title ? /*#__PURE__*/_react.default.createElement("div", {
     className: `title__tooltip`
-  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, tooltipProps, /*#__PURE__*/_react.default.createElement(_reactIcons.QuestionOutlined, null))) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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: `title__description`
   }, description) : null), addonAfter && /*#__PURE__*/_react.default.createElement("div", {
     className: `title__addon-after`
@@ -91,16 +91,18 @@ const BlockHeader = function (props) {
     className: `title__collapse`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "collapse__text"
-  }), /*#__PURE__*/_react.default.createElement(_reactIcons.UpOutlined, {
-    className: (0, _classnames.default)('collapse__icon', {
+  }, currentExpand ? '收起' : '展开'), /*#__PURE__*/_react.default.createElement(_reactIcons.UpOutlined, {
+    className: (0, _classnames.default)('collapse__icon', 'anticon', {
       'collapse__icon--up': currentExpand,
       'collapse__icon--down': !currentExpand
     })
-  }))), children && /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement(_collapsible.default, {
+    isOpen: !currentExpand
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefixCls}__content`, contentClassName, {
       [`${prefixCls}__content--active`]: currentExpand || !showCollapse
     }),
     style: contentStyle
-  }, children));
+  }, children)));
 };
 var _default = exports.default = BlockHeader;

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

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

package/lib/blockHeader/style/index.js

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

package/lib/blockHeader/{style.less → style/index.less}

@@ -1,141 +1,143 @@
-// @card_prefix: ~'dt-block-header';
-@card_prefix: ~'@{ant-prefix}-block-header';
-
-.@{card_prefix} {
-    &__title {
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        &--large {
-            .title__box {
-                line-height: 24px;
-                .title__text {
-                    font-size: 16px;
-                }
-            }
-        }
-        &--middle {
-            .title__box {
-                line-height: 22px;
-                .title__text {
-                    font-size: 14px;
-                }
-            }
-        }
-        &--small {
-            .title__box {
-                line-height: 20px;
-                .title__text {
-                    font-size: 12px;
-                }
-            }
-        }
-        &--background {
-            padding: 0 12px;
-            background-color: #f9f9fa;
-            &.@{card_prefix}__title {
-                &--middle,
-                &--large {
-                    height: 40px;
-                }
-                &--small {
-                    height: 32px;
-                }
-            }
-        }
-        &--pointer {
-            cursor: pointer;
-        }
-        .title {
-            &__box {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            &__addon-before {
-                margin-right: 8px;
-                color: @primary-color;
-                &--middle {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 20px;
-                }
-                &--small {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 16px;
-                }
-                &--large {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 20px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 24px;
-                }
-            }
-            &__tooltip {
-                display: flex;
-                margin-right: 4px;
-                font-size: 16px;
-                color: #b1b4c5;
-                cursor: pointer;
-            }
-            &__text {
-                color: @text-color;
-                font-weight: 500;
-                margin-right: 4px;
-            }
-            &__description {
-                display: flex;
-                align-items: center;
-                color: @label-color;
-                font-size: 12px;
-            }
-            &__addon-after {
-                color: @label-color;
-            }
-            &__collapse {
-                color: @label-color;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                user-select: none;
-                .collapse {
-                    &__text {
-                        font-size: 12px;
-                        margin: 0 4px;
-                    }
-                    &__icon {
-                        font-size: 16px;
-                        transition: transform 0.4s;
-                        &--down {
-                            transform: rotate(-180deg);
-                        }
-                        &--up {
-                            transform: rotate(0deg);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__content {
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        transition: opacity 0.5s ease, height 0.5s ease;
-        &--active {
-            opacity: 1;
-            padding: 16px 24px;
-            height: auto;
-        }
-    }
-}
+@import '../../style/themes/index.less';
+
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &--large {
+            .title__box {
+                line-height: 24px;
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
+            .title__box {
+                line-height: 22px;
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+        &--small {
+            .title__box {
+                line-height: 20px;
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+        &--pointer {
+            cursor: pointer;
+        }
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 16px;
+                color: #b1b4c5;
+                cursor: pointer;
+            }
+            &__text {
+                color: @text-color;
+                font-weight: 500;
+                margin-right: 4px;
+            }
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+            &__addon-after {
+                color: @label-color;
+            }
+            &__collapse {
+                color: @label-color;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
+                    }
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        padding: 16px 24px;
+
+        // opacity: 0;
+        // height: 0;
+        // overflow: hidden;
+        // transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            // opacity: 1;
+            // height: auto;
+        }
+    }
+}

package/lib/button/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonProps as AntdButtonProps } from 'antd';
+import { ButtonType as AntdButtonType } from 'antd/es/button';
+import './style';
+declare type ButtonType = AntdButtonType | 'secondary' | 'tertiary';
+export interface ButtonProps extends Omit<AntdButtonProps, 'type'> {
+    type?: ButtonType;
+}
+export default function Button({ className, icon, children, size, type, ...rest }: ButtonProps): React.JSX.Element;
+export {};

package/lib/button/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Button;
+var _react = _interopRequireDefault(require("react"));
+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); }
+function Button({
+  className,
+  icon,
+  children,
+  size = 'middle',
+  type,
+  ...rest
+}) {
+  const prefixCls = (0, _configProvider.globalConfig)().getPrefixCls('btn');
+  const typeClassName = type ? `${prefixCls}--${type}` : '';
+  return /*#__PURE__*/_react.default.createElement(_antd.Button, _extends({
+    className: (0, _classnames.default)(prefixCls, className, typeClassName),
+    size: size,
+    type: type
+  }, rest), icon && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}__icon ${prefixCls}__icon--${size}`
+  }, icon), children && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}__text ${prefixCls}__text--${size}`
+  }, children));
+}

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

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