fix: arrow position when placement is right again!! (#826)

react-component · Jun 12, 2024 · 44a4a47 · 44a4a47
1 parent 77ac25b
commit 44a4a47
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
@@ -37,7 +37,6 @@ export default () => {
     value,
     onChange,
     onCalendarChange,
-    placement: 'topRight',
   };
 
   const rangePickerRef = React.useRef<PickerRef>(null);

diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
@@ -208,7 +208,8 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
-    const placementRight = placement?.toLowerCase().endsWith('right') || rtl;
+    const placementRight = placement?.toLowerCase().endsWith('right');
+    const offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
     renderNode = (
       <div
         ref={wrapperRef}
@@ -217,7 +218,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         <div
           ref={arrowRef}
           className={`${prefixCls}-range-arrow`}
-          style={{ [placementRight ? 'insetInlineEnd' : 'insetInlineStart']: activeOffset }}
+          style={{ [offsetUnit]: activeOffset }}
         />
 
         {/* Watch for container size */}

diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
@@ -170,8 +170,8 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const placementRight = placement?.toLowerCase().endsWith('right') || rtl;
-  const offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
+  const placementRight = placement?.toLowerCase().endsWith('right');
+  const offsetUnit = rtl ? 'insetInlineEnd' : 'insetInlineStart';
 
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
     position: 'absolute',

diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
@@ -89,7 +89,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; inset-inline-end: 0;"
+      style="position: absolute; width: 0px; inset-inline-start: 0;"
     />
   </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up @@
         </div>
         <div
           class="rc-picker-active-bar"
-          style="position: absolute; width: 0px; inset-inline-end: 0;"
+          style="position: absolute; width: 0px; inset-inline-start: 0;"
         />
       </div>
     </div>
@@ Expand Down @@