@tiny-codes/react-easy 1.7.6 → 1.7.8

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.8",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",
@@ -46,6 +46,7 @@
     "crypto-js": "^4.2.0",
     "lexical": "^0.33.1",
     "react-contexify": "^6.0.0",
+    "react-resize-detector": "^12.3.0",
     "sockjs-client": "^1.6.1"
   },
   "devDependencies": {