Skip to content

Commit ae26530

Browse files
authored
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
1 parent 8508af7 commit ae26530

File tree

9 files changed

+41
-25
lines changed

9 files changed

+41
-25
lines changed

docs/examples/debug.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,10 @@ export default () => {
158158
defaultOpenValue={dayjs()}
159159
// open
160160
picker="time"
161+
format={{
162+
format: 'HH:mm:ss.SSS A',
163+
type: 'mask',
164+
}}
161165
// showTime={{
162166
// defaultValue: dayjs(),
163167
// }}
@@ -171,6 +175,8 @@ export default () => {
171175
// }),
172176
// }}
173177
// showTime={{}}
178+
// disabled
179+
open
174180
onChange={(...args) => {
175181
console.log('🔥 Change:', ...args);
176182
}}
Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import { useEvent, useMergedState } from 'rc-util';
2+
import raf from 'rc-util/lib/raf';
23
import React from 'react';
34

4-
// We need wait for outside state updated.
5-
// Which means need 2 effect:
6-
// 1. Outside sync state
7-
// 2. Still may be old state
8-
// 3. Safe to sync state
9-
const DELAY_TIMES = 2;
10-
115
/**
126
* Will be `true` immediately for next effect.
137
* But will be `false` for a delay of effect.
@@ -21,10 +15,14 @@ export default function useDelayState<T>(
2115
value,
2216
});
2317

24-
const [times, setTimes] = React.useState<number | false>(false);
2518
const nextValueRef = React.useRef<T>(value);
2619

2720
// ============================= Update =============================
21+
const rafRef = React.useRef<number>();
22+
const cancelRaf = () => {
23+
raf.cancel(rafRef.current);
24+
};
25+
2826
const doUpdate = useEvent(() => {
2927
setState(nextValueRef.current);
3028

@@ -34,24 +32,18 @@ export default function useDelayState<T>(
3432
});
3533

3634
const updateValue = useEvent((next: T, immediately?: boolean) => {
35+
cancelRaf();
36+
3737
nextValueRef.current = next;
3838

3939
if (next || immediately) {
4040
doUpdate();
41-
setTimes(false);
4241
} else {
43-
setTimes(0);
42+
rafRef.current = raf(doUpdate);
4443
}
4544
});
4645

47-
// ============================= Effect =============================
48-
React.useEffect(() => {
49-
if (times === DELAY_TIMES) {
50-
doUpdate();
51-
} else if (times !== false && times < DELAY_TIMES) {
52-
setTimes(times + 1);
53-
}
54-
}, [times, doUpdate]);
46+
React.useEffect(() => cancelRaf, []);
5547

5648
return [state, updateValue];
5749
}

src/PickerInput/hooks/useFieldFormat.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function useFieldFormat<DateType = any>(
1414

1515
const firstFormat = formatList[0];
1616
const maskFormat =
17-
typeof firstFormat === 'object' && firstFormat.align ? firstFormat.format : null;
17+
typeof firstFormat === 'object' && firstFormat.type === 'mask' ? firstFormat.format : null;
1818

1919
return [
2020
// Format list

src/interface.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ export interface SharedPickerProps<DateType extends object = any>
331331
showWeek?: boolean;
332332
/**
333333
* Config the input field parse and format.
334-
* When set `format.align`, it will force user input align with your input,
334+
* When set `format.type`, it will force user input type with your input,
335335
* it's only support basic format mask: YYYY, MM, DD, HH, mm, ss, SSS.
336336
* Once use config mode, it must be fill with format your config.
337337
*/
@@ -340,7 +340,7 @@ export interface SharedPickerProps<DateType extends object = any>
340340
| FormatType<DateType>[]
341341
| {
342342
format: string;
343-
align?: boolean;
343+
type?: 'mask';
344344
};
345345

346346
// Icons

tests/keyboard.spec.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ describe('Picker.Keyboard', () => {
111111
fireEvent.keyDown(container.querySelector('input'), {
112112
key: 'Escape',
113113
});
114+
115+
act(() => {
116+
jest.runAllTimers();
117+
});
118+
114119
expect(isOpen()).toBeFalsy();
115120
});
116121

tests/new-range.spec.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -683,6 +683,10 @@ describe('NewPicker.Range', () => {
683683

684684
// Close panel to auto focus next end field
685685
fireEvent.click(document.body);
686+
act(() => {
687+
jest.runAllTimers();
688+
});
689+
686690
expect(container.querySelectorAll('input')[1]).toHaveFocus();
687691

688692
expect(isOpen()).toBeTruthy();
@@ -846,7 +850,7 @@ describe('NewPicker.Range', () => {
846850
<DayRangePicker
847851
format={{
848852
format: 'YYYYMMDD',
849-
align: true,
853+
type: 'mask',
850854
}}
851855
{...props}
852856
/>

tests/picker.spec.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ describe('Picker.Basic', () => {
168168
for (let i = 0; i < 10; i += 1) {
169169
act(() => {
170170
fireEvent.click(document.body);
171+
jest.runAllTimers();
171172
});
172173
expect(onOpenChange).toHaveBeenCalledTimes(i + 1);
173174
}
@@ -1064,6 +1065,10 @@ describe('Picker.Basic', () => {
10641065
expect(isOpen()).toBeTruthy();
10651066

10661067
keyDown(KeyCode.ESC);
1068+
act(() => {
1069+
jest.runAllTimers();
1070+
});
1071+
10671072
expect(onKeyDown).toHaveBeenCalled();
10681073
expect(isOpen()).toBeFalsy();
10691074
onKeyDown.mockClear();

tests/range.spec.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1082,6 +1082,7 @@ describe('Picker.Range', () => {
10821082
defaultValue={[getDay(defaultValue[0]), getDay(defaultValue[1] || defaultValue[0])]}
10831083
/>,
10841084
);
1085+
10851086
openPicker(container, 1);
10861087
selectCell(targetCell);
10871088
closePicker(container, 1);

tests/util/commonUtil.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,12 @@ export function closePicker(container: HTMLElement, index = 0) {
123123
const input = container.querySelectorAll('input')[index];
124124
fireEvent.blur(input);
125125

126-
act(() => {
127-
jest.runAllTimers();
128-
});
126+
// Loop to pass all the timer (includes raf)
127+
for (let i = 0; i < 5; i += 1) {
128+
act(() => {
129+
jest.runAllTimers();
130+
});
131+
}
129132
}
130133

131134
export function isOpen() {

0 commit comments

Comments
 (0)