feat: add a new parameter for onStep & update api-docs (#701)

react-component · Feb 7, 2025 · 4c83785 · 4c83785
1 parent d9662d5
commit 4c83785
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 17 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -80,7 +80,13 @@ nav:
           <td>readOnly</td>
           <td>Boolean</td>
           <td>false</td>
-          <td>Specifies that an InputNumber is read only </td>
+          <td>Specifies that an InputNumber is read only</td>
+        </tr>
+        <tr>
+          <td>changeOnWheel</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Specifies that the value is set using the mouse wheel</td>
         </tr>
         <tr>
           <td>controls</td>
@@ -136,6 +142,12 @@ nav:
           <td></td>
           <td>Called when an element gets focus</td>
         </tr>
+        <tr>
+          <td>onStep</td>
+          <td>(value: T, info: { offset: ValueType; type: 'up' | 'down', emitter: 'handler' | 'keydown' | 'wheel' }) => void</td>
+          <td></td>
+          <td>Called when the user clicks the arrows on the keyboard or interface and when the mouse wheel is spun.</td>
+        </tr>
         <tr>
           <td>style</td>
           <td>Object</td>

diff --git a/docs/demo/on-step.tsx b/docs/demo/on-step.tsx
@@ -0,0 +1,46 @@
+/* eslint no-console:0 */
+import InputNumber from '@rc-component/input-number';
+import React, { useState } from 'react';
+import '../../assets/index.less';
+
+export default () => {
+  const [emitter, setEmitter] = useState('interface buttons (up)');
+  const [value, setValue] = React.useState<string | number>(0);
+
+  const onChange = (val: number) => {
+    console.warn('onChange:', val, typeof val);
+    setValue(val);
+  };
+
+  const onStep = (_: number, info: { offset: number; type: 'up' | 'down', emitter: 'handler' | 'keyboard' | 'wheel' }) => {
+    if (info.emitter === 'handler') {
+      setEmitter(`interface buttons (${info.type})`);
+    }
+
+    if (info.emitter === 'keyboard') {
+      setEmitter(`keyboard (${info.type})`);
+    }
+
+    if (info.emitter === 'wheel') {
+      setEmitter(`mouse wheel (${info.type})`);
+    }
+  };
+
+  return (
+    <div style={{ margin: 10 }}>
+      <h3>onStep callback</h3>
+      <InputNumber
+        aria-label="onStep callback example"
+        min={0}
+        max={10}
+        style={{ width: 100 }}
+        value={value}
+        changeOnWheel
+        onChange={onChange}
+        onStep={onStep}
+      />
+
+      <div style={{ marginTop: 10 }}>Triggered by: {emitter}</div>
+    </div>
+  );
+};
diff --git a/docs/example.md b/docs/example.md
@@ -41,6 +41,10 @@ nav:
 
 <code src="./demo/small-step.tsx"></code>
 
+## on-step
+
+<code src="./demo/on-step.tsx"></code>
+
 ## wheel
 
 <code src="./demo/wheel.tsx"></code>

diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
@@ -99,7 +99,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   onChange?: (value: T | null) => void;
   onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 
-  onStep?: (value: T, info: { offset: ValueType; type: 'up' | 'down' }) => void;
+  onStep?: (value: T, info: { offset: ValueType; type: 'up' | 'down', emitter: 'handler' | 'keyboard' | 'wheel' }) => void;
 
   /**
    * Trigger change onBlur event.
@@ -432,7 +432,7 @@ const InternalInputNumber = React.forwardRef(
     };
 
     // ============================= Step =============================
-    const onInternalStep = (up: boolean) => {
+    const onInternalStep = (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => {
       // Ignore step since out of range
       if ((up && upDisabled) || (!up && downDisabled)) {
         return;
@@ -454,6 +454,7 @@ const InternalInputNumber = React.forwardRef(
       onStep?.(getDecimalValue(stringMode, updatedValue), {
         offset: shiftKeyRef.current ? getDecupleSteps(step) : step,
         type: up ? 'up' : 'down',
+        emitter,
       });
 
       inputRef.current?.focus();
@@ -511,7 +512,7 @@ const InternalInputNumber = React.forwardRef(
 
       // Do step
       if (!compositionRef.current && ['Up', 'ArrowUp', 'Down', 'ArrowDown'].includes(key)) {
-        onInternalStep(key === 'Up' || key === 'ArrowUp');
+        onInternalStep(key === 'Up' || key === 'ArrowUp', 'keyboard');
         event.preventDefault();
       }
     };
@@ -526,7 +527,7 @@ const InternalInputNumber = React.forwardRef(
         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);
+          onInternalStep(event.deltaY < 0, 'wheel');
           event.preventDefault();
         };
         const input = inputRef.current;

diff --git a/src/StepHandler.tsx b/src/StepHandler.tsx
@@ -20,7 +20,7 @@ export interface StepHandlerProps {
   downNode?: React.ReactNode;
   upDisabled?: boolean;
   downDisabled?: boolean;
-  onStep: (up: boolean) => void;
+  onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void;
 }
 
 export default function StepHandler({
@@ -48,11 +48,11 @@ export default function StepHandler({
     e.preventDefault();
     onStopStep();
 
-    onStepRef.current(up);
+    onStepRef.current(up, 'handler');
 
     // Loop step for interval
     function loopStep() {
-      onStepRef.current(up);
+      onStepRef.current(up, 'handler');
 
       stepTimeoutRef.current = setTimeout(loopStep, STEP_INTERVAL);
     }

diff --git a/tests/click.test.tsx b/tests/click.test.tsx
@@ -23,6 +23,7 @@ describe('InputNumber.Click', () => {
     selector: string,
     changedValue: string | number,
     stepType: 'up' | 'down',
+    emitter: 'handler' | 'keyboard' | 'wheel',
   ) {
     it(name, () => {
       const onChange = jest.fn();
@@ -36,27 +37,27 @@ describe('InputNumber.Click', () => {
       fireEvent.click(container.querySelector(selector));
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(changedValue);
-      expect(onStep).toHaveBeenCalledWith(changedValue, { offset: 1, type: stepType });
+      expect(onStep).toHaveBeenCalledWith(changedValue, { offset: 1, type: stepType, emitter  });
       unmount();
     });
   }
 
   describe('basic work', () => {
-    testInputNumber('up button', { defaultValue: 10 }, '.rc-input-number-handler-up', 11, 'up');
+    testInputNumber('up button', { defaultValue: 10 }, '.rc-input-number-handler-up', 11, 'up', 'handler');
 
-    testInputNumber('down button', { value: 10 }, '.rc-input-number-handler-down', 9, 'down');
+    testInputNumber('down button', { value: 10 }, '.rc-input-number-handler-down', 9, 'down', 'handler');
   });
 
   describe('empty input', () => {
-    testInputNumber('up button', {}, '.rc-input-number-handler-up', 1, 'up');
+    testInputNumber('up button', {}, '.rc-input-number-handler-up', 1, 'up', 'handler');
 
-    testInputNumber('down button', {}, '.rc-input-number-handler-down', -1, 'down');
+    testInputNumber('down button', {}, '.rc-input-number-handler-down', -1, 'down', 'handler');
   });
 
   describe('empty with min & max', () => {
-    testInputNumber('up button', { min: 6, max: 10 }, '.rc-input-number-handler-up', 6, 'up');
+    testInputNumber('up button', { min: 6, max: 10 }, '.rc-input-number-handler-up', 6, 'up', 'handler');
 
-    testInputNumber('down button', { min: 6, max: 10 }, '.rc-input-number-handler-down', 6, 'down');
+    testInputNumber('down button', { min: 6, max: 10 }, '.rc-input-number-handler-down', 6, 'down', 'handler');
   });
 
   describe('null with min & max', () => {
@@ -66,6 +67,7 @@ describe('InputNumber.Click', () => {
       '.rc-input-number-handler-up',
       6,
       'up',
+      'handler',
     );
 
     testInputNumber(
@@ -74,6 +76,7 @@ describe('InputNumber.Click', () => {
       '.rc-input-number-handler-down',
       6,
       'down',
+      'handler',
     );
   });
 
@@ -183,7 +186,7 @@ describe('InputNumber.Click', () => {
     });
 
     expect(onChange).toHaveBeenCalledWith(1.1);
-    expect(onStep).toHaveBeenCalledWith(1.1, { offset: '0.1', type: 'down' });
+    expect(onStep).toHaveBeenCalledWith(1.1, { offset: '0.1', type: 'down', emitter: 'keyboard'  });
   });
 
   it('click up button with pressing shift key', () => {
@@ -201,6 +204,6 @@ describe('InputNumber.Click', () => {
       keyCode: KeyCode.UP,
     });
     expect(onChange).toHaveBeenCalledWith(1.3);
-    expect(onStep).toHaveBeenCalledWith(1.3, { offset: '0.1', type: 'up' });
+    expect(onStep).toHaveBeenCalledWith(1.3, { offset: '0.1', type: 'up', emitter: 'keyboard' });
   });
 });