@refinedev/devtools 1.1.34 → 1.1.36

package/src/components/resizable-pane.tsx

@@ -1,283 +1,283 @@
 import React from "react";
 import { Placement } from "src/interfaces/placement";
 import {
-    getDefaultPanelSize,
-    getMaxPanelHeight,
-    getMaxPanelWidth,
-    getPanelPosition,
-    getPanelToggleTransforms,
-    MIN_PANEL_HEIGHT,
-    MIN_PANEL_WIDTH,
-    roundToEven,
+  getDefaultPanelSize,
+  getMaxPanelHeight,
+  getMaxPanelWidth,
+  getPanelPosition,
+  getPanelToggleTransforms,
+  MIN_PANEL_HEIGHT,
+  MIN_PANEL_WIDTH,
+  roundToEven,
 } from "src/utilities";
 import { ResizeHandleIcon } from "./icons/resize-handle-icon";
 
 type Props = {
-    placement: Placement;
-    defaultWidth?: number;
-    minWidth?: number;
-    maxWidth?: number;
-    defaultHeight?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    children: ({ resizing }: { resizing: string | null }) => React.ReactNode;
-    onResize?: (width: number, height: number) => void;
-    visible?: boolean;
+  placement: Placement;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  defaultHeight?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  children: ({ resizing }: { resizing: string | null }) => React.ReactNode;
+  onResize?: (width: number, height: number) => void;
+  visible?: boolean;
 };
 
 export const ResizablePane = ({ placement, visible, children }: Props) => {
-    const [hover, setHover] = React.useState(false);
-    const [resizing, setResizing] = React.useState<
-        "lx" | "rx" | "ty" | "by" | null
-    >(null);
-    const [resizePosition, setResizePosition] = React.useState<{
-        x: number;
-        y: number;
-    } | null>(null);
-    const [panelSize, setPanelSize] = React.useState<
-        Record<"width" | "height", number>
-    >(() => {
-        const defaultSize = getDefaultPanelSize(placement);
+  const [hover, setHover] = React.useState(false);
+  const [resizing, setResizing] = React.useState<
+    "lx" | "rx" | "ty" | "by" | null
+  >(null);
+  const [resizePosition, setResizePosition] = React.useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const [panelSize, setPanelSize] = React.useState<
+    Record<"width" | "height", number>
+  >(() => {
+    const defaultSize = getDefaultPanelSize(placement);
 
-        return {
-            width: roundToEven(defaultSize.width),
-            height: roundToEven(defaultSize.height),
-        };
-    });
+    return {
+      width: roundToEven(defaultSize.width),
+      height: roundToEven(defaultSize.height),
+    };
+  });
 
-    React.useEffect(() => {
-        const handleResize = () => {
-            setPanelSize((p) => {
-                const defaultSize = getDefaultPanelSize(placement, p);
+  React.useEffect(() => {
+    const handleResize = () => {
+      setPanelSize((p) => {
+        const defaultSize = getDefaultPanelSize(placement, p);
 
-                return {
-                    width: roundToEven(defaultSize.width),
-                    height: roundToEven(defaultSize.height),
-                };
-            });
+        return {
+          width: roundToEven(defaultSize.width),
+          height: roundToEven(defaultSize.height),
         };
+      });
+    };
 
-        handleResize();
+    handleResize();
 
-        window.addEventListener("resize", handleResize);
+    window.addEventListener("resize", handleResize);
 
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, [placement]);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [placement]);
 
-    React.useEffect(() => {
-        const handleMouseUp = () => {
-            setResizing(null);
-        };
+  React.useEffect(() => {
+    const handleMouseUp = () => {
+      setResizing(null);
+    };
 
-        if (resizing !== null) {
-            window.addEventListener("mouseup", handleMouseUp);
+    if (resizing !== null) {
+      window.addEventListener("mouseup", handleMouseUp);
 
-            return () => {
-                window.removeEventListener("mouseup", handleMouseUp);
-            };
-        }
+      return () => {
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
 
-        return;
-    }, [resizing]);
+    return;
+  }, [resizing]);
 
-    React.useEffect(() => {
-        const currentCursor = document.body.style.cursor;
+  React.useEffect(() => {
+    const currentCursor = document.body.style.cursor;
 
-        if (resizing?.includes("x")) {
-            document.body.style.cursor = "col-resize";
-        } else if (resizing?.includes("y")) {
-            document.body.style.cursor = "row-resize";
-        }
+    if (resizing?.includes("x")) {
+      document.body.style.cursor = "col-resize";
+    } else if (resizing?.includes("y")) {
+      document.body.style.cursor = "row-resize";
+    }
 
-        return () => {
-            document.body.style.cursor = currentCursor;
-        };
-    }, [resizing]);
+    return () => {
+      document.body.style.cursor = currentCursor;
+    };
+  }, [resizing]);
 
-    React.useEffect(() => {
-        const handleMouseMove = (e: MouseEvent) => {
-            if (resizing?.[1] === "x") {
-                const diff = e.clientX - (resizePosition?.x ?? e.clientX);
-                const newWidth =
-                    panelSize.width + (resizing === "lx" ? -diff : diff) * 2;
+  React.useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (resizing?.[1] === "x") {
+        const diff = e.clientX - (resizePosition?.x ?? e.clientX);
+        const newWidth =
+          panelSize.width + (resizing === "lx" ? -diff : diff) * 2;
 
-                setPanelSize((p) => ({
-                    ...p,
-                    width: roundToEven(
-                        Math.min(
-                            getMaxPanelWidth(placement),
-                            Math.max(MIN_PANEL_WIDTH, newWidth),
-                        ),
-                    ),
-                }));
-            } else if (resizing?.[1] === "y") {
-                const diff = e.clientY - (resizePosition?.y ?? e.clientY);
-                const newHeight =
-                    panelSize.height + (resizing === "ty" ? -diff : diff) * 1;
+        setPanelSize((p) => ({
+          ...p,
+          width: roundToEven(
+            Math.min(
+              getMaxPanelWidth(placement),
+              Math.max(MIN_PANEL_WIDTH, newWidth),
+            ),
+          ),
+        }));
+      } else if (resizing?.[1] === "y") {
+        const diff = e.clientY - (resizePosition?.y ?? e.clientY);
+        const newHeight =
+          panelSize.height + (resizing === "ty" ? -diff : diff) * 1;
 
-                setPanelSize((p) => ({
-                    ...p,
-                    height: roundToEven(
-                        Math.min(
-                            getMaxPanelHeight(placement),
-                            Math.max(MIN_PANEL_HEIGHT, newHeight),
-                        ),
-                    ),
-                }));
-            }
-        };
+        setPanelSize((p) => ({
+          ...p,
+          height: roundToEven(
+            Math.min(
+              getMaxPanelHeight(placement),
+              Math.max(MIN_PANEL_HEIGHT, newHeight),
+            ),
+          ),
+        }));
+      }
+    };
 
-        if (resizing !== null) {
-            window.addEventListener("mousemove", handleMouseMove);
+    if (resizing !== null) {
+      window.addEventListener("mousemove", handleMouseMove);
 
-            return () => {
-                window.removeEventListener("mousemove", handleMouseMove);
-            };
-        }
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+      };
+    }
 
-        return;
-    }, [resizing, placement]);
+    return;
+  }, [resizing, placement]);
 
-    return (
+  return (
+    <div
+      style={{
+        position: "absolute",
+        borderRadius: "8px",
+        boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+        border: "1px solid rgba(0, 0, 0, 0.5)",
+        transitionProperty: "transform, opacity",
+        transitionTimingFunction: "ease-in-out",
+        transitionDuration: "0.2s",
+        ...getPanelPosition(placement),
+        opacity: visible ? 1 : 0,
+        transform: `${
+          getPanelPosition(placement).transform
+        } ${getPanelToggleTransforms(visible ?? false)}`,
+        ...panelSize,
+      }}
+      onMouseEnter={() => {
+        setHover(true);
+      }}
+      onMouseLeave={() => {
+        setHover(false);
+      }}
+    >
+      {children({ resizing })}
+      {/*  */}
+      <React.Fragment>
         <div
-            style={{
-                position: "absolute",
-                borderRadius: "8px",
-                boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
-                border: "1px solid rgba(0, 0, 0, 0.5)",
-                transitionProperty: "transform, opacity",
-                transitionTimingFunction: "ease-in-out",
-                transitionDuration: "0.2s",
-                ...getPanelPosition(placement),
-                opacity: visible ? 1 : 0,
-                transform: `${
-                    getPanelPosition(placement).transform
-                } ${getPanelToggleTransforms(visible ?? false)}`,
-                ...panelSize,
-            }}
-            onMouseEnter={() => {
-                setHover(true);
-            }}
-            onMouseLeave={() => {
-                setHover(false);
-            }}
-        >
-            {children({ resizing })}
-            {/*  */}
-            <React.Fragment>
-                <div
-                    style={{
-                        position: "absolute",
-                        left: 0,
-                        top: "50%",
-                        width: "10px",
-                        height: "26px",
-                        transform: "translateY(-13px) translateX(-5px)",
-                        cursor: "col-resize",
-                        transition: "opacity ease-in-out 0.2s",
-                        pointerEvents: hover || resizing ? "auto" : "none",
-                        opacity: hover || resizing ? 1 : 0,
-                    }}
-                    onMouseDown={(event) => {
-                        setResizing("lx");
-                        setResizePosition({
-                            x: event.clientX,
-                            y: event.clientY,
-                        });
+          style={{
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            width: "10px",
+            height: "26px",
+            transform: "translateY(-13px) translateX(-5px)",
+            cursor: "col-resize",
+            transition: "opacity ease-in-out 0.2s",
+            pointerEvents: hover || resizing ? "auto" : "none",
+            opacity: hover || resizing ? 1 : 0,
+          }}
+          onMouseDown={(event) => {
+            setResizing("lx");
+            setResizePosition({
+              x: event.clientX,
+              y: event.clientY,
+            });
 
-                        event.preventDefault();
-                    }}
-                >
-                    <ResizeHandleIcon />
-                </div>
-                <div
-                    style={{
-                        position: "absolute",
-                        right: 0,
-                        top: "50%",
-                        width: "10px",
-                        height: "26px",
-                        transform: `translateY(-13px) translateX(5px)`,
-                        cursor: "col-resize",
-                        transition: "opacity ease-in-out 0.2s",
-                        pointerEvents: hover || resizing ? "auto" : "none",
-                        opacity: hover || resizing ? 1 : 0,
-                    }}
-                    onMouseDown={(event) => {
-                        setResizing("rx");
-                        setResizePosition({
-                            x: event.clientX,
-                            y: event.clientY,
-                        });
+            event.preventDefault();
+          }}
+        >
+          <ResizeHandleIcon />
+        </div>
+        <div
+          style={{
+            position: "absolute",
+            right: 0,
+            top: "50%",
+            width: "10px",
+            height: "26px",
+            transform: "translateY(-13px) translateX(5px)",
+            cursor: "col-resize",
+            transition: "opacity ease-in-out 0.2s",
+            pointerEvents: hover || resizing ? "auto" : "none",
+            opacity: hover || resizing ? 1 : 0,
+          }}
+          onMouseDown={(event) => {
+            setResizing("rx");
+            setResizePosition({
+              x: event.clientX,
+              y: event.clientY,
+            });
 
-                        event.preventDefault();
-                    }}
-                >
-                    <ResizeHandleIcon />
-                </div>
-                <div
-                    style={{
-                        position: "absolute",
-                        left: "50%",
-                        top: 0,
-                        width: "26px",
-                        height: "10px",
-                        transform: "translateY(-5px) translateX(-13px)",
-                        cursor: "row-resize",
-                        transition: "opacity ease-in-out 0.2s",
-                        pointerEvents: hover || resizing ? "auto" : "none",
-                        opacity: hover || resizing ? 1 : 0,
-                    }}
-                    onMouseDown={(event) => {
-                        setResizing("ty");
-                        setResizePosition({
-                            x: event.clientX,
-                            y: event.clientY,
-                        });
+            event.preventDefault();
+          }}
+        >
+          <ResizeHandleIcon />
+        </div>
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: 0,
+            width: "26px",
+            height: "10px",
+            transform: "translateY(-5px) translateX(-13px)",
+            cursor: "row-resize",
+            transition: "opacity ease-in-out 0.2s",
+            pointerEvents: hover || resizing ? "auto" : "none",
+            opacity: hover || resizing ? 1 : 0,
+          }}
+          onMouseDown={(event) => {
+            setResizing("ty");
+            setResizePosition({
+              x: event.clientX,
+              y: event.clientY,
+            });
 
-                        event.preventDefault();
-                    }}
-                >
-                    <ResizeHandleIcon
-                        style={{
-                            transform: "rotate(90deg)",
-                            transformOrigin: "13px 13px",
-                        }}
-                    />
-                </div>
-                <div
-                    style={{
-                        position: "absolute",
-                        left: "50%",
-                        bottom: 0,
-                        width: "26px",
-                        height: "10px",
-                        transform: "translateY(5px) translateX(-13px)",
-                        cursor: "row-resize",
-                        transition: "opacity ease-in-out 0.2s",
-                        pointerEvents: hover || resizing ? "auto" : "none",
-                        opacity: hover || resizing ? 1 : 0,
-                    }}
-                    onMouseDown={(event) => {
-                        setResizing("by");
-                        setResizePosition({
-                            x: event.clientX,
-                            y: event.clientY,
-                        });
+            event.preventDefault();
+          }}
+        >
+          <ResizeHandleIcon
+            style={{
+              transform: "rotate(90deg)",
+              transformOrigin: "13px 13px",
+            }}
+          />
+        </div>
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            bottom: 0,
+            width: "26px",
+            height: "10px",
+            transform: "translateY(5px) translateX(-13px)",
+            cursor: "row-resize",
+            transition: "opacity ease-in-out 0.2s",
+            pointerEvents: hover || resizing ? "auto" : "none",
+            opacity: hover || resizing ? 1 : 0,
+          }}
+          onMouseDown={(event) => {
+            setResizing("by");
+            setResizePosition({
+              x: event.clientX,
+              y: event.clientY,
+            });
 
-                        event.preventDefault();
-                    }}
-                >
-                    <ResizeHandleIcon
-                        style={{
-                            transform: "rotate(90deg)",
-                            transformOrigin: "13px 13px",
-                        }}
-                    />
-                </div>
-            </React.Fragment>
+            event.preventDefault();
+          }}
+        >
+          <ResizeHandleIcon
+            style={{
+              transform: "rotate(90deg)",
+              transformOrigin: "13px 13px",
+            }}
+          />
         </div>
-    );
+      </React.Fragment>
+    </div>
+  );
 };