@dtjoy/dt-design 1.1.2 → 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/es/_util/scrollTo.d.ts

@@ -0,0 +1,10 @@
+interface ScrollToOptions {
+    /** Scroll container, default as window */
+    getContainer?: () => HTMLElement | Window | Document;
+    /** Scroll end callback */
+    callback?: () => void;
+    /** Animation duration, default as 450 */
+    duration?: number;
+}
+export default function scrollTo(y: number, options?: ScrollToOptions): () => void;
+export {};

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/es/_util/type.d.ts

@@ -0,0 +1,53 @@
+import type React from 'react';
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export type LiteralUnion<T, U extends Primitive = string> = T | (U & Record<never, never>);
+export type AnyObject = Record<PropertyKey, any>;
+export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
+/**
+ * Get component props
+ * @example
+ * ```ts
+ * import { Checkbox } from '@dtjoy/dt-design'
+ * import type { GetProps } from '@dtjoy/dt-design';
+ *
+ * type CheckboxGroupProps = GetProps<typeof Checkbox.Group>
+ * ```
+ */
+export type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
+/**
+ * Get component props by component name
+ * @example
+ * ```ts
+ * import { Select } from '@dtjoy/dt-design';
+ * import type { GetProp, SelectProps } from '@dtjoy/dt-design';
+ *
+ * type SelectOption1 = GetProp<SelectProps, 'options'>[number];
+ * // or
+ * type SelectOption2 = GetProp<typeof Select, 'options'>[number];
+ *
+ * const onChange: GetProp<typeof Select, 'onChange'> = (value, option) => {
+ *  // Do something
+ * };
+ * ```
+ */
+export type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = NonNullable<GetProps<T>[PropName]>;
+type ReactRefComponent<Props extends {
+    ref?: React.Ref<any> | string;
+}> = (props: Props) => React.ReactNode;
+type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+/**
+ * Get component ref
+ * @example
+ * ```ts
+ * import { Input } from '@dtjoy/dt-design';
+ * import type { GetRef } from '@dtjoy/dt-design';
+ *
+ * type InputRef = GetRef<typeof Input>;
+ * ```
+ */
+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/es/_util/warning.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export declare function noop(): void;
+export declare function resetWarned(): void;
+type Warning = (valid: boolean, component: string, message?: string) => void;
+declare const warning: Warning;
+type BaseTypeWarning = (valid: boolean, 
+/**
+ * - deprecated: Some API will be removed in future but still support now.
+ * - usage: Some API usage is not correct.
+ * - breaking: Breaking change like API is removed.
+ */
+type: 'deprecated' | 'usage' | 'breaking', message?: string) => void;
+type TypeWarning = BaseTypeWarning & {
+    deprecated: (valid: boolean, oldProp: string, newProp: string, message?: string) => void;
+};
+export interface WarningContextProps {
+    /**
+     * @descCN 设置警告等级，设置 `false` 时会将废弃相关信息聚合为单条信息。
+     * @descEN Set the warning level. When set to `false`, discard related information will be aggregated into a single message.
+     * @since 5.10.0
+     */
+    strict?: boolean;
+}
+export declare const WarningContext: React.Context<WarningContextProps>;
+/**
+ * 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 declare const devUseWarning: (component: string) => TypeWarning;
+export default warning;

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/es/block-header/index.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import './style';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { LabelTooltipType } from '../_util';
+export interface IBlockHeaderProps {
+    /** id */
+    id?: string;
+    /** 标题 */
+    title: React.ReactNode;
+    /** 标题前的图标，默认是一个色块 */
+    addonBefore?: React.ReactNode;
+    /** 标题后的提示说明文字 */
+    description?: React.ReactNode;
+    /** 默认展示为问号的tooltip */
+    tooltip?: LabelTooltipType;
+    /** 后缀自定义内容块 */
+    addonAfter?: React.ReactNode;
+    /**
+     * 小标题 font-size: 12px; line-height: 32px
+     * 中标题 font-size: 14px; line-height: 40px
+     * 大标题 font-size: 16px; line-height: 40px
+     * 默认 中标题
+     */
+    size?: SizeType;
+    /** 自定义 Bottom 值 */
+    spaceBottom?: {
+        expand?: number;
+        collapse?: number;
+    } | number;
+    /** 标题一行的样式类名 */
+    className?: string;
+    /** 标题的样式类名 */
+    style?: React.CSSProperties;
+    /** 展示内容(children)的样式类名 */
+    contentClassName?: string;
+    /** 展示内容(children)的样式 */
+    contentStyle?: React.CSSProperties;
+    /** 是否显示背景, 默认 true */
+    background?: boolean;
+    /** 当前展开状态 */
+    expand?: boolean;
+    /** 是否可展开, 默认 true */
+    expandable?: boolean;
+    /** 是否默认展开内容, 默认为 false */
+    defaultExpand?: boolean;
+    /** 展开/收起的内容 */
+    children?: React.ReactNode;
+    /** 展开/收起时的回调 */
+    onExpand?: (expand: boolean) => void;
+    /** 标题的样式 */
+    titleStyle?: React.CSSProperties;
+    /** 是否保留 DOM 结构, 默认 false */
+    keepDOM?: boolean;
+    /** 是否懒加载, 默认 false */
+    lazy?: boolean;
+}
+declare const BlockHeader: React.FC<IBlockHeaderProps>;
+export default BlockHeader;

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/es/block-header/style/index.d.ts

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

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/es/button/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ButtonProps as AntdButtonProps } from 'antd';
+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 Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export default Button;