refactor: use changeOnBlur

docs/examples/debug.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import '../../assets/index.less';
 import type { Locale, PickerRef } from '../../src/NewPicker/interface';
 import RangePicker from '../../src/NewPicker/PickerInput/RangePicker';
-import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel';
 
 import dayjs, { type Dayjs } from 'dayjs';
 import 'dayjs/locale/ar';
@@ -11,7 +10,6 @@ import buddhistEra from 'dayjs/plugin/buddhistEra';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import dayjsGenerateConfig from '../../src/generate/dayjs';
 import zhCN from '../../src/locale/zh_CN';
-import TimePanel from '../../src/NewPicker/PickerPanel/TimePanel';
 
 dayjs.locale('zh-cn');
 // dayjs.locale('ar');
@@ -36,32 +34,22 @@ const sharedLocale = {
   generateConfig: dayjsGenerateConfig,
 };
 
-function CellPicker(props: Partial<PickerPanelProps>) {
-  return (
-    <div>
-      <h5 style={{ margin: 0 }}>{props.picker || 'date'}</h5>
-      <PickerPanel {...sharedLocale} {...props} />
-    </div>
-  );
-}
-
-const MyTime = (props: any) => {
-  return (
-    <div>
-      2333
-      <TimePanel {...props} />
-    </div>
-  );
-};
+const MyInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  (props, ref) => {
+    console.log('>>>', props);
+    return <input {...props} ref={ref} />;
+  },
+);
+MyInput.displayName = 'MyInput';
 
 export default () => {
   const singleRef = React.useRef<PickerRef>(null);
 
   const [value, setValue] = React.useState<Dayjs>(null);
   const [rangeValue, setRangeValue] = React.useState<[Dayjs?, Dayjs?]>(
-    [dayjs('2000-12-15'), dayjs('2020-12-22')],
+    // [dayjs('2000-12-15'), dayjs('2020-12-22')],
     // null,
-    // undefined,
+    undefined,
   );
 
   return (
@@ -73,6 +61,11 @@ export default () => {
       <RangePicker
         {...sharedLocale}
         value={rangeValue}
+        components={{
+          input: MyInput,
+        }}
+        // showTime
+        showNow
         placeholder={['Start', 'End']}
         suffixIcon="🧶"
         onFocus={(_, info) => {
@@ -104,7 +97,6 @@ export default () => {
           start: 'inputStart',
           end: 'inputEnd',
         }}
-        renderExtraFooter={() => <input />}
       />
       <br />
 

src/NewPicker/PickerInput/Selector/Input.tsx

@@ -44,7 +44,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
    * Like open the popup for interactive.
    */
   onHelp: () => void;
-  preserveInvalidOnBlur?: boolean;
+  changeOnBlur?: boolean;
   invalid?: boolean;
 }
 
@@ -60,7 +60,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
     onHelp,
     onSubmit,
     onKeyDown,
-    preserveInvalidOnBlur,
+    changeOnBlur = true,
     invalid,
     // Pass to input
     ...restProps
@@ -196,7 +196,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   // ======================== Active ========================
   // Check if blur need reset input value
   useLockEffect(active, () => {
-    if (!active && !preserveInvalidOnBlur) {
+    if (!active && changeOnBlur) {
       setInputValue(value);
     }
   });

src/NewPicker/PickerInput/Selector/RangeSelector.tsx

@@ -82,7 +82,7 @@ function RangeSelector<DateType = any>(
     // Valid
     format,
     maskFormat,
-    preserveInvalidOnBlur,
+    changeOnBlur,
     onInvalid,
 
     // Disabled
@@ -196,7 +196,7 @@ function RangeSelector<DateType = any>(
     // ============== Shared ==============
     format: maskFormat,
     validateFormat: (text) => !!validateFormat(text),
-    preserveInvalidOnBlur,
+    changeOnBlur,
 
     readOnly: inputReadOnly,
 
@@ -334,9 +334,9 @@ function RangeSelector<DateType = any>(
           onMouseDown?.(e);
         }}
       >
-        <Input ref={inputStartRef} {...getInputProps(0)} />
+        <Input ref={inputStartRef} {...getInputProps(0)} date-range="start" />
         <div className={`${prefixCls}-range-separator`}>{separator}</div>
-        <Input ref={inputEndRef} {...getInputProps(1)} />
+        <Input ref={inputEndRef} {...getInputProps(1)} date-range="end" />
         <div className={`${prefixCls}-active-bar`} style={activeBarStyle} />
         <Icon type="suffix" icon={suffixIcon} />
         {showClear && <ClearIcon type="clear" icon={clearIcon} onClear={onClear} />}

src/NewPicker/PickerInput/hooks/useRangeValue.ts

@@ -119,7 +119,6 @@ export default function useRangeValue<DateType extends object = any>(
     | 'order'
     | 'onCalendarChange'
     | 'onChange'
-    | 'preserveInvalidOnBlur'
     | 'picker'
   >,
   mergedValue: RangeValueType<DateType>,
@@ -146,9 +145,6 @@ export default function useRangeValue<DateType extends object = any>(
 
     onChange,
 
-    // Focus
-    // preserveInvalidOnBlur,
-
     // Checker
     allowEmpty,
     order,

src/NewPicker/index.tsx

@@ -3,7 +3,7 @@
  * - Common
  *  - [Break] Support special year format, all the year will follow the locale config.
  *  - Blur all of field will trigger `onChange` if validate
- *  - Support `preserveInvalidOnBlur` to not to clean input if invalid
+ *  - Support `changeOnBlur` to not to clean input if invalid
  *  - `pickerValue` is now full controlled
  *    - `defaultPickerValue` will take effect on every field active with popup opening.
  *  - [Break] clear button return the event with `onClick`

src/NewPicker/interface.tsx

@@ -305,7 +305,7 @@ export interface SharedPickerProps<DateType extends object = any> extends Shared
    * When user input invalidate date, keep it in the input field.
    * This is only used for strong a11y requirement which do not want modify after blur.
    */
-  preserveInvalidOnBlur?: boolean;
+  changeOnBlur?: boolean;
 
   // Icons
   suffixIcon?: React.ReactNode;
@@ -425,7 +425,11 @@ export interface SelectorProps<DateType = any> extends SharedHTMLAttrs {
   onChange: (date: DateType, index?: number) => void;
   onInputChange: VoidFunction;
   /** When user input invalidate date, keep it in the input field */
-  preserveInvalidOnBlur?: boolean;
+  /**
+   * By default value in input field will be reset with previous valid value when blur.
+   * Set to `false` will keep invalid text in input field when blur.
+   */
+  changeOnBlur?: boolean;
 
   // Open
   /** Open index */

tests/new-range.spec.tsx

@@ -182,7 +182,6 @@ describe('NewPicker.Range', () => {
       selectCell(5);
       await waitFakeTimer();
 
-
       expect(document.querySelector('.rc-picker-header-view').textContent).toBe('2000年1月');
     });
   });
@@ -205,7 +204,7 @@ describe('NewPicker.Range', () => {
       expect(isOpen()).toBeTruthy();
     });
 
-    it('preserveInvalidOnBlur=false', () => {
+    it('changeOnBlur=true', () => {
       const { container } = render(<DayRangePicker />);
       const firstInput = container.querySelector<HTMLInputElement>('input');
 
@@ -223,8 +222,8 @@ describe('NewPicker.Range', () => {
       expect(firstInput).toHaveValue('');
     });
 
-    it('preserveInvalidOnBlur=true', () => {
-      const { container } = render(<DayRangePicker preserveInvalidOnBlur />);
+    it('changeOnBlur=false', () => {
+      const { container } = render(<DayRangePicker changeOnBlur={false} />);
       const firstInput = container.querySelector<HTMLInputElement>('input');
 
       openPicker(container);