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

react-component · Jun 11, 2024 · b7cd8d6 · b7cd8d6
1 parent 53396ca
commit b7cd8d6
Show file tree

Hide file tree

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

diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
@@ -170,7 +170,7 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const offsetUnit = rtl ? 'right' : 'left';
+  const offsetUnit = rtl ? 'insetInlineEnd' : 'insetInlineStart';
 
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
     position: 'absolute',
@@ -182,27 +182,14 @@ function RangeSelector<DateType extends object = any>(
     const input = getInput(activeIndex);
     if (input) {
       const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
-      let offset = offsetLeft;
-      const parentElement = offsetParent as HTMLElement;
-      if (rtl) {
-        const parentStyle = getComputedStyle(parentElement);
-
-        offset =
-          parentElement.offsetWidth -
-          parseFloat(parentStyle.borderRightWidth) -
-          parseFloat(parentStyle.borderLeftWidth) -
-          offsetLeft -
-          offsetWidth;
-      }
-
+      const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
       setActiveBarStyle((ori) => ({
         ...ori,
         width: offsetWidth,
-        [offsetUnit]: offset,
+        [offsetUnit]: offsetLeft,
       }));
       const placementRight = placement?.toLowerCase().endsWith('right');
-      const startOffset = placementRight ? parentElement?.offsetWidth : 0;
-      onActiveOffset(activeIndex === 0 ? startOffset : offset);
+      onActiveOffset(placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft);
     }
   });
 

diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`Picker.Range icon 1`] = `
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; left: 0px;"
+      style="position: absolute; width: 0px; inset-inline-start: 0;"
     />
     <span
       class="rc-picker-suffix"
@@ -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; left: 0px;"
+      style="position: absolute; width: 0px; inset-inline-start: 0;"
     />
   </div>
 </div>
@@ -129,7 +129,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; right: 0px;"
+      style="position: absolute; width: 0px; inset-inline-end: 0;"
     />
   </div>
 </div>
@@ -170,7 +170,7 @@ exports[`Picker.Range panelRender 1`] = `
       </div>
       <div
         class="rc-picker-active-bar"
-        style="position: absolute; width: 0px; left: 0px;"
+        style="position: absolute; width: 0px; inset-inline-start: 0;"
       />
     </div>
   </div>
@@ -236,7 +236,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
       </div>
       <div
         class="rc-picker-active-bar"
-        style="position: absolute; width: 0px; left: 0px;"
+        style="position: absolute; width: 0px; inset-inline-start: 0;"
       />
     </div>
   </div>
@@ -1293,7 +1293,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
       </div>
       <div
         class="rc-picker-active-bar"
-        style="position: absolute; width: 0px; left: 0px;"
+        style="position: absolute; width: 0px; inset-inline-start: 0;"
       />
     </div>
   </div>