feat(input-number): add keyboard prop to support disable keyboard (an…

…t-design#29110)
smwhr · Jan 29, 2021 · 53797cf · 53797cf
1 parent 074f222
commit 53797cf
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 1 deletion.
diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.js.snap
@@ -411,6 +411,99 @@ Array [
 ]
 `;
 
+exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
+Array [
+  <div
+    class="ant-input-number"
+  >
+    <div
+      class="ant-input-number-handler-wrap"
+    >
+      <span
+        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-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"
+        max="10"
+        min="1"
+        role="spinbutton"
+        step="1"
+        value="3"
+      />
+    </div>
+  </div>,
+  <div
+    style="margin-top:20px"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Toggle keyboard
+      </span>
+    </button>
+  </div>,
+]
+`;
+
 exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 <div
   class="site-input-number-wrapper"

diff --git a/components/input-number/demo/keyboard.md b/components/input-number/demo/keyboard.md
@@ -0,0 +1,45 @@
+---
+order: 5
+title:
+  zh-CN: 键盘行为
+  en-US: Keyboard
+---
+
+## zh-CN
+
+使用 `keyboard` 属性可以控制键盘行为。
+
+## en-US
+
+Control keyboard behavior by `keyboard`.
+
+```jsx
+import { InputNumber, Button } from 'antd';
+
+class App extends React.Component {
+  state = {
+    keyboard: true,
+  };
+
+  toggle = () => {
+    this.setState({
+      keyboard: !this.state.keyboard,
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <InputNumber min={1} max={10} keyboard={this.state.keyboard} defaultValue={3} />
+        <div style={{ marginTop: 20 }}>
+          <Button onClick={this.toggle} type="primary">
+            Toggle keyboard
+          </Button>
+        </div>
+      </>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
@@ -20,6 +20,7 @@ When a numeric value needs to be provided.
 | defaultValue | The initial value | number | - | - |
 | disabled | If disable the input | boolean | false | - |
 | formatter | Specifies the format of the value presented | function(value: number \| string): string | - | - |
+| keyboard | If enable keyboard behavior | boolean | true | 4.12.0 |
 | max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
 | min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
 | parser | Specifies the value extracted from formatter | function(string): number | - | - |

diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
@@ -23,6 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | defaultValue | 初始值 | number | - | - |
 | disabled | 禁用 | boolean | false | - |
 | formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | - |
+| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
 | max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
 | min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
 | parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - | - |

diff --git a/package.json b/package.json
@@ -126,7 +126,7 @@
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.18.0",
     "rc-image": "~5.1.1",
-    "rc-input-number": "~6.1.0",
+    "rc-input-number": "~6.2.0",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.10.0",
     "rc-motion": "^2.4.0",