feat: support keyboard prop

docs/examples/simple.tsx

@@ -8,6 +8,7 @@ class Component extends React.Component {
     disabled: false,
     readOnly: false,
     value: 5,
+    keyboard: true
   };
 
   onChange = value => {
@@ -27,6 +28,12 @@ class Component extends React.Component {
     });
   };
 
+  toggleKeyboard = () => {
+    this.setState({
+      keyboard: !this.state.keyboard,
+    });
+  };
+
   render() {
     return (
       <div style={{ margin: 10 }}>
@@ -39,6 +46,7 @@ class Component extends React.Component {
           onChange={this.onChange}
           readOnly={this.state.readOnly}
           disabled={this.state.disabled}
+          keyboard={this.state.keyboard}
         />
         <p>
           <button type="button" onClick={this.toggleDisabled}>
@@ -47,6 +55,9 @@ class Component extends React.Component {
           <button type="button" onClick={this.toggleReadOnly}>
             toggle readOnly
           </button>
+          <button type="button" onClick={this.toggleKeyboard}>
+            toggle keyboard
+          </button>
         </p>
       </div>
     );

src/InputNumber.tsx

@@ -217,27 +217,37 @@ class InputNumber extends React.Component<Partial<InputNumberProps>, InputNumber
     this.stop();
   }
 
-  onKeyDown = (e, ...args) => {
-    const { onKeyDown, onPressEnter } = this.props;
+  onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const { onKeyDown, onPressEnter, keyboard } = this.props;
+
+    const supportKeyCodes = [ KeyCode.UP, KeyCode.DOWN ];
+
+    if (keyboard !== false && supportKeyCodes.includes(e.keyCode)) {
+      // eslint-disable-next-line default-case
+      switch(e.keyCode) {
+        case KeyCode.UP: {
+          const ratio = this.getRatio(e);
+          this.up(e, ratio, null);
+          this.stop();
+          break;
+        }
+        case KeyCode.DOWN: {
+          const ratio = this.getRatio(e);
+          this.down(e, ratio, null);
+          this.stop();
+          break;
+        }
+      }
+    }
 
-    if (e.keyCode === KeyCode.UP) {
-      const ratio = this.getRatio(e);
-      this.up(e, ratio, null);
-      this.stop();
-    } else if (e.keyCode === KeyCode.DOWN) {
-      const ratio = this.getRatio(e);
-      this.down(e, ratio, null);
-      this.stop();
-    } else if (e.keyCode === KeyCode.ENTER && onPressEnter) {
-      onPressEnter(e);
+    if (e.keyCode === KeyCode.ENTER) {
+      onPressEnter?.(e);
     }
 
     // Trigger user key down
     this.recordCursorPosition();
     this.lastKeyCode = e.keyCode;
-    if (onKeyDown) {
-      onKeyDown(e, ...args);
-    }
+    onKeyDown?.(e);
   };
 
   onKeyUp = (e, ...args) => {

src/interface.ts

@@ -9,7 +9,7 @@ export type InputNumberProps = {
   style: React.CSSProperties;
   className?: string;
   onKeyUp: (e, ...arg) => void;
-  onKeyDown: (e, ...arg) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onMouseUp: (...arg) => void;
   onFocus: (...arg) => void;
   onBlur: (...arg) => void;
@@ -36,6 +36,7 @@ export type InputNumberProps = {
   upHandler: React.ReactElement;
   downHandler: React.ReactElement;
   tabIndex?: number;
+  keyboard?: boolean;
   [key: string]: any;
 }
 

tests/index.test.js

@@ -61,6 +61,7 @@ describe('InputNumber', () => {
         <div>
           <InputNumber
             ref="inputNum"
+            {...this.props}
             min={this.state.min}
             max={this.state.max}
             onChange={this.onChange}
@@ -139,6 +140,23 @@ describe('InputNumber', () => {
     });
   });
 
+  describe('disable keyboard works', () => {
+    it("value shouldn't change if keyboard is disabled", () => {
+      example = ReactDOM.render(<Component keyboard={false} />, container);
+      inputNumber = example.refs.inputNum;
+      inputElement = ReactDOM.findDOMNode(inputNumber.input);
+      Simulate.keyDown(inputElement, {
+        keyCode: keyCode.UP,
+      });
+      expect(inputNumber.state.value).to.be(98);
+
+      Simulate.keyDown(inputElement, {
+        keyCode: keyCode.DOWN,
+      });
+      expect(inputNumber.state.value).to.be(98);
+    });
+  });
+
   describe('clickable', () => {
     it('up button works', () => {
       Simulate.mouseDown(findRenderedDOMComponentWithClass(example, 'rc-input-number-handler-up'));