feat(Splitter): add lazy mode

components/splitter/SplitBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
@@ -20,6 +20,8 @@ export interface SplitBarProps {
   ariaNow: number;
   ariaMin: number;
   ariaMax: number;
+  lazy?: boolean;
+  containerSize: number;
 }
 
 function getValidNumber(num: number | undefined): number {
@@ -42,12 +44,16 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     onOffsetUpdate,
     onOffsetEnd,
     onCollapse,
+    lazy,
+    containerSize,
   } = props;
 
   const splitBarPrefixCls = `${prefixCls}-bar`;
 
   // ======================== Resize ========================
   const [startPos, setStartPos] = useState<[x: number, y: number] | null>(null);
+  const currentOffsetRef = useRef<[number, number]>([0, 0]);
+  const previewRef = useRef<HTMLDivElement>(null);
 
   const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
     if (resizable && e.currentTarget) {
@@ -64,32 +70,85 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     }
   };
 
+  // Updated constraint calculation
+  const getConstrainedOffset = (rawOffset: number) => {
+    const currentPos = (containerSize * ariaNow) / 100;
+    const newPos = currentPos + rawOffset;
+
+    // Calculate available space
+    const minAllowed = Math.max(0, (containerSize * ariaMin) / 100);
+    const maxAllowed = Math.min(containerSize, (containerSize * ariaMax) / 100);
+
+    // Constrain new position within bounds
+    const clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
+    return clampedPos - currentPos;
+  };
+
   React.useEffect(() => {
     if (startPos) {
       const onMouseMove = (e: MouseEvent) => {
         const { pageX, pageY } = e;
         const offsetX = pageX - startPos[0];
         const offsetY = pageY - startPos[1];
 
-        onOffsetUpdate(index, offsetX, offsetY);
+        if (lazy) {
+          currentOffsetRef.current = [offsetX, offsetY];
+
+          if (previewRef.current) {
+            previewRef.current.style.transform = vertical
+              ? `translateY(${getConstrainedOffset(offsetY)}px)`
+              : `translateX(${getConstrainedOffset(offsetX)}px)`;
+            previewRef.current.style.display = 'block';
+          }
+        } else {
+          onOffsetUpdate(index, offsetX, offsetY);
+        }
       };
 
       const onMouseUp = () => {
+        if (lazy) {
+          const [offsetX, offsetY] = currentOffsetRef.current;
+          onOffsetUpdate(index, offsetX, offsetY);
+          currentOffsetRef.current = [0, 0];
+          if (previewRef.current) {
+            previewRef.current.style.transform = '';
+            previewRef.current.style.display = 'none';
+          }
+        }
         setStartPos(null);
         onOffsetEnd();
       };
 
       const handleTouchMove = (e: TouchEvent) => {
-        if (e.touches.length === 1) {
-          const touch = e.touches[0];
-          const offsetX = touch.pageX - startPos[0];
-          const offsetY = touch.pageY - startPos[1];
-
+        if (e.touches.length !== 1) return;
+
+        const touch = e.touches[0];
+        const offsetX = touch.pageX - startPos[0];
+        const offsetY = touch.pageY - startPos[1];
+
+        if (lazy) {
+          currentOffsetRef.current = [offsetX, offsetY];
+          if (previewRef.current) {
+            previewRef.current.style.transform = vertical
+              ? `translateY(${getConstrainedOffset(offsetY)}px)`
+              : `translateX(${getConstrainedOffset(offsetX)}px)`;
+            previewRef.current.style.display = 'block';
+          }
+        } else {
           onOffsetUpdate(index, offsetX, offsetY);
         }
       };
 
       const handleTouchEnd = () => {
+        if (lazy) {
+          const [offsetX, offsetY] = currentOffsetRef.current;
+          onOffsetUpdate(index, offsetX, offsetY);
+          currentOffsetRef.current = [0, 0];
+          if (previewRef.current) {
+            previewRef.current.style.transform = '';
+            previewRef.current.style.display = 'none';
+          }
+        }
         setStartPos(null);
         onOffsetEnd();
       };
@@ -106,7 +165,7 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
         window.removeEventListener('touchend', handleTouchEnd);
       };
     }
-  }, [startPos]);
+  }, [startPos, lazy]);
 
   // ======================== Render ========================
   const StartIcon = vertical ? UpOutlined : LeftOutlined;
@@ -120,6 +179,8 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
       aria-valuemin={getValidNumber(ariaMin)}
       aria-valuemax={getValidNumber(ariaMax)}
     >
+      {lazy && <div ref={previewRef} className={`${splitBarPrefixCls}-preview`} />}
+
       <div
         className={classNames(`${splitBarPrefixCls}-dragger`, {
           [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,

components/splitter/Splitter.tsx

@@ -28,6 +28,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     onResizeStart,
     onResize,
     onResizeEnd,
+    lazy,
   } = props;
 
   const { getPrefixCls, direction, splitter } = React.useContext(ConfigContext);
@@ -170,6 +171,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
 
             splitBar = (
               <SplitBar
+                lazy={lazy}
                 index={idx}
                 active={movingIndex === idx}
                 prefixCls={prefixCls}
@@ -190,6 +192,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
                 }}
                 onOffsetEnd={onInternalResizeEnd}
                 onCollapse={onInternalCollapse}
+                containerSize={containerSize || 0}
               />
             );
           }

components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -562,6 +562,128 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
 
 exports[`renders components/splitter/demo/group.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/splitter/demo/lazy.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  style="width: 100%;"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-splitter ant-splitter-horizontal"
+      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
+    >
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: 40%; flex-grow: 0;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            First
+          </h5>
+        </div>
+      </div>
+      <div
+        aria-valuemax="0"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        class="ant-splitter-bar"
+        role="separator"
+      >
+        <div
+          class="ant-splitter-bar-preview"
+          style="display: none;"
+        />
+        <div
+          class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
+        />
+      </div>
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: auto; flex-grow: 1;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            Second
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-splitter ant-splitter-vertical"
+      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
+    >
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: 40%; flex-grow: 0;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            First
+          </h5>
+        </div>
+      </div>
+      <div
+        aria-valuemax="0"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        class="ant-splitter-bar"
+        role="separator"
+      >
+        <div
+          class="ant-splitter-bar-preview"
+          style="display: none;"
+        />
+        <div
+          class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
+        />
+      </div>
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: auto; flex-grow: 1;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            Second
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/splitter/demo/lazy.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/splitter/demo/multiple.tsx extend context correctly 1`] = `
 <div
   class="ant-splitter ant-splitter-horizontal"