@dtjoy/dt-design 1.1.1 → 1.1.5

package/es/_util/rcUtil.js

@@ -0,0 +1,58 @@
+/**
+ * Local shim for `@rc-component/util`.
+ * Maps all needed functions to `rc-util` subpaths (React 17 compatible).
+ */
+
+// hooks
+export { default as useEvent } from 'rc-util/lib/hooks/useEvent';
+export { default as useLayoutEffect } from 'rc-util/lib/hooks/useLayoutEffect';
+export { default as useMemo } from 'rc-util/lib/hooks/useMemo';
+export { default as useMergedState } from 'rc-util/lib/hooks/useMergedState';
+
+// useControlledState is the @rc-component/util name for useMergedState
+export { default as useControlledState } from 'rc-util/lib/hooks/useMergedState';
+
+// isEqual
+export { default as isEqual } from 'rc-util/lib/isEqual';
+// KeyCode
+export { default as KeyCode } from 'rc-util/lib/KeyCode';
+// omit
+export { default as omit } from 'rc-util/lib/omit';
+// pickAttrs
+export { default as pickAttrs } from 'rc-util/lib/pickAttrs';
+
+// raf
+export { default as raf } from 'rc-util/lib/raf';
+
+// get
+export { default as get } from 'rc-util/lib/utils/get';
+
+// toArray - implement locally (rc-util doesn't export this at top level)
+export function toArray(value) {
+  if (value === undefined || value === null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+
+// mergeProps - implement locally
+// Merges multiple props objects, later ones win for primitive values,
+// functions are chained
+export function mergeProps() {
+  var result = {};
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  for (var _i = 0, _args = args; _i < _args.length; _i++) {
+    var props = _args[_i];
+    if (!props) continue;
+    for (var _i2 = 0, _arr = Object.keys(props); _i2 < _arr.length; _i2++) {
+      var key = _arr[_i2];
+      var value = props[key];
+      if (value !== undefined) {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}

package/{esm → es}/_util/scrollTo.js

@@ -1,4 +1,4 @@
-import raf from '@rc-component/util/lib/raf';
+import raf from 'rc-util/lib/raf';
 import { easeInOutCubic } from "./easings";
 import getScroll, { isWindow } from "./getScroll";
 export default function scrollTo(y) {

package/es/_util/scrollbar.d.ts

@@ -0,0 +1 @@
+export declare function getScrollBarSize(): number;

package/es/_util/scrollbar.js

@@ -0,0 +1,32 @@
+var cache = null;
+export function getScrollBarSize() {
+  if (cache != null) return cache;
+  if (typeof document === 'undefined') {
+    cache = 0;
+    return cache;
+  }
+  var inner = document.createElement('div');
+  inner.style.width = '100%';
+  inner.style.height = '200px';
+  var outer = document.createElement('div');
+  var outerStyle = outer.style;
+  outerStyle.position = 'absolute';
+  outerStyle.top = '0';
+  outerStyle.left = '0';
+  outerStyle.pointerEvents = 'none';
+  outerStyle.visibility = 'hidden';
+  outerStyle.width = '200px';
+  outerStyle.height = '150px';
+  outerStyle.overflow = 'hidden';
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  var widthContained = inner.offsetWidth;
+  outer.style.overflow = 'scroll';
+  var widthScroll = inner.offsetWidth;
+  if (widthContained === widthScroll) {
+    widthScroll = outer.clientWidth;
+  }
+  document.body.removeChild(outer);
+  cache = widthContained - widthScroll;
+  return cache;
+}

package/{esm → es}/_util/type.d.ts

@@ -49,4 +49,5 @@ type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : n
 export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
 export type GetContextProps<T> = T extends React.Context<infer P> ? P : never;
 export type GetContextProp<T extends React.Context<any>, PropName extends keyof GetContextProps<T>> = NonNullable<GetContextProps<T>[PropName]>;
+export type SizeType = 'small' | 'middle' | 'large' | undefined;
 export {};

package/es/_util/validate.d.ts

@@ -0,0 +1,2 @@
+export declare function validateValue(val: any): boolean;
+export declare function validNumberValue(val: any): boolean;

package/es/_util/validate.js

@@ -0,0 +1,10 @@
+export function validateValue(val) {
+  if (val == null) return false;
+  if (val === '') return false;
+  return true;
+}
+export function validNumberValue(val) {
+  if (val == null) return false;
+  if (typeof val === 'number' && !Number.isNaN(val)) return true;
+  return false;
+}

package/{esm → es}/_util/warning.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { warning as rcWarning } from '@rc-component/util';
+import { resetWarned as rcResetWarned, warning as rcWarning } from 'rc-util/lib/warning';
 export function noop() {}
-var rcResetWarned = rcWarning.resetWarned;
 var deprecatedWarnList = null;
 export function resetWarned() {
   deprecatedWarnList = null;
@@ -21,10 +20,10 @@ if (process.env.NODE_ENV !== 'production') {
 var warning = _warning;
 export var WarningContext = /*#__PURE__*/React.createContext({});
 
-/**
- * This is a hook but we not named as `useWarning`
- * since this is only used in development.
- * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
+/**
+ * This is a hook but we not named as `useWarning`
+ * since this is only used in development.
+ * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
  */
 export var devUseWarning = process.env.NODE_ENV !== 'production' ? function (component) {
   var _React$useContext = React.useContext(WarningContext),

package/{lib/blockHeader → es/block-header}/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './style';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
 import type { LabelTooltipType } from '../_util';
 export interface IBlockHeaderProps {
     /** id */

package/{esm/blockHeader → es/block-header}/index.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useMemo, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
-import { globalConfig } from 'antd/es/config-provider';
+import { globalConfig } from 'antd/lib/config-provider';
 import clsx from 'clsx';
 import "./style";
 import { toTooltipProps } from "../_util";

package/{lib/blockHeader → es/block-header}/style/index.less

@@ -1,143 +1,167 @@
-@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: 14px;
-                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;
-        }
-    }
-}
+@import '../../style/themes/index.less';
+
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 4px;
+
+        &--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 {
+                display: flex;
+                flex: 1;
+                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;
+                color: #b1b4c5;
+                font-size: 14px;
+                cursor: pointer;
+            }
+
+            &__text {
+                margin-right: 4px;
+                color: @text-color;
+                font-weight: 500;
+            }
+
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+
+            &__addon-after {
+                color: @label-color;
+            }
+
+            &__collapse {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                cursor: pointer;
+                user-select: none;
+
+                .collapse {
+                    &__text {
+                        margin: 0 4px;
+                        font-size: 12px;
+                    }
+
+                    &__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/{esm → es}/button/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { ButtonProps as AntdButtonProps } from 'antd';
-import type { ButtonType as AntdButtonType } from 'antd/es/button';
+import type { ButtonType as AntdButtonType } from 'antd/lib/button';
 import './style';
 type ButtonType = AntdButtonType | 'secondary' | 'tertiary';
 export interface ButtonProps extends Omit<AntdButtonProps, 'type'> {
     type?: ButtonType;
 }
-declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
-export default _default;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export default Button;

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/{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);
+  }
+}
+
+