Merge pull request #522 from Original-Recipe/fix-DynamicResizer

feat: Fix the issue of abnormal height in DynamicResizer

packages/lb-components/src/components/DynamicResizer/hooks/useDrag.tsx

@@ -31,11 +31,15 @@ const useDrag = ({
   const [localTopHeight, setLocalTopHeight] = useLocalStorageState<number | undefined>(cacheKey);
 
   // Hide scrollbar at the beginning of drag and drop
-  const onDragStart: DraggableEventHandler = useCallback(() => {
-    if (containerRef.current) {
-      containerRef.current.classList.add('hide-scrollbar');
-    }
-  }, [containerRef]);
+  const onDragStart: DraggableEventHandler = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (containerRef.current) {
+        containerRef.current.classList.add('hide-scrollbar');
+      }
+    },
+    [containerRef],
+  );
 
   const onDrag: DraggableEventHandler = useCallback(
     (e, node) => {

packages/lb-components/src/components/DynamicResizer/hooks/useUpdateHeight.ts

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState, RefObject, useCallback } from 'react';
 import { useLocalStorageState } from 'ahooks';
+// Set minimum height to avoid magic numbers
+const MINIMUM_HEIGHT = 0.00001;
 
 const useUpdateHeight = (
   containerRef: RefObject<HTMLDivElement>,
@@ -8,27 +10,30 @@ const useUpdateHeight = (
   defaultHeight: number,
   cacheKey: string,
 ) => {
+  // The height of the top and bottom areas
   const [topHeight, setTopHeight] = useState<number>(0);
   const [bottomHeight, setBottomHeight] = useState<number>(0);
+  // Maximum and minimum height restrictions
   const [limitMinTopHeight, setLimitMinTopHeight] = useState<number>(0);
   const [limitMinBottomHeight, setLimitMinBottomHeight] = useState<number>(0);
+  // Cache height
   const [localTopHeight, setLocalTopHeight] = useLocalStorageState<number | undefined>(cacheKey);
+  // Flag to track first render
+  const [isInitialSetupDone, setIsInitialSetupDone] = useState<boolean>(false);
 
   // init top height
   useEffect(() => {
     initPropHeight();
-    const cacheTopHeight = localTopHeight;
-    let newTopHeight = 0;
+    setIsInitialSetupDone(true);
+  }, []);
 
-    if (cacheTopHeight !== undefined && cacheTopHeight !== null) {
-      const cacheHeight = isNaN(Number(cacheTopHeight)) ? 0 : Number(cacheTopHeight);
-      newTopHeight = cacheHeight;
-    } else {
-      newTopHeight = topHeight || defaultHeight;
+  useEffect(() => {
+    if (isInitialSetupDone) {
+      const newTopHeight = calcHeightPriority();
+      updateELHeight(newTopHeight);
+      setLocalTopHeight(newTopHeight);
     }
-
-    updateELHeight(newTopHeight);
-  }, []);
+  }, [isInitialSetupDone]);
 
   // divider‘s position
   const position = useMemo(() => ({ x: 0, y: topHeight }), [topHeight]);
@@ -39,10 +44,10 @@ const useUpdateHeight = (
       top: limitMinTopHeight,
       bottom: (containerRef.current?.offsetHeight || 0) - limitMinBottomHeight,
     }),
-    [topHeight, containerRef],
+    [limitMinTopHeight, containerRef],
   );
 
-  // calc style
+  /* -----------------------calc style-------------------------- */
   const topStyle = useMemo(() => {
     return {
       height: topHeight + 'px',
@@ -71,11 +76,35 @@ const useUpdateHeight = (
       }
 
       // The minTopHeight value cannot be set to 0, otherwise the draggable cannot be dragged. The solution is to add a minimum decimal
-      setLimitMinTopHeight(calcMinTopHeight || 0.00001);
+      setLimitMinTopHeight(calcMinTopHeight || MINIMUM_HEIGHT);
       setLimitMinBottomHeight(calcMinBottomHeight);
     }
   };
 
+  // calc Height's priority
+  const calcHeightPriority = useCallback(() => {
+    let newTopHeight = 0;
+    // Determine if there is a cached value
+    if (localTopHeight !== undefined && localTopHeight !== null) {
+      const cacheHeight = isNaN(Number(localTopHeight)) ? 0 : Number(localTopHeight);
+      newTopHeight = cacheHeight;
+    } else {
+      newTopHeight = defaultHeight;
+    }
+    // If it is less than the minimum value, then take the minimum value
+    if (newTopHeight < limitMinTopHeight) {
+      newTopHeight = limitMinTopHeight;
+    }
+    // If it is greater than the outer container, then take the height/2 of the outer container
+    if (containerRef) {
+      if (newTopHeight >= (containerRef?.current?.offsetHeight || 0)) {
+        newTopHeight = (containerRef.current?.offsetHeight || 0) / 2;
+      }
+    }
+    // Limit cannot be 0
+    return newTopHeight || MINIMUM_HEIGHT;
+  }, [containerRef, topHeight, limitMinTopHeight, localTopHeight, defaultHeight]);
+
   // Update top and bottom height
   const updateELHeight = useCallback(
     (newTopHeight: number) => {