From 67b3c38265194baaa65ddc4a4d9cb132798f8bda Mon Sep 17 00:00:00 2001
From: "duncan@dtail-design.nl" <duncan@dtail-design.nl>
Date: Sun, 31 Mar 2024 00:21:28 +0100
Subject: [PATCH] fix(resize): recalculates after window resize
---
libs/shared/lib/components/Resizable.tsx | 17 +++++++++++++++--
1 file changed, 15 insertions(+), 2 deletions(-)
diff --git a/libs/shared/lib/components/Resizable.tsx b/libs/shared/lib/components/Resizable.tsx
index 8fb998b29..6f6ec6e11 100644
--- a/libs/shared/lib/components/Resizable.tsx
+++ b/libs/shared/lib/components/Resizable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
type Props = {
children: React.ReactNode;
@@ -31,6 +31,19 @@ export const Resizable = ({
const [firstSize, setFirstSize] = React.useState<number>(0);
const [secondSize, setSecondSize] = React.useState<number>(0);
const [dragging, setDragging] = React.useState<boolean>(false);
+ const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+ useEffect(() => {
+ const handleResize = () => {
+ setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
useEffect(() => {
if (ref.current) {
@@ -44,7 +57,7 @@ export const Resizable = ({
setSecondSize(rect.height * (1 / _defaultProportion) - divisorSize);
}
}
- }, [ref.current]);
+ }, [ref.current, windowSize]);
function onMouseDown(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
setDragging(true);
--
GitLab