refactor: now expects a function as its children

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.0.0] 2022-07-21
+
+### Changes
+
+- `HorizontalResizeablePanel` now expects a function as its children
+
 ## [6.0.1] 2022-07-19
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/HorizontalResizeablePanel/HorizontalResizeablePanel.stories.tsx

@@ -53,16 +53,20 @@ export default {
  */
 const Template: Story = ({ width, height, backgroundColor, className, ...props }) => {
   return (
-    <div
-      className={classnames({
-        [heightClassnameMap[height || 'auto']]: height && height.length > 0,
-        [widthClassnameMap[width || 'auto']]: width && width.length > 0
-      })}
-    >
+    <div>
       <HorizontalResizeablePanel
         {...props}
-        className={classnames(backgroundColorClassnameMap[backgroundColor || 'transparent'], className)}
-      />
+        className={classnames(
+          backgroundColorClassnameMap[backgroundColor || 'transparent'],
+          {
+            [heightClassnameMap[height || 'auto']]: height && height.length > 0,
+            [widthClassnameMap[width || 'auto']]: width && width.length > 0
+          },
+          className
+        )}
+      >
+        {({ isResizing }) => <span>isResizing: {`${isResizing}`}</span>}
+      </HorizontalResizeablePanel>
     </div>
   );
 };

src/components/HorizontalResizeablePanel/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type HorizontalResizeablePanelProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -27,6 +27,12 @@ export type HorizontalResizeablePanelProps = React.HTMLAttributes<HTMLDivElement
    * The maximum width allowed when resizing from the right border
    */
   maxRightSize?: number;
+  /**
+   * Callback that is called every time the panel is being resized
+   */
+  onResize?: () => void;
+
+  children?: (props: { isResizing: boolean }) => React.ReactNode;
 };
 
 /**
@@ -39,6 +45,7 @@ export type HorizontalResizeablePanelProps = React.HTMLAttributes<HTMLDivElement
  * @param props.maxLeftSize The maximum width allowed when resizing from the left border
  * @param props.minRightSize The minimum width allowed when resizing from the right border
  * @param props.maxRightSize The maximum width allowed when resizing from the right border
+ * @param props.onResize Callback that is called every time the panel is being resized
  * @param props.children The element children components
  */
 export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps> = ({
@@ -48,9 +55,12 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
   maxLeftSize,
   minRightSize,
   maxRightSize,
+  onResize,
   children,
   ...props
 }) => {
+  const [isResizing, setIsResizing] = useState(false);
+
   const dragRef = useRef<{ isResizing: boolean; lastDownX: number; resizeSide: 'left' | 'right' } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -64,6 +74,8 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
       // we don't want to do anything if we aren't resizing.
       if (!ref.current || !dragRef.current?.isResizing) return;
 
+      if (onResize) onResize();
+
       if (dragRef.current.resizeSide === 'left') {
         let width = ref.current.clientWidth + (e.clientX - ref.current.offsetLeft) * -1;
 
@@ -97,6 +109,7 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
     const onMouseUp = () => {
       // Resets the values
       dragRef.current = { isResizing: false, lastDownX: 0, resizeSide: 'left' };
+      setIsResizing(false);
     };
 
     window.addEventListener('mousemove', onMouseMove, false);
@@ -105,10 +118,11 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
       window.removeEventListener('mousemove', onMouseMove);
       window.removeEventListener('mouseup', onMouseUp);
     };
-  }, [maxLeftSize, maxRightSize, minLeftSize, minRightSize]);
+  }, [maxLeftSize, maxRightSize, minLeftSize, minRightSize, onResize]);
 
   const onMove = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, resizeSide: 'left' | 'right') => {
     dragRef.current = { isResizing: true, lastDownX: e.clientX, resizeSide };
+    setIsResizing(true);
   }, []);
 
   return (
@@ -127,7 +141,7 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
           onMouseDown={(e) => onMove(e, 'right')}
         />
       )}
-      {children}
+      {children && children({ isResizing })}
     </div>
   );
 };