@tiny-codes/react-easy 1.7.6 → 1.7.7

package/lib/hooks/style/useSplitter.js

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/style/useSplitter.ts
+var useSplitter_exports = {};
+__export(useSplitter_exports, {
+  default: () => useSplitter_default
+});
+module.exports = __toCommonJS(useSplitter_exports);
+var import_internal = require("antd/es/theme/internal");
+var genStyle = (token) => {
+  const { componentCls, EasySplitter: { splitterDefaultWidth = 1 } = {} } = token;
+  return {
+    [componentCls]: {
+      flex: "none",
+      userSelect: "none",
+      [`&${componentCls}-vertical`]: {
+        cursor: "col-resize",
+        padding: "0 4px",
+        height: "100%",
+        [`${componentCls}-handle`]: {
+          width: `var(--splitter-width, ${splitterDefaultWidth}px)`,
+          height: "100%"
+        }
+      },
+      [`&${componentCls}-horizontal`]: {
+        cursor: "row-resize",
+        padding: "4px 0",
+        width: "100%",
+        [`${componentCls}-handle`]: {
+          width: "100%",
+          height: `var(--splitter-width, ${splitterDefaultWidth}px)`
+        }
+      },
+      "&:hover": {
+        [`${componentCls}-handle`]: {
+          background: token.colorPrimaryActive
+        }
+      },
+      [`&${componentCls}-dragging`]: {
+        [`${componentCls}-handle`]: {
+          background: token.colorPrimaryHover
+        }
+      },
+      [`&${componentCls}-hover`]: {
+        [`${componentCls}-handle`]: {
+          background: token.colorPrimaryActive
+        }
+      },
+      [`${componentCls}-handle`]: {
+        background: token.colorBorder
+      }
+    }
+  };
+};
+var useSplitter_default = (0, import_internal.genStyleHooks)("EasySplitter", genStyle);
+//# sourceMappingURL=useSplitter.js.map

package/lib/hooks/style/useSplitter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/style/useSplitter.ts"],
+  "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype UseSplitterToken = FullToken<\n  {\n    EasySplitter?: {\n      splitterDefaultWidth?: number;\n    };\n  },\n  AliasToken,\n  'EasySplitter'\n>;\n\nconst genStyle: GenerateStyle<UseSplitterToken> = (token): CSSObject => {\n  const { componentCls, EasySplitter: { splitterDefaultWidth = 1 } = {} } = token;\n  return {\n    [componentCls]: {\n      flex: 'none',\n      userSelect: 'none',\n      [`&${componentCls}-vertical`]: {\n        cursor: 'col-resize',\n        padding: '0 4px',\n        height: '100%',\n        [`${componentCls}-handle`]: {\n          width: `var(--splitter-width, ${splitterDefaultWidth}px)`,\n          height: '100%',\n        },\n      },\n      [`&${componentCls}-horizontal`]: {\n        cursor: 'row-resize',\n        padding: '4px 0',\n        width: '100%',\n        [`${componentCls}-handle`]: {\n          width: '100%',\n          height: `var(--splitter-width, ${splitterDefaultWidth}px)`,\n        },\n      },\n      '&:hover': {\n        [`${componentCls}-handle`]: {\n          background: token.colorPrimaryActive,\n        },\n      },\n      [`&${componentCls}-dragging`]: {\n        [`${componentCls}-handle`]: {\n          background: token.colorPrimaryHover,\n        },\n      },\n      [`&${componentCls}-hover`]: {\n        [`${componentCls}-handle`]: {\n          background: token.colorPrimaryActive,\n        },\n      },\n      [`${componentCls}-handle`]: {\n        background: token.colorBorder,\n      },\n    },\n  };\n};\n\nexport default genStyleHooks('EasySplitter' as never, genStyle);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAe9B,IAAM,WAA4C,CAAC,UAAqB;AACtE,QAAM,EAAE,cAAc,cAAc,EAAE,uBAAuB,EAAE,IAAI,CAAC,EAAE,IAAI;AAC1E,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,CAAC,IAAI,uBAAuB,GAAG;AAAA,QAC7B,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,CAAC,GAAG,qBAAqB,GAAG;AAAA,UAC1B,OAAO,yBAAyB;AAAA,UAChC,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MACA,CAAC,IAAI,yBAAyB,GAAG;AAAA,QAC/B,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,QACP,CAAC,GAAG,qBAAqB,GAAG;AAAA,UAC1B,OAAO;AAAA,UACP,QAAQ,yBAAyB;AAAA,QACnC;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT,CAAC,GAAG,qBAAqB,GAAG;AAAA,UAC1B,YAAY,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,IAAI,uBAAuB,GAAG;AAAA,QAC7B,CAAC,GAAG,qBAAqB,GAAG;AAAA,UAC1B,YAAY,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,IAAI,oBAAoB,GAAG;AAAA,QAC1B,CAAC,GAAG,qBAAqB,GAAG;AAAA,UAC1B,YAAY,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,GAAG,qBAAqB,GAAG;AAAA,QAC1B,YAAY,MAAM;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,0BAAQ,+BAAc,gBAAyB,QAAQ;",
+  "names": []
+}

