fix: placement right

Author: huan.yang

assets/index.less

@@ -109,7 +109,9 @@
       border: none;
       outline: none;
       cursor: pointer;
-      transition: background 0.3s, border 0.3s;
+      transition:
+        background 0.3s,
+        border 0.3s;
 
       &:hover {
         background: fade(blue, 30%);
@@ -440,7 +442,7 @@
       }
     }
     &-placement-bottomLeft,
-    &-placement-bottomright {
+    &-placement-bottomRight {
       .@{prefix-cls}-range-arrow {
         top: (@arrow-size / 2 + 1px);
         transform: rotate(-45deg);
@@ -449,11 +451,9 @@
 
     .@{prefix-cls}-range-arrow {
       position: absolute;
-      left: @arrow-size;
       z-index: 1;
       width: @arrow-size;
       height: @arrow-size;
-      margin-left: 10px;
       transition: all 0.3s;
 
       .@{prefix-cls}-dropdown-rtl& {

src/PickerInput/Popup/index.tsx

@@ -21,7 +21,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
 
   // Range
   activeOffset?: number;
-
+  placement?: string;
   // Direction
   direction?: 'ltr' | 'rtl';
 
@@ -46,6 +46,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     range,
     multiple,
     activeOffset = 0,
+    placement,
 
     // Presets
     presets,
@@ -196,6 +197,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
+    const placementRight = placement?.toLowerCase().includes('right');
     renderNode = (
       <div
         ref={wrapperRef}
@@ -204,7 +206,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         <div
           ref={arrowRef}
           className={`${prefixCls}-range-arrow`}
-          style={{ [rtl ? 'right' : 'left']: activeOffset }}
+          style={{ [rtl || placementRight ? 'right' : 'left']: activeOffset }}
         />
 
         {/* Watch for container size */}

src/PickerInput/RangePicker.tsx

@@ -157,6 +157,7 @@ function RangePicker<DateType extends object = any>(
     prefixCls,
     styles,
     classNames,
+    placement,
 
     // Value
     defaultValue,
@@ -554,6 +555,7 @@ function RangePicker<DateType extends object = any>(
       range
       multiplePanel={multiplePanel}
       activeOffset={activeOffset}
+      placement={placement}
       // Disabled
       disabledDate={mergedDisabledDate}
       // Focus

src/PickerInput/Selector/RangeSelector.tsx

@@ -35,7 +35,7 @@ export interface RangeSelectorProps<DateType = any> extends SelectorProps<DateTy
 
   // Invalid
   invalid: [boolean, boolean];
-
+  placement?: string;
   // Offset
   /**
    * Trigger when the active bar offset position changed.
@@ -101,6 +101,7 @@ function RangeSelector<DateType extends object = any>(
 
     // Offset
     onActiveOffset,
+    placement,
 
     // Native
     onMouseDown,
@@ -181,10 +182,9 @@ 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 parentElement = offsetParent as HTMLElement;
         const parentStyle = getComputedStyle(parentElement);
 
         offset =
@@ -200,8 +200,16 @@ function RangeSelector<DateType extends object = any>(
         width: offsetWidth,
         [offsetUnit]: offset,
       }));
-
-      onActiveOffset(activeIndex === 0 ? 0 : offset);
+      const rightMode = placement?.toLowerCase()?.includes('right');
+      onActiveOffset(
+        activeIndex === 0
+          ? rightMode
+            ? parentElement.offsetWidth - 20
+            : 0
+          : rightMode
+            ? offsetWidth - 20
+            : offset,
+      );
     }
   });