From 1d6e335c1b9cbddb064b8f641c153297acfb324c Mon Sep 17 00:00:00 2001 From: Andreas Richter Date: Fri, 31 Mar 2023 22:00:03 +0200 Subject: [PATCH 1/3] refactor: replace deprecated keyboard event prop --- package.json | 2 +- src/InputNumber.tsx | 37 ++++++++++++++++--------------------- tests/keyboard.test.tsx | 39 ++++++++++++++++++++++++++++----------- 3 files changed, 45 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 4e1a3c11..bdf9cb66 100644 --- a/package.json +++ b/package.json @@ -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/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); }); }); From b4e6212fc2dc06765a5a35f1b7167d8618147dc4 Mon Sep 17 00:00:00 2001 From: Andreas Richter Date: Fri, 31 Mar 2023 22:02:37 +0200 Subject: [PATCH 2/3] fix: set https link in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bdf9cb66..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", From 3832179132c0e233c0549fc513797c92d48a17e0 Mon Sep 17 00:00:00 2001 From: Andreas Richter Date: Fri, 31 Mar 2023 22:13:41 +0200 Subject: [PATCH 3/3] test: fix minor typing issue --- tests/github.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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