react-public-components 1.1.3 → 1.1.5

package/dist/index.js

@@ -179,7 +179,7 @@ var CollapseBox_default = CollapsibleBox;
 // Splitter/index.tsx
 import React, { useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var DRAGGER_SIZE = 8;
+var DEFAULT_DRAGGER_SIZE = 4;
 var SplitterPanel = ({ children }) => /* @__PURE__ */ jsx3(Fragment, { children });
 var isPercentSize = (value) => typeof value === "string" && value.endsWith("%");
 var parseSize = (value, total, fallback) => {
@@ -197,6 +197,7 @@ var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var CustomSplitter = ({
   children,
   className,
+  draggerSize = DEFAULT_DRAGGER_SIZE,
   lazy = false,
   onResize,
   onResizeEnd,
@@ -208,7 +209,6 @@ var CustomSplitter = ({
   const resolvedOrientation = orientation != null ? orientation : vertical ? "vertical" : "horizontal";
   const rootRef = useRef(null);
   const sizesRef = useRef([]);
-  const lastNonZeroSizesRef = useRef([]);
   const [containerSize, setContainerSize] = useState2(0);
   const [draggingIndex, setDraggingIndex] = useState2(null);
   const [hoveredIndex, setHoveredIndex] = useState2(null);
@@ -219,7 +219,7 @@ var CustomSplitter = ({
     ),
     [children]
   );
-  const trackSize = Math.max(0, containerSize - Math.max(0, panels.length - 1) * DRAGGER_SIZE);
+  const trackSize = Math.max(0, containerSize - Math.max(0, panels.length - 1) * draggerSize);
   const getPanelMin = useCallback(
     (index) => {
       var _a;
@@ -249,6 +249,9 @@ var CustomSplitter = ({
         if (size <= 1) {
           return 0;
         }
+        if (size < getPanelMin(index)) {
+          return size;
+        }
         return clamp(size, getPanelMin(index), getPanelMax(index));
       });
     },
@@ -287,11 +290,6 @@ var CustomSplitter = ({
       const normalized = normalizeToTrack(nextSizes);
       setSizes(normalized);
       sizesRef.current = normalized;
-      normalized.forEach((size, index) => {
-        if (size > 1) {
-          lastNonZeroSizesRef.current[index] = size;
-        }
-      });
       if (notify) {
         onResize == null ? void 0 : onResize(roundSizes(normalized));
       }
@@ -315,17 +313,16 @@ var CustomSplitter = ({
     setSizes((previous) => {
       const nextSizes = buildInitialSizes(previous);
       sizesRef.current = nextSizes;
-      lastNonZeroSizesRef.current = nextSizes.map(
-        (size) => Math.max(size, trackSize / Math.max(panels.length, 1))
-      );
       return nextSizes;
     });
-  }, [buildInitialSizes, panels.length, trackSize]);
+  }, [buildInitialSizes]);
   const getResizedPair = useCallback(
     (sourceSizes, index, delta) => {
       const nextSizes = [...sourceSizes];
-      const leftMin = getPanelMin(index);
-      const rightMin = getPanelMin(index + 1);
+      const isLeftCollapsed = sourceSizes[index] <= 1;
+      const isRightCollapsed = sourceSizes[index + 1] <= 1;
+      const leftMin = isLeftCollapsed ? 0 : getPanelMin(index);
+      const rightMin = isRightCollapsed ? 0 : getPanelMin(index + 1);
       const leftMax = getPanelMax(index);
       const rightMax = getPanelMax(index + 1);
       const minDelta = Math.max(leftMin - sourceSizes[index], sourceSizes[index + 1] - rightMax);
@@ -373,14 +370,16 @@ var CustomSplitter = ({
     document.addEventListener("pointerup", handlePointerUp);
   };
   const toggleCollapse = (index, neighborIndex) => {
+    var _a;
     const nextSizes = [...sizesRef.current];
     if (nextSizes[index] > 1) {
-      lastNonZeroSizesRef.current[index] = nextSizes[index];
       nextSizes[neighborIndex] += nextSizes[index];
       nextSizes[index] = 0;
     } else {
-      const restoredSize = lastNonZeroSizesRef.current[index] || parseSize(panels[index].props.defaultSize, trackSize, trackSize / panels.length);
-      nextSizes[index] = clamp(restoredSize, getPanelMin(index), getPanelMax(index));
+      const initialSizes = buildInitialSizes();
+      const initialSize = (_a = initialSizes[index]) != null ? _a : parseSize(panels[index].props.defaultSize, trackSize, trackSize / panels.length);
+      const restoredSize = clamp(initialSize, getPanelMin(index), getPanelMax(index));
+      nextSizes[index] = restoredSize;
       nextSizes[neighborIndex] = Math.max(0, nextSizes[neighborIndex] - nextSizes[index]);
     }
     updateSizes(nextSizes);
@@ -417,6 +416,7 @@ var CustomSplitter = ({
       return null;
     }
     const Icon = resolvedOrientation === "horizontal" ? direction === "start" ? LeftOutlined : RightOutlined : direction === "start" ? UpOutlined : DownOutlined;
+    const isHorizontal = resolvedOrientation === "horizontal";
     return /* @__PURE__ */ jsx3(
       "button",
       {
@@ -430,173 +430,203 @@ var CustomSplitter = ({
           alignItems: "center",
           background: "#fff",
           border: "1px solid #d9d9d9",
-          borderRadius: 4,
+          borderRadius: 3,
           color: "#595959",
           cursor: "pointer",
           display: "flex",
-          height: 20,
+          height: isHorizontal ? 40 : 14,
+          width: isHorizontal ? 14 : 40,
           justifyContent: "center",
           padding: 0,
-          width: 20,
-          fontSize: 12,
-          boxShadow: "0 2px 4px rgba(0,0,0,0.08)"
+          fontSize: 10,
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+          transition: "all 0.2s ease"
         },
         type: "button",
-        children: /* @__PURE__ */ jsx3(Icon, {})
-      }
-    );
-  };
-  const renderCollapsedExpandHandle = (panelIndex) => {
-    var _a;
-    const panel = panels[panelIndex];
-    if (!(panel == null ? void 0 : panel.props.collapsible)) {
-      return null;
-    }
-    const isCollapsed = sizes.length > 0 && ((_a = sizes[panelIndex]) != null ? _a : 0) <= 1;
-    if (!isCollapsed) {
-      return null;
-    }
-    const isFirstPanel = panelIndex === 0;
-    const neighborIndex = isFirstPanel ? panelIndex + 1 : panelIndex - 1;
-    const Icon = resolvedOrientation === "horizontal" ? isFirstPanel ? RightOutlined : LeftOutlined : isFirstPanel ? DownOutlined : UpOutlined;
-    const label = resolvedOrientation === "horizontal" ? isFirstPanel ? "\u5C55\u5F00\u5DE6\u4FA7\u9762\u677F" : "\u5C55\u5F00\u53F3\u4FA7\u9762\u677F" : isFirstPanel ? "\u5C55\u5F00\u4E0A\u65B9\u9762\u677F" : "\u5C55\u5F00\u4E0B\u65B9\u9762\u677F";
-    const positionStyle = resolvedOrientation === "horizontal" ? isFirstPanel ? { left: 8, top: "50%", transform: "translateY(-50%)" } : { right: 8, top: "50%", transform: "translateY(-50%)" } : isFirstPanel ? { top: 8, left: "50%", transform: "translateX(-50%)" } : { bottom: 8, left: "50%", transform: "translateX(-50%)" };
-    return /* @__PURE__ */ jsx3(
-      "button",
-      {
-        "aria-label": label,
-        title: label,
-        onClick: (event) => {
-          event.stopPropagation();
-          toggleCollapse(panelIndex, neighborIndex);
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "#e5e7eb";
+          e.currentTarget.style.color = "#1f2937";
         },
-        style: {
-          position: "absolute",
-          alignItems: "center",
-          background: "#fff",
-          border: "1px solid #1677ff",
-          borderRadius: 4,
-          color: "#1677ff",
-          cursor: "pointer",
-          display: "flex",
-          height: 24,
-          justifyContent: "center",
-          padding: 0,
-          width: 24,
-          fontSize: 12,
-          boxShadow: "0 2px 8px rgba(22, 119, 255, 0.35)",
-          zIndex: 20,
-          ...positionStyle
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "#fff";
+          e.currentTarget.style.color = "#595959";
         },
-        type: "button",
         children: /* @__PURE__ */ jsx3(Icon, {})
-      },
-      `collapsed-handle-${panelIndex}`
+      }
     );
   };
-  return /* @__PURE__ */ jsxs2("div", { className, ref: rootRef, style: rootStyle, children: [
-    panels.map((panel, index) => {
-      var _a, _b, _c;
-      const isHidden = sizes[index] <= 1;
-      const isLeftOrTopCollapsed = ((_a = sizes[index]) != null ? _a : 0) <= 1;
-      const isRightOrBottomCollapsed = ((_b = sizes[index + 1]) != null ? _b : 0) <= 1;
-      const isAnyCollapsed = isLeftOrTopCollapsed || isRightOrBottomCollapsed;
-      return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              background: index % 2 ? "#fff" : "#fafafa",
-              boxSizing: "border-box",
-              flex: `0 0 ${(_c = sizes[index]) != null ? _c : 0}px`,
-              minHeight: 0,
-              minWidth: 0,
-              overflow: "auto",
-              padding: isHidden ? 0 : 16,
-              transition: draggingIndex === null ? "flex-basis 0.2s ease" : void 0,
-              ...panel.props.style
-            },
-            children: !isHidden && panel.props.children
-          }
-        ),
-        index < panels.length - 1 && /* @__PURE__ */ jsxs2(
-          "div",
-          {
-            "aria-orientation": resolvedOrientation,
-            onClick: () => {
-              if (isRightOrBottomCollapsed) {
-                toggleCollapse(index + 1, index);
-              } else if (isLeftOrTopCollapsed) {
-                toggleCollapse(index, index + 1);
+  return /* @__PURE__ */ jsx3("div", { className, ref: rootRef, style: rootStyle, children: panels.map((panel, index) => {
+    var _a, _b, _c, _d;
+    const isHidden = sizes[index] <= 1;
+    const isLeftOrTopCollapsed = ((_a = sizes[index]) != null ? _a : 0) <= 1;
+    const isRightOrBottomCollapsed = ((_b = sizes[index + 1]) != null ? _b : 0) <= 1;
+    const isAnyCollapsed = isLeftOrTopCollapsed || isRightOrBottomCollapsed;
+    return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            background: index % 2 ? "#fff" : "#fafafa",
+            boxSizing: "border-box",
+            flex: `0 0 ${(_c = sizes[index]) != null ? _c : 0}px`,
+            minHeight: 0,
+            minWidth: 0,
+            overflow: "hidden",
+            position: "relative",
+            transition: draggingIndex === null ? "flex-basis 0.2s ease" : void 0,
+            ...panel.props.style
+          },
+          children: !isHidden && /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                boxSizing: "border-box",
+                height: "100%",
+                overflow: "auto",
+                padding: ((_d = sizes[index]) != null ? _d : 0) < 32 ? 0 : 16,
+                width: "100%"
+              },
+              children: panel.props.children
+            }
+          )
+        }
+      ),
+      index < panels.length - 1 && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "aria-orientation": resolvedOrientation,
+          onDoubleClick: resetSizes,
+          onKeyDown: (event) => {
+            const step = event.shiftKey ? 40 : 10;
+            const directionMap = resolvedOrientation === "horizontal" ? { ArrowLeft: -step, ArrowRight: step } : { ArrowUp: -step, ArrowDown: step };
+            const delta = directionMap[event.key];
+            if (delta !== void 0) {
+              event.preventDefault();
+              resizePair(index, delta);
+            }
+          },
+          onPointerDown: (event) => startResize(index, event),
+          onPointerEnter: () => setHoveredIndex(index),
+          onPointerLeave: () => setHoveredIndex(null),
+          role: "separator",
+          title: "\u62D6\u52A8\u8C03\u6574\u5927\u5C0F\uFF0C\u53CC\u51FB\u91CD\u7F6E",
+          style: {
+            alignItems: "center",
+            background: hoveredIndex === index || draggingIndex === index ? "#e6f4ff" : "#f5f5f5",
+            boxSizing: "border-box",
+            cursor: resolvedOrientation === "horizontal" ? "col-resize" : "row-resize",
+            display: "flex",
+            flex: `0 0 ${draggerSize}px`,
+            justifyContent: "center",
+            outline: "none",
+            position: "relative",
+            userSelect: "none",
+            zIndex: isAnyCollapsed ? 2 : 1
+          },
+          tabIndex: 0,
+          children: [
+            (hoveredIndex === index || draggingIndex === index || !isAnyCollapsed) && /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  background: hoveredIndex === index || draggingIndex === index ? "#1677ff" : "#d9d9d9",
+                  borderRadius: 2,
+                  height: resolvedOrientation === "horizontal" ? 40 : 2,
+                  width: resolvedOrientation === "horizontal" ? 2 : 40
+                }
               }
-            },
-            onDoubleClick: resetSizes,
-            onKeyDown: (event) => {
-              const step = event.shiftKey ? 40 : 10;
-              const directionMap = resolvedOrientation === "horizontal" ? { ArrowLeft: -step, ArrowRight: step } : { ArrowUp: -step, ArrowDown: step };
-              const delta = directionMap[event.key];
-              if (delta !== void 0) {
-                event.preventDefault();
-                resizePair(index, delta);
+            ),
+            !isAnyCollapsed && /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  display: "flex",
+                  flexDirection: resolvedOrientation === "horizontal" ? "row" : "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 2,
+                  opacity: hoveredIndex === index || draggingIndex === index ? 1 : 0,
+                  pointerEvents: hoveredIndex === index || draggingIndex === index ? "auto" : "none",
+                  transition: "opacity 0.15s ease",
+                  zIndex: 5
+                },
+                children: [
+                  renderCollapseButton(index, index, "start"),
+                  renderCollapseButton(index, index + 1, "end")
+                ]
               }
-            },
-            onPointerDown: (event) => startResize(index, event),
-            onPointerEnter: () => setHoveredIndex(index),
-            onPointerLeave: () => setHoveredIndex(null),
-            role: "separator",
-            title: isAnyCollapsed ? "\u70B9\u51FB\u53EF\u5C55\u5F00\u6062\u590D\u9762\u677F" : "\u62D6\u52A8\u8C03\u6574\u5927\u5C0F\uFF0C\u53CC\u51FB\u91CD\u7F6E",
-            style: {
-              alignItems: "center",
-              background: hoveredIndex === index || draggingIndex === index || isAnyCollapsed ? "#e6f4ff" : "#f5f5f5",
-              boxSizing: "border-box",
-              cursor: isAnyCollapsed ? "pointer" : resolvedOrientation === "horizontal" ? "col-resize" : "row-resize",
-              display: "flex",
-              flex: `0 0 ${DRAGGER_SIZE}px`,
-              justifyContent: "center",
-              outline: "none",
-              position: "relative",
-              userSelect: "none",
-              zIndex: isAnyCollapsed ? 2 : 1
-            },
-            tabIndex: 0,
-            children: [
-              /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    background: hoveredIndex === index || draggingIndex === index || isAnyCollapsed ? "#1677ff" : "#d9d9d9",
-                    borderRadius: 2,
-                    height: resolvedOrientation === "horizontal" ? 48 : 2,
-                    width: resolvedOrientation === "horizontal" ? 2 : 48
-                  }
-                }
-              ),
-              !isAnyCollapsed && /* @__PURE__ */ jsxs2(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    display: "flex",
-                    flexDirection: resolvedOrientation === "horizontal" ? "column" : "row",
-                    gap: 4,
-                    opacity: hoveredIndex === index ? 1 : 0.85,
-                    transition: "opacity 0.15s ease",
-                    pointerEvents: "auto",
-                    zIndex: 5
-                  },
-                  children: [
-                    renderCollapseButton(index, index, "start"),
-                    renderCollapseButton(index, index + 1, "end")
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ] }, index);
-    }),
-    panels.map((_, index) => renderCollapsedExpandHandle(index))
-  ] });
+            ),
+            isAnyCollapsed && /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: resolvedOrientation === "horizontal" ? "50%" : isLeftOrTopCollapsed ? 0 : void 0,
+                  bottom: resolvedOrientation === "horizontal" ? void 0 : isRightOrBottomCollapsed ? 0 : void 0,
+                  left: resolvedOrientation === "horizontal" ? isLeftOrTopCollapsed ? 0 : void 0 : "50%",
+                  right: resolvedOrientation === "horizontal" ? isRightOrBottomCollapsed ? 0 : void 0 : void 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  opacity: 1,
+                  pointerEvents: "auto",
+                  zIndex: 5,
+                  transform: resolvedOrientation === "horizontal" ? `translate(${isLeftOrTopCollapsed ? "4px" : "-4px"}, -50%)` : `translate(-50%, ${isLeftOrTopCollapsed ? "4px" : "-4px"})`
+                },
+                children: (() => {
+                  const ExpandIcon = resolvedOrientation === "horizontal" ? isLeftOrTopCollapsed ? RightOutlined : LeftOutlined : isLeftOrTopCollapsed ? DownOutlined : UpOutlined;
+                  const targetIndex = isLeftOrTopCollapsed ? index : index + 1;
+                  const neighborIndex = isLeftOrTopCollapsed ? index + 1 : index;
+                  const isHorizontal = resolvedOrientation === "horizontal";
+                  return /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      "aria-label": "\u5C55\u5F00\u9762\u677F",
+                      title: "\u5C55\u5F00\u9762\u677F",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggleCollapse(targetIndex, neighborIndex);
+                      },
+                      style: {
+                        alignItems: "center",
+                        background: "#f3f4f6",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: 3,
+                        color: "#595959",
+                        cursor: "pointer",
+                        display: "flex",
+                        height: isHorizontal ? 40 : 14,
+                        width: isHorizontal ? 14 : 40,
+                        justifyContent: "center",
+                        padding: 0,
+                        fontSize: 10,
+                        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
+                        transition: "all 0.2s ease"
+                      },
+                      type: "button",
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.background = "#e5e7eb";
+                        e.currentTarget.style.color = "#1f2937";
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.background = "#f3f4f6";
+                        e.currentTarget.style.color = "#595959";
+                      },
+                      children: /* @__PURE__ */ jsx3(ExpandIcon, {})
+                    }
+                  );
+                })()
+              }
+            )
+          ]
+        }
+      )
+    ] }, index);
+  }) });
 };
 CustomSplitter.Panel = SplitterPanel;
 var Splitter_default = CustomSplitter;