refactor: Move Picker footer into Panel for compitable

Author: zombieJ

examples/basic.tsx

@@ -44,6 +44,8 @@ export default () => {
             generateConfig={momentGenerateConfig}
             locale={zhCN}
             allowClear
+            showToday
+            renderExtraFooter={() => 'extra'}
           />
         </div>
         <div style={{ margin: '0 8px' }}>

src/PanelContext.tsx

@@ -16,6 +16,7 @@ export interface PanelContextProps {
   onDateMouseEnter?: (date: any) => void;
   onDateMouseLeave?: (date: any) => void;
   onSelect?: OnSelect<any>;
+  hideRanges?: boolean;
 }
 
 const PanelContext = React.createContext<PanelContextProps>({});

src/Picker.tsx

@@ -24,14 +24,12 @@ import PickerTrigger from './PickerTrigger';
 import { isEqual } from './utils/dateUtil';
 import getDataOrAriaProps, { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
-import { PickerMode, PanelMode } from './interface';
+import { PickerMode } 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;
@@ -138,7 +136,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     value,
     defaultValue,
     open,
-    mode,
     defaultOpen,
     suffixIcon,
     clearIcon,
@@ -147,21 +144,16 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     placeholder,
     getPopupContainer,
     pickerRef,
-    renderExtraFooter,
     onChange,
     onOpenChange,
     onFocus,
     onBlur,
-    onPanelChange,
     onMouseDown,
     onMouseUp,
     onMouseEnter,
     onMouseLeave,
     onContextMenu,
     onClick,
-    onSelect,
-    onOk,
-    components,
   } = props as MergedPickerProps<DateType>;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -233,20 +225,6 @@ 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);
@@ -360,34 +338,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     onPickerValueChange: undefined,
   };
 
-  const extraNode = getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
-
-  const rangesNode = getRanges({
-    prefixCls,
-    components,
-    needConfirmButton,
-    okDisabled: !selectedValue,
-    locale,
-    onNow: () => {
-      const now = generateConfig.getNow();
-      if (onSelect) {
-        onSelect(now);
-      }
-      triggerChange(now);
-      triggerOpen(false, true);
-    },
-    onOk: () => {
-      if (selectedValue) {
-        triggerChange(selectedValue);
-        triggerOpen(false, true);
-
-        if (onOk) {
-          onOk(selectedValue!);
-        }
-      }
-    },
-  });
-
   const panel = (
     <div
       className={`${prefixCls}-panel-container`}
@@ -404,14 +354,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
         value={selectedValue}
         locale={locale}
         tabIndex={-1}
-        mode={mergedMode}
         onChange={setSelectedValue}
-        onPanelChange={triggerModeChange}
       />
-      <div className={`${prefixCls}-footer`}>
-        {extraNode}
-        {rangesNode}
-      </div>
     </div>
   );
 

src/PickerPanel.tsx

@@ -166,6 +166,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     operationRef,
     panelRef: panelDivRef,
     onSelect: onContextSelect,
+    hideRanges,
   } = panelContext;
 
   const {
@@ -419,14 +420,19 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   let extraFooter: React.ReactNode;
   let rangesNode: React.ReactNode;
 
-  if (!onContextSelect) {
+  if (!hideRanges) {
     extraFooter = getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
     rangesNode = getRanges({
       prefixCls,
       components,
       needConfirmButton,
       okDisabled: !mergedValue,
       locale,
+      onNow:
+        needConfirmButton &&
+        (() => {
+          triggerSelect(generateConfig.getNow(), 'submit');
+        }),
       onOk: () => {
         if (mergedValue) {
           triggerSelect(mergedValue, 'submit', true);

src/RangePicker.tsx

@@ -915,6 +915,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         hideHeader: picker === 'time',
         onDateMouseEnter,
         onDateMouseLeave,
+        hideRanges: true,
         onSelect: onContextSelect,
       }}
     >

src/utils/getRanges.tsx

@@ -6,8 +6,8 @@ export interface RangesProps {
   rangeList?: RangeList;
   components?: Components;
   needConfirmButton: boolean;
-  onNow?: null | (() => void);
-  onOk?: null | (() => void);
+  onNow?: null | (() => void) | false;
+  onOk?: null | (() => void) | false;
   okDisabled?: boolean;
   locale: Locale;
 }