From a225ca04e57f92fc77b7c6770cd90bcbb3813f95 Mon Sep 17 00:00:00 2001 From: aaarichter Date: Sat, 1 Apr 2023 07:07:01 +0200 Subject: [PATCH] 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 --- package.json | 4 ++-- src/InputNumber.tsx | 37 ++++++++++++++++--------------------- tests/github.test.tsx | 6 +++--- tests/keyboard.test.tsx | 39 ++++++++++++++++++++++++++++----------- 4 files changed, 49 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 4e1a3c11..c337f156 100644 --- 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 index 27952e2c..f182de76 100644 --- 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 = (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 index 0294ae21..6739d5b2 100644 --- 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('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 index 8d18e53e..a6f1dfa7 100644 --- 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(); - 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(); - 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(); - 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(); - 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(); - 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(); - 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); }); });