fix(splitter): correct collapse behavior in RTL mode (ant-design#52501)

* fix(splitter): correct collapse behavior in RTL mode * chore: update rtl logic * chore: remove unnecessary Optional Chaining * Update components/splitter/hooks/useResizable.ts Signed-off-by: afc163 <[email protected]> --------- Signed-off-by: afc163 <[email protected]> Co-authored-by: afc163 <[email protected]>
code · Jan 21, 2025 · 287d042 · 287d042
1 parent 3dad73f
commit 287d042
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
@@ -87,14 +87,15 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     useSizes(items, containerSize);
 
   // ====================== Resizable =======================
-  const resizableInfos = useResizable(items, itemPxSizes);
+  const resizableInfos = useResizable(items, itemPxSizes, isRTL);
 
   const [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex] = useResize(
     items,
     resizableInfos,
     itemPtgSizes,
     containerSize,
     updateSizes,
+    isRTL,
   );
 
   // ======================== Events ========================

diff --git a/components/splitter/hooks/useResizable.ts b/components/splitter/hooks/useResizable.ts
@@ -8,7 +8,7 @@ export type ResizableInfo = {
   endCollapsible: boolean;
 };
 
-export default function useResizable(items: ItemType[], pxSizes: number[]) {
+export default function useResizable(items: ItemType[], pxSizes: number[], isRTL: boolean) {
   return React.useMemo(() => {
     const resizeInfos: ResizableInfo[] = [];
 
@@ -52,8 +52,8 @@ export default function useResizable(items: ItemType[], pxSizes: number[]) {
 
       resizeInfos[i] = {
         resizable: mergedResizable,
-        startCollapsible: !!startCollapsible,
-        endCollapsible: !!endCollapsible,
+        startCollapsible: !!(isRTL ? endCollapsible : startCollapsible),
+        endCollapsible: !!(isRTL ? startCollapsible : endCollapsible),
       };
     }
 

diff --git a/components/splitter/hooks/useResize.ts b/components/splitter/hooks/useResize.ts
@@ -13,6 +13,7 @@ export default function useResize(
   percentSizes: number[],
   containerSize: number | undefined,
   updateSizes: (sizes: number[]) => void,
+  isRTL: boolean,
 ) {
   const limitSizes = items.map((item) => [item.min, item.max]);
 
@@ -119,9 +120,10 @@ export default function useResize(
   // ======================= Collapse =======================
   const onCollapse = (index: number, type: 'start' | 'end') => {
     const currentSizes = getPxSizes();
+    const adjustedType = isRTL ? (type === 'start' ? 'end' : 'start') : type;
 
-    const currentIndex = type === 'start' ? index : index + 1;
-    const targetIndex = type === 'start' ? index + 1 : index;
+    const currentIndex = adjustedType === 'start' ? index : index + 1;
+    const targetIndex = adjustedType === 'start' ? index + 1 : index;
 
     const currentSize = currentSizes[currentIndex];
     const targetSize = currentSizes[targetIndex];
@@ -146,7 +148,7 @@ export default function useResize(
       const targetCacheCollapsedSize = cacheCollapsedSize.current[index];
       const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
 
-      const shouldUseCache = 
+      const shouldUseCache =
         targetCacheCollapsedSize &&
         targetCacheCollapsedSize <= targetSizeMax &&
         targetCacheCollapsedSize >= targetSizeMin &&