package/lib/hooks/useSplitter.d.ts

@@ -2,40 +2,41 @@ import { type CSSProperties } from 'react';
 export interface UseSplitterProps {
     /**
      * - **EN:** Split direction. vertical = left/right; horizontal = top/bottom.
-     * - **ZH:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。
+     * - **CN:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。
      *
      * @default 'vertical'
      */
     direction?: 'vertical' | 'horizontal';
     /**
-     * - **EN:** The container element reference.
-     * - **ZH:** 容器元素的引用。
+     * - **EN:** Parent container element. If not specified, the parent container of the `dom` element
+     *   will be used automatically.
+     * - **CN:** 父容器元素，如果不指定，则自动使用 `dom` 元素的父容器
      */
-    container: HTMLDivElement | null | undefined;
+    container?: HTMLDivElement | null | undefined;
     /**
      * - **EN:** Default ratio of the left/top pane (0~1).
-     * - **ZH:** 左侧/顶部面板的默认比例 (0~1)。
+     * - **CN:** 左侧/顶部面板的默认比例 (0~1)。
      *
      * @default 0.32
      */
     defaultRatio?: number;
     /**
      * - **EN:** Minimum ratio of the left/top pane (0~1).
-     * - **ZH:** 左侧/顶部面板的最小比例 (0~1)。
+     * - **CN:** 左侧/顶部面板的最小比例 (0~1)。
      *
      * @default 0.15
      */
     minRatio?: number;
     /**
      * - **EN:** Maximum ratio of the left/top pane (0~1).
-     * - **ZH:** 左侧/顶部面板的最大比例 (0~1)。
+     * - **CN:** 左侧/顶部面板的最大比例 (0~1)。
      *
      * @default 0.85
      */
     maxRatio?: number;
     /**
      * - **EN:** Width of the splitter in pixels.
-     * - **ZH:** 分割条的宽度，单位为像素。
+     * - **CN:** 分割条的宽度，单位为像素。
      *
      * @default 2
      */
@@ -44,9 +45,51 @@ export interface UseSplitterProps {
     className?: string;
     /** Additional style for the splitter element */
     style?: CSSProperties;
+    /**
+     * - **EN:** Custom prefix for the component's CSS class.
+     * - **CN:** 组件的自定义 CSS 类前缀。
+     */
+    prefixCls?: string;
+    /**
+     * - **EN:** Semantic class names
+     * - **CN:** 语义化类名
+     */
+    classNames?: {
+        /**
+         * - **EN:** Class name applied when the splitter is hovered.
+         * - **CN:** 分割条悬停时应用的类名。
+         */
+        hover?: string;
+        /**
+         * - **EN:** Class name applied when the splitter is being dragged.
+         * - **CN:** 分割条拖动时应用的类名。
+         */
+        dragging?: string;
+        /**
+         * - **EN:** Class name applied to the splitter handle.
+         * - **CN:** 分割条手柄的类名。
+         */
+        handle?: string;
+    };
+    /**
+     * - **EN:** Semantic styles
+     * - **CN:** 语义化样式
+     */
+    styles?: {
+        /**
+         * - **EN:** Custom styles for the splitter handle.
+         * - **CN:** 分割条手柄的自定义样式。
+         */
+        handle?: CSSProperties;
+    };
+    /**
+     * - **EN:** Callback function when the splitter ratio changes.
+     * - **CN:** 分割比例变化时的回调函数。
+     */
+    onChange?: (ratio?: number) => void;
 }
 declare const useSplitter: (props: UseSplitterProps) => {
-    dom: import("react/jsx-runtime").JSX.Element;
+    dom: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     percent: number | undefined;
     width: number | undefined;
     dragging: boolean;

package/lib/hooks/useSplitter.js

@@ -33,23 +33,34 @@ __export(useSplitter_exports, {
 });
 module.exports = __toCommonJS(useSplitter_exports);
 var import_react = require("react");
-var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_components = require("../components");
+var import_useSplitter = __toESM(require("./style/useSplitter"));
 var import_useRefValue = __toESM(require("./useRefValue"));
 var useSplitter = (props) => {
   const {
-    container,
+    container: containerFromProps,
     defaultRatio,
     minRatio = 0.15,
     maxRatio = 1 - minRatio,
     direction = "vertical",
-    splitterWidth = 2,
+    splitterWidth = 1,
     className,
-    style
+    classNames,
+    styles,
+    prefixCls: prefixClsInProps,
+    style,
+    onChange
   } = props || {};
-  const { token } = import_antd.theme.useToken();
+  const { getPrefixCls } = (0, import_react.useContext)(import_components.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("splitter", prefixClsInProps);
+  const [wrapCSSVar, hashId, cssVarCls] = (0, import_useSplitter.default)(prefixCls);
   const directionRef = (0, import_useRefValue.default)(direction);
+  const [splitterRef, setSplitterRef] = (0, import_react.useState)(null);
+  const [container, setContainer] = (0, import_react.useState)(containerFromProps);
   const [percent, setPercent] = (0, import_react.useState)(defaultRatio);
   const percentRef = (0, import_useRefValue.default)(percent);
+  const onChangeRef = (0, import_useRefValue.default)(onChange);
   const [width, setWidth] = (0, import_react.useState)(
     container && defaultRatio ? ((container == null ? void 0 : container.clientWidth) || 0) * defaultRatio : void 0
   );
@@ -61,6 +72,7 @@ var useSplitter = (props) => {
     if (!dragging)
       return;
     const onMove = (e) => {
+      var _a, _b;
       const el = container;
       if (!el)
         return;
@@ -70,11 +82,13 @@ var useSplitter = (props) => {
         const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, x / rect.width));
         setPercent(ratio);
         setWidth(x);
+        (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, ratio);
       } else {
         const y = e.clientY - rect.top;
         const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, y / rect.height));
         setPercent(ratio);
         setWidth(y);
+        (_b = onChangeRef.current) == null ? void 0 : _b.call(onChangeRef, ratio);
       }
       e.preventDefault();
     };
@@ -87,39 +101,55 @@ var useSplitter = (props) => {
     };
   }, [container, dragging, direction, minRatioRef, maxRatioRef]);
   (0, import_react.useEffect)(() => {
+    const containerDom = containerFromProps ?? (splitterRef == null ? void 0 : splitterRef.parentElement) ?? void 0;
+    setContainer(containerDom);
+  }, [containerFromProps, splitterRef]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
     if (defaultRatio && container && percentRef.current == null) {
       const rect = container.getBoundingClientRect();
       setPercent(defaultRatio);
       if (directionRef.current === "vertical") {
         setWidth(rect.width * defaultRatio);
+        (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, defaultRatio);
       } else {
         setWidth(rect.height * defaultRatio);
+        (_b = onChangeRef.current) == null ? void 0 : _b.call(onChangeRef, defaultRatio);
       }
     }
   }, [defaultRatio, container]);
   const vertical = direction === "vertical";
