feat: Add more help className

Author: zombieJ

examples/range.tsx

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

src/PickerPanel.tsx

@@ -152,9 +152,13 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   const panelContext = React.useContext(PanelContext);
   const { operationRef, panelRef: panelDivRef } = panelContext;
 
-  const { extraFooterSelections, inRange, panelPosition } = React.useContext(
-    RangeContext,
-  );
+  const {
+    extraFooterSelections,
+    inRange,
+    panelPosition,
+    rangedValue,
+    hoverRangedValue,
+  } = React.useContext(RangeContext);
   const panelRef = React.useRef<PanelRefProps>({});
 
   // Handle init logic
@@ -467,7 +471,12 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     >
       <div
         tabIndex={tabIndex}
-        className={classNames(`${prefixCls}-panel`, className)}
+        className={classNames(`${prefixCls}-panel`, className, {
+          [`${prefixCls}-panel-has-range`]:
+            rangedValue && rangedValue[0] && rangedValue[1],
+          [`${prefixCls}-panel-has-range-hover`]:
+            hoverRangedValue && hoverRangedValue[0] && hoverRangedValue[1],
+        })}
         style={style}
         onKeyDown={onInternalKeyDown}
         onBlur={onInternalBlur}

src/RangePicker.tsx

@@ -714,7 +714,10 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     arrowLeft =
       startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth;
 
-    if (arrowLeft > panelDivRef.current.offsetWidth) {
+    if (
+      panelDivRef.current.offsetWidth &&
+      arrowLeft > panelDivRef.current.offsetWidth
+    ) {
       panelLeft = arrowLeft;
     }
   }
@@ -731,7 +734,14 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
       panels = (
         <>
-          {}
+          {renderPanel(showDoublePanel ? 'left' : false, {
+            pickerValue: viewDate,
+            onPickerValueChange: newViewDate => {
+              setViewDates(
+                updateValues(viewDates, newViewDate, activePickerIndex),
+              );
+            },
+          })}
           {showDoublePanel &&
             renderPanel('right', {
               pickerValue: nextViewDate,