fix(Drawer): added event param to onResize callback

patternfly · Feb 27, 2023 · 9f961c6 · 9f961c6
1 parent f05eef9
commit 9f961c6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -17,7 +17,7 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
   /** Callback for resize end. */
-  onResize?: (width: number, id: string) => void;
+  onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer, in either pixels or percentage. */
   minSize?: string;
   /** The starting size of a resizable drawer, in either pixels or percentage. */
@@ -60,9 +60,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const panel = React.useRef<HTMLDivElement>();
   const splitterRef = React.useRef<HTMLDivElement>();
   const [separatorValue, setSeparatorValue] = React.useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = React.useContext(
-    DrawerContext
-  );
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } =
+    React.useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
   let currWidth: number = 0;
@@ -169,13 +168,13 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     setSeparatorValue(calcValueNow());
   };
 
-  const handleMouseup = () => {
+  const handleMouseup = (e: MouseEvent) => {
     if (!isResizing) {
       return;
     }
     drawerRef.current.classList.remove(css(styles.modifiers.resizing));
     isResizing = false;
-    onResize && onResize(currWidth, id);
+    onResize && onResize(e, currWidth, id);
     setInitialVals = true;
     document.removeEventListener('mousemove', callbackMouseMove);
     document.removeEventListener('mouseup', callbackMouseUp);
@@ -187,7 +186,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
     isResizing = false;
-    onResize && onResize(currWidth, id);
+    onResize && onResize(e, currWidth, id);
     document.removeEventListener('touchmove', callbackTouchMove);
     document.removeEventListener('touchend', callbackTouchEnd);
   };
@@ -215,7 +214,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     e.preventDefault();
 
     if (key === 'Escape' || key === 'Enter') {
-      onResize && onResize(currWidth, id);
+      onResize && onResize(e, currWidth, id);
     }
     const panelRect = panel.current.getBoundingClientRect();
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
@@ -249,7 +248,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   }
   return (
     <GenerateId prefix="pf-drawer-panel-">
-      {panelId => (
+      {(panelId) => (
         <div
           id={id || panelId}
           className={css(
@@ -261,7 +260,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className
           )}
           ref={panel}
-          onTransitionEnd={ev => {
+          onTransitionEnd={(ev) => {
             if (!hidden && ev.nativeEvent.propertyName === 'transform') {
               onExpand();
             }

diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx
@@ -26,7 +26,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
     setIsExpanded(false);
   };
 
-  const onResize = (newWidth: number, id: string) => {
+  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
     // eslint-disable-next-line no-console
     console.log(`${id} has new width of: ${newWidth}`);
   };

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx
@@ -33,7 +33,7 @@ export class DrawerResizeDemo extends React.Component<DrawerProps, DrawerResizeD
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onResize = (newWidth: number, id: string) => {
+  onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
     this.setState(
       {
         panelWidth: newWidth