feat: RangePicker support focus

Author: zombieJ

src/RangePicker.tsx

@@ -52,6 +52,8 @@ export interface RangePickerSharedProps<DateType> {
     value: RangeValue<DateType>,
     formatString: [string, string],
   ) => void;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 
 type OmitPickerProps<Props> = Omit<
@@ -93,7 +95,11 @@ interface MergedRangePickerProps<DateType>
   picker?: PickerMode;
 }
 
-function RangePicker<DateType>(props: RangePickerProps<DateType>) {
+function InternalRangePicker<DateType>(
+  props: RangePickerProps<DateType> & {
+    pickerRef: React.Ref<Picker>;
+  },
+) {
   const {
     prefixCls = 'rc-picker',
     className,
@@ -103,6 +109,7 @@ function RangePicker<DateType>(props: RangePickerProps<DateType>) {
     defaultPickerValue,
     separator = '~',
     picker,
+    pickerRef,
     locale,
     generateConfig,
     placeholder,
@@ -116,7 +123,11 @@ function RangePicker<DateType>(props: RangePickerProps<DateType>) {
     disabled,
     onChange,
     onCalendarChange,
-  } = props as MergedRangePickerProps<DateType>;
+    onFocus,
+    onBlur,
+  } = props as MergedRangePickerProps<DateType> & {
+    pickerRef: React.Ref<Picker>;
+  };
 
   const formatList = toArray(
     getDefaultFormat(format, picker, showTime, use12Hours),
@@ -188,10 +199,12 @@ function RangePicker<DateType>(props: RangePickerProps<DateType>) {
   };
 
   // ============================= Change =============================
-  const formatDate = (date: NullableDateType<DateType>) =>
-    (date
-      ? generateConfig.locale.format(locale.locale, date, formatList[0])
-      : '');
+  const formatDate = (date: NullableDateType<DateType>) => {
+    if (date) {
+      return generateConfig.locale.format(locale.locale, date, formatList[0]);
+    }
+    return '';
+  };
 
   const onInternalChange = (
     values: NullableDateType<DateType>[],
@@ -306,6 +319,7 @@ function RangePicker<DateType>(props: RangePickerProps<DateType>) {
       >
         <Picker<DateType>
           {...pickerProps}
+          ref={pickerRef}
           prefixCls={prefixCls}
           value={value1}
           placeholder={placeholder && placeholder[0]}
@@ -317,6 +331,8 @@ function RangePicker<DateType>(props: RangePickerProps<DateType>) {
             onInternalChange([date, value2], true);
           }}
           onSelect={onStartSelect}
+          onFocus={onFocus}
+          onBlur={onBlur}
         />
         {separator}
         <Picker<DateType>
@@ -332,10 +348,40 @@ function RangePicker<DateType>(props: RangePickerProps<DateType>) {
             onInternalChange([value1, date], false);
           }}
           onSelect={onEndSelect}
+          onFocus={onFocus}
+          onBlur={onBlur}
         />
       </div>
     </RangeContext.Provider>
   );
 }
 
+// Wrap with class component to enable pass generic with instance method
+class RangePicker<DateType> extends React.Component<
+  RangePickerProps<DateType>
+> {
+  pickerRef = React.createRef<HTMLInputElement>();
+
+  focus = () => {
+    if (this.pickerRef.current) {
+      this.pickerRef.current.focus();
+    }
+  };
+
+  blur = () => {
+    if (this.pickerRef.current) {
+      this.pickerRef.current.blur();
+    }
+  };
+
+  render() {
+    return (
+      <InternalRangePicker<DateType>
+        {...this.props}
+        pickerRef={this.pickerRef}
+      />
+    );
+  }
+}
+
 export default RangePicker;

tests/range.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import MockDate from 'mockdate';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { Moment } from 'moment';
 import {
   mount,
@@ -385,4 +386,45 @@ describe('Range', () => {
     expect(disabledTime.mock.calls[0][1]).toEqual('end');
     wrapper.closePicker(1);
   });
+
+  describe('focus test', () => {
+    let domMock: ReturnType<typeof spyElementPrototypes>;
+    let focused = false;
+    let blurred = false;
+
+    beforeAll(() => {
+      domMock = spyElementPrototypes(HTMLElement, {
+        focus: () => {
+          focused = true;
+        },
+        blur: () => {
+          blurred = true;
+        },
+      });
+    });
+
+    beforeEach(() => {
+      focused = false;
+      blurred = false;
+    });
+
+    afterAll(() => {
+      domMock.mockRestore();
+    });
+
+    it('function call', () => {
+      const ref = React.createRef<MomentRangePicker>();
+      mount(
+        <div>
+          <MomentRangePicker ref={ref} />
+        </div>,
+      );
+
+      ref.current!.rangePickerRef.current!.focus();
+      expect(focused).toBeTruthy();
+
+      ref.current!.rangePickerRef.current!.blur();
+      expect(blurred).toBeTruthy();
+    });
+  });
 });

tests/util/commonUtil.tsx

@@ -114,10 +114,17 @@ export type MomentRangePickerProps =
   | InjectDefaultProps<RangePickerDateProps<Moment>>
   | InjectDefaultProps<RangePickerTimeProps<Moment>>;
 
-export const MomentRangePicker = (props: MomentRangePickerProps) => (
-  <RangePicker<Moment>
-    generateConfig={momentGenerateConfig}
-    locale={enUS}
-    {...props}
-  />
-);
+export class MomentRangePicker extends React.Component<MomentRangePickerProps> {
+  rangePickerRef = React.createRef<RangePicker<Moment>>();
+
+  render() {
+    return (
+      <RangePicker<Moment>
+        generateConfig={momentGenerateConfig}
+        locale={enUS}
+        ref={this.rangePickerRef}
+        {...this.props}
+      />
+    );
+  }
+}