fix: split TouchEvents amd MouseEvents. close #48

react-component · Mar 3, 2017 · 9960f49 · 9960f49
1 parent c9a1797
commit 9960f49
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 24 deletions.
diff --git a/src/index.js b/src/index.js
@@ -29,13 +29,15 @@ const InputNumber = React.createClass({
     ]),
     upHandler: PropTypes.node,
     downHandler: PropTypes.node,
+    useTouch: PropTypes.bool,
   },
 
   mixins: [mixin],
 
   getDefaultProps() {
     return {
       focusOnUpDown: true,
+      useTouch: false,
       prefixCls: 'rc-input-number',
     };
   },
@@ -82,7 +84,7 @@ const InputNumber = React.createClass({
 
   render() {
     const props = { ...this.props };
-    const { prefixCls, disabled, readOnly } = props;
+    const { prefixCls, disabled, readOnly, useTouch } = props;
     const classes = classNames({
       [prefixCls]: true,
       [props.className]: !!props.className,
@@ -120,6 +122,30 @@ const InputNumber = React.createClass({
       inputDisplayValue = '';
     }
 
+    let upEvents;
+    let downEvents;
+    if (useTouch) {
+      upEvents = {
+        onTouchStart: (editable && !upDisabledClass) ? this.up : noop,
+        onTouchEnd: this.stop,
+      };
+      downEvents = {
+        onTouchStart: (editable && !downDisabledClass) ? this.down : noop,
+        onTouchEnd: this.stop,
+      };
+    } else {
+      upEvents = {
+        onMouseDown: (editable && !upDisabledClass) ? this.up : noop,
+        onMouseUp: this.stop,
+        onMouseLeave: this.stop,
+      };
+      downEvents = {
+        onMouseDown: (editable && !downDisabledClass) ? this.down : noop,
+        onMouseUp: this.stop,
+        onMouseLeave: this.stop,
+      };
+    }
+
     // ref for test
     return (
       <div className={classes} style={props.style}>
@@ -129,11 +155,7 @@ const InputNumber = React.createClass({
             disabled={!!upDisabledClass || disabled || readOnly}
             prefixCls={prefixCls}
             unselectable="unselectable"
-            onTouchStart={(editable && !upDisabledClass) ? this.up : noop}
-            onTouchEnd={this.stop}
-            onMouseDown={(editable && !upDisabledClass) ? this.up : noop}
-            onMouseUp={this.stop}
-            onMouseLeave={this.stop}
+            {...upEvents}
             className={`${prefixCls}-handler ${prefixCls}-handler-up ${upDisabledClass}`}
           >
             {this.props.upHandler || <span
@@ -147,11 +169,7 @@ const InputNumber = React.createClass({
             disabled={!!downDisabledClass || disabled || readOnly}
             prefixCls={prefixCls}
             unselectable="unselectable"
-            onTouchStart={(editable && !downDisabledClass) ? this.down : noop}
-            onTouchEnd={this.stop}
-            onMouseDown={(editable && !downDisabledClass) ? this.down : noop}
-            onMouseUp={this.stop}
-            onMouseLeave={this.stop}
+            {...downEvents}
             className={`${prefixCls}-handler ${prefixCls}-handler-down ${downDisabledClass}`}
           >
             {this.props.downHandler || <span

diff --git a/tests/index.js b/tests/index.js
@@ -1,4 +1,4 @@
-/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/no-multi-comp, no-unused-vars */
 require('../assets/index.less');
 const keyCode = require('rc-util/lib/KeyCode');
 const expect = require('expect.js');
@@ -103,18 +103,6 @@ describe('inputNumber', () => {
     });
   });
 
-  describe('touchable', () => {
-    it('up button works', () => {
-      Simulate.touchStart(ReactDOM.findDOMNode(inputNumber.refs.up));
-      expect(inputNumber.state.value).to.be(99);
-    });
-
-    it('down button works', () => {
-      Simulate.touchStart(ReactDOM.findDOMNode(inputNumber.refs.down));
-      expect(inputNumber.state.value).to.be(97);
-    });
-  });
-
   describe('long press', () => {
     it('up button works', (done) => {
       Simulate.mouseDown(ReactDOM.findDOMNode(inputNumber.refs.up));
@@ -592,3 +580,81 @@ describe('inputNumber', () => {
     });
   });
 });
+
+describe('Mobile inputNumber use TouchEvents', () => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  let onChangeFirstArgument;
+  let onChangeCallCount = 0;
+
+  const Component = React.createClass({
+    getInitialState() {
+      return {
+        min: 1,
+        max: 200,
+        value: defaultValue,
+        step: 1,
+        disabled: false,
+        autoFocus: false,
+        readOnly: false,
+        name: 'inputNumber',
+      };
+    },
+    onChange(value) {
+      onChangeFirstArgument = value;
+      onChangeCallCount += 1;
+      this.setState({ value });
+    },
+    triggerBoolean(propName) {
+      const prop = {};
+      prop[propName] = !this.state[propName];
+      this.setState(prop);
+    },
+    render() {
+      return (
+        <div>
+          <InputNum
+            ref="inputNum"
+            min={this.state.min}
+            max={this.state.max}
+            onChange={this.onChange}
+            value={this.state.value}
+            step={this.state.step}
+            disabled={this.state.disabled}
+            autoFocus={this.state.autoFocus}
+            readOnly={this.state.readOnly}
+            name={this.state.name}
+            useTouch
+          />
+        </div>
+      );
+    },
+  });
+
+  let inputNumber;
+  let example;
+  let inputElement;
+  beforeEach(() => {
+    example = ReactDOM.render(<Component />, container);
+    inputNumber = example.refs.inputNum;
+    inputElement = ReactDOM.findDOMNode(inputNumber.refs.input);
+    onChangeCallCount = 0;
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    onChangeCallCount = 0;
+  });
+
+  describe('touchable', () => {
+    it('up button works', () => {
+      Simulate.touchStart(ReactDOM.findDOMNode(inputNumber.refs.up));
+      expect(inputNumber.state.value).to.be(99);
+    });
+
+    it('down button works', () => {
+      Simulate.touchStart(ReactDOM.findDOMNode(inputNumber.refs.down));
+      expect(inputNumber.state.value).to.be(97);
+    });
+  });
+});