-  const dom = /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className,
-      style: {
-        flex: "none",
-        width: vertical ? splitterWidth : "100%",
-        height: vertical ? "auto" : splitterWidth,
-        cursor: vertical ? "col-resize" : "row-resize",
-        background: dragging ? token.colorPrimaryHover : isOver ? token.colorPrimaryActive : token.colorBorder,
-        margin: vertical ? "0 4px" : "4px 0",
-        borderRadius: 4,
-        userSelect: "none",
-        ...style
+  const dom = wrapCSSVar(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: setSplitterRef,
+        className: (0, import_classnames.default)(
+          hashId,
+          cssVarCls,
+          prefixCls,
+          className,
+          isOver ? (0, import_classnames.default)(`${prefixCls}-hover`, classNames == null ? void 0 : classNames.hover) : void 0,
+          dragging ? (0, import_classnames.default)(`${prefixCls}-dragging`, classNames == null ? void 0 : classNames.dragging) : void 0,
+          {
+            [`${prefixCls}-vertical`]: vertical,
+            [`${prefixCls}-horizontal`]: !vertical
+          }
+        ),
+        style: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          [`--splitter-width`]: splitterWidth ? `${splitterWidth}px` : void 0,
+          ...style
+        },
+        onMouseDown: () => setDragging(true),
+        onMouseEnter: () => setIsOver(true),
+        onMouseLeave: () => setIsOver(false),
+        role: "separator",
+        "aria-orientation": vertical ? "vertical" : "horizontal",
+        "aria-label": "Resize"
       },
