refactor: Move renderFooter out of Panel

Author: zombieJ

assets/index.less

@@ -122,6 +122,11 @@
     }
   }
 
+  &-footer,
+  &-picker-footer {
+    background: green;
+  }
+
   &-ranges {
     margin: 0;
     padding: 0;
@@ -286,6 +291,10 @@
     position: absolute;
     box-shadow: 0 0 1px red;
 
+    &-range {
+      padding: 10px 0;
+    }
+
     &-hidden {
       display: none;
     }
@@ -339,10 +348,6 @@
           transparent;
       }
     }
-
-    .@{prefix-cls}-panel {
-      margin: 10px 0;
-    }
   }
 
   // ========================================================

src/Picker.tsx

@@ -24,12 +24,14 @@ import PickerTrigger from './PickerTrigger';
 import { isEqual } from './utils/dateUtil';
 import getDataOrAriaProps, { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
-import { PickerMode } from './interface';
+import { PickerMode, PanelMode } from './interface';
 import { getDefaultFormat, getInputSize } from './utils/uiUtil';
 import usePickerInput from './hooks/usePickerInput';
 import useTextValueMapping from './hooks/useTextValueMapping';
 import useMergedState from './hooks/useMergeState';
 import useValueTexts from './hooks/useValueTexts';
+import getExtraFooter from './utils/getExtraFooter';
+import getRanges from './utils/getRanges';
 
 export interface PickerRefConfig {
   focus: () => void;
@@ -136,6 +138,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     value,
     defaultValue,
     open,
+    mode,
     defaultOpen,
     suffixIcon,
     clearIcon,
@@ -144,16 +147,19 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     placeholder,
     getPopupContainer,
     pickerRef,
+    renderExtraFooter,
     onChange,
     onOpenChange,
     onFocus,
     onBlur,
+    onPanelChange,
     onMouseDown,
     onMouseUp,
     onMouseEnter,
     onMouseLeave,
     onContextMenu,
     onClick,
+    onOk,
   } = props as MergedPickerProps<DateType>;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -225,6 +231,20 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     },
   });
 
+  // ============================= Modes =============================
+  const [mergedMode, setInnerMode] = useMergedState<PanelMode>({
+    value: mode,
+    defaultStateValue: picker,
+  });
+
+  const triggerModeChange = (newValue: DateType, newMode: PanelMode) => {
+    setInnerMode(newMode);
+
+    if (onPanelChange) {
+      onPanelChange(newValue, newMode);
+    }
+  };
+
   // ============================ Trigger ============================
   const triggerChange = (newValue: DateType | null) => {
     setSelectedValue(newValue);
@@ -338,8 +358,32 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     onPickerValueChange: undefined,
   };
 
+  const extraNode = getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
+
+  const rangesNode = getRanges({
+    prefixCls,
+    needConfirmButton,
+    okDisabled: !selectedValue,
+    locale,
+    onOk: () => {
+      if (selectedValue) {
+        triggerChange(selectedValue);
+        triggerOpen(false, true);
+
+        if (onOk) {
+          onOk(selectedValue!);
+        }
+      }
+    },
+  });
+
   const panel = (
-    <div className={`${prefixCls}-panel-container`}>
+    <div
+      className={`${prefixCls}-panel-container`}
+      onMouseDown={e => {
+        e.preventDefault();
+      }}
+    >
       <PickerPanel<DateType>
         {...panelProps}
         generateConfig={generateConfig}
@@ -349,11 +393,14 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
         value={selectedValue}
         locale={locale}
         tabIndex={-1}
-        onMouseDown={e => {
-          e.preventDefault();
-        }}
+        mode={mergedMode}
         onChange={setSelectedValue}
+        onPanelChange={triggerModeChange}
       />
+      <div className={`${prefixCls}-picker-footer`}>
+        {extraNode}
+        {rangesNode}
+      </div>
     </div>
   );
 

src/PickerPanel.tsx

@@ -26,6 +26,7 @@ import {
   PickerMode,
   DisabledTime,
   OnPanelChange,
+  Components,
 } from './interface';
 import { isEqual } from './utils/dateUtil';
 import PanelContext from './PanelContext';
@@ -35,6 +36,7 @@ import { MonthCellRender } from './panels/MonthPanel/MonthBody';
 import RangeContext from './RangeContext';
 import useMergedState from './hooks/useMergeState';
 import getExtraFooter from './utils/getExtraFooter';
+import getRanges from './utils/getRanges';
 
 export interface PickerPanelSharedProps<DateType> {
   prefixCls?: string;
@@ -77,10 +79,7 @@ export interface PickerPanelSharedProps<DateType> {
   onPickerValueChange?: (date: DateType) => void;
 
   /** @private Internal usage. Do not use in your production env */
-  components?: {
-    button?: React.ComponentType | string;
-    rangeItem?: React.ComponentType | string;
-  };
+  components?: Components;
 }
 
 export interface PickerPanelBaseProps<DateType>
@@ -143,7 +142,6 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     onMouseDown,
     onPickerValueChange,
     onOk,
-    components = {},
   } = props as MergedPickerPanelProps<DateType>;
 
   const needConfirmButton: boolean =
@@ -174,7 +172,6 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     panelPosition,
     rangedValue,
     hoverRangedValue,
