feat: InputNumber support changeOnWheel (#47158)

ant-design · Jan 26, 2024 · 4def7a2 · 4def7a2
1 parent 3c477ee
commit 4def7a2
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 1 deletion.
diff --git a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1166,6 +1166,87 @@ exports[`renders components/input-number/demo/basic.tsx extend context correctly
 
 exports[`renders components/input-number/demo/basic.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/input-number/demo/change-on-wheel.tsx extend context correctly 1`] = `
+<div
+  class="ant-input-number ant-input-number-outlined"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      aria-disabled="false"
+      aria-label="Increase Value"
+      class="ant-input-number-handler ant-input-number-handler-up"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        aria-label="up"
+        class="anticon anticon-up ant-input-number-handler-up-inner"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="up"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      aria-label="Decrease Value"
+      class="ant-input-number-handler ant-input-number-handler-down"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-input-number-handler-down-inner"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      aria-valuemax="10"
+      aria-valuemin="1"
+      aria-valuenow="3"
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value="3"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders components/input-number/demo/change-on-wheel.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/input-number/demo/controls.tsx extend context correctly 1`] = `
 <div
   class="ant-input-number ant-input-number-outlined"

diff --git a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap
@@ -893,6 +893,85 @@ exports[`renders components/input-number/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/input-number/demo/change-on-wheel.tsx correctly 1`] = `
+<div
+  class="ant-input-number ant-input-number-outlined"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      aria-disabled="false"
+      aria-label="Increase Value"
+      class="ant-input-number-handler ant-input-number-handler-up"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        aria-label="up"
+        class="anticon anticon-up ant-input-number-handler-up-inner"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="up"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      aria-label="Decrease Value"
+      class="ant-input-number-handler ant-input-number-handler-down"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-input-number-handler-down-inner"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      aria-valuemax="10"
+      aria-valuemin="1"
+      aria-valuenow="3"
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value="3"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/input-number/demo/controls.tsx correctly 1`] = `
 <div
   class="ant-input-number ant-input-number-outlined"

diff --git a/components/input-number/demo/change-on-wheel.md b/components/input-number/demo/change-on-wheel.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+启用鼠标滚轮控制。
+
+## en-US
+
+Control with mouse wheel.
diff --git a/components/input-number/demo/change-on-wheel.tsx b/components/input-number/demo/change-on-wheel.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputNumber } from 'antd';
+
+const onChange = (value: number) => {
+  console.log('changed', value);
+};
+
+const App: React.FC = () => (
+  <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} changeOnWheel />
+);
+
+export default App;
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
@@ -24,6 +24,7 @@ When a numeric value needs to be provided.
 <code src="./demo/digit.tsx">High precision decimals</code>
 <code src="./demo/formatter.tsx">Formatter</code>
 <code src="./demo/keyboard.tsx">Keyboard</code>
+<code src="./demo/change-on-wheel.tsx" version="5.14.0">Wheel</code>
 <code src="./demo/variant.tsx" version="5.13.0">Variants</code>
 <code src="./demo/filled-debug.tsx" debug>Filled Debug</code>
 <code src="./demo/out-of-range.tsx">Out of range</code>
@@ -43,6 +44,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - |  |
 | autoFocus | If get focus when component mounted | boolean | false | - |
 | changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 |
+| changeOnWheel | Allow control with mouse wheel | boolean | - | 5.14.0 |
 | controls | Whether to show `+-` controls, or set custom arrows icon | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | Decimal separator | string | - | - |
 | placeholder | placeholder | string | - |  |

diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
@@ -25,6 +25,7 @@ demo:
 <code src="./demo/digit.tsx">高精度小数</code>
 <code src="./demo/formatter.tsx">格式化展示</code>
 <code src="./demo/keyboard.tsx">键盘行为</code>
+<code src="./demo/change-on-wheel.tsx" version="5.14.0">鼠标滚轮</code>
 <code src="./demo/variant.tsx" version="5.13.0">形态变体</code>
 <code src="./demo/filled-debug.tsx" debug>Filled Debug</code>
 <code src="./demo/out-of-range.tsx">超出边界</code>
@@ -44,6 +45,7 @@ demo:
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
 | autoFocus | 自动获取焦点 | boolean | false | - |
 | changeOnBlur | 是否在失去焦点时，触发 `onChange` 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 |
+| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
 | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | 小数点 | string | - | - |
 | placeholder | 占位符 | string | - |  |

diff --git a/package.json b/package.json
@@ -138,7 +138,7 @@
     "rc-field-form": "~1.41.0",
     "rc-image": "~7.5.1",
     "rc-input": "~1.4.3",
-    "rc-input-number": "~8.6.1",
+    "rc-input-number": "~9.0.0",
     "rc-mentions": "~2.10.1",
     "rc-menu": "~9.12.4",
     "rc-motion": "^2.9.0",