Merge pull request casesandberg#86 from mattbierner/mobile-touchstart…

…-fix Make Hue, Sat, and Alpha components respond to touch start
hmeerlo · Feb 18, 2016 · 6587fee · 6587fee
2 parents c20b649 + c0cc94b
commit 6587fee
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/lib/components/common/Alpha.js b/lib/components/common/Alpha.js
@@ -147,7 +147,9 @@ var Alpha = exports.Alpha = function (_ReactCSS$Component) {
         _react2.default.createElement('div', { style: this.styles().gradient }),
         _react2.default.createElement(
           'div',
-          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange },
+          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown,
+            onTouchMove: this.handleChange,
+            onTouchStart: this.handleChange },
           _react2.default.createElement(
             'div',
             { style: this.styles().pointer, ref: 'pointer' },

diff --git a/lib/components/common/Hue.js b/lib/components/common/Hue.js
@@ -156,7 +156,9 @@ var Hue = exports.Hue = function (_ReactCSS$Component) {
         { style: this.styles().hue },
         _react2.default.createElement(
           'div',
-          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange },
+          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown,
+            onTouchMove: this.handleChange,
+            onTouchStart: this.handleChange },
           _react2.default.createElement(
             'div',
             { style: this.styles().pointer, ref: 'pointer' },

diff --git a/lib/components/common/Saturation.js b/lib/components/common/Saturation.js
@@ -140,7 +140,9 @@ var Saturation = exports.Saturation = function (_ReactCSS$Component) {
 
       return _react2.default.createElement(
         'div',
-        { style: this.styles().color, ref: 'container', onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange },
+        { style: this.styles().color, ref: 'container', onMouseDown: this.handleMouseDown,
+          onTouchMove: this.handleChange,
+          onTouchStart: this.handleChange },
         _react2.default.createElement(
           'div',
           { style: this.styles().white },

diff --git a/src/components/common/Alpha.js b/src/components/common/Alpha.js
@@ -108,7 +108,9 @@ export class Alpha extends ReactCSS.Component {
           <Checkboard />
         </div>
         <div is="gradient" />
-        <div is="container" ref="container" onMouseDown={ this.handleMouseDown } onTouchMove={ this.handleChange }>
+        <div is="container" ref="container" onMouseDown={ this.handleMouseDown }
+            onTouchMove={ this.handleChange }
+            onTouchStart={ this.handleChange }>
           <div is="pointer" ref="pointer">
             { pointer }
           </div>

diff --git a/src/components/common/Hue.js b/src/components/common/Hue.js
@@ -121,7 +121,9 @@ export class Hue extends ReactCSS.Component {
 
     return (
       <div is="hue">
-        <div is="container" ref="container" onMouseDown={ this.handleMouseDown } onTouchMove={ this.handleChange }>
+        <div is="container" ref="container" onMouseDown={ this.handleMouseDown }
+            onTouchMove={ this.handleChange }
+            onTouchStart={ this.handleChange }>
           <div is="pointer" ref="pointer">
             { pointer }
           </div>

diff --git a/src/components/common/Saturation.js b/src/components/common/Saturation.js
@@ -104,7 +104,9 @@ export class Saturation extends ReactCSS.Component {
     }
 
     return (
-      <div is="color" ref="container" onMouseDown={ this.handleMouseDown } onTouchMove={ this.handleChange }>
+      <div is="color" ref="container" onMouseDown={ this.handleMouseDown }
+          onTouchMove={ this.handleChange }
+          onTouchStart={ this.handleChange }>
         <div is="white">
           <div is="black" />
           <div is="pointer" ref="pointer">