fix: correct width calculation in resize component (#4170)

opensumi · Nov 15, 2024 · f81dbbf · f81dbbf
1 parent 36a2020
commit f81dbbf
Showing 1 changed file with 24 additions and 25 deletions.
diff --git a/packages/core-browser/src/components/resize/resize.tsx b/packages/core-browser/src/components/resize/resize.tsx
@@ -258,34 +258,33 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
       const currentPrev = prevElement.current!.clientWidth;
       const currentNext = nextElement.current!.clientWidth;
 
-      const nextTotolWidth = +nextElement.current!.style.width!.replace('%', '');
-      const prevTotalWidth = +prevElement.current!.style.width!.replace('%', '');
-      fastdom.mutate(() => {
-        const totalSize = currentPrev + currentNext;
-        if (props.flexMode) {
-          const prevWidth = props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
-          const nextWidth = props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
-          flexModeSetSize(prevWidth, nextWidth, true);
-        } else {
-          const currentTotalWidth = nextTotolWidth + prevTotalWidth;
-
-          if (isLatter) {
-            nextElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
-            prevElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
-          } else {
-            prevElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
-            nextElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
-          }
-        }
+      const totalSize = currentPrev + currentNext;
+      if (props.flexMode) {
+        const prevWidth = props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
+        const nextWidth = props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
+        flexModeSetSize(prevWidth, nextWidth, true);
+      } else {
+        const nextTotolWidth = +nextElement.current!.style.width!.replace('%', '');
+        const prevTotalWidth = +prevElement.current!.style.width!.replace('%', '');
+
+        const currentTotalWidth = nextTotolWidth + prevTotalWidth;
+
         if (isLatter) {
-          handleZeroSize(totalSize - size, size);
+          nextElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
+          prevElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
         } else {
-          handleZeroSize(size, totalSize - size);
+          prevElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
+          nextElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
         }
-        if (props.onResize) {
-          props.onResize(prevElement.current!, nextElement.current!);
-        }
-      });
+      }
+      if (isLatter) {
+        handleZeroSize(totalSize - size, size);
+      } else {
+        handleZeroSize(size, totalSize - size);
+      }
+      if (props.onResize) {
+        props.onResize(prevElement.current!, nextElement.current!);
+      }
     });
   };