feat: Support auto adjust offset

Author: zombieJ

assets/index.less

@@ -284,13 +284,25 @@
 
     // Panel
     @arrow-size: 10px;
+
+    &-placement-topLeft {
+      .@{prefix-cls}-range-arrow {
+        bottom: @arrow-size / 2 + 1px;
+        transform: rotate(135deg);
+      }
+    }
+    &-placement-bottomLeft {
+      .@{prefix-cls}-range-arrow {
+        top: @arrow-size / 2 + 1px;
+        transform: rotate(-45deg);
+      }
+    }
+
     .@{prefix-cls}-range-arrow {
       position: absolute;
       width: @arrow-size;
       height: @arrow-size;
       z-index: 1;
-      transform: rotate(-45deg);
-      top: @arrow-size / 2 + 1px;
       left: @arrow-size;
       margin-left: 10px;
       transition: left 0.3s;
@@ -332,6 +344,10 @@
     display: inline-flex;
     position: relative;
 
+    &-wrapper {
+      display: flex;
+    }
+
     .@{prefix-cls}-active-bar {
       background: green;
       bottom: 0;
@@ -347,4 +363,10 @@
       }
     }
   }
+
+  &-panel-container {
+    display: inline-block;
+    vertical-align: top;
+    transition: margin 0.3s;
+  }
 }

examples/range.tsx

@@ -49,7 +49,7 @@ export default () => {
         {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}
       </h2>
 
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', paddingTop: 600 }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
           <RangePicker<Moment>

src/PickerPanel.tsx

@@ -416,7 +416,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   }
 
   let todayNode: React.ReactNode;
-  if (showToday && mergedMode === 'date' && picker === 'date') {
+  if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) {
     todayNode = (
       <a
         className={`${prefixCls}-today-btn`}

src/RangePicker.tsx

@@ -702,24 +702,36 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     );
   }
 
+  let arrowLeft: number = 0;
+  let panelLeft: number = 0;
+  if (
+    activePickerIndex &&
+    startInputDivRef.current &&
+    separatorRef.current &&
+    panelDivRef.current
+  ) {
+    // Arrow offset
+    arrowLeft =
+      startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth;
+
+    if (arrowLeft > panelDivRef.current.offsetWidth) {
+      panelLeft = arrowLeft;
+    }
+  }
+
   function renderPanels() {
+    let panels: React.ReactNode;
+
     if (picker !== 'time' && !showTime) {
       const viewDate = viewDates[activePickerIndex];
       const nextViewDate = getClosingViewDate(viewDate, picker, generateConfig);
       const currentMode = mergedModes[activePickerIndex];
 
       const showDoublePanel = currentMode === picker;
 
-      return (
-        <div className={`${prefixCls}-panel-container`} ref={panelDivRef}>
-          {renderPanel(showDoublePanel ? 'left' : false, {
-            pickerValue: viewDate,
-            onPickerValueChange: (newViewDate: DateType) => {
-              setViewDates(
-                updateValues(viewDates, newViewDate, activePickerIndex),
-              );
-            },
-          })}
+      panels = (
+        <>
+          {}
           {showDoublePanel &&
             renderPanel('right', {
               pickerValue: nextViewDate,
@@ -733,25 +745,27 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
                 );
               },
             })}
-        </div>
+        </>
       );
+    } else {
+      panels = renderPanel();
     }
     return (
-      <div className={`${prefixCls}-panel-container`} ref={panelDivRef}>
-        {renderPanel()}
+      <div
+        className={`${prefixCls}-panel-container`}
+        style={{ marginLeft: panelLeft }}
+        ref={panelDivRef}
+      >
+        {panels}
       </div>
     );
   }
 
-  let arrowLeft: number = 0;
-  if (activePickerIndex && startInputDivRef.current && separatorRef.current) {
-    // Arrow offset
-    arrowLeft =
-      startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth;
-  }
-
   const rangePanel = (
-    <div style={{ minWidth: popupMinWidth }}>
+    <div
+      className={`${prefixCls}-range-wrapper`}
+      style={{ minWidth: popupMinWidth }}
+    >
       <div className={`${prefixCls}-range-arrow`} style={{ left: arrowLeft }} />
 
       {renderPanels()}