fix: Fixed the issue of multiple calls to onResizeEnd in lazy mode (ant-design#53708)

Author: wanpan11

components/splitter/SplitBar.tsx

@@ -15,7 +15,7 @@ export interface SplitBarProps {
   endCollapsible: boolean;
   onOffsetStart: (index: number) => void;
   onOffsetUpdate: (index: number, offsetX: number, offsetY: number, lazyEnd?: boolean) => void;
-  onOffsetEnd: VoidFunction;
+  onOffsetEnd: (lazyEnd?: boolean) => void;
   onCollapse: (index: number, type: 'start' | 'end') => void;
   vertical: boolean;
   ariaNow: number;
@@ -95,7 +95,7 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
   const handleLazyEnd = useEvent(() => {
     onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
     setConstrainedOffset(0);
-    onOffsetEnd();
+    onOffsetEnd(true);
   });
 
   React.useEffect(() => {
@@ -138,9 +138,10 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
       const handleTouchEnd = () => {
         if (lazy) {
           handleLazyEnd();
+        } else {
+          onOffsetEnd();
         }
         setStartPos(null);
-        onOffsetEnd();
       };
 
       window.addEventListener('touchmove', handleTouchMove);

components/splitter/Splitter.tsx

@@ -119,8 +119,11 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     }
   });
 
-  const onInternalResizeEnd = useEvent(() => {
-    onOffsetEnd();
+  const onInternalResizeEnd = useEvent((lazyEnd?: boolean) => {
+    if (lazyEnd) {
+      onOffsetEnd();
+      return;
+    }
     onResizeEnd?.(itemPxSizes);
   });
 

components/splitter/__tests__/index.test.tsx

@@ -155,6 +155,7 @@ describe('Splitter', () => {
       // Right
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
       expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
 
       // Left
@@ -176,6 +177,7 @@ describe('Splitter', () => {
       // Right
       mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
       expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
 
       // Left

components/splitter/__tests__/lazy.test.tsx

@@ -116,6 +116,7 @@ describe('Splitter lazy', () => {
 
     // Right
     mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
+    expect(onResizeEnd).toHaveBeenCalledTimes(1);
     expect(onResizeEnd).toHaveBeenCalledWith([70, 30]);
 
     // Left