Update deprecated keyboard event props

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 (

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);
         }
       }
 

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

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;
       }

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,39 +98,39 @@ export function createKeyDownHandler(
       /* istanbul ignore next */
       break;
 
-    case KeyCode.UP:
+    case 'ArrowUp':
       if (onUpDown) {
         onUpDown(-1);
         return true;
       }
       /* istanbul ignore next */
       break;
 
-    case KeyCode.DOWN:
+    case 'ArrowDown':
       if (onUpDown) {
         onUpDown(1);
         return true;
       }
       /* istanbul ignore next */
       break;
 
-    case KeyCode.PAGE_UP:
+    case 'PageUp':
       if (onPageUpDown) {
         onPageUpDown(-1);
         return true;
       }
       /* istanbul ignore next */
       break;
 
-    case KeyCode.PAGE_DOWN:
+    case 'PageDown':
       if (onPageUpDown) {
         onPageUpDown(1);
         return true;
       }
       /* istanbul ignore next */
       break;
 
-    case KeyCode.ENTER:
+    case 'Enter':
       if (onEnter) {
         onEnter();
         return true;