refactor(RangePicker): centralize interaction flow

.github/workflows/react-doctor.yml

@@ -25,3 +25,5 @@ jobs:
           fetch-depth: 0
           persist-credentials: false
       - uses: millionco/react-doctor@ced746f518f11e8283d488c4ff31c44e478bb0e5
+        with:
+          version: 0.7.4

docs/examples/debug.tsx

@@ -1,110 +1,39 @@
 import * as React from 'react';
 import '../../assets/index.less';
-import type { Locale } from '../../src/interface';
 import RangePicker from '../../src/PickerInput/RangePicker';
-import SinglePicker from '../../src/PickerInput/SinglePicker';
-import PickerPanel from '../../src/PickerPanel';
 
-import dayjs, { type Dayjs } from 'dayjs';
-import 'dayjs/locale/ar';
+import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import buddhistEra from 'dayjs/plugin/buddhistEra';
-import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import dayjsGenerateConfig from '../../src/generate/dayjs';
-import dateFnsGenerateConfig from '../../src/generate/dateFns';
 import zhCN from '../../src/locale/zh_CN';
 
 dayjs.locale('zh-cn');
-// dayjs.locale('ar');
-dayjs.extend(buddhistEra);
-dayjs.extend(LocalizedFormat);
-
-console.clear();
-
-(window as any).dayjs = dayjs;
-
-const myLocale: Locale = {
-  ...zhCN,
-  // cellQuarterFormat: '第Q季度',
-  // fieldYearFormat: 'BBBB',
-  // cellYearFormat: 'BBBB',
-  // yearFormat: 'BBBB',
-  // cellDateFormat: '!d!',
-};
-
-const sharedLocale = {
-  locale: myLocale,
-  generateConfig: dayjsGenerateConfig,
-};
-
-const dateFnsSharedLocale = {
-  locale: myLocale,
-  generateConfig: dateFnsGenerateConfig,
-};
 
 export default () => {
+  const [changeCount, setChangeCount] = React.useState(0);
+
   return (
     <div>
       <input defaultValue="2000-01-01" />
-      {/* <RangePicker
-        {...sharedLocale}
-        style={{ width: 400 }}
-        onChange={(val) => console.error('>>>>>>>', val)}
-      /> */}
-      <RangePicker
-        {...sharedLocale}
-        style={{ width: 400 }}
-        showTime
-        // allowEmpty
-        // disabledDate={(_, info) => {
-        //   console.log('Date:', info);
-        //   return false;
-        // }}
-        // disabledTime={(date, range, info) => {
-        //   // console.log(`Time-${range}`, range, info);
-        //   const { from } = info;
 
-        //   if (from) {
-        //     console.log(
-        //       `Time-${range}`,
-        //       from.format('YYYY-MM-DD HH:mm:ss'),
-        //       date.format('YYYY-MM-DD HH:mm:ss'),
-        //     );
-        //   }
-
-        //   if (from && from.isSame(date, 'day')) {
-        //     return {
-        //       disabledHours: () => [from.hour()],
-        //       disabledMinutes: () => [0, 1, 2, 3],
-        //       disabledSeconds: () => [0, 1, 2, 3],
-        //     };
-        //   }
-        //   return {};
-        // }}
-      />
+      <h3>Issue #57728: showTime with allowEmpty</h3>
+      <p>
+        Select a start date without confirming, switch to the end field, switch back to the start
+        field, then click the input above. Both fields should reset and the change count should stay
+        at 0.
+      </p>
+      <div>Change count: {changeCount}</div>
 
       <RangePicker
-        {...sharedLocale}
-        style={{ width: 400 }}
-        minDate={dayjs('2024')}
-        open
-        mode={['year', 'year']}
-      />
-      {/* <SinglePicker
-        {...dateFnsSharedLocale}
+        locale={zhCN}
+        generateConfig={dayjsGenerateConfig}
         style={{ width: 400 }}
         showTime
-        disabledTime={(...args) => {
-          console.log('Time Single:', ...args);
-          return {};
+        allowEmpty
+        onChange={() => {
+          setChangeCount((count) => count + 1);
         }}
-      /> */}
-      {/* <SinglePicker
-        {...sharedLocale}
-        style={{ width: 400 }}
-        minDate={dayjs()}
-        onChange={(val) => console.error('>>>>>>>', val)}
-      /> */}
+      />
     </div>
   );
 };

src/PickerInput/Popup/index.tsx

@@ -20,9 +20,11 @@ export type PopupShowTimeConfig<DateType extends object = any> = Omit<
   Pick<SharedTimeProps<DateType>, 'disabledTime'>;
 
 export interface PopupProps<DateType extends object = any, PresetValue = DateType>
-  extends Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>,
+  extends
+    Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>,
     FooterProps<DateType>,
     PopupPanelProps<DateType> {
+  containerRef?: React.Ref<HTMLDivElement>;
   panelRender?: SharedPickerProps['panelRender'];
 
   // Presets
@@ -52,6 +54,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
 
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>) {
   const {
+    containerRef,
     panelRender,
     internalMode,
     picker,
@@ -216,6 +219,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   // Container
   let renderNode = (
     <div
+      ref={containerRef}
       onMouseDown={onPanelMouseDown}
       tabIndex={-1}
       className={clsx(