-    rangeList = [],
   } = React.useContext(RangeContext);
   const panelRef = React.useRef<PanelRefProps>({});
 
@@ -424,81 +421,30 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   }
 
   // ============================ Footer ============================
-  const extraFooter: React.ReactNode = inRange
-    ? null
-    : getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
-
+  let extraFooter: React.ReactNode;
   let rangesNode: React.ReactNode;
-  let todayNode: React.ReactNode;
-
-  if (rangeList.length || needConfirmButton) {
-    let presetNode: React.ReactNode;
-    let okNode: React.ReactNode;
-
-    if (rangeList.length) {
-      const Item = (components.rangeItem || 'span') as any;
-
-      presetNode = (
-        <>
-          {rangeList.map(({ label, onClick, onMouseEnter, onMouseLeave }) => (
-            <li key={label} className={`${prefixCls}-range`}>
-              <Item
-                onClick={onClick}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-              >
-                {label}
-              </Item>
-            </li>
-          ))}
-        </>
-      );
-    }
 
-    if (needConfirmButton) {
-      const Button = (components.button || 'button') as any;
-
-      if (!inRange && !presetNode) {
-        presetNode = (
-          <li className={`${prefixCls}-now`}>
-            <a
-              className={`${prefixCls}-now-btn`}
-              onClick={() => {
-                triggerSelect(generateConfig.getNow(), 'submit', true);
-              }}
-            >
-              {locale.now}
-            </a>
-          </li>
-        );
-      }
+  if (!onContextSelect) {
+    extraFooter = getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
+    rangesNode = getRanges({
+      prefixCls,
+      needConfirmButton,
+      okDisabled: !value,
+      locale,
+      onOk: () => {
+        if (value) {
+          triggerSelect(value, 'submit', true);
+          if (onOk) {
+            onOk(value);
+          }
+        }
+      },
+    });
+  }
 
-      okNode = (
-        <li className={`${prefixCls}-ok`}>
-          <Button
-            disabled={!value}
-            onClick={() => {
-              if (value) {
-                triggerSelect(value, 'submit', true);
-                if (onOk) {
-                  onOk(value);
-                }
-              }
-            }}
-          >
-            {locale.ok}
-          </Button>
-        </li>
-      );
-    }
+  let todayNode: React.ReactNode;
 
-    rangesNode = (
-      <ul className={`${prefixCls}-ranges`}>
-        {presetNode}
-        {okNode}
-      </ul>
-    );
-  } else if (showToday && mergedMode === 'date' && picker === 'date') {
+  if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) {
     todayNode = (
       <a
         className={`${prefixCls}-today-btn`}

src/RangeContext.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NullableDateType, RangeValue } from './interface';
 
-interface RangeContextProps {
+export interface RangeContextProps {
   /**
    * Set displayed range value style.
    * Panel only has one value, this is only style effect.
@@ -10,12 +10,6 @@ interface RangeContextProps {
   hoverRangedValue?: RangeValue<any>;
   inRange?: boolean;
   panelPosition?: 'left' | 'right' | false;
-  rangeList?: {
-    label: string;
-    onClick: () => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-  }[];
 }
 
 const RangeContext = React.createContext<RangeContextProps>({});

src/RangePicker.tsx

@@ -34,6 +34,7 @@ import { PickerPanelProps } from '.';
 import RangeContext from './RangeContext';
 import useRangeDisabled from './hooks/useRangeDisabled';
 import getExtraFooter from './utils/getExtraFooter';
+import getRanges from './utils/getRanges';
 import useRangeViewDates from './hooks/useRangeViewDates';
 
 function reorderValues<DateType>(
@@ -464,12 +465,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     }
   };
 
-  const onInternalOk = (date: DateType) => {
-    if (onOk) {
-      onOk(updateValues(selectedValue, date, activePickerIndex));
-    }
-  };
-
   // ============================= Text ==============================
   const sharedTextHooksProps = {
     formatList,
@@ -693,7 +688,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           panelPosition,
           rangedValue: rangeHoverValue || selectedValue,
           hoverRangedValue: panelHoverRangedValue,
-          rangeList,
         }}
       >
         <PickerPanel<DateType>
@@ -730,7 +724,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
             setViewDate(date, activePickerIndex);
           }}
-          onOk={onInternalOk}
+          onOk={null}
           onSelect={undefined}
           onChange={undefined}
           defaultValue={undefined}
@@ -768,6 +762,22 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       renderExtraFooter,
     );
 
+    const rangesNode = getRanges({
+      prefixCls,
+      needConfirmButton,
+      okDisabled: !getValue(selectedValue, activePickerIndex),
+      locale,
+      rangeList,
+      onOk: () => {
+        if (getValue(selectedValue, activePickerIndex)) {
+          triggerChange(selectedValue);
+          if (onOk) {
+            onOk(selectedValue);
+          }
+        }
+      },
+    });
+
     if (picker !== 'time' && !showTime) {
       const viewDate = getViewDate(activePickerIndex);
       const nextViewDate = getClosingViewDate(viewDate, picker, generateConfig);
@@ -809,7 +819,10 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         }}
       >
         <div className={`${prefixCls}-panels`}>{panels}</div>
-        {extraNode}
+        <div className={`${prefixCls}-picker-footer`}>
+          {extraNode}
+          {rangesNode}
+        </div>
       </div>
     );
   }