refactor: changeOnWheel (#619)

* refactor: changeOnWheel

* chore: code optimize

* chore: code opt

Author: MadCcc

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 (
+    <div style={{ margin: 10 }}>
+      <InputNumber
+        style={{ width: 100 }}
+        defaultValue={10}
+        changeOnBlur={false}
+        changeOnWheel
+      />
+    </div>
+  );
+};

docs/example.md

@@ -41,4 +41,8 @@ nav:
 
 <code src="./demo/small-step.tsx"></code>
 
+## wheel
+
+<code src="./demo/wheel.tsx"></code>
+
 

src/InputNumber.tsx

@@ -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;
@@ -118,7 +118,7 @@ const InternalInputNumber = React.forwardRef(
       upHandler,
       downHandler,
       keyboard,
-      wheel,
+      changeOnWheel = false,
       controls = true,
 
       classNames,
@@ -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 = () => {

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(<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',
@@ -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',
@@ -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',