From e96777d3488a3dc0c0fce5aae62cb12189af9e4a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 24 Jan 2024 15:42:27 +0800 Subject: [PATCH 1/3] refactor: changeOnWheel --- docs/demo/wheel.tsx | 17 +++++++++++++++++ docs/example.md | 4 ++++ src/InputNumber.tsx | 6 +++--- tests/wheel.test.tsx | 17 +++++++++++------ 4 files changed, 35 insertions(+), 9 deletions(-) create mode 100644 docs/demo/wheel.tsx diff --git a/docs/demo/wheel.tsx b/docs/demo/wheel.tsx new file mode 100644 index 00000000..84b2b70e --- /dev/null +++ b/docs/demo/wheel.tsx @@ -0,0 +1,17 @@ +/* eslint no-console:0 */ +import InputNumber from 'rc-input-number'; +import React from 'react'; +import '../../assets/index.less'; + +export default () => { + return ( +
+ +
+ ); +}; diff --git a/docs/example.md b/docs/example.md index 77dc42ef..72af5617 100644 --- a/docs/example.md +++ b/docs/example.md @@ -41,4 +41,8 @@ nav: +## wheel + + + diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 2e92ff95..787cd7d5 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -76,7 +76,7 @@ export interface InputNumberProps upHandler?: React.ReactNode; downHandler?: React.ReactNode; keyboard?: boolean; - wheel?: boolean; + changeOnWheel?: boolean; /** Parse display value to validate number */ parser?: (displayValue: string | undefined) => T; @@ -118,7 +118,7 @@ const InternalInputNumber = React.forwardRef( upHandler, downHandler, keyboard, - wheel, + changeOnWheel = false, controls = true, classNames, @@ -511,7 +511,7 @@ const InternalInputNumber = React.forwardRef( React.useEffect(() => { const onWheel = (event) => { - if (wheel === false) { + if (changeOnWheel === false || !focus) { return; } // moving mouse wheel rises wheel event with deltaY < 0 diff --git a/tests/wheel.test.tsx b/tests/wheel.test.tsx index 8356129c..ece30502 100644 --- a/tests/wheel.test.tsx +++ b/tests/wheel.test.tsx @@ -5,14 +5,16 @@ import { fireEvent, render } from './util/wrapper'; describe('InputNumber.Wheel', () => { it('wheel up', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); + fireEvent.focus(container.firstChild); fireEvent.wheel(container.querySelector('input'), {deltaY: -1}); expect(onChange).toHaveBeenCalledWith(1); }); it('wheel up with pressing shift key', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); + fireEvent.focus(container.firstChild); fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.SHIFT, key: 'Shift', @@ -25,14 +27,16 @@ describe('InputNumber.Wheel', () => { it('wheel down', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); + fireEvent.focus(container.firstChild); fireEvent.wheel(container.querySelector('input'), {deltaY: 1}); expect(onChange).toHaveBeenCalledWith(-1); }); it('wheel down with pressing shift key', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); + fireEvent.focus(container.firstChild); fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.SHIFT, key: 'Shift', @@ -45,7 +49,7 @@ describe('InputNumber.Wheel', () => { it('disabled wheel', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); fireEvent.wheel(container.querySelector('input'), {deltaY: -1}); expect(onChange).not.toHaveBeenCalled(); @@ -56,7 +60,8 @@ describe('InputNumber.Wheel', () => { it('wheel is limited to range', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); + fireEvent.focus(container.firstChild); fireEvent.keyDown(container.querySelector('input'), { which: KeyCode.SHIFT, key: 'Shift', From 28eb67f96277a228ed4c1fb91854eb9f63fc5e14 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 24 Jan 2024 17:25:28 +0800 Subject: [PATCH 2/3] chore: code optimize --- src/InputNumber.tsx | 34 ++++++++++++++++++---------------- tests/wheel.test.tsx | 9 ++++++++- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 787cd7d5..4b00426d 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -510,24 +510,26 @@ const InternalInputNumber = React.forwardRef( }; React.useEffect(() => { - const onWheel = (event) => { - if (changeOnWheel === false || !focus) { - return; + if (changeOnWheel) { + const onWheel = (event) => { + if (!focus) { + return; + } + // moving mouse wheel rises wheel event with deltaY < 0 + // scroll value grows from top to bottom, as screen Y coordinate + onInternalStep(event.deltaY < 0); + event.preventDefault(); + }; + const input = inputRef.current; + if (input) { + // React onWheel is passive and we can't preventDefault() in it. + // That's why we should subscribe with DOM listener + // https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev + input.addEventListener('wheel', onWheel, { passive: false }); + return () => input.removeEventListener('wheel', onWheel); } - // moving mouse wheel rises wheel event with deltaY < 0 - // scroll value grows from top to bottom, as screen Y coordinate - onInternalStep(event.deltaY < 0); - event.preventDefault(); - }; - const input = inputRef.current; - if (input) { - // React onWheel is passive and we can't preventDefault() in it. - // That's why we should subscribe with DOM listener - // https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev - input.addEventListener('wheel', onWheel, { passive: false }); - return () => input.removeEventListener('wheel', onWheel); } - }, [onInternalStep]); + }); // >>> Focus & Blur const onBlur = () => { diff --git a/tests/wheel.test.tsx b/tests/wheel.test.tsx index ece30502..07707c42 100644 --- a/tests/wheel.test.tsx +++ b/tests/wheel.test.tsx @@ -49,13 +49,20 @@ describe('InputNumber.Wheel', () => { it('disabled wheel', () => { const onChange = jest.fn(); - const { container } = render(); + const { container, rerender } = render(); + fireEvent.focus(container.firstChild); fireEvent.wheel(container.querySelector('input'), {deltaY: -1}); expect(onChange).not.toHaveBeenCalled(); fireEvent.wheel(container.querySelector('input'), {deltaY: 1}); expect(onChange).not.toHaveBeenCalled(); + + rerender(); + fireEvent.focus(container.firstChild); + + fireEvent.wheel(container.querySelector('input'), {deltaY: 1}); + expect(onChange).toHaveBeenCalledWith(-1); }); it('wheel is limited to range', () => { From 5292328a760224c5eb29c0488292fa9748929928 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 24 Jan 2024 17:34:20 +0800 Subject: [PATCH 3/3] chore: code opt --- src/InputNumber.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 4b00426d..bbf83115 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -510,11 +510,8 @@ const InternalInputNumber = React.forwardRef( }; React.useEffect(() => { - if (changeOnWheel) { + if (changeOnWheel && focus) { const onWheel = (event) => { - if (!focus) { - return; - } // moving mouse wheel rises wheel event with deltaY < 0 // scroll value grows from top to bottom, as screen Y coordinate onInternalStep(event.deltaY < 0);