fix: m1 pro effect merge & modify API design (#744)

* fix: m1 pro behaivor

* test: update test case

* refactor: align to type is mask

* test: update test case

docs/examples/debug.tsx

@@ -158,6 +158,10 @@ export default () => {
  defaultOpenValue={dayjs()}
  // open
  picker="time"
+ format={{
+ format: 'HH:mm:ss.SSS A',
+ type: 'mask',
+ }}
  // showTime={{
  // defaultValue: dayjs(),
  // }}
@@ -171,6 +175,8 @@ export default () => {
  // }),
  // }}
  // showTime={{}}
+ // disabled
+ open
  onChange={(...args) => {
  console.log('🔥 Change:', ...args);
  }}

src/PickerInput/hooks/useDelayState.ts

@@ -1,13 +1,7 @@
 import { useEvent, useMergedState } from 'rc-util';
+import raf from 'rc-util/lib/raf';
 import React from 'react';
 
-// We need wait for outside state updated.
-// Which means need 2 effect:
-// 1. Outside sync state
-// 2. Still may be old state
-// 3. Safe to sync state
-const DELAY_TIMES = 2;
-
 /**
  * Will be `true` immediately for next effect.
  * But will be `false` for a delay of effect.
@@ -21,10 +15,14 @@ export default function useDelayState<T>(
  value,
  });
 
- const [times, setTimes] = React.useState<number | false>(false);
  const nextValueRef = React.useRef<T>(value);
 
  // ============================= Update =============================
+ const rafRef = React.useRef<number>();
+ const cancelRaf = () => {
+ raf.cancel(rafRef.current);
+ };
+
  const doUpdate = useEvent(() => {
  setState(nextValueRef.current);
 
@@ -34,24 +32,18 @@ export default function useDelayState<T>(
  });
 
  const updateValue = useEvent((next: T, immediately?: boolean) => {
+ cancelRaf();
+
  nextValueRef.current = next;
 
  if (next || immediately) {
  doUpdate();
- setTimes(false);
  } else {
- setTimes(0);
+ rafRef.current = raf(doUpdate);
  }
  });
 
- // ============================= Effect =============================
- React.useEffect(() => {
- if (times === DELAY_TIMES) {
- doUpdate();
- } else if (times !== false && times < DELAY_TIMES) {
- setTimes(times + 1);
- }
- }, [times, doUpdate]);
+ React.useEffect(() => cancelRaf, []);
 
  return [state, updateValue];
 }

src/PickerInput/hooks/useFieldFormat.ts

@@ -14,7 +14,7 @@ export function useFieldFormat<DateType = any>(
 
  const firstFormat = formatList[0];
  const maskFormat =
- typeof firstFormat === 'object' && firstFormat.align ? firstFormat.format : null;
+ typeof firstFormat === 'object' && firstFormat.type === 'mask' ? firstFormat.format : null;
 
  return [
  // Format list

src/interface.tsx

@@ -331,7 +331,7 @@ export interface SharedPickerProps<DateType extends object = any>
  showWeek?: boolean;
  /**
  * Config the input field parse and format.
- * When set `format.align`, it will force user input align with your input,
+ * When set `format.type`, it will force user input type with your input,
  * it's only support basic format mask: YYYY, MM, DD, HH, mm, ss, SSS.
  * Once use config mode, it must be fill with format your config.
  */
@@ -340,7 +340,7 @@ export interface SharedPickerProps<DateType extends object = any>
  | FormatType<DateType>[]
  | {
  format: string;
- align?: boolean;
+ type?: 'mask';
  };
 
  // Icons

tests/keyboard.spec.tsx

@@ -111,6 +111,11 @@ describe('Picker.Keyboard', () => {
  fireEvent.keyDown(container.querySelector('input'), {
  key: 'Escape',
  });
+
+ act(() => {
+ jest.runAllTimers();
+ });
+
  expect(isOpen()).toBeFalsy();
  });
 

tests/new-range.spec.tsx

@@ -683,6 +683,10 @@ describe('NewPicker.Range', () => {
 
  // Close panel to auto focus next end field
  fireEvent.click(document.body);
+ act(() => {
+ jest.runAllTimers();
+ });
+
  expect(container.querySelectorAll('input')[1]).toHaveFocus();
 
  expect(isOpen()).toBeTruthy();
@@ -846,7 +850,7 @@ describe('NewPicker.Range', () => {
  <DayRangePicker
  format={{
  format: 'YYYYMMDD',
- align: true,
+ type: 'mask',
  }}
  {...props}
  />

tests/picker.spec.tsx

@@ -168,6 +168,7 @@ describe('Picker.Basic', () => {
  for (let i = 0; i < 10; i += 1) {
  act(() => {
  fireEvent.click(document.body);
+ jest.runAllTimers();
  });
  expect(onOpenChange).toHaveBeenCalledTimes(i + 1);
  }
@@ -1064,6 +1065,10 @@ describe('Picker.Basic', () => {
  expect(isOpen()).toBeTruthy();
 
  keyDown(KeyCode.ESC);
+ act(() => {
+ jest.runAllTimers();
+ });
+
  expect(onKeyDown).toHaveBeenCalled();
  expect(isOpen()).toBeFalsy();
  onKeyDown.mockClear();

tests/range.spec.tsx

@@ -1082,6 +1082,7 @@ describe('Picker.Range', () => {
  defaultValue={[getDay(defaultValue[0]), getDay(defaultValue[1] || defaultValue[0])]}
  />,
  );
+
  openPicker(container, 1);
  selectCell(targetCell);
  closePicker(container, 1);

tests/util/commonUtil.tsx

@@ -123,9 +123,12 @@ export function closePicker(container: HTMLElement, index = 0) {
  const input = container.querySelectorAll('input')[index];
  fireEvent.blur(input);
 
- act(() => {
- jest.runAllTimers();
- });
+ // Loop to pass all the timer (includes raf)
+ for (let i = 0; i < 5; i += 1) {
+ act(() => {
+ jest.runAllTimers();
+ });
+ }
 }
 
 export function isOpen() {