chore: remove resizable prop and make resizable feature default

lumada-design · Nov 13, 2024 · 2dcc938 · 2dcc938
1 parent 9fc13b6
commit 2dcc938
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/packages/pentaho/src/Canvas/SidePanel/SidePanel.tsx b/packages/pentaho/src/Canvas/SidePanel/SidePanel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import { forwardRef } from "react";
 import {
   ExtractNames,
@@ -51,8 +50,6 @@ export interface HvCanvasSidePanelProps
   ) => void;
   /** An object containing all the labels. */
   labels?: Partial<typeof DEFAULT_LABELS>;
-  /** Whether the side panel is resizable horizontally. */
-  resizable?: boolean;
   /** The content that will be rendered within the canvas panel. */
   children?: React.ReactNode;
   /** A Jss Object used to override or extend the styles applied. */
@@ -75,7 +72,6 @@ export const HvCanvasSidePanel = forwardRef<
     onToggle,
     onTabChange,
     labels: labelsProp,
-    resizable = true,
     className,
     children,
     classes: classesProp,
@@ -96,7 +92,6 @@ export const HvCanvasSidePanel = forwardRef<
 
   const { width, isDragging, getContainerProps, getSeparatorProps } =
     useResizable({
-      resizable,
       ref,
       initialWidth: 320,
       minWidth: 100,
@@ -124,12 +119,7 @@ export const HvCanvasSidePanel = forwardRef<
           [classes.open]: open,
           [classes.close]: !open,
         })}
-        {...getContainerProps()}
-        style={{
-          ...getContainerProps().style,
-          width: open ? width : 0,
-          transition: isDragging ? "none" : undefined,
-        }}
+        {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}
         {...others}
       >
         {tabs && (
@@ -157,7 +147,7 @@ export const HvCanvasSidePanel = forwardRef<
           {children}
         </HvPanel>
       </div>
-      {resizable && <div {...getSeparatorProps()} />}
+      <div {...getSeparatorProps()} />
       <HvIconButton
         variant="primaryGhost"
         title={open ? labels.close : labels.open}

diff --git a/packages/pentaho/src/Canvas/SidePanel/useResizable.tsx b/packages/pentaho/src/Canvas/SidePanel/useResizable.tsx
@@ -1,21 +1,20 @@
-import { useRef, useState } from "react";
+import { MouseEvent, useRef, useState } from "react";
 import { useForkRef } from "@hitachivantara/uikit-react-core";
 
 interface ContainerProps {
   ref: any;
   style: React.CSSProperties;
 }
 
-interface HandleProps {
+interface SeparatorProps {
   style: React.CSSProperties;
-  onMouseMove?: (event: React.MouseEvent) => void;
+  onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onMouseLeave?: () => void;
   onMouseDown?: () => void;
   role: string;
 }
 
 interface ResizableProps {
-  resizable: boolean;
   ref: any;
   initialWidth?: number;
   minWidth?: number;
@@ -27,11 +26,10 @@ export const useResizable = (
 ): {
   width: number;
   isDragging: boolean;
-  getContainerProps: () => ContainerProps;
-  getSeparatorProps: () => HandleProps;
+  getContainerProps: (overrides: any) => ContainerProps;
+  getSeparatorProps: () => SeparatorProps;
 } => {
   const {
-    resizable,
     ref,
     initialWidth = 320,
     minWidth = 100,
@@ -46,7 +44,7 @@ export const useResizable = (
 
   const forkedRef = useForkRef(ref, panelRef);
 
-  const mouseMove = (event: any) => {
+  const mouseMove = (event: MouseEvent) => {
     if (panelRef.current) {
       const rect = panelRef.current.getBoundingClientRect();
       const newWidth = event.clientX - rect.left;
@@ -56,7 +54,7 @@ export const useResizable = (
     }
   };
 
-  const handleMouseMove = (event: any) => {
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
     if (panelRef.current) {
       const rect = panelRef.current.getBoundingClientRect();
       const isHoverBorder =
@@ -66,40 +64,54 @@ export const useResizable = (
   };
 
   const handleMouseUp = () => {
-    document.removeEventListener("mousemove", mouseMove);
-    document.removeEventListener("mouseup", handleMouseUp);
+    panelRef.current?.parentElement?.removeEventListener(
+      "mousemove",
+      mouseMove as unknown as EventListener,
+    );
+    panelRef.current?.parentElement?.removeEventListener(
+      "mouseup",
+      handleMouseUp as EventListener,
+    );
     setIsDragging(false);
   };
 
   const startResizing = () => {
-    document.addEventListener("mousemove", mouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
+    panelRef.current?.parentElement?.addEventListener(
+      "mousemove",
+      mouseMove as unknown as EventListener,
+    );
+    panelRef.current?.parentElement?.addEventListener("mouseup", handleMouseUp);
     setIsDragging(true);
   };
 
-  const getContainerProps = (): ContainerProps => ({
+  const getContainerProps = (
+    overrides: Partial<ContainerProps> = {},
+  ): ContainerProps => ({
     ref: forkedRef,
     style: {
       width,
+      transition: isDragging ? "none" : undefined,
+      ...overrides.style,
     },
   });
 
-  const getSeparatorProps = (): HandleProps => ({
+  const getSeparatorProps = (
+    overrides: Partial<SeparatorProps> = {},
+  ): SeparatorProps => ({
     style: {
       left: width,
       position: "absolute",
       top: 0,
       bottom: 0,
       width: 5,
-      cursor: resizable ? "col-resize" : "default",
+      cursor: "col-resize",
+      ...overrides.style,
+    },
+    onMouseMove: handleMouseMove,
+    onMouseLeave: () => setIsHover(false),
+    onMouseDown: () => {
+      if (isHover) startResizing();
     },
-    onMouseMove: resizable ? handleMouseMove : undefined,
-    onMouseLeave: resizable ? () => setIsHover(false) : undefined,
-    onMouseDown: resizable
-      ? () => {
-          if (isHover) startResizing();
-        }
-      : undefined,
     role: "separator",
   });