Merge pull request #77 from perimetre/7.1.0

7.1.0

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.0.1] 2022-07-21
+
+### Changes
+
+- `HorizontalResizeablePanel` also triggers events
+
 ## [7.0.0] 2022-07-21
 
 ### Changes

package.json

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

src/components/HorizontalResizeablePanel/HorizontalResizeablePanel.stories.tsx

@@ -38,7 +38,9 @@ export default {
       control: {
         type: 'text'
       }
-    }
+    },
+    onResize: { action: 'onResize' },
+    onResizeChange: { action: 'onResizeChange' }
   }
 } as Meta;
 

src/components/HorizontalResizeablePanel/index.tsx

@@ -31,6 +31,10 @@ export type HorizontalResizeablePanelProps = React.HTMLAttributes<HTMLDivElement
    * Callback that is called every time the panel is being resized
    */
   onResize?: () => void;
+  /**
+   * Callback for when the isResizing state changes
+   */
+  onResizeChange?: (isResizing: boolean) => void;
 
   children?: (props: { isResizing: boolean }) => React.ReactNode;
 };
@@ -46,6 +50,7 @@ export type HorizontalResizeablePanelProps = React.HTMLAttributes<HTMLDivElement
  * @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.onResizeChange Callback for when the isResizing state changes
  * @param props.children The element children components
  */
 export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps> = ({
@@ -56,13 +61,26 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
   minRightSize,
   maxRightSize,
   onResize,
+  onResizeChange,
   children,
   ...props
 }) => {
   const [isResizing, setIsResizing] = useState(false);
 
   const dragRef = useRef<{ isResizing: boolean; lastDownX: number; resizeSide: 'left' | 'right' } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
+  const didInitialize = useRef<boolean | null>(null);
+
+  useEffect(() => {
+    // If the method exists, and has the component initialized
+    if (onResizeChange && didInitialize.current) {
+      onResizeChange(isResizing);
+    }
+
+    if (!didInitialize.current) {
+      didInitialize.current = true;
+    }
+  }, [isResizing, onResizeChange]);
 
   useEffect(() => {
     /**