Skip to content

Commit

Permalink
refactor: changeOnWheel (#619)
Browse files Browse the repository at this point in the history
* refactor: changeOnWheel

* chore: code optimize

* chore: code opt
  • Loading branch information
MadCcc authored Jan 25, 2024
1 parent 3323fbb commit 3742a02
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 24 deletions.
17 changes: 17 additions & 0 deletions docs/demo/wheel.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div style={{ margin: 10 }}>
<InputNumber
style={{ width: 100 }}
defaultValue={10}
changeOnBlur={false}
changeOnWheel
/>
</div>
);
};
4 changes: 4 additions & 0 deletions docs/example.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,8 @@ nav:

<code src="./demo/small-step.tsx"></code>

## wheel

<code src="./demo/wheel.tsx"></code>


35 changes: 17 additions & 18 deletions src/InputNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
upHandler?: React.ReactNode;
downHandler?: React.ReactNode;
keyboard?: boolean;
wheel?: boolean;
changeOnWheel?: boolean;

/** Parse display value to validate number */
parser?: (displayValue: string | undefined) => T;
Expand Down Expand Up @@ -118,7 +118,7 @@ const InternalInputNumber = React.forwardRef(
upHandler,
downHandler,
keyboard,
wheel,
changeOnWheel = false,
controls = true,

classNames,
Expand Down Expand Up @@ -510,24 +510,23 @@ const InternalInputNumber = React.forwardRef(
};

React.useEffect(() => {
const onWheel = (event) => {
if (wheel === false) {
return;
if (changeOnWheel && focus) {
const onWheel = (event) => {
// 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 = () => {
Expand Down
24 changes: 18 additions & 6 deletions tests/wheel.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import { fireEvent, render } from './util/wrapper';
describe('InputNumber.Wheel', () => {
it('wheel up', () => {
const onChange = jest.fn();
const { container } = render(<InputNumber onChange={onChange} />);
const { container } = render(<InputNumber onChange={onChange} changeOnWheel />);
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(<InputNumber onChange={onChange} step={0.01} value={1.2} />);
const { container } = render(<InputNumber onChange={onChange} step={0.01} value={1.2} changeOnWheel />);
fireEvent.focus(container.firstChild);
fireEvent.keyDown(container.querySelector('input'), {
which: KeyCode.SHIFT,
key: 'Shift',
Expand All @@ -25,14 +27,16 @@ describe('InputNumber.Wheel', () => {

it('wheel down', () => {
const onChange = jest.fn();
const { container } = render(<InputNumber onChange={onChange} />);
const { container } = render(<InputNumber onChange={onChange} changeOnWheel />);
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(<InputNumber onChange={onChange} step={0.01} value={1.2} />);
const { container } = render(<InputNumber onChange={onChange} step={0.01} value={1.2} changeOnWheel />);
fireEvent.focus(container.firstChild);
fireEvent.keyDown(container.querySelector('input'), {
which: KeyCode.SHIFT,
key: 'Shift',
Expand All @@ -45,18 +49,26 @@ describe('InputNumber.Wheel', () => {

it('disabled wheel', () => {
const onChange = jest.fn();
const { container } = render(<InputNumber wheel={false} onChange={onChange} />);
const { container, rerender } = render(<InputNumber onChange={onChange} />);
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(<InputNumber onChange={onChange} changeOnWheel />);
fireEvent.focus(container.firstChild);

fireEvent.wheel(container.querySelector('input'), {deltaY: 1});
expect(onChange).toHaveBeenCalledWith(-1);
});

it('wheel is limited to range', () => {
const onChange = jest.fn();
const { container } = render(<InputNumber onChange={onChange} min={-3} max={3} />);
const { container } = render(<InputNumber onChange={onChange} min={-3} max={3} changeOnWheel />);
fireEvent.focus(container.firstChild);
fireEvent.keyDown(container.querySelector('input'), {
which: KeyCode.SHIFT,
key: 'Shift',
Expand Down

1 comment on commit 3742a02

@vercel
Copy link

@vercel vercel bot commented on 3742a02 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.