feat: Close first Picker will open last Picker

Author: zombieJ

examples/range.tsx

@@ -39,6 +39,8 @@ export default () => {
     onCalendarChange,
   };
 
+  const rangePickerRef = React.useRef<RangePicker<Moment>>(null);
+
   return (
     <div>
       <h1>
@@ -49,7 +51,20 @@ export default () => {
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
-          <RangePicker<Moment> {...sharedProps} locale={zhCN} allowClear />
+          <RangePicker<Moment>
+            {...sharedProps}
+            locale={zhCN}
+            allowClear
+            ref={rangePickerRef}
+          />
+          <button
+            type="button"
+            onClick={() => {
+              rangePickerRef.current!.focus();
+            }}
+          >
+            Focus!
+          </button>
         </div>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>

src/Picker.tsx

@@ -31,6 +31,12 @@ import {
   addGlobalMouseDownEvent,
 } from './utils/uiUtil';
 
+export interface PickerRefConfig {
+  focus: () => void;
+  blur: () => void;
+  open: () => void;
+}
+
 export interface PickerSharedProps<DateType> extends React.AriaAttributes {
   dropdownClassName?: string;
   dropdownAlign?: AlignType;
@@ -70,7 +76,7 @@ export interface PickerSharedProps<DateType> extends React.AriaAttributes {
 
   // Internal
   /** @private Internal usage, do not use in production mode!!! */
-  inputRef?: React.Ref<HTMLInputElement>;
+  pickerRef?: React.MutableRefObject<PickerRefConfig>;
 
   // WAI-ARIA
   role?: string;
@@ -134,7 +140,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     disabledDate,
     placeholder,
     getPopupContainer,
-    inputRef,
+    pickerRef,
     onChange,
     onOpenChange,
     onFocus,
@@ -147,6 +153,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     onClick,
   } = props as MergedPickerProps<DateType>;
 
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
   // ============================= State =============================
   const formatList = toArray(
     getDefaultFormat(format, picker, showTime, use12Hours),
@@ -416,6 +424,25 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     }),
   );
 
+  // ============================ Private ============================
+  if (pickerRef) {
+    pickerRef.current = {
+      focus: () => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      blur: () => {
+        if (inputRef.current) {
+          inputRef.current.blur();
+        }
+      },
+      open: () => {
+        triggerOpen(true);
+      },
+    };
+  }
+
   // ============================= Panel =============================
   const panelProps = {
     // Remove `picker` & `format` here since TimePicker is little different with other panel
@@ -519,22 +546,33 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
 // Wrap with class component to enable pass generic with instance method
 class Picker<DateType> extends React.Component<PickerProps<DateType>> {
-  inputRef = React.createRef<HTMLInputElement>();
+  pickerRef = React.createRef<PickerRefConfig>();
 
   focus = () => {
-    if (this.inputRef.current) {
-      this.inputRef.current.focus();
+    if (this.pickerRef.current) {
+      this.pickerRef.current.focus();
     }
   };
 
   blur = () => {
-    if (this.inputRef.current) {
-      this.inputRef.current.blur();
+    if (this.pickerRef.current) {
+      this.pickerRef.current.blur();
+    }
+  };
+
+  open = () => {
+    if (this.pickerRef.current) {
+      this.pickerRef.current.open();
     }
   };
 
   render() {
-    return <InnerPicker<DateType> {...this.props} inputRef={this.inputRef} />;
+    return (
+      <InnerPicker<DateType>
+        {...this.props}
+        pickerRef={this.pickerRef as React.MutableRefObject<PickerRefConfig>}
+      />
+    );
   }
 }
 

src/RangePicker.tsx

@@ -10,6 +10,7 @@ import Picker, {
   PickerBaseProps,
   PickerDateProps,
   PickerTimeProps,
+  PickerRefConfig,
 } from './Picker';
 import {
   NullableDateType,
@@ -121,7 +122,7 @@ interface MergedRangePickerProps<DateType>
 
 function InternalRangePicker<DateType>(
   props: RangePickerProps<DateType> & {
-    pickerRef: React.Ref<Picker<DateType>>;
+    pickerRef: React.Ref<PickerRefConfig>;
   },
 ) {
   const {
@@ -152,7 +153,7 @@ function InternalRangePicker<DateType>(
     onFocus,
     onBlur,
   } = props as MergedRangePickerProps<DateType> & {
-    pickerRef: React.Ref<Picker<DateType>>;
+    pickerRef: React.MutableRefObject<PickerRefConfig>;
   };
 
   const formatList = toArray(
@@ -262,8 +263,38 @@ function InternalRangePicker<DateType>(
     }
   };
 
-  // ============================== Mode ==============================
+  // ============================== Open ==============================
+  const startPickerRef = React.useRef<Picker<DateType>>(null);
+  const endPickerRef = React.useRef<Picker<DateType>>(null);
+  const lastOpenIdRef = React.useRef<number>();
+
+  const onStartOpenChange = (open: boolean) => {
+    if (!open && innerValue && innerValue[0]) {
+      lastOpenIdRef.current = window.setTimeout(() => {
+        if (endPickerRef.current) {
+          endPickerRef.current!.focus();
+          endPickerRef.current!.open();
+        }
+      }, 100);
+    }
+
+    if (props.onOpenChange) {
+      props.onOpenChange(open);
+    }
+  };
 
+  React.useEffect(
+    () => () => {
+      window.clearTimeout(lastOpenIdRef.current);
+    },
+    [],
+  );
+
+  if (pickerRef) {
+    pickerRef.current = startPickerRef.current as any;
+  }
+
+  // ============================== Mode ==============================
   /**
    * [Legacy] handle internal `onPanelChange`
    */
@@ -407,7 +438,7 @@ function InternalRangePicker<DateType>(
       >
         <Picker<DateType>
           {...pickerProps}
-          ref={pickerRef}
+          ref={startPickerRef}
           prefixCls={prefixCls}
           value={value1}
           placeholder={placeholder && placeholder[0]}
@@ -423,10 +454,12 @@ function InternalRangePicker<DateType>(
           onFocus={onFocus}
           onBlur={onBlur}
           onPanelChange={onStartPanelChange}
+          onOpenChange={onStartOpenChange}
         />
         {separator}
         <Picker<DateType>
           {...pickerProps}
+          ref={endPickerRef}
           prefixCls={prefixCls}
           value={value2}
           placeholder={placeholder && placeholder[1]}
@@ -452,7 +485,7 @@ function InternalRangePicker<DateType>(
 class RangePicker<DateType> extends React.Component<
   RangePickerProps<DateType>
 > {
-  pickerRef = React.createRef<Picker<DateType>>();
+  pickerRef = React.createRef<PickerRefConfig>();
 
   focus = () => {
     if (this.pickerRef.current) {
@@ -470,7 +503,7 @@ class RangePicker<DateType> extends React.Component<
     return (
       <InternalRangePicker<DateType>
         {...this.props}
-        pickerRef={this.pickerRef}
+        pickerRef={this.pickerRef as React.MutableRefObject<PickerRefConfig>}
       />
     );
   }