@dtjoy/dt-design 1.1.0 → 1.1.2

package/README.md

@@ -1,141 +1,141 @@
-
-
-
-<div align="center">
-
-# dt-design
-
-English | [简体中文](./README-zh_CN.md)
-
-An enterprise-class React component library built on [Ant Design](https://github.com/ant-design/ant-design), optimized for back-office business scenarios with high reusability and extensibility.
-
-</div>
-
----
-
-## 📖 Introduction
-
-dt-design is a React component library internally developed by the **Digital Business Department**, extending Ant Design 5.x. It abstracts and沉淀（consolidates）common business patterns into **out-of-the-box components**, boosting development velocity while reducing redundant code.
-
-In addition, we provide several framework-agnostic utilities written in vanilla JavaScript:
-
-* `ContextMenu` – right-click context menu
-* `KeyEventListener` – global keyboard event binder
-
----
-
-## 🎯 When to Use
-
-* ✅ Ant Design's basic components are insufficient for complex business requirements
-* ✅ Multiple projects share similar modules and need a unified implementation
-* ✅ You want to extract general business logic to avoid duplicate development
-* ✅ You need consistent UI specification and interaction behavior across products
-
----
-
-## 📦 Installation
-
-```bash
-# npm
-npm install dt-design
-
-# yarn
-yarn add dt-design
-
-# pnpm
-pnpm add dt-design
-```
-
----
-
-## 🚀 Quick Start
-
-```tsx
-import React from 'react';
-import { BlockHeader } from '@dtjoy/dt-design';
-
-const App = () => <BlockHeader title="Category Title" background />;
-```
-
----
-
-## 📌 Tree-Shaking & On-Demand
-
-ES modules are fully supported; import only what you need and the bundler will drop the rest automatically:
-
-```ts
-import { BlockHeader, CustomTable } from '@dtjoy/dt-design';
-```
-
----
-
-## 🧩 TypeScript First
-
-Written entirely in TypeScript with complete type definitions for better IntelliSense and compile-time safety.
-
----
-
-## 🛠 Local Development
-
-```bash
-git clone https://github.com/ZhaoFxxkSky/dt-design
-cd dt-design
-pnpm install
-pnpm dev
-```
-
-Then open [http://127.0.0.1:8000](http://127.0.0.1:8000).  
-We use [dumi](https://d.umijs.org/) for docs & component management.
-
----
-
-## 📦 Build & Release
-
-### Build the library
-
-```bash
-pnpm build
-```
-
-### Bump version (internal npm registry)
-
-```bash
-pnpm release -- -r x.x.x
-npm publish --registry <internal-npm-registry>
-```
-
-### Deploy documentation site (optional)
-
-```bash
-pnpm deploy
-```
-
----
-
-## 🤝 Contributing
-
-We welcome Issues and Pull Requests. Workflow:
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/xxx`)
-3. Commit your changes (`git commit -m 'feat: add xxx'`)
-4. Push to the branch (`git push origin feature/xxx`)
-5. Open a Pull Request
-
-Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for coding standards and CI rules.
-
----
-
-## 👨‍💻 Core Team
-
-Maintained by the **Digital Business Department**. Thanks to all contributors!
-
----
-
-## 📄 License
-
-Internal use only. Redistribution or publication without explicit permission is strictly prohibited.
-
----
-
-Need help? Contact us at `wx-zhaog@dtjoy.com`
+
+
+
+<div align="center">
+
+# dt-design
+
+English | [简体中文](./README-zh_CN.md)
+
+An enterprise-class React component library built on [Ant Design](https://github.com/ant-design/ant-design), optimized for back-office business scenarios with high reusability and extensibility.
+
+</div>
+
+---
+
+## 📖 Introduction
+
+dt-design is a React component library internally developed by the **Digital Business Department**, extending Ant Design 5.x. It abstracts and沉淀（consolidates）common business patterns into **out-of-the-box components**, boosting development velocity while reducing redundant code.
+
+In addition, we provide several framework-agnostic utilities written in vanilla JavaScript:
+
+* `ContextMenu` – right-click context menu
+* `KeyEventListener` – global keyboard event binder
+
+---
+
+## 🎯 When to Use
+
+* ✅ Ant Design's basic components are insufficient for complex business requirements
+* ✅ Multiple projects share similar modules and need a unified implementation
+* ✅ You want to extract general business logic to avoid duplicate development
+* ✅ You need consistent UI specification and interaction behavior across products
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install dt-design
+
+# yarn
+yarn add dt-design
+
+# pnpm
+pnpm add dt-design
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import React from 'react';
+import { BlockHeader } from '@dtjoy/dt-design';
+
+const App = () => <BlockHeader title="Category Title" background />;
+```
+
+---
+
+## 📌 Tree-Shaking & On-Demand
+
+ES modules are fully supported; import only what you need and the bundler will drop the rest automatically:
+
+```ts
+import { BlockHeader, CustomTable } from '@dtjoy/dt-design';
+```
+
+---
+
+## 🧩 TypeScript First
+
+Written entirely in TypeScript with complete type definitions for better IntelliSense and compile-time safety.
+
+---
+
+## 🛠 Local Development
+
+```bash
+git clone https://github.com/ZhaoFxxkSky/dt-design
+cd dt-design
+pnpm install
+pnpm dev
+```
+
+Then open [http://127.0.0.1:8000](http://127.0.0.1:8000).  
+We use [dumi](https://d.umijs.org/) for docs & component management.
+
+---
+
+## 📦 Build & Release
+
+### Build the library
+
+```bash
+pnpm build
+```
+
+### Bump version (internal npm registry)
+
+```bash
+pnpm release -- -r x.x.x
+npm publish --registry <internal-npm-registry>
+```
+
+### Deploy documentation site (optional)
+
+```bash
+pnpm deploy
+```
+
+---
+
+## 🤝 Contributing
+
+We welcome Issues and Pull Requests. Workflow:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/xxx`)
+3. Commit your changes (`git commit -m 'feat: add xxx'`)
+4. Push to the branch (`git push origin feature/xxx`)
+5. Open a Pull Request
+
+Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for coding standards and CI rules.
+
+---
+
+## 👨‍💻 Core Team
+
+Maintained by the **Digital Business Department**. Thanks to all contributors!
+
+---
+
+## 📄 License
+
+Internal use only. Redistribution or publication without explicit permission is strictly prohibited.
+
+---
+
+Need help? Contact us at `wx-zhaog@dtjoy.com`

package/esm/blockHeader/index.js

@@ -12,7 +12,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // 优化后的代码示例
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
@@ -34,7 +34,10 @@ var BlockHeader = function BlockHeader(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
     _props$spaceBottom = props.spaceBottom,
-    spaceBottom = _props$spaceBottom === void 0 ? 16 : _props$spaceBottom,
+    spaceBottom = _props$spaceBottom === void 0 ? {
+      expand: 16,
+      collapse: 16
+    } : _props$spaceBottom,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$contentClassNa = props.contentClassName,
@@ -70,11 +73,18 @@ var BlockHeader = function BlockHeader(props) {
   var currentExpand = isControlled(props) ? expand !== null && expand !== void 0 ? expand : false : internalExpand;
   var showCollapse = expandable && !!children;
   var tooltipProps = toTooltipProps(tooltip);
-  var bottomStyle = spaceBottom ? showCollapse && !currentExpand ? {
-    marginBottom: 0
-  } : {
-    marginBottom: spaceBottom
-  } : {};
+  var bottomStyle = useMemo(function () {
+    var _spaceBottom$key;
+    if (typeof spaceBottom === 'number') {
+      return {
+        marginBottom: spaceBottom
+      };
+    }
+    var key = currentExpand ? 'expand' : 'collapse';
+    return {
+      marginBottom: (_spaceBottom$key = spaceBottom[key]) !== null && _spaceBottom$key !== void 0 ? _spaceBottom$key : 0
+    };
+  }, [spaceBottom, currentExpand]);
   var handleExpand = function handleExpand() {
     var newExpandState = !currentExpand;
     !isControlled(props) && setInternalExpand(newExpandState);

package/esm/index.js

@@ -11,4 +11,12 @@ export { default as Splitter } from "./splitter";
 export * from "./splitter";
 export { default as StatusTag } from "./statusTag";
 export * from "./statusTag";
-export { default as Table } from "./table";
+// export { default as Table } from './table';
+// export type {
+//   ColumnGroupType as TableColumnGroupType,
+//   ColumnProps as TableColumnProps,
+//   ColumnsType as TableColumnsType,
+//   ColumnType as TableColumnType,
+//   TablePaginationConfig,
+//   TableProps,
+// } from './table';

package/lib/blockHeader/index.js

@@ -28,7 +28,10 @@ const BlockHeader = props => {
     description = '',
     tooltip,
     size = 'middle',
-    spaceBottom = 16,
+    spaceBottom = {
+      expand: 16,
+      collapse: 16
+    },
     className = '',
     contentClassName = '',
     style = {},
@@ -51,11 +54,17 @@ const BlockHeader = props => {
   const currentExpand = isControlled(props) ? expand ?? false : internalExpand;
   const showCollapse = expandable && !!children;
   const tooltipProps = (0, _util.toTooltipProps)(tooltip);
-  const bottomStyle = spaceBottom ? showCollapse && !currentExpand ? {
-    marginBottom: 0
-  } : {
-    marginBottom: spaceBottom
-  } : {};
+  const bottomStyle = (0, _react.useMemo)(() => {
+    if (typeof spaceBottom === 'number') {
+      return {
+        marginBottom: spaceBottom
+      };
+    }
+    const key = currentExpand ? 'expand' : 'collapse';
+    return {
+      marginBottom: spaceBottom[key] ?? 0
+    };
+  }, [spaceBottom, currentExpand]);
   const handleExpand = () => {
     const newExpandState = !currentExpand;
     !isControlled(props) && setInternalExpand(newExpandState);

package/lib/index.js

@@ -13,8 +13,7 @@ var _exportNames = {
   OverflowList: true,
   Resize: true,
   Splitter: true,
-  StatusTag: true,
-  Table: true
+  StatusTag: true
 };
 Object.defineProperty(exports, "BlockHeader", {
   enumerable: true,
@@ -76,12 +75,6 @@ Object.defineProperty(exports, "StatusTag", {
     return _statusTag.default;
   }
 });
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _table.default;
-  }
-});
 var _blockHeader = _interopRequireDefault(require("./blockHeader"));
 var _button = _interopRequireDefault(require("./button"));
 var _collapsible = _interopRequireDefault(require("./collapsible"));
@@ -125,7 +118,6 @@ Object.keys(_statusTag).forEach(function (key) {
     }
   });
 });
-var _table = _interopRequireDefault(require("./table"));
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtjoy/dt-design",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "react-component",
   "author": {
     "name": "夕颜",
@@ -68,8 +68,6 @@
   "dependencies": {
     "@ant-design/icons": "^4.8.3",
     "@dtinsight/dt-utils": "^1.3.1",
-    "@rc-component/table": "^1.9.1",
-    "@rc-component/util": "^1.7.0",
     "clsx": "^2.1.1",
     "immer": "~10.1.1",
     "lodash-es": "^4.17.21",
@@ -152,4 +150,4 @@
       "prettier --ignore-unknown --write"
     ]
   }
-}
+}

package/esm/_util/easings.d.ts

@@ -1 +0,0 @@
-export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;

package/esm/_util/extendsObject.d.ts

@@ -1,4 +0,0 @@
-declare function mergeProps<A, B>(a: A, b: B): B & A;
-declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
-declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
-export default mergeProps;

package/esm/_util/gapSize.d.ts

@@ -1,3 +0,0 @@
-import type { 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/getScroll.d.ts

@@ -1,3 +0,0 @@
-export declare function isWindow(obj: any): obj is Window;
-declare const getScroll: (target: HTMLElement | Window | Document | null) => number;
-export default getScroll;

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

@@ -1,4 +0,0 @@
-export * from './useForceUpdate';
-export * from './useOrientation';
-export * from './useProxyImperativeHandle';
-export * from './useSyncState';

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useForceUpdate: () => [any, React.DispatchWithoutAction];

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

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

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

@@ -1,4 +0,0 @@
-import type { Ref } from 'react';
-export declare const useProxyImperativeHandle: <NativeELementType extends HTMLElement, ReturnRefType extends {
-    nativeElement: NativeELementType;
-}>(ref: Ref<any> | undefined, init: () => ReturnRefType) => void;

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

@@ -1,3 +0,0 @@
-type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
-export declare const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T>;
-export {};

package/esm/_util/index.d.ts

@@ -1,3 +0,0 @@
-import type { TooltipProps } from 'antd';
-export type LabelTooltipType = TooltipProps | TooltipProps['title'];
-export declare function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null;

package/esm/_util/isNonNullable.d.ts

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

package/esm/_util/scrollTo.d.ts

@@ -1,10 +0,0 @@
-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/_util/type.d.ts

@@ -1,52 +0,0 @@
-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 {};

package/esm/_util/warning.d.ts

@@ -1,31 +0,0 @@
-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/blockHeader/index.d.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import './style';
-import type { LabelTooltipType } from '../_util';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-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?: 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/style/index.d.ts

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

package/esm/button/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { ButtonProps as AntdButtonProps } from 'antd';
-import type { ButtonType as AntdButtonType } from 'antd/es/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;

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

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