From 603afee86a83ecc583b5c520f8d5bff6067f1eef Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Thu, 21 Jul 2022 13:43:01 -0400
Subject: [PATCH] refactor:  now expects a function as its children

---
 CHANGELOG.md                                  |  6 ++++++
 package.json                                  |  2 +-
 .../HorizontalResizeablePanel.stories.tsx     | 20 +++++++++++--------
 .../HorizontalResizeablePanel/index.tsx       | 20 ++++++++++++++++---
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6648efb..84352e8 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package.json b/package.json
index 4e0855a..0591afa 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/HorizontalResizeablePanel/HorizontalResizeablePanel.stories.tsx b/src/components/HorizontalResizeablePanel/HorizontalResizeablePanel.stories.tsx
index 3d0ce5e..129ca4f 100644
--- a/src/components/HorizontalResizeablePanel/HorizontalResizeablePanel.stories.tsx
+++ b/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>
   );
 };
diff --git a/src/components/HorizontalResizeablePanel/index.tsx b/src/components/HorizontalResizeablePanel/index.tsx
index 981104d..fbc3d76 100644
--- a/src/components/HorizontalResizeablePanel/index.tsx
+++ b/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>
   );
 };