refactor: replace deprecated keyboard event prop (#553)

* refactor: replace deprecated keyboard event prop * fix: set https link in package.json * test: fix minor typing issue --------- Co-authored-by: Andreas Richter <[email protected]>
react-component · Apr 1, 2023 · a225ca0 · a225ca0 · vercel · Apr 1, 2023
1 parent 4837f77
commit a225ca0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   ],
   "homepage": "https://github.com/react-component/input-number",
   "bugs": {
-    "url": "http://github.com/react-component/input-number/issues"
+    "url": "https://github.com/react-component/input-number/issues"
   },
   "repository": {
     "type": "git",
@@ -72,7 +72,7 @@
     "husky": "^8.0.3",
     "jest-environment-jsdom": "^29.3.1",
     "less": "^3.12.2",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^13.2.0",
     "np": "^7.2.0",
     "rc-test": "^7.0.14",
     "rc-tooltip": "^5.0.2",

diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
@@ -1,19 +1,18 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import KeyCode from 'rc-util/lib/KeyCode';
-import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect';
-import { composeRef } from 'rc-util/lib/ref';
 import getMiniDecimal, {
   DecimalClass,
-  toFixed,
-  ValueType,
   getNumberPrecision,
   num2str,
+  toFixed,
   validateNumber,
+  ValueType,
 } from '@rc-component/mini-decimal';
+import classNames from 'classnames';
+import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect';
+import { composeRef } from 'rc-util/lib/ref';
+import * as React from 'react';
+import useCursor from './hooks/useCursor';
 import StepHandler from './StepHandler';
 import { getDecupleSteps } from './utils/numberUtil';
-import useCursor from './hooks/useCursor';
 
 import useFrame from './hooks/useFrame';
 
@@ -220,7 +219,7 @@ const InputNumber = React.forwardRef(
     /**
      * Input text value control
      *
-     * User can not update input content directly. It update with follow rules by priority:
+     * User can not update input content directly. It updates with follow rules by priority:
      *  1. controlled `value` changed
      *    * [SPECIAL] Typing like `1.` should not immediately convert to `1`
      *  2. User typing with format (not precision)
@@ -353,7 +352,7 @@ const InputNumber = React.forwardRef(
     const collectInputValue = (inputStr: string) => {
       recordCursor();
 
-      // Update inputValue incase input can not parse as number
+      // Update inputValue in case input can not parse as number
       setInternalInputValue(inputStr);
 
       // Parse number
@@ -365,7 +364,7 @@ const InputNumber = React.forwardRef(
         }
       }
 
-      // Trigger onInput later to let user customize value if they want do handle something after onChange
+      // Trigger onInput later to let user customize value if they want to handle something after onChange
       onInput?.(inputStr);
 
       // optimize for chinese input experience
@@ -405,7 +404,7 @@ const InputNumber = React.forwardRef(
         return;
       }
 
-      // Clear typing status since it may caused by up & down key.
+      // Clear typing status since it may be caused by up & down key.
       // We should sync with input value.
       userTypingRef.current = false;
 
@@ -457,16 +456,12 @@ const InputNumber = React.forwardRef(
     };
 
     const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-      const { which, shiftKey } = event;
+      const { key, shiftKey } = event;
       userTypingRef.current = true;
 
-      if (shiftKey) {
-        shiftKeyRef.current = true;
-      } else {
-        shiftKeyRef.current = false;
-      }
+      shiftKeyRef.current = shiftKey;
 
-      if (which === KeyCode.ENTER) {
+      if (key === 'Enter') {
         if (!compositionRef.current) {
           userTypingRef.current = false;
         }
@@ -479,8 +474,8 @@ const InputNumber = React.forwardRef(
       }
 
       // Do step
-      if (!compositionRef.current && [KeyCode.UP, KeyCode.DOWN].includes(which)) {
-        onInternalStep(KeyCode.UP === which);
+      if (!compositionRef.current && ['Up', 'ArrowUp', 'Down', 'ArrowDown'].includes(key)) {
+        onInternalStep(key === 'Up' || key === 'ArrowUp');
         event.preventDefault();
       }
     };

diff --git a/tests/github.test.tsx b/tests/github.test.tsx
@@ -1,8 +1,8 @@
+import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { render, fireEvent, screen, waitFor } from './util/wrapper';
 import InputNumber from '../src';
-import KeyCode from 'rc-util/lib/KeyCode';
+import { fireEvent, render, screen, waitFor } from './util/wrapper';
 
 // Github issues
 describe('InputNumber.Github', () => {
@@ -492,7 +492,7 @@ describe('InputNumber.Github', () => {
     fireEvent.change(screen.getByTestId('last'), { target: { value: '1.23' } });
     fireEvent.change(screen.getByTestId('first'), { target: { value: '0' } });
 
-    expect(screen.getByTestId('last').value).toEqual('1');
+    expect(screen.getByTestId<HTMLInputElement>('last').value).toEqual('1');
   });
 
   // https://github.com/ant-design/ant-design/issues/30478

diff --git a/tests/keyboard.test.tsx b/tests/keyboard.test.tsx
@@ -1,34 +1,51 @@
-import React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
-import { render, fireEvent} from './util/wrapper';
 import InputNumber from '../src';
+import { fireEvent, render } from './util/wrapper';
 
 describe('InputNumber.Keyboard', () => {
   it('up', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber onChange={onChange} />);
-    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.UP,key: "Up Arrow", keyCode: KeyCode.UP  });
+    fireEvent.keyDown(container.querySelector('input'), {
+      which: KeyCode.UP,
+      key: 'ArrowUp',
+      keyCode: KeyCode.UP,
+    });
     expect(onChange).toHaveBeenCalledWith(1);
   });
 
   it('up with pressing shift key', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber onChange={onChange} step={0.01} value={1.2} />);
-    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.UP,key: "Up Arrow",keyCode: KeyCode.UP , shiftKey: true });
+    fireEvent.keyDown(container.querySelector('input'), {
+      which: KeyCode.UP,
+      key: 'ArrowUp',
+      keyCode: KeyCode.UP,
+      shiftKey: true,
+    });
     expect(onChange).toHaveBeenCalledWith(1.3);
   });
 
   it('down', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber onChange={onChange} />);
-    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.DOWN,key: "Dw Arrow",keyCode: KeyCode.DOWN  });
+    fireEvent.keyDown(container.querySelector('input'), {
+      which: KeyCode.DOWN,
+      key: 'ArrowDown',
+      keyCode: KeyCode.DOWN,
+    });
     expect(onChange).toHaveBeenCalledWith(-1);
   });
 
   it('down with pressing shift key', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber onChange={onChange} step={0.01} value={1.2} />);
-    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.DOWN, key: "Dw Arrow",keyCode: KeyCode.DOWN ,shiftKey: true });
+    fireEvent.keyDown(container.querySelector('input'), {
+      which: KeyCode.DOWN,
+      key: 'ArrowDown',
+      keyCode: KeyCode.DOWN,
+      shiftKey: true,
+    });
     expect(onChange).toHaveBeenCalledWith(1.1);
   });
 
@@ -38,22 +55,22 @@ describe('InputNumber.Keyboard', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber keyboard={false} onChange={onChange} />);
 
-    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.UP,key: "Up Arrow" });
+    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.UP, key: 'ArrowUp' });
     expect(onChange).not.toHaveBeenCalled();
 
-    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.DOWN,key: "Dw Arrow"  });
+    fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.DOWN, key: 'ArrowDown' });
     expect(onChange).not.toHaveBeenCalled();
   });
 
   it('enter to trigger onChange with precision', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber precision={0} onChange={onChange} />);
-    const input = container.querySelector('input')
-    fireEvent.change(input,{ target: { value: '2.3333' } })
+    const input = container.querySelector('input');
+    fireEvent.change(input, { target: { value: '2.3333' } });
     expect(onChange).toHaveBeenCalledWith(2.3333);
     onChange.mockReset();
 
-    fireEvent.keyDown(input, { which: KeyCode.ENTER,key: "Enter", keyCode: KeyCode.ENTER  });
+    fireEvent.keyDown(input, { which: KeyCode.ENTER, key: 'Enter', keyCode: KeyCode.ENTER });
     expect(onChange).toHaveBeenCalledWith(2);
   });
 });