-      onMouseDown: () => setDragging(true),
-      onMouseEnter: () => setIsOver(true),
-      onMouseLeave: () => setIsOver(false),
-      role: "separator",
-      "aria-orientation": vertical ? "vertical" : "horizontal",
-      "aria-label": "Resize"
-    }
+      /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${prefixCls}-handle`, classNames == null ? void 0 : classNames.handle), style: styles == null ? void 0 : styles.handle })
+    )
   );
   return {
     dom,

package/lib/hooks/useSplitter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/useSplitter.tsx"],
-  "sourcesContent": ["import { type CSSProperties, useEffect, useState } from 'react';\nimport { theme } from 'antd';\nimport useRefValue from './useRefValue';\n\nexport interface UseSplitterProps {\n  /**\n   * - **EN:** Split direction. vertical = left/right; horizontal = top/bottom.\n   * - **ZH:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。\n   *\n   * @default 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n  /**\n   * - **EN:** The container element reference.\n   * - **ZH:** 容器元素的引用。\n   */\n  container: HTMLDivElement | null | undefined;\n  /**\n   * - **EN:** Default ratio of the left/top pane (0~1).\n   * - **ZH:** 左侧/顶部面板的默认比例 (0~1)。\n   *\n   * @default 0.32\n   */\n  defaultRatio?: number;\n  /**\n   * - **EN:** Minimum ratio of the left/top pane (0~1).\n   * - **ZH:** 左侧/顶部面板的最小比例 (0~1)。\n   *\n   * @default 0.15\n   */\n  minRatio?: number;\n  /**\n   * - **EN:** Maximum ratio of the left/top pane (0~1).\n   * - **ZH:** 左侧/顶部面板的最大比例 (0~1)。\n   *\n   * @default 0.85\n   */\n  maxRatio?: number;\n  /**\n   * - **EN:** Width of the splitter in pixels.\n   * - **ZH:** 分割条的宽度，单位为像素。\n   *\n   * @default 2\n   */\n  splitterWidth?: number;\n  /** Additional class name for the splitter element */\n  className?: string;\n  /** Additional style for the splitter element */\n  style?: CSSProperties;\n}\n\nconst useSplitter = (props: UseSplitterProps) => {\n  const {\n    container,\n    defaultRatio,\n    minRatio = 0.15,\n    maxRatio = 1 - minRatio,\n    direction = 'vertical',\n    splitterWidth = 2,\n    className,\n    style,\n  } = props || {};\n  const { token } = theme.useToken();\n  const directionRef = useRefValue(direction);\n  const [percent, setPercent] = useState(defaultRatio);\n  const percentRef = useRefValue(percent);\n  const [width, setWidth] = useState(\n    container && defaultRatio ? (container?.clientWidth || 0) * defaultRatio : undefined\n  );\n  const [dragging, setDragging] = useState(false);\n  const minRatioRef = useRefValue(minRatio);\n  const maxRatioRef = useRefValue(maxRatio);\n  const [isOver, setIsOver] = useState(false);\n\n  useEffect(() => {\n    if (!dragging) return;\n    const onMove = (e: MouseEvent) => {\n      const el = container;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      if (direction === 'vertical') {\n        const x = e.clientX - rect.left;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, x / rect.width));\n        setPercent(ratio);\n        setWidth(x);\n      } else {\n        const y = e.clientY - rect.top;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, y / rect.height));\n        setPercent(ratio);\n        setWidth(y);\n      }\n      // prevent text selection while dragging\n      e.preventDefault();\n    };\n    const onUp = () => setDragging(false);\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp, { once: true });\n\n    return () => {\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n    };\n  }, [container, dragging, direction, minRatioRef, maxRatioRef]);\n\n  // Initialize percent and width on mount\n  useEffect(() => {\n    if (defaultRatio && container && percentRef.current == null) {\n      const rect = container.getBoundingClientRect();\n      setPercent(defaultRatio);\n      if (directionRef.current === 'vertical') {\n        setWidth(rect.width * defaultRatio);\n      } else {\n        setWidth(rect.height * defaultRatio);\n      }\n    }\n  }, [defaultRatio, container]);\n\n  const vertical = direction === 'vertical';\n  const dom = (\n    <div\n      className={className}\n      style={{\n        flex: 'none',\n        width: vertical ? splitterWidth : '100%',\n        height: vertical ? 'auto' : splitterWidth,\n        cursor: vertical ? 'col-resize' : 'row-resize',\n        background: dragging ? token.colorPrimaryHover : isOver ? token.colorPrimaryActive : token.colorBorder,\n        margin: vertical ? '0 4px' : '4px 0',\n        borderRadius: 4,\n        userSelect: 'none',\n        ...style,\n      }}\n      onMouseDown={() => setDragging(true)}\n      onMouseEnter={() => setIsOver(true)}\n      onMouseLeave={() => setIsOver(false)}\n      role=\"separator\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-label=\"Resize\"\n    />\n  );\n\n  return {\n    dom,\n    percent,\n    width,\n    dragging,\n    direction,\n  };\n};\n\nexport default useSplitter;\n"],
-  "mappings": "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",
-  "names": ["useRefValue"]
+  "sourcesContent": ["import { type CSSProperties, useContext, useEffect, useState } from 'react';\nimport names from 'classnames';\nimport { ConfigProvider } from '../components';\nimport useStyle from './style/useSplitter';\nimport useRefValue from './useRefValue';\n\nexport interface UseSplitterProps {\n  /**\n   * - **EN:** Split direction. vertical = left/right; horizontal = top/bottom.\n   * - **CN:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。\n   *\n   * @default 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n  /**\n   * - **EN:** Parent container element. If not specified, the parent container of the `dom` element\n   *   will be used automatically.\n   * - **CN:** 父容器元素，如果不指定，则自动使用 `dom` 元素的父容器\n   */\n  container?: HTMLDivElement | null | undefined;\n  /**\n   * - **EN:** Default ratio of the left/top pane (0~1).\n   * - **CN:** 左侧/顶部面板的默认比例 (0~1)。\n   *\n   * @default 0.32\n   */\n  defaultRatio?: number;\n  /**\n   * - **EN:** Minimum ratio of the left/top pane (0~1).\n   * - **CN:** 左侧/顶部面板的最小比例 (0~1)。\n   *\n   * @default 0.15\n   */\n  minRatio?: number;\n  /**\n   * - **EN:** Maximum ratio of the left/top pane (0~1).\n   * - **CN:** 左侧/顶部面板的最大比例 (0~1)。\n   *\n   * @default 0.85\n   */\n  maxRatio?: number;\n  /**\n   * - **EN:** Width of the splitter in pixels.\n   * - **CN:** 分割条的宽度，单位为像素。\n   *\n   * @default 2\n   */\n  splitterWidth?: number;\n  /** Additional class name for the splitter element */\n  className?: string;\n  /** Additional style for the splitter element */\n  style?: CSSProperties;\n  /**\n   * - **EN:** Custom prefix for the component's CSS class.\n   * - **CN:** 组件的自定义 CSS 类前缀。\n   */\n  prefixCls?: string;\n  /**\n   * - **EN:** Semantic class names\n   * - **CN:** 语义化类名\n   */\n  classNames?: {\n    /**\n     * - **EN:** Class name applied when the splitter is hovered.\n     * - **CN:** 分割条悬停时应用的类名。\n     */\n    hover?: string;\n    /**\n     * - **EN:** Class name applied when the splitter is being dragged.\n     * - **CN:** 分割条拖动时应用的类名。\n     */\n    dragging?: string;\n    /**\n     * - **EN:** Class name applied to the splitter handle.\n     * - **CN:** 分割条手柄的类名。\n     */\n    handle?: string;\n  };\n  /**\n   * - **EN:** Semantic styles\n   * - **CN:** 语义化样式\n   */\n  styles?: {\n    /**\n     * - **EN:** Custom styles for the splitter handle.\n     * - **CN:** 分割条手柄的自定义样式。\n     */\n    handle?: CSSProperties;\n  };\n  /**\n   * - **EN:** Callback function when the splitter ratio changes.\n   * - **CN:** 分割比例变化时的回调函数。\n   */\n  onChange?: (ratio?: number) => void;\n}\n\nconst useSplitter = (props: UseSplitterProps) => {\n  const {\n    container: containerFromProps,\n    defaultRatio,\n    minRatio = 0.15,\n    maxRatio = 1 - minRatio,\n    direction = 'vertical',\n    splitterWidth = 1,\n    className,\n    classNames,\n    styles,\n    prefixCls: prefixClsInProps,\n    style,\n    onChange,\n  } = props || {};\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('splitter', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n  const directionRef = useRefValue(direction);\n  const [splitterRef, setSplitterRef] = useState<HTMLDivElement | null>(null);\n  const [container, setContainer] = useState(containerFromProps);\n  const [percent, setPercent] = useState(defaultRatio);\n  const percentRef = useRefValue(percent);\n  const onChangeRef = useRefValue(onChange);\n  const [width, setWidth] = useState(\n    container && defaultRatio ? (container?.clientWidth || 0) * defaultRatio : undefined\n  );\n  const [dragging, setDragging] = useState(false);\n  const minRatioRef = useRefValue(minRatio);\n  const maxRatioRef = useRefValue(maxRatio);\n  const [isOver, setIsOver] = useState(false);\n\n  useEffect(() => {\n    if (!dragging) return;\n    const onMove = (e: MouseEvent) => {\n      const el = container;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      if (direction === 'vertical') {\n        const x = e.clientX - rect.left;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, x / rect.width));\n        setPercent(ratio);\n        setWidth(x);\n        onChangeRef.current?.(ratio);\n      } else {\n        const y = e.clientY - rect.top;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, y / rect.height));\n        setPercent(ratio);\n        setWidth(y);\n        onChangeRef.current?.(ratio);\n      }\n      // prevent text selection while dragging\n      e.preventDefault();\n    };\n    const onUp = () => setDragging(false);\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp, { once: true });\n\n    return () => {\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n    };\n  }, [container, dragging, direction, minRatioRef, maxRatioRef]);\n\n  useEffect(() => {\n    const containerDom = containerFromProps ?? (splitterRef?.parentElement as HTMLDivElement | undefined) ?? undefined;\n    setContainer(containerDom);\n  }, [containerFromProps, splitterRef]);\n\n  // Initialize percent and width on mount\n  useEffect(() => {\n    if (defaultRatio && container && percentRef.current == null) {\n      const rect = container.getBoundingClientRect();\n      setPercent(defaultRatio);\n      if (directionRef.current === 'vertical') {\n        setWidth(rect.width * defaultRatio);\n        onChangeRef.current?.(defaultRatio);\n      } else {\n        setWidth(rect.height * defaultRatio);\n        onChangeRef.current?.(defaultRatio);\n      }\n    }\n  }, [defaultRatio, container]);\n\n  const vertical = direction === 'vertical';\n  const dom = wrapCSSVar(\n    <div\n      ref={setSplitterRef}\n      className={names(\n        hashId,\n        cssVarCls,\n        prefixCls,\n        className,\n        isOver ? names(`${prefixCls}-hover`, classNames?.hover) : undefined,\n        dragging ? names(`${prefixCls}-dragging`, classNames?.dragging) : undefined,\n        {\n          [`${prefixCls}-vertical`]: vertical,\n          [`${prefixCls}-horizontal`]: !vertical,\n        }\n      )}\n      style={{\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        [`--splitter-width` as any]: splitterWidth ? `${splitterWidth}px` : undefined,\n        ...style,\n      }}\n      onMouseDown={() => setDragging(true)}\n      onMouseEnter={() => setIsOver(true)}\n      onMouseLeave={() => setIsOver(false)}\n      role=\"separator\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-label=\"Resize\"\n    >\n      <div className={names(`${prefixCls}-handle`, classNames?.handle)} style={styles?.handle}></div>\n    </div>\n  );\n\n  return {\n    dom,\n    percent,\n    width,\n    dragging,\n    direction,\n  };\n};\n\nexport default useSplitter;\n"],
+  "mappings": "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",
+  "names": ["useStyle", "useRefValue", "names"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-codes/react-easy",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",