@gfazioli/mantine-split-pane 1.1.7 → 2.1.0

package/dist/esm/Resizer/SplitPaneResizer.mjs

@@ -1,6 +1,7 @@
 'use client';
 import React, { useRef } from 'react';
-import { createVarsResolver, parseThemeColor, getSize, getThemeColor, getRadius, rgba, factory, useProps, useStyles, UnstyledButton } from '@mantine/core';
+import { createVarsResolver, getSize, getRadius, parseThemeColor, getGradient, factory, useProps, useStyles, UnstyledButton } from '@mantine/core';
+import { useSplitContext } from '../Split.context.mjs';
 import classes from './SplitPaneResizer.module.css.mjs';
 
 const varsResolver = createVarsResolver(
@@ -20,40 +21,35 @@ const varsResolver = createVarsResolver(
     spacing,
     variant,
     cursorVertical,
-    cursorHorizontal
+    cursorHorizontal,
+    gradient,
+    hoverGradient
   }) => {
-    const colorDarkParsed = parseThemeColor({
-      color: color || "dark.5",
-      theme
-    });
-    const colorLightParsed = parseThemeColor({
-      color: color || "gray.3",
-      theme
-    });
-    const hoverColorDarkParsed = parseThemeColor({
-      color: hoverColor || "dark.3",
-      theme
-    });
-    const hoverColorLightParsed = parseThemeColor({
-      color: hoverColor || "gray.4",
-      theme
-    });
     const knobVariant = variant === "dotted" || variant === "dashed";
+    const forceKnobOpacityValue = withKnob && knobAlwaysOn && !knobVariant ? knobOpacity : "0";
+    const colors = variantColorResolver({
+      color,
+      hover: hoverColor,
+      knob: knobColor,
+      hoverKnob: knobHoverColor,
+      theme,
+      gradient,
+      hoverGradient,
+      variant: variant || "filled"
+    });
     return {
       root: {
         "--split-resizer-size": getSize(size, "split-resizer-size"),
-        "--split-resizer-color": rgba(colorLightParsed.value, Number(opacity)),
-        "--split-resizer-color-light": rgba(colorLightParsed.value, Number(opacity)),
-        "--split-resizer-color-dark": rgba(colorDarkParsed.value, Number(opacity)),
-        "--split-resizer-hover-color-light": rgba(hoverColorLightParsed.value, 1),
-        "--split-resizer-hover-color-dark": rgba(hoverColorDarkParsed.value, 1),
+        "--split-resizer-color": colors.color,
+        "--split-resizer-hover-color": colors.hover,
         "--split-resizer-radius": getRadius(radius),
+        "--split-resizer-opacity": opacity !== void 0 ? opacity : "1",
         "--split-resizer-knob-size": getSize(knobSize, "split-resizer-knob-size"),
-        "--split-resizer-knob-opacity": withKnob && knobAlwaysOn && !knobVariant ? knobOpacity : "0",
+        "--split-resizer-knob-opacity": forceKnobOpacityValue,
         "--split-resizer-knob-hover-opacity": withKnob || knobVariant ? "1" : "0",
         "--split-resizer-knob-radius": getRadius(knobRadius),
-        "--split-resizer-knob-color": getThemeColor(knobColor, theme),
-        "--split-resizer-knob-hover-color": getThemeColor(knobHoverColor, theme),
+        "--split-resizer-knob-color": colors.knob,
+        "--split-resizer-knob-hover-color": colors.hoverKnob,
         "--split-resizer-spacing": getSize(spacing, "split-resizer-spacing"),
         "--split-resizer-cursor-vertical": cursorVertical || "col-resize",
         "--split-resizer-cursor-horizontal": cursorHorizontal || "row-resize"
@@ -61,56 +57,79 @@ const varsResolver = createVarsResolver(
     };
   }
 );
+const variantColorResolver = ({
+  color,
+  hover,
+  knob,
+  hoverKnob,
+  theme,
+  variant,
+  gradient,
+  hoverGradient
+}) => {
+  const parsedColor = color ? parseThemeColor({ color, theme }).value : void 0;
+  const parsedHover = hover ? parseThemeColor({ color: hover, theme }).value : void 0;
+  const parsedKnob = knob ? parseThemeColor({ color: knob, theme }).value : void 0;
+  const parsedHoverKnob = hoverKnob ? parseThemeColor({ color: hoverKnob, theme }).value : void 0;
+  const colors = {
+    color: parsedColor,
+    hover: parsedHover,
+    knob: parsedKnob,
+    hoverKnob: parsedHoverKnob
+  };
+  if (variant === "gradient") {
+    colors.color = getGradient(gradient, theme);
+    colors.hover = getGradient(hoverGradient || gradient, theme);
+  }
+  return colors;
+};
 const defaultProps = {
-  size: "md",
+  orientation: "vertical",
   opacity: 0.8,
+  size: "sm",
   radius: "xs",
-  knobColor: "blue",
+  withKnob: false,
+  knobAlwaysOn: true,
   knobSize: "sm",
   knobOpacity: 0.5,
   knobRadius: "sm",
-  minWidth: 20,
-  minHeight: 20,
-  orientation: "vertical",
-  paneRef: { current: null },
-  variant: "default",
-  withKnob: false,
-  knobAlwaysOn: true,
+  knobColor: "white",
+  knobHoverColor: "white",
+  spacing: "xs",
   step: 8,
   shiftStep: 64,
   cursorVertical: "col-resize",
   cursorHorizontal: "row-resize"
 };
-const SplitPaneResizer = factory((_props, ref) => {
-  const props = useProps("Resizer", defaultProps, _props);
+const SplitPaneResizer = factory((_props, _) => {
+  const ctx = useSplitContext();
+  const props = useProps("SplitPaneResizer", { ...defaultProps, ...ctx }, _props);
   const {
-    size,
+    orientation,
     opacity,
+    size,
     radius,
-    color,
-    hoverColor,
+    withKnob,
+    knobAlwaysOn,
     knobSize,
     knobOpacity,
     knobRadius,
     knobColor,
     knobHoverColor,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-    orientation,
-    onResizeStart,
-    onResizing,
-    onResizeEnd,
-    paneRef,
-    variant,
-    withKnob,
-    knobAlwaysOn,
     spacing,
     step,
     shiftStep,
     cursorVertical,
     cursorHorizontal,
+    color,
+    hoverColor,
+    variant,
+    onResizeStart,
+    onResizing,
+    onResizeEnd,
+    onDoubleClick,
+    __beforeRef: beforeRef,
+    __afterRef: afterRef,
     className,
     style,
     classNames,
@@ -118,7 +137,7 @@ const SplitPaneResizer = factory((_props, ref) => {
     unstyled,
     vars,
     mod,
-    ...others
+    ...rest
   } = props;
   const getStyles = useStyles({
     name: "SplitPaneResizer",
@@ -133,6 +152,150 @@ const SplitPaneResizer = factory((_props, ref) => {
     varsResolver
   });
   const containerRef = useRef(null);
+  const processVerticalSize = (deltaX = 0) => {
+    const minBeforeWidth = beforeRef.current.getMinWidth();
+    const maxBeforeWidth = beforeRef.current.getMaxWidth();
+    const minAfterWidth = afterRef.current.getMinWidth();
+    const maxAfterWidth = afterRef.current.getMaxWidth();
+    const beforePane = beforeRef.current.splitPane;
+    const afterPane = afterRef.current.splitPane;
+    let beforeWidth = beforePane.getBoundingClientRect().width;
+    let afterWidth = afterPane.getBoundingClientRect().width;
+    const isBeforeWidthMaxExceeded = maxBeforeWidth && beforeWidth + deltaX > maxBeforeWidth;
+    const isAfterWidthMaxExceeded = maxAfterWidth && afterWidth - deltaX > maxAfterWidth;
+    const isBeforeWidthMinExceeded = minBeforeWidth && beforeWidth + deltaX < minBeforeWidth;
+    const isAfterWidthMinExceeded = minAfterWidth && afterWidth - deltaX < minAfterWidth;
+    const isBeforeWidthNegative = beforeWidth + deltaX < 0;
+    const isAfterWidthNegative = afterWidth - deltaX < 0;
+    function setVerticalSize() {
+      const beforeWidthString = `${beforeWidth}px`;
+      const afterWidthString = `${afterWidth}px`;
+      const beforePaneSizes = {
+        width: beforeWidth,
+        height: beforePane.getBoundingClientRect().height
+      };
+      const afterPaneSizes = {
+        width: afterWidth,
+        height: afterPane.getBoundingClientRect().height
+      };
+      beforeRef.current.onResizing?.(beforePaneSizes);
+      afterRef.current.onResizing?.(afterPaneSizes);
+      onResizing?.({
+        beforePane: beforePaneSizes,
+        afterPane: afterPaneSizes
+      });
+      beforePane.style.width = beforeWidthString;
+      afterPane.style.width = afterWidthString;
+    }
+    if (!isAfterWidthMaxExceeded && isBeforeWidthMinExceeded) {
+      afterWidth += beforeWidth - minBeforeWidth;
+      beforeWidth = minBeforeWidth;
+      return setVerticalSize();
+    }
+    if (!isAfterWidthMaxExceeded && isBeforeWidthNegative) {
+      afterWidth += beforeWidth;
+      beforeWidth = 0;
+      return setVerticalSize();
+    }
+    if (!isAfterWidthMinExceeded && !isAfterWidthNegative && isBeforeWidthMaxExceeded) {
+      afterWidth -= maxBeforeWidth - beforeWidth;
+      beforeWidth = maxBeforeWidth;
+      return setVerticalSize();
+    }
+    if (!isBeforeWidthMaxExceeded && isAfterWidthMinExceeded) {
+      beforeWidth += afterWidth - minAfterWidth;
+      afterWidth = minAfterWidth;
+      return setVerticalSize();
+    }
+    if (!isBeforeWidthMaxExceeded && isAfterWidthNegative) {
+      beforeWidth += afterWidth;
+      afterWidth = 0;
+      return setVerticalSize();
+    }
+    if (!isBeforeWidthMinExceeded && !isBeforeWidthNegative && isAfterWidthMaxExceeded) {
+      beforeWidth -= maxAfterWidth - afterWidth;
+      afterWidth = maxAfterWidth;
+      return setVerticalSize();
+    }
+    if (isBeforeWidthNegative || isAfterWidthNegative || isBeforeWidthMaxExceeded || isAfterWidthMaxExceeded || isBeforeWidthMinExceeded || isAfterWidthMinExceeded) {
+      return;
+    }
+    beforeWidth += deltaX;
+    afterWidth -= deltaX;
+    setVerticalSize();
+  };
+  const processHorizontalSize = (deltaY = 0) => {
+    const minBeforeHeight = beforeRef.current.getMinHeight();
+    const maxBeforeHeight = beforeRef.current.getMaxHeight();
+    const minAfterHeight = afterRef.current.getMinHeight();
+    const maxAfterHeight = afterRef.current.getMaxHeight();
+    const beforePane = beforeRef.current.splitPane;
+    const afterPane = afterRef.current.splitPane;
+    let beforeHeight = beforePane.getBoundingClientRect().height;
+    let afterHeight = afterPane.getBoundingClientRect().height;
+    const isBeforeHeightMaxExceeded = maxBeforeHeight && beforeHeight + deltaY > maxBeforeHeight;
+    const isAfterHeightMaxExceeded = maxAfterHeight && afterHeight - deltaY > maxAfterHeight;
+    const isBeforeHeightMinExceeded = minBeforeHeight && beforeHeight + deltaY < minBeforeHeight;
+    const isAfterHeightMinExceeded = minAfterHeight && afterHeight - deltaY < minAfterHeight;
+    const isBeforeHeightNegative = beforeHeight + deltaY < 0;
+    const isAfterHeightNegative = afterHeight - deltaY < 0;
+    function setHorizontalSize() {
+      const beforeHeightString = `${beforeHeight}px`;
+      const afterHeightString = `${afterHeight}px`;
+      const beforePaneSizes = {
+        width: beforePane.getBoundingClientRect().width,
+        height: beforeHeight
+      };
+      const afterPaneSizes = {
+        width: afterPane.getBoundingClientRect().width,
+        height: afterHeight
+      };
+      onResizing?.({
+        beforePane: beforePaneSizes,
+        afterPane: afterPaneSizes
+      });
+      beforeRef.current.onResizing?.(beforePaneSizes);
+      afterRef.current.onResizing?.(afterPaneSizes);
+      beforePane.style.height = beforeHeightString;
+      afterPane.style.height = afterHeightString;
+    }
+    if (!isAfterHeightMaxExceeded && isBeforeHeightMinExceeded) {
+      afterHeight += beforeHeight - minBeforeHeight;
+      beforeHeight = minBeforeHeight;
+      return setHorizontalSize();
+    }
+    if (!isAfterHeightMaxExceeded && isBeforeHeightNegative) {
+      afterHeight += beforeHeight;
+      beforeHeight = 0;
+      return setHorizontalSize();
+    }
+    if (!isAfterHeightMinExceeded && !isAfterHeightNegative && isBeforeHeightMaxExceeded) {
+      afterHeight -= maxBeforeHeight - beforeHeight;
+      beforeHeight = maxBeforeHeight;
+      return setHorizontalSize();
+    }
+    if (!isBeforeHeightMaxExceeded && isAfterHeightMinExceeded) {
+      beforeHeight += afterHeight - minAfterHeight;
+      afterHeight = minAfterHeight;
+      return setHorizontalSize();
+    }
+    if (!isBeforeHeightMaxExceeded && isAfterHeightNegative) {
+      beforeHeight += afterHeight;
+      afterHeight = 0;
+      return setHorizontalSize();
+    }
+    if (!isBeforeHeightMinExceeded && !isBeforeHeightNegative && isAfterHeightMaxExceeded) {
+      beforeHeight -= maxAfterHeight - afterHeight;
+      afterHeight = maxAfterHeight;
+      return setHorizontalSize();
+    }
+    if (isBeforeHeightNegative || isAfterHeightNegative || isBeforeHeightMaxExceeded || isAfterHeightMaxExceeded || isBeforeHeightMinExceeded || isAfterHeightMinExceeded) {
+      return;
+    }
+    beforeHeight += deltaY;
+    afterHeight -= deltaY;
+    setHorizontalSize();
+  };
   const handleStart = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -147,115 +310,132 @@ const SplitPaneResizer = factory((_props, ref) => {
       document.addEventListener("touchend", handleTouchEnd);
     }
     onResizeStart?.();
-    document.body.style.cursor = "col-resize";
+    beforeRef.current.onResizeStart?.();
+    afterRef.current.onResizeStart?.();
+    document.body.style.cursor = orientation === "vertical" ? cursorVertical : cursorHorizontal;
   };
   const handleMove = (event) => {
-    if (!paneRef.current) return;
+    if (!beforeRef.current || !afterRef.current) {
+      throw new Error("beforeRef or afterRef is not defined");
+    }
     event.preventDefault();
     event.stopPropagation();
     const computedStyle = window.getComputedStyle(containerRef.current);
-    const clientX = "clientX" in event ? event.clientX : event.touches[0].clientX;
-    const clientY = "clientY" in event ? event.clientY : event.touches[0].clientY;
     if (orientation === "vertical") {
-      const margin = parseFloat(computedStyle.getPropertyValue("margin-left")) + 1;
-      const delta = clientX - paneRef.current.getBoundingClientRect().right - margin;
-      const width = paneRef.current.getBoundingClientRect().width + delta;
-      const widthString = `${width}px`;
-      if (minWidth && width < minWidth) return;
-      if (maxWidth && width > maxWidth) return;
-      onResizing?.({
-        width: widthString,
-        height: paneRef.current.style.height
-      });
-      paneRef.current.style.width = widthString;
-    } else {
-      const margin = parseFloat(computedStyle.getPropertyValue("margin-top")) + 1;
-      const delta = clientY - paneRef.current.getBoundingClientRect().bottom - margin;
-      const height = paneRef.current.getBoundingClientRect().height + delta;
-      const heightString = `${height}px`;
-      if (minHeight && height < minHeight) return;
-      if (maxHeight && height > maxHeight) return;
-      onResizing?.({
-        width: paneRef.current.style.width,
-        height: heightString
-      });
-      paneRef.current.style.height = heightString;
+      const size2 = parseFloat(computedStyle.getPropertyValue("width"));
+      const clientX = "clientX" in event ? event.clientX : event.touches[0].clientX;
+      const deltaX = clientX - containerRef.current.getBoundingClientRect().left - size2 / 2;
+      return processVerticalSize(deltaX);
+    }
+    if (orientation === "horizontal") {
+      const size2 = parseFloat(computedStyle.getPropertyValue("height"));
+      const clientY = "clientY" in event ? event.clientY : event.touches[0].clientY;
+      const deltaY = clientY - containerRef.current.getBoundingClientRect().top - size2 / 2;
+      return processHorizontalSize(deltaY);
     }
   };
   const handleMouseUp = () => {
-    if (!paneRef.current) return;
+    if (!beforeRef.current || !afterRef.current) {
+      throw new Error("beforeRef or afterRef is not defined");
+    }
     document.body.style.userSelect = "initial";
     document.body.style.webkitUserSelect = "initial";
     document.removeEventListener("mousemove", handleMove);
     document.removeEventListener("mouseup", handleMouseUp);
     document.body.style.cursor = "initial";
-    const { width, height } = paneRef.current.style || {};
-    onResizeEnd?.({ width, height });
+    const beforePane = beforeRef.current.splitPane;
+    const afterPane = afterRef.current.splitPane;
+    const beforePaneSizes = {
+      width: beforePane.getBoundingClientRect().width,
+      height: beforePane.getBoundingClientRect().height
+    };
+    const afterPaneSizes = {
+      width: afterPane.getBoundingClientRect().width,
+      height: afterPane.getBoundingClientRect().height
+    };
+    onResizeEnd?.({
+      beforePane: beforePaneSizes,
+      afterPane: afterPaneSizes
+    });
+    beforeRef.current.onResizeEnd?.(beforePaneSizes);
+    afterRef.current.onResizeEnd?.(afterPaneSizes);
   };
   const handleTouchEnd = () => {
-    if (!paneRef.current) return;
+    if (!beforeRef.current || !afterRef.current) {
+      throw new Error("beforeRef or afterRef is not defined");
+    }
     document.removeEventListener("touchmove", handleMove);
     document.removeEventListener("touchend", handleTouchEnd);
     document.body.style.cursor = "initial";
-    const { width, height } = paneRef.current.style || {};
-    onResizeEnd?.({ width, height });
+    const beforePane = beforeRef.current.splitPane;
+    const afterPane = afterRef.current.splitPane;
+    const beforePaneSizes = {
+      width: beforePane.getBoundingClientRect().width,
+      height: beforePane.getBoundingClientRect().height
+    };
+    const afterPaneSizes = {
+      width: afterPane.getBoundingClientRect().width,
+      height: afterPane.getBoundingClientRect().height
+    };
+    onResizeEnd?.({
+      beforePane: beforePaneSizes,
+      afterPane: afterPaneSizes
+    });
+    beforeRef.current.onResizeEnd?.(beforePaneSizes);
+    afterRef.current.onResizeEnd?.(afterPaneSizes);
   };
   const handleKeyUp = (event) => {
     if (containerRef.current !== document.activeElement) {
       return;
     }
+    const code = event.nativeEvent.code;
+    const arrowLeftRight = code === "ArrowRight" || code === "ArrowLeft";
+    const arrowUpDown = code === "ArrowUp" || code === "ArrowDown";
     const delta = event.shiftKey ? shiftStep : step;
-    if (orientation === "vertical" && (event.nativeEvent.code === "ArrowRight" || event.nativeEvent.code === "ArrowLeft")) {
+    if (orientation === "vertical" && arrowLeftRight) {
       event.preventDefault();
       event.stopPropagation();
-      const deltaSign = event.nativeEvent.code === "ArrowRight" ? 1 : -1;
-      const width = paneRef.current.getBoundingClientRect().width + delta * deltaSign;
-      const widthString = `${width}px`;
-      if (minWidth && width < minWidth) return;
-      if (maxWidth && width > maxWidth) return;
-      onResizing?.({
-        width: widthString,
-        height: paneRef.current.style.height
-      });
-      paneRef.current.style.width = widthString;
+      const deltaSign = code === "ArrowRight" ? 1 : -1;
+      const deltaX = delta * deltaSign;
+      return processVerticalSize(deltaX);
     }
-    if (orientation === "horizontal" && (event.nativeEvent.code === "ArrowUp" || event.nativeEvent.code === "ArrowDown")) {
+    if (orientation === "horizontal" && arrowUpDown) {
       event.preventDefault();
       event.stopPropagation();
-      const deltaSign = event.nativeEvent.code === "ArrowDown" ? 1 : -1;
-      const height = paneRef.current.getBoundingClientRect().height + delta * deltaSign;
-      const heightString = `${height}px`;
-      if (minHeight && height < minHeight) return;
-      if (maxHeight && height > maxHeight) return;
-      onResizing?.({
-        width: paneRef.current.style.width,
-        height: heightString
-      });
-      paneRef.current.style.height = heightString;
+      const deltaSign = code === "ArrowDown" ? 1 : -1;
+      const deltaY = delta * deltaSign;
+      return processHorizontalSize(deltaY);
     }
-    if (event.nativeEvent.code === "Escape") {
+    if (code === "Escape") {
       event.preventDefault();
       event.stopPropagation();
       containerRef.current.blur();
     }
   };
+  const handleDoubleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    beforeRef.current.resetInitialSize(e);
+    afterRef.current.resetInitialSize(e);
+    onDoubleClick?.(e);
+  };
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
     {
-      onDoubleClick: props?.onDoubleClick,
       ref: containerRef,
       mod: { orientation },
       onMouseDown: handleStart,
       onKeyDown: handleKeyUp,
       onTouchStart: handleStart,
+      onDoubleClick: handleDoubleClick,
       "aria-label": "Resize",
-      ...getStyles("root", { variant }),
-      ...others
+      ...getStyles("root", { variant: variant || "default" }),
+      ...rest
     }
   );
 });
 SplitPaneResizer.classes = classes;
 SplitPaneResizer.displayName = "SplitPaneResizer";
 
-export { SplitPaneResizer };
+export { SplitPaneResizer, defaultProps };
 //# sourceMappingURL=SplitPaneResizer.mjs.map