feat(Range): range component support touch event

alibaba-fusion · Jul 31, 2019 · ac03213 · ac03213
1 parent b38177d
commit ac03213
Showing 1 changed file with 43 additions and 6 deletions.
diff --git a/src/range/view/range.jsx b/src/range/view/range.jsx
@@ -278,7 +278,7 @@ export default class Range extends React.Component {
         const value = props.value !== undefined ? props.value : defaultValue;
 
         this.state = {
-            value: value,
+            value,
             tempValue: value,
             hasMovingClass: false,
             lowerTooltipVisible: false,
@@ -304,7 +304,7 @@ export default class Range extends React.Component {
                 value = initialValue;
             }
             this.setState({
-                value: value,
+                value,
                 tempValue: value,
             });
         }
@@ -383,11 +383,20 @@ export default class Range extends React.Component {
                 hasMovingClass: true,
             });
             this._start(e.pageX);
-            this._addDocumentEvents();
+            this._addDocumentMouseEvents();
             pauseEvent(e);
         }
     }
 
+    _onTouchStart(e) {
+        this.setState({
+            hasMovingClass: true,
+        });
+        this._start(e.targetTouches[0].pageX);
+        this._addDocumentTouchEvents();
+        e.stopPropagation(); // preventDefault() will be ignored: https://www.chromestatus.com/features/5093566007214080
+    }
+
     onKeyDown(e) {
         if (
             e.keyCode === KEYCODE.LEFT_ARROW ||
@@ -462,15 +471,17 @@ export default class Range extends React.Component {
                 this.setState({
                     // tooltipVisible: false,
                     tempValue: value,
-                    value: value,
+                    value,
                 });
             }
             this.props.onChange(tempValue);
         }
     }
 
     _move(e) {
-        this._onProcess(e.pageX);
+        const position =
+            e.type === 'mousemove' ? e.pageX : e.targetTouches[0].pageX;
+        this._onProcess(position);
     }
 
     _onProcess(position, start) {
@@ -530,7 +541,7 @@ export default class Range extends React.Component {
         }
     }
 
-    _addDocumentEvents() {
+    _addDocumentMouseEvents() {
         this._onMouseMoveListener = events.on(
             document,
             'mousemove',
@@ -543,6 +554,19 @@ export default class Range extends React.Component {
         );
     }
 
+    _addDocumentTouchEvents() {
+        this._onTouchMoveListener = events.on(
+            document,
+            'touchmove',
+            this._move.bind(this)
+        );
+        this._onTouchEndListener = events.on(
+            document,
+            'touchend',
+            this._end.bind(this)
+        );
+    }
+
     _removeDocumentEvents() {
         if (this._onMouseMoveListener) {
             this._onMouseMoveListener.off();
@@ -553,8 +577,20 @@ export default class Range extends React.Component {
             this._onMouseUpListener.off();
             this._onMouseUpListener = null;
         }
+
+        if (this._onTouchStartListener) {
+            this._onTouchStartListener.off();
+            this._onTouchStartListener = null;
+        }
+
+        if (this._onTouchEndListener) {
+            this._onTouchEndListener.off();
+            this._onTouchEndListener = null;
+        }
     }
 
+    _remove;
+
     // position => current (value type)
     _positionToCurrent(position) {
         const { start, end } = this._moving;
@@ -716,6 +752,7 @@ export default class Range extends React.Component {
                 id={id}
                 dir={rtl ? 'rtl' : 'ltr'}
                 onMouseDown={disabled ? noop : this._onMouseDown.bind(this)}
+                onTouchStart={disabled ? noop : this._onTouchStart.bind(this)}
             >
                 {marks !== false && marksPosition === 'above' ? (
                     <Mark {...commonProps} marks={this._calcMarks()} />