fix: Move renderExtraFooter out for rangepicker

Author: zombieJ

examples/range.tsx

@@ -142,6 +142,7 @@ export default () => {
             placeholder={['start...', 'end...']}
             disabled={[false, true]}
             allowEmpty={[false, true]}
+            renderExtraFooter={() => <div>extra footer</div>}
           />
         </div>
       </div>

src/PickerPanel.tsx

@@ -34,6 +34,7 @@ import { PickerModeMap } from './utils/uiUtil';
 import { MonthCellRender } from './panels/MonthPanel/MonthBody';
 import RangeContext from './RangeContext';
 import useMergedState from './hooks/useMergeState';
+import getExtraFooter from './utils/getExtraFooter';
 
 export interface PickerPanelSharedProps<DateType> {
   prefixCls?: string;
@@ -407,14 +408,9 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   }
 
   // ============================ Footer ============================
-  let extraFooter: React.ReactNode;
-  if (renderExtraFooter) {
-    extraFooter = (
-      <div className={`${prefixCls}-footer-extra`}>
-        {renderExtraFooter(mergedMode)}
-      </div>
-    );
-  }
+  const extraFooter: React.ReactNode = inRange
+    ? null
+    : getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
 
   let nowNode: React.ReactNode;
   let todayNode: React.ReactNode;

src/RangePicker.tsx

@@ -39,6 +39,7 @@ import { GenerateConfig } from './generate';
 import { PickerPanelProps } from '.';
 import RangeContext from './RangeContext';
 import useRangeDisabled from './hooks/useRangeDisabled';
+import getExtraFooter from './utils/getExtraFooter';
 
 function reorderValues<DateType>(
   values: RangeValue<DateType>,
@@ -201,6 +202,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     pickerRef,
     inputReadOnly,
     mode,
+    renderExtraFooter,
     onChange,
     onOpenChange,
     onPanelChange,
@@ -771,6 +773,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   function renderPanels() {
     let panels: React.ReactNode;
+    const extraNode = getExtraFooter(
+      prefixCls,
+      mergedModes[activePickerIndex],
+      renderExtraFooter,
+    );
 
     if (picker !== 'time' && !showTime) {
       const viewDate = viewDates[activePickerIndex];
@@ -861,7 +868,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         }}
       >
         <div className={`${prefixCls}-panels`}>{panels}</div>
-
+        {extraNode}
         {rangesNode}
       </div>
     );
@@ -931,6 +938,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     }
   }
 
+  // ============================ Return =============================
   return (
     <PanelContext.Provider
       value={{

src/utils/getExtraFooter.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PanelMode } from '../interface';
+
+export default function getExtraFooter(
+  prefixCls: string,
+  mode: PanelMode,
+  renderExtraFooter?: (mode: PanelMode) => React.ReactNode,
+) {
+  if (!renderExtraFooter) {
+    return null;
+  }
+
+  return (
+    <div className={`${prefixCls}-footer-extra`}>{renderExtraFooter(mode)}</div>
+  );
+}