fix: placement right (#771)

* fix: placement right

* test: add palcement right

* Update index.less

* Apply suggestions from code review

* Apply suggestions from code review

* Apply suggestions from code review

* Apply suggestions from code review

---------

Co-authored-by: huan.yang <[email protected]>
Co-authored-by: afc163 <[email protected]>

Author: 3 people

assets/index.less

@@ -437,12 +437,12 @@
     &-placement-topLeft,
     &-placement-topRight {
       .@{prefix-cls}-range-arrow {
-        bottom: @arrow-size / 2 + 1px;
+        bottom: (@arrow-size / 2 + 1px);
         transform: rotate(135deg);
       }
     }
     &-placement-bottomLeft,
-    &-placement-bottomright {
+    &-placement-bottomRight {
       .@{prefix-cls}-range-arrow {
         top: (@arrow-size / 2 + 1px);
         transform: rotate(-45deg);
@@ -451,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& {
@@ -490,7 +488,7 @@
       &::after {
         width: @arrow-size - 2px;
         height: @arrow-size - 2px;
-        border: (@arrow-size - 2px) / 2 solid blue;
+        border: ((@arrow-size - 2px) / 2) solid blue;
         border-color: @background-color @background-color transparent transparent;
       }
     }

src/PickerInput/Popup/index.tsx

@@ -32,7 +32,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
 
   // Range
   activeOffset?: number;
-
+  placement?: string;
   // Direction
   direction?: 'ltr' | 'rtl';
 
@@ -57,6 +57,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     range,
     multiple,
     activeOffset = 0,
+    placement,
 
     // Presets
     presets,
@@ -207,6 +208,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
+    const placementRight = placement?.toLowerCase().endsWith('right');
     renderNode = (
       <div
         ref={wrapperRef}
@@ -215,7 +217,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

@@ -160,6 +160,7 @@ function RangePicker<DateType extends object = any>(
     prefixCls,
     styles,
     classNames,
+    placement,
 
     // Value
     defaultValue,
@@ -564,6 +565,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,14 @@ function RangeSelector<DateType extends object = any>(
         width: offsetWidth,
         [offsetUnit]: offset,
       }));
-
-      onActiveOffset(activeIndex === 0 ? 0 : offset);
+      const placementRight = placement?.toLowerCase().endsWith('right');
+      const startOffset = placementRight
+            ? parentElement?.offsetWidth - 20
+            : 0;
+      const endOffset = placementRight
+            ? offsetWidth - 20
+            : offset;
+      onActiveOffset(activeIndex === 0 ? startOffset : endOffset);
     }
   });
 

tests/__snapshots__/range.spec.tsx.snap

@@ -55,6 +55,46 @@ exports[`Picker.Range icon 1`] = `
 </div>
 `;
 
+exports[`Picker.Range onPanelChange is array args should render correctly in placement right 1`] = `
+<div>
+  <div
+    class="rc-picker rc-picker-range rc-picker-focused"
+  >
+    <div
+      class="rc-picker-input rc-picker-input-active"
+    >
+      <input
+        aria-invalid="false"
+        autocomplete="off"
+        date-range="start"
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="rc-picker-range-separator"
+    >
+      ~
+    </div>
+    <div
+      class="rc-picker-input"
+    >
+      <input
+        aria-invalid="false"
+        autocomplete="off"
+        date-range="end"
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="rc-picker-active-bar"
+      style="position: absolute; width: 0px; left: 0px;"
+    />
+  </div>
+</div>
+`;
+
 exports[`Picker.Range onPanelChange is array args should render correctly in rtl 1`] = `
 <div>
   <div

tests/range.spec.tsx

@@ -603,6 +603,14 @@ describe('Picker.Range', () => {
       const { container } = render(<DayRangePicker direction="rtl" />);
       expect(container).toMatchSnapshot();
     });
+
+    it('should render correctly in placement right', () => {
+      const { container } = render(<DayRangePicker placement="bottomRight" />);
+      openPicker(container);
+
+      expect(container).toMatchSnapshot();
+      expect(document.querySelector('.rc-picker-dropdown-placement-bottomRight')).toBeTruthy();
+    });
   });
 
   it('type can not change before start time', () => {