diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index 6076e2c23..4074fd766 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -41,7 +41,7 @@ export default () => {
};
const keyDown = (e, preventDefault) => {
- if (e.keyCode === 13) preventDefault();
+ if (e.key === 'Enter') preventDefault();
};
return (
diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx
index e5c64299b..eb615840f 100644
--- a/src/PickerPanel.tsx
+++ b/src/PickerPanel.tsx
@@ -7,7 +7,6 @@
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import KeyCode from 'rc-util/lib/KeyCode';
import warning from 'rc-util/lib/warning';
import * as React from 'react';
import type { GenerateConfig } from './generate';
@@ -186,7 +185,10 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
isSecondStepValid,
`\`secondStep\` ${secondStep} is invalid. It should be a factor of 60.`,
);
- warning(!defaultPickerValue, `'defaultPickerValue' is deprecated. Please use 'defaultValue' instead.`);
+ warning(
+ !defaultPickerValue,
+ `'defaultPickerValue' is deprecated. Please use 'defaultValue' instead.`,
+ );
warning(!dateRender, `'dateRender' is deprecated. Please use 'cellRender' instead.`);
warning(!monthCellRender, `'monthCellRender' is deprecated. Please use 'cellRender' instead.`);
}
@@ -305,32 +307,32 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
}
};
- const isSelectable = (key) => {
+ const isSelectable = (key: string) => {
if (CALENDAR_PANEL_MODE.includes(mergedMode)) {
let date;
let operationFnc;
const isDateMode = mergedMode === 'date';
- if (key === KeyCode.PAGE_UP || key === KeyCode.PAGE_DOWN) {
+ if (key === 'PageUp' || key === 'PageDown') {
operationFnc = isDateMode ? generateConfig.addMonth : generateConfig.addYear;
} else {
operationFnc = isDateMode ? generateConfig.addDate : generateConfig.addMonth;
}
switch (key) {
- case KeyCode.LEFT:
- case KeyCode.PAGE_UP:
+ case 'ArrowLeft':
+ case 'PageUp':
date = operationFnc(viewDate, -1);
break;
- case KeyCode.RIGHT:
- case KeyCode.PAGE_DOWN:
+ case 'ArrowRight':
+ case 'PageDown':
date = operationFnc(viewDate, 1);
break;
- case KeyCode.UP:
- case KeyCode.DOWN:
+ case 'ArrowUp':
+ case 'ArrowDown':
date = operationFnc(
viewDate,
Number(
- `${key === KeyCode.UP ? '-' : ''}${isDateMode ? WEEK_DAY_COUNT : MONTH_COL_COUNT}`,
+ `${key === 'ArrowUp' ? '-' : ''}${isDateMode ? WEEK_DAY_COUNT : MONTH_COL_COUNT}`,
),
);
break;
@@ -347,21 +349,15 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
const onInternalKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
if (panelRef.current && panelRef.current.onKeyDown) {
let selectable = true;
- const { which } = e;
+ const { key } = e;
if (
- [
- KeyCode.LEFT,
- KeyCode.RIGHT,
- KeyCode.UP,
- KeyCode.DOWN,
- KeyCode.PAGE_UP,
- KeyCode.PAGE_DOWN,
- KeyCode.ENTER,
- ].includes(which)
+ ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Enter'].includes(
+ key,
+ )
) {
e.preventDefault();
- if (which !== KeyCode.ENTER && tabIndex === 0) {
- selectable = isSelectable(which);
+ if (key !== 'Enter' && tabIndex === 0) {
+ selectable = isSelectable(key);
}
}
diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts
index 0f3f119c2..1fc797851 100644
--- a/src/hooks/usePickerInput.ts
+++ b/src/hooks/usePickerInput.ts
@@ -1,4 +1,3 @@
-import KeyCode from 'rc-util/lib/KeyCode';
import raf from 'rc-util/lib/raf';
import type * as React from 'react';
import { useEffect, useRef, useState } from 'react';
@@ -25,7 +24,7 @@ export default function usePickerInput({
forwardKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => boolean;
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, preventDefault: () => void) => void;
blurToCancel?: boolean;
- changeOnBlur?: boolean
+ changeOnBlur?: boolean;
onSubmit: () => void | boolean;
onCancel: () => void;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
@@ -58,8 +57,8 @@ export default function usePickerInput({
if (preventDefaultRef.current) return;
- switch (e.which) {
- case KeyCode.ENTER: {
+ switch (e.key) {
+ case 'Enter': {
if (!open) {
triggerOpen(true);
} else if (onSubmit() !== false) {
@@ -70,7 +69,7 @@ export default function usePickerInput({
return;
}
- case KeyCode.TAB: {
+ case 'Tab': {
if (typing && open && !e.shiftKey) {
setTyping(false);
e.preventDefault();
@@ -83,14 +82,14 @@ export default function usePickerInput({
return;
}
- case KeyCode.ESC: {
+ case 'Escape': {
setTyping(true);
onCancel();
return;
}
}
- if (!open && ![KeyCode.SHIFT].includes(e.which)) {
+ if (!open && !['Shift'].includes(e.key)) {
triggerOpen(true);
} else if (!typing) {
// Let popup panel handle keyboard
diff --git a/src/panels/DatetimePanel/index.tsx b/src/panels/DatetimePanel/index.tsx
index 4e38286ea..45b9290d2 100644
--- a/src/panels/DatetimePanel/index.tsx
+++ b/src/panels/DatetimePanel/index.tsx
@@ -1,5 +1,4 @@
import classNames from 'classnames';
-import KeyCode from 'rc-util/lib/KeyCode';
import * as React from 'react';
import type { DisabledTime, PanelRefProps } from '../../interface';
import { tuple } from '../../utils/miscUtil';
@@ -68,7 +67,7 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
operationRef.current = {
onKeyDown: (event) => {
// Switch active panel
- if (event.which === KeyCode.TAB) {
+ if (event.key === 'Tab') {
const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1);
setActivePanel(nextActivePanel);
@@ -91,7 +90,7 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
}
// Switch first active panel if operate without panel
- if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(event.which)) {
+ if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
setActivePanel('date');
return true;
}
diff --git a/src/utils/uiUtil.ts b/src/utils/uiUtil.ts
index 1ac765c7c..a2329fd89 100644
--- a/src/utils/uiUtil.ts
+++ b/src/utils/uiUtil.ts
@@ -1,6 +1,5 @@
-import KeyCode from 'rc-util/lib/KeyCode';
-import raf from 'rc-util/lib/raf';
import isVisible from 'rc-util/lib/Dom/isVisible';
+import raf from 'rc-util/lib/raf';
import type { GenerateConfig } from '../generate';
import type { CustomFormat, PanelMode, PickerMode } from '../interface';
@@ -70,10 +69,10 @@ export function createKeyDownHandler(
event: React.KeyboardEvent<HTMLElement>,
{ onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig,
): boolean {
- const { which, ctrlKey, metaKey } = event;
+ const { key, ctrlKey, metaKey } = event;
- switch (which) {
- case KeyCode.LEFT:
+ switch (key) {
+ case 'ArrowLeft':
if (ctrlKey || metaKey) {
if (onCtrlLeftRight) {
onCtrlLeftRight(-1);
@@ -86,7 +85,7 @@ export function createKeyDownHandler(
/* istanbul ignore next */
break;
- case KeyCode.RIGHT:
+ case 'ArrowRight':
if (ctrlKey || metaKey) {
if (onCtrlLeftRight) {
onCtrlLeftRight(1);
@@ -99,7 +98,7 @@ export function createKeyDownHandler(
/* istanbul ignore next */
break;
- case KeyCode.UP:
+ case 'ArrowUp':
if (onUpDown) {
onUpDown(-1);
return true;
@@ -107,7 +106,7 @@ export function createKeyDownHandler(
/* istanbul ignore next */
break;
- case KeyCode.DOWN:
+ case 'ArrowDown':
if (onUpDown) {
onUpDown(1);
return true;
@@ -115,7 +114,7 @@ export function createKeyDownHandler(
/* istanbul ignore next */
break;
- case KeyCode.PAGE_UP:
+ case 'PageUp':
if (onPageUpDown) {
onPageUpDown(-1);
return true;
@@ -123,7 +122,7 @@ export function createKeyDownHandler(
/* istanbul ignore next */
break;
- case KeyCode.PAGE_DOWN:
+ case 'PageDown':
if (onPageUpDown) {
onPageUpDown(1);
return true;
@@ -131,7 +130,7 @@ export function createKeyDownHandler(
/* istanbul ignore next */
break;
- case KeyCode.ENTER:
+ case 'Enter':
if (onEnter) {
onEnter();
return true;
diff --git a/tests/keyboard.spec.tsx b/tests/keyboard.spec.tsx
index cb79e65e6..85e2302aa 100644
--- a/tests/keyboard.spec.tsx
+++ b/tests/keyboard.spec.tsx
@@ -1,5 +1,4 @@
import { act, createEvent, fireEvent, render } from '@testing-library/react';
-import KeyCode from 'rc-util/lib/KeyCode';
import React from 'react';
import {
closePicker,
@@ -13,28 +12,18 @@ import {
} from './util/commonUtil';
describe('Picker.Keyboard', () => {
- function keyDown(keyCode: number, info?: object, index = 0) {
+ function keyDown(key: string, info?: object, index = 0) {
const input = document.querySelectorAll('input')[index];
- const event = createEvent.keyDown(input, {
- keyCode,
- which: keyCode,
- charCode: keyCode,
- ...info,
- });
+ const event = createEvent.keyDown(input, { key, ...info });
fireEvent(input, event);
return event;
}
- function panelKeyDown(keyCode: number, info?: object) {
- fireEvent.keyDown(document.querySelector('.rc-picker-panel') as HTMLElement, {
- keyCode,
- which: keyCode,
- charCode: keyCode,
- ...info,
- });
- // document.querySelector('.rc-picker-panel').simulate('keyDown', { which: keyCode, ...info });
+ function panelKeyDown(key: string, info?: object) {
+ fireEvent.keyDown(document.querySelector('.rc-picker-panel') as HTMLElement, { key, ...info });
+ // document.querySelector('.rc-picker-panel').simulate('keyDown', { key, ...info });
}
beforeEach(() => {
@@ -52,71 +41,67 @@ describe('Picker.Keyboard', () => {
const onSelect = jest.fn();
const { container } = render(<MomentPicker onSelect={onSelect} onChange={onChange} />);
fireEvent.focus(container.querySelector('input'));
- fireEvent.keyDown(container.querySelector('input'), {
- keyCode: KeyCode.ENTER,
- which: KeyCode.ENTER,
- charCode: KeyCode.ENTER,
- });
+ fireEvent.keyDown(container.querySelector('input'), { key: 'Enter' });
expect(isOpen()).toBeTruthy();
// Tab to operate popup panel
- keyDown(KeyCode.TAB);
+ keyDown('Tab');
expect(document.querySelector('.rc-picker-panel-focused')).toBeTruthy();
// Down
- keyDown(KeyCode.DOWN);
+ keyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy();
// UP
onSelect.mockReset();
- keyDown(KeyCode.UP);
+ keyDown('ArrowUp');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy();
// LEFT
onSelect.mockReset();
- keyDown(KeyCode.LEFT);
+ keyDown('ArrowLeft');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-02')).toBeTruthy();
// RIGHT
onSelect.mockReset();
- keyDown(KeyCode.RIGHT);
+ keyDown('ArrowRight');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy();
expect(onChange).not.toHaveBeenCalled();
// Control + Left
onSelect.mockReset();
- keyDown(KeyCode.LEFT, { ctrlKey: true });
+ keyDown('ArrowLeft', { ctrlKey: true });
expect(isSame(onSelect.mock.calls[0][0], '1989-09-03')).toBeTruthy();
expect(onChange).not.toHaveBeenCalled();
// Control + RIGHT
onSelect.mockReset();
- keyDown(KeyCode.RIGHT, { ctrlKey: true });
+ keyDown('ArrowRight', { ctrlKey: true });
expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy();
expect(onChange).not.toHaveBeenCalled();
// PageUp
onSelect.mockReset();
- keyDown(KeyCode.PAGE_UP);
+ keyDown('PageUp');
expect(isSame(onSelect.mock.calls[0][0], '1990-08-03')).toBeTruthy();
expect(onChange).not.toHaveBeenCalled();
// PageDown
onSelect.mockReset();
- keyDown(KeyCode.PAGE_DOWN);
+ keyDown('PageDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy();
expect(onChange).not.toHaveBeenCalled();
// Other key
onSelect.mockReset();
- keyDown(KeyCode.B);
+ keyDown('b');
expect(onSelect).not.toHaveBeenCalled();
// Double RIGHT
- keyDown(KeyCode.RIGHT);
+ keyDown('ArrowRight');
// ENTER
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
expect(isOpen()).toBeFalsy();
expect(onChange.mock.calls[0][1]).toEqual('1990-09-04');
});
@@ -127,17 +112,17 @@ describe('Picker.Keyboard', () => {
openPicker(container);
// Change value
- keyDown(KeyCode.TAB);
- keyDown(KeyCode.DOWN);
+ keyDown('Tab');
+ keyDown('ArrowDown');
// ESC
- keyDown(KeyCode.ESC);
+ keyDown('Escape');
expect(onChange).not.toHaveBeenCalled();
});
it('any key to open', () => {
render(<MomentPicker />);
- keyDown(KeyCode.A);
+ keyDown('a');
expect(isOpen()).toBeTruthy();
});
@@ -146,7 +131,7 @@ describe('Picker.Keyboard', () => {
openPicker(container);
// Not change focus
- keyDown(KeyCode.B);
+ keyDown('b');
expect(isOpen()).toBeTruthy();
expect(document.querySelector('.rc-picker-panel-focused')).toBeFalsy();
@@ -157,11 +142,11 @@ describe('Picker.Keyboard', () => {
openPicker(container);
// Focus Panel
- keyDown(KeyCode.TAB);
+ keyDown('Tab');
expect(document.querySelector('.rc-picker-panel-focused')).toBeTruthy();
// Focus Back
- keyDown(KeyCode.TAB, { shiftKey: true });
+ keyDown('Tab', { shiftKey: true });
expect(document.querySelector('.rc-picker-panel-focused')).toBeFalsy();
});
@@ -173,15 +158,15 @@ describe('Picker.Keyboard', () => {
openPicker(container);
// Focus Panel
- keyDown(KeyCode.TAB);
+ keyDown('Tab');
expect(document.querySelector('.rc-picker-panel-focused')).toBeTruthy();
// Focus Date Panel
- keyDown(KeyCode.TAB);
+ keyDown('Tab');
expect(document.querySelector('.rc-picker-date-panel-active')).toBeTruthy();
// Focus Time Panel
- keyDown(KeyCode.TAB);
+ keyDown('Tab');
expect(document.querySelector('.rc-picker-time-panel-active')).toBeTruthy();
// Close should not focus
@@ -200,17 +185,17 @@ describe('Picker.Keyboard', () => {
{
name: 'Tab switch first',
operate: () => {
- panelKeyDown(KeyCode.TAB);
+ panelKeyDown('Tab');
},
},
{
name: 'Arrow switch first',
operate: () => {
// Nothing happen
- panelKeyDown(KeyCode.A);
+ panelKeyDown('a');
// Switch
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowDown');
},
},
].forEach(({ name, operate }) => {
@@ -227,29 +212,29 @@ describe('Picker.Keyboard', () => {
expect(document.querySelector('.rc-picker-date-panel-active')).toBeTruthy();
// Select
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy();
// Focus Time Panel
- panelKeyDown(KeyCode.TAB);
+ panelKeyDown('Tab');
expect(document.querySelector('.rc-picker-time-panel-active')).toBeTruthy();
// Select
onSelect.mockReset();
- panelKeyDown(KeyCode.UP);
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowUp');
+ panelKeyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-10 01:00:00', 'second')).toBeTruthy();
// Next column select
onSelect.mockReset();
- panelKeyDown(KeyCode.RIGHT);
- panelKeyDown(KeyCode.UP);
+ panelKeyDown('ArrowRight');
+ panelKeyDown('ArrowUp');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-10 01:59:00', 'second')).toBeTruthy();
// Enter to exit column edit
onSelect.mockReset();
expect(document.querySelector('.rc-picker-time-panel-column-active')).toBeTruthy();
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('Enter');
expect(document.querySelector('.rc-picker-time-panel-column-active')).toBeFalsy();
expect(isSame(onSelect.mock.calls[0][0], '1990-09-10 01:59:00', 'second')).toBeTruthy();
@@ -269,15 +254,15 @@ describe('Picker.Keyboard', () => {
expect(document.querySelector('.rc-picker-decade-panel')).toBeTruthy();
// Year
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('Enter');
expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy();
// Month
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('Enter');
expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy();
// Date
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('Enter');
expect(document.querySelector('.rc-picker-date-panel')).toBeTruthy();
});
});
@@ -286,7 +271,7 @@ describe('Picker.Keyboard', () => {
it('time enter will trigger onSelect', () => {
const onSelect = jest.fn();
render(<MomentPickerPanel picker="time" onSelect={onSelect} />);
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('Enter');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy();
});
@@ -303,17 +288,17 @@ describe('Picker.Keyboard', () => {
);
// Left
- panelKeyDown(KeyCode.LEFT);
+ panelKeyDown('ArrowLeft');
expect(isSame(onSelect.mock.calls[0][0], '1990-08-03')).toBeTruthy();
// Control + Right
onSelect.mockReset();
- panelKeyDown(KeyCode.RIGHT, { ctrlKey: true });
+ panelKeyDown('ArrowRight', { ctrlKey: true });
expect(isSame(onSelect.mock.calls[0][0], '1991-08-03')).toBeTruthy();
// Down
onSelect.mockReset();
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1991-11-03')).toBeTruthy();
});
@@ -328,17 +313,17 @@ describe('Picker.Keyboard', () => {
);
// Left
- panelKeyDown(KeyCode.LEFT);
+ panelKeyDown('ArrowLeft');
expect(isSame(onSelect.mock.calls[0][0], '1990-06-03')).toBeTruthy();
// Control + Right
onSelect.mockReset();
- panelKeyDown(KeyCode.RIGHT, { ctrlKey: true });
+ panelKeyDown('ArrowRight', { ctrlKey: true });
expect(isSame(onSelect.mock.calls[0][0], '1991-06-03')).toBeTruthy();
// Down
onSelect.mockReset();
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1992-06-03')).toBeTruthy();
});
@@ -353,17 +338,17 @@ describe('Picker.Keyboard', () => {
);
// Left
- panelKeyDown(KeyCode.LEFT);
+ panelKeyDown('ArrowLeft');
expect(isSame(onSelect.mock.calls[0][0], '1989-09-03')).toBeTruthy();
// Control + Right
onSelect.mockReset();
- panelKeyDown(KeyCode.RIGHT, { ctrlKey: true });
+ panelKeyDown('ArrowRight', { ctrlKey: true });
expect(isSame(onSelect.mock.calls[0][0], '1999-09-03')).toBeTruthy();
// Down
onSelect.mockReset();
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '2002-09-03')).toBeTruthy();
});
@@ -378,20 +363,20 @@ describe('Picker.Keyboard', () => {
);
// Left
- panelKeyDown(KeyCode.LEFT);
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('ArrowLeft');
+ panelKeyDown('Enter');
expect(isSame(onPanelChange.mock.calls[0][0], '1980', 'year')).toBeTruthy();
// Control + Right
onPanelChange.mockReset();
- panelKeyDown(KeyCode.RIGHT, { ctrlKey: true });
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('ArrowRight', { ctrlKey: true });
+ panelKeyDown('Enter');
expect(isSame(onPanelChange.mock.calls[0][0], '2080', 'year')).toBeTruthy();
// Down
onPanelChange.mockReset();
- panelKeyDown(KeyCode.DOWN);
- panelKeyDown(KeyCode.ENTER);
+ panelKeyDown('ArrowDown');
+ panelKeyDown('Enter');
expect(isSame(onPanelChange.mock.calls[0][0], '2110', 'year')).toBeTruthy();
});
});
@@ -408,9 +393,9 @@ describe('Picker.Keyboard', () => {
// Start Date
openPicker(container);
fireEvent.change(container.querySelector('input'), { target: { value: '1990-01-01' } });
- keyDown(KeyCode.TAB);
- keyDown(KeyCode.DOWN);
- keyDown(KeyCode.ENTER);
+ keyDown('Tab');
+ keyDown('ArrowDown');
+ keyDown('Enter');
expect(onCalendarChange.mock.calls[0][1]).toEqual(['1990-01-08', '']);
expect(onChange).not.toHaveBeenCalled();
@@ -426,9 +411,9 @@ describe('Picker.Keyboard', () => {
fireEvent.change(document.querySelectorAll('input')[1], {
target: { value: '2000-01-01' },
});
- keyDown(KeyCode.TAB, {}, 1);
- keyDown(KeyCode.DOWN, {}, 1);
- keyDown(KeyCode.ENTER, {}, 1);
+ keyDown('Tab', {}, 1);
+ keyDown('ArrowDown', {}, 1);
+ keyDown('Enter', {}, 1);
expect(onCalendarChange.mock.calls[0][1]).toEqual(['1990-01-08', '2000-01-08']);
expect(onChange.mock.calls[0][1]).toEqual(['1990-01-08', '2000-01-08']);
@@ -451,7 +436,7 @@ describe('Picker.Keyboard', () => {
expect(onFocus).toHaveBeenCalled();
fireEvent.change(container.querySelector('input'), { target: { value: '1990-01-01' } });
- keyDown(KeyCode.ESC);
+ keyDown('Escape');
expect(container.querySelector('input').value).toEqual('');
});
@@ -469,9 +454,9 @@ describe('Picker.Keyboard', () => {
// .first()
// .simulate('change', { target: { value: '' } });
fireEvent.change(container.querySelector('input'), { target: { value: '' } });
- keyDown(KeyCode.TAB);
- keyDown(KeyCode.RIGHT);
- keyDown(KeyCode.ENTER);
+ keyDown('Tab');
+ keyDown('ArrowRight');
+ keyDown('Enter');
expect(onCalendarChange.mock.calls[0][1]).toEqual(['1990-09-04', '']);
expect(onChange).not.toHaveBeenCalled();
});
@@ -479,7 +464,7 @@ describe('Picker.Keyboard', () => {
it('enter should prevent default to avoid form submit', () => {
render(<MomentPicker />);
- const event = keyDown(KeyCode.ENTER);
+ const event = keyDown('Enter');
expect(event.defaultPrevented).toBeTruthy();
});
@@ -498,14 +483,14 @@ describe('Picker.Keyboard', () => {
);
// document.querySelector('input').simulate('focus');
fireEvent.focus(container.querySelector('input'));
- keyDown(KeyCode.ENTER);
- keyDown(KeyCode.TAB);
- keyDown(KeyCode.TAB);
- keyDown(KeyCode.DOWN);
+ keyDown('Enter');
+ keyDown('Tab');
+ keyDown('Tab');
+ keyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy();
// Not enter to change
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
expect(onChange).not.toHaveBeenCalled();
// Not button enabled
@@ -514,11 +499,11 @@ describe('Picker.Keyboard', () => {
).toBeTruthy();
// Another can be enter
- keyDown(KeyCode.RIGHT);
+ keyDown('ArrowRight');
expect(
document.querySelector<HTMLButtonElement>('.rc-picker-ok button').disabled,
).toBeFalsy();
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
expect(onChange).toHaveBeenCalled();
});
@@ -535,19 +520,19 @@ describe('Picker.Keyboard', () => {
fireEvent.focus(document.querySelector('.rc-picker-panel'));
// 9-02、9-04、9-10 is disabled
- panelKeyDown(KeyCode.LEFT);
- panelKeyDown(KeyCode.RIGHT);
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowLeft');
+ panelKeyDown('ArrowRight');
+ panelKeyDown('ArrowDown');
expect(onSelect).not.toHaveBeenCalled();
// 7-27、8-27 is enabled
- panelKeyDown(KeyCode.UP);
+ panelKeyDown('ArrowUp');
expect(isSame(onSelect.mock.calls[0][0], '1990-08-27')).toBeTruthy();
onSelect.mockReset();
- panelKeyDown(KeyCode.PAGE_UP);
+ panelKeyDown('PageUp');
expect(isSame(onSelect.mock.calls[0][0], '1990-07-27')).toBeTruthy();
onSelect.mockReset();
- panelKeyDown(KeyCode.PAGE_DOWN);
+ panelKeyDown('PageDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-08-27')).toBeTruthy();
});
@@ -567,22 +552,22 @@ describe('Picker.Keyboard', () => {
fireEvent.focus(document.querySelector('.rc-picker-panel'));
// PAGE_UP and PAGE_DOWN do not trigger the select
- panelKeyDown(KeyCode.PAGE_UP);
- panelKeyDown(KeyCode.PAGE_DOWN);
+ panelKeyDown('PageUp');
+ panelKeyDown('PageDown');
expect(onSelect).not.toHaveBeenCalled();
// The disabled date is before August
- panelKeyDown(KeyCode.LEFT);
- panelKeyDown(KeyCode.UP);
+ panelKeyDown('ArrowLeft');
+ panelKeyDown('ArrowUp');
expect(onSelect).not.toHaveBeenCalled();
// August and subsequent dates are enable
- panelKeyDown(KeyCode.RIGHT);
+ panelKeyDown('ArrowRight');
expect(isSame(onSelect.mock.calls[0][0], '1990-10-03')).toBeTruthy();
onSelect.mockReset();
- panelKeyDown(KeyCode.LEFT);
+ panelKeyDown('ArrowLeft');
onSelect.mockReset();
- panelKeyDown(KeyCode.DOWN);
+ panelKeyDown('ArrowDown');
expect(isSame(onSelect.mock.calls[0][0], '1990-12-03')).toBeTruthy();
});
});
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index 87b0237e6..78f07e9c8 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -3,7 +3,6 @@ import { act, createEvent, fireEvent, render } from '@testing-library/react';
import type { Moment } from 'moment';
import moment from 'moment';
import 'moment/locale/zh-cn';
-import KeyCode from 'rc-util/lib/KeyCode';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
import { resetWarned } from 'rc-util/lib/warning';
import React from 'react';
@@ -44,12 +43,8 @@ describe('Picker.Basic', () => {
jest.useRealTimers();
});
- function keyDown(keyCode: number) {
- fireEvent.keyDown(document.querySelector('input'), {
- keyCode,
- which: keyCode,
- charCode: keyCode,
- });
+ function keyDown(key: string) {
+ fireEvent.keyDown(document.querySelector('input'), { key });
}
function selectColumn(colIndex: number, rowIndex: number) {
@@ -272,7 +267,7 @@ describe('Picker.Basic', () => {
expect(document.querySelector('input').value).toEqual(value);
expect(onChange).not.toHaveBeenCalled();
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
expect(isSame(onChange.mock.calls[0][0], matchDate, picker as any)).toBeTruthy();
expect(document.querySelector(selected)).toBeTruthy();
@@ -368,7 +363,7 @@ describe('Picker.Basic', () => {
openPicker(container);
$input.focus();
- keyDown(KeyCode.ESC);
+ keyDown('Escape');
expect(document.activeElement).toBe($input);
@@ -1036,23 +1031,23 @@ describe('Picker.Basic', () => {
const { container } = render(<MomentPicker />);
closePicker(container);
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
expect(isOpen()).toBeTruthy();
});
it('should not open if prevent default is called', () => {
- const onKeyDown = jest.fn(({ which }, preventDefault) => {
- if (which === 13) preventDefault();
+ const onKeyDown = jest.fn(({ key }, preventDefault) => {
+ if (key === 'Enter') preventDefault();
});
const { container } = render(<MomentPicker onKeyDown={onKeyDown} />);
openPicker(container);
expect(isOpen()).toBeTruthy();
- keyDown(KeyCode.ESC);
+ keyDown('Escape');
expect(isOpen()).toBeFalsy();
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
expect(isOpen()).toBeFalsy();
});
});
@@ -1063,7 +1058,7 @@ describe('Picker.Basic', () => {
target: { value: moment().add(1, 'year').format('YYYY-MM-DD') },
});
- keyDown(KeyCode.ENTER);
+ keyDown('Enter');
});
it('presets', () => {
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 554c57836..e26f8e0e7 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1,7 +1,6 @@
import { act, createEvent, fireEvent, render } from '@testing-library/react';
import type { Moment } from 'moment';
import moment from 'moment';
-import KeyCode from 'rc-util/lib/KeyCode';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
import { resetWarned } from 'rc-util/lib/warning';
import React from 'react';
@@ -51,12 +50,8 @@ describe('Picker.Range', () => {
jest.useRealTimers();
});
- function keyDown(container: HTMLElement, index: number, keyCode: number) {
- fireEvent.keyDown(container.querySelectorAll('input')[index], {
- keyCode,
- which: keyCode,
- charCode: keyCode,
- });
+ function keyDown(container: HTMLElement, index: number, key: string) {
+ fireEvent.keyDown(container.querySelectorAll('input')[index], { key });
}
describe('value', () => {
@@ -650,9 +645,9 @@ describe('Picker.Range', () => {
},
});
// document.querySelector('input').last().simulate('keyDown', {
- // which: KeyCode.ENTER,
+ // key: 'Enter',
// });
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
expect(onChange).not.toHaveBeenCalled();
});
@@ -1233,12 +1228,12 @@ describe('Picker.Range', () => {
openPicker(container, 0);
inputValue('1990-11-28');
// closePicker(container, 0);
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
expect(isOpen()).toBeTruthy();
inputValue('1991-01-01');
// closePicker(container, 1);
- keyDown(container, 1, KeyCode.ENTER);
+ keyDown(container, 1, 'Enter');
expect(isOpen()).toBeFalsy();
});
@@ -1250,13 +1245,13 @@ describe('Picker.Range', () => {
openPicker(container, 0);
inputValue('1990-11-28');
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
// closePicker(container, 0);
expect(isOpen()).toBeTruthy();
inputValue('1990-12-23');
// closePicker(container, 1);
- keyDown(container, 1, KeyCode.ENTER);
+ keyDown(container, 1, 'Enter');
expect(isOpen()).toBeFalsy();
});
@@ -1268,12 +1263,12 @@ describe('Picker.Range', () => {
openPicker(container, 0);
inputValue('1989-01-20');
// closePicker(container, 0);
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
expect(isOpen()).toBeTruthy();
inputValue('1989-01-25');
// closePicker(container, 1);
- keyDown(container, 1, KeyCode.ENTER);
+ keyDown(container, 1, 'Enter');
expect(isOpen()).toBeFalsy();
});
});
@@ -1283,13 +1278,13 @@ describe('Picker.Range', () => {
openPicker(container, 1);
inputValue('1990-11-28', 1);
- keyDown(container, 1, KeyCode.ENTER);
+ keyDown(container, 1, 'Enter');
// closePicker(container, 1);
expect(isOpen()).toBeTruthy();
inputValue('1989-01-01');
// closePicker(container, 0);
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
expect(isOpen()).toBeFalsy();
});
@@ -1301,12 +1296,12 @@ describe('Picker.Range', () => {
openPicker(container, 1);
inputValue('1990-11-28', 1);
- keyDown(container, 1, KeyCode.ENTER);
+ keyDown(container, 1, 'Enter');
// closePicker(container, 1);
expect(isOpen()).toBeTruthy();
inputValue('1989-01-01');
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
// closePicker(container, 0);
expect(isOpen()).toBeFalsy();
});
@@ -1319,11 +1314,11 @@ describe('Picker.Range', () => {
openPicker(container, 1);
inputValue('1989-01-07', 1);
- keyDown(container, 1, KeyCode.ENTER);
+ keyDown(container, 1, 'Enter');
expect(isOpen()).toBeTruthy();
inputValue('1989-01-01');
- keyDown(container, 0, KeyCode.ENTER);
+ keyDown(container, 0, 'Enter');
expect(isOpen()).toBeFalsy();
});
});
@@ -1686,24 +1681,20 @@ describe('Picker.Range', () => {
);
fireEvent.focus(document.querySelector('input'));
- function pickerKeyDown(keyCode: number) {
- fireEvent.keyDown(container.querySelector('.rc-picker'), {
- keyCode,
- which: keyCode,
- charCode: keyCode,
- });
+ function pickerKeyDown(key: string) {
+ fireEvent.keyDown(container.querySelector('.rc-picker'), { key });
}
- pickerKeyDown(KeyCode.ENTER);
- pickerKeyDown(KeyCode.TAB);
+ pickerKeyDown('Enter');
+ pickerKeyDown('Tab');
// Make sure the selected value is disabledDate. Because only a few values are disabledDate
- pickerKeyDown(KeyCode.DOWN);
- pickerKeyDown(KeyCode.DOWN);
- pickerKeyDown(KeyCode.DOWN);
- pickerKeyDown(KeyCode.DOWN);
- pickerKeyDown(KeyCode.DOWN);
- pickerKeyDown(KeyCode.DOWN);
- pickerKeyDown(KeyCode.ENTER);
+ pickerKeyDown('ArrowDown');
+ pickerKeyDown('ArrowDown');
+ pickerKeyDown('ArrowDown');
+ pickerKeyDown('ArrowDown');
+ pickerKeyDown('ArrowDown');
+ pickerKeyDown('ArrowDown');
+ pickerKeyDown('Enter');
expect(onCalendarChange).not.toHaveBeenCalled();
});
@@ -1974,9 +1965,7 @@ describe('Picker.Range', () => {
it('dateTime mode should be can use a confirm button to close the panel', () => {
const onOpenChange = jest.fn();
- render(
- <MomentRangePicker open showTime onOpenChange={onOpenChange} />,
- );
+ render(<MomentRangePicker open showTime onOpenChange={onOpenChange} />);
for (let i = 0; i < 2; i++) {
selectCell(24);
diff --git a/tests/setup.js b/tests/setup.js
index f2601cd4d..96eb3e316 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -68,14 +68,14 @@
// this.find('.rc-picker-clear-btn').simulate('mouseDown');
// this.find('.rc-picker-clear-btn').simulate('mouseUp');
// },
-// keyDown(which, info = {}, index = 0) {
+// keyDown(key, info = {}, index = 0) {
// let component = this.find('input');
// if (component.length === 0) {
// component = this.find('.rc-picker-panel');
// }
-// component.at(index).simulate('keydown', { ...info, which });
+// component.at(index).simulate('keydown', { ...info, key });
// },
// inputValue(text, index = 0) {
// this.find('input')
diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx
index e3ccb7c15..3b8ee2c9e 100644
--- a/tests/util/commonUtil.tsx
+++ b/tests/util/commonUtil.tsx
@@ -27,7 +27,7 @@ const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss';
// findCell: (text: number | string, index?: number) => Wrapper;
// selectCell: (text: number | string, index?: number) => Wrapper;
// clearValue: (index?: number) => void;
-// keyDown: (which: number, info?: object, index?: number) => void;
+// keyDown: (key: string, info?: object, index?: number) => void;
// clickButton: (type: 'prev' | 'next' | 'super-prev' | 'super-next') => Wrapper;
// inputValue: (text: string, index?: number) => Wrapper;
// };