Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: changeOnWheel #619

Merged
merged 3 commits into from
Jan 25, 2024
Merged

refactor: changeOnWheel #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e96777d
refactor: changeOnWheel
MadCcc Jan 24, 2024
28eb67f
chore: code optimize
MadCcc Jan 24, 2024
5292328
chore: code opt
MadCcc Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions docs/demo/wheel.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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,
Copy link
Member

Choose a reason for hiding this comment

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

focus 才能滚是不是可以直接 true 了？

Copy link
Member Author

Choose a reason for hiding this comment

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

还是比较危险，想默认关闭

Copy link
Member

Choose a reason for hiding this comment

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

可不可以先开启，然后有问题反馈再关闭呢？focus + hover 感觉已经是非常约束的条件了。

Copy link

Choose a reason for hiding this comment

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

默认关闭吧，如果设置了 autoFocus 的话容易被劫持...

Copy link
Member

@afc163 afc163 Jan 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

老属性删掉属于 breaking change，需要发 major。

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
View file
Open in desktop
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
Loading