Touch support.

Author: odeadglaz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-linear-gradient-picker",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "React linear gradient picker",
   "main": "dist/index.js",
   "scripts": {

src/components/ColorStop/hooks/useStopDragging.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import useDragging from '../../hooks/useDragging';
 
 /**

src/components/hooks/useDragging/constants.js

@@ -1,5 +1,12 @@
 /**
- * The touch start event, used to distinguish touch / mouse actions
- * @type {String}
+ * The drag supported events
+ * Object<String>
  */
-export const TOUCH_START_EVENT = 'touchstart';
+export const EVENTS = {
+	MOUSEDOWN: 'mousedown',
+	MOUSEMOVE: 'mousemove',
+	MOUSEUP: 'mouseup',
+	TOUCHSTART: 'touchstart',
+	TOUCHMOVE: 'touchmove',
+	TOUCHEND: 'touchend'
+};

src/components/hooks/useDragging/index.js

@@ -1,35 +1,35 @@
 import { useState, useEffect } from 'react';
 import { noop } from '../../../lib';
-import { TOUCH_START_EVENT } from './constants';
+import { EVENTS } from './constants';
 
 const DRAG_HANDLERS = {
 	MOUSE: {
 		stop: (e) => {
 			e.preventDefault();
-		    e.stopPropagation();
+			e.stopPropagation();
 		},
 		coordinates: ({ clientX, clientY }) => ({ clientX, clientY }),
-		dragEvent: { name: 'mousemove' },
-		dragEndEvent: { name: 'mouseup' }
+		dragEvent: { name: EVENTS.MOUSEMOVE },
+		dragEndEvent: { name: EVENTS.MOUSEUP }
 	},
 	TOUCH: {
 		stop: noop,
 		coordinates: (e) => {
 			const [touch] = e.touches;
 			return { clientX: touch.clientX, clientY: touch.clientY };
 		},
-		dragEvent: { name: 'touchmove', options: { cancelable: true, passive: true } },
-		dragEndEvent: { name: 'touchend' }
+		dragEvent: { name: EVENTS.TOUCHMOVE, options: { cancelable: true, passive: true } },
+		dragEndEvent: { name: EVENTS.TOUCHEND }
 	}
 };
 
-const isTouch = (e) => e.type === TOUCH_START_EVENT;
+const isTouch = (e) => e.type === EVENTS.TOUCHSTART;
 
 const useDragging = ({ onDragStart = noop, onDrag, onDragEnd = noop }) => {
 	const [context, setContext] = useState({});
 	const [dragging, setDragging] = useState(false);
 
-	const handleMouseDown = (e) => {
+	const dragHandler = (e) => {
 		const handler = isTouch(e) ? DRAG_HANDLERS.TOUCH : DRAG_HANDLERS.MOUSE;
 
 		handler.stop(e);
@@ -70,13 +70,13 @@ const useDragging = ({ onDragStart = noop, onDrag, onDragEnd = noop }) => {
 		}
 
 		return () => {
-			document.removeEventListener(dragEvent.name, handleDrag);
+			document.removeEventListener(dragEvent.name, handleDrag, dragEndEvent.options);
 			document.removeEventListener(dragEndEvent.name, deactivate);
 		};
 	}, [dragging]);
 
 	return [
-		handleMouseDown,
+		dragHandler,
 		activate,
 		deactivate
 	];

stories/GradientPicker/index.js

@@ -9,20 +9,20 @@ import 'rc-color-picker/assets/index.css';
 /**
  * (c) https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
  */
-function addOpacityToHex(hex, a = 1){
-  var c;
-  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
-      c= hex.substring(1).split('');
-      if(c.length== 3){
-          c= [c[0], c[0], c[1], c[1], c[2], c[2]];
-      }
-      c= '0x'+c.join('');
-      return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+a+')';
-  }
-  if (/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/.test(hex)) { /** RGB color */
-    return hex.replace('rgb', 'rgba').replace(')', `, ${a})`);
-  }
-  throw new Error('Bad Hex');
+function addOpacityToHex(hex, a = 1) {
+	let c;
+	if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+		c = hex.substring(1).split('');
+		if (c.length === 3) {
+			c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+		}
+		c = '0x' + c.join('');
+		return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + a + ')';
+	}
+	if (/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/.test(hex)) { /** RGB color */
+		return hex.replace('rgb', 'rgba').replace(')', `, ${a})`);
+	}
+	throw new Error('Bad Hex');
 }
 
 const WrapperPropTypes = {

stories/Popover/index.js

@@ -7,20 +7,20 @@ import './index.css';
 /**
  * (c) https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
  */
-function addOpacityToHex(hex, a = 1){
-  var c;
-  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
-      c= hex.substring(1).split('');
-      if(c.length== 3){
-          c= [c[0], c[0], c[1], c[1], c[2], c[2]];
-      }
-      c= '0x'+c.join('');
-      return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+a+')';
-  }
-  if (/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/.test(hex)) { /** RGB color */
-    return hex.replace('rgb', 'rgba').replace(')', `, ${a})`);
-  }
-  throw new Error('Bad Hex');
+function addOpacityToHex(hex, a = 1) {
+	let c;
+	if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+		c = hex.substring(1).split('');
+		if (c.length === 3) {
+			c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+		}
+		c = '0x' + c.join('');
+		return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + a + ')';
+	}
+	if (/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/.test(hex)) { /** RGB color */
+		return hex.replace('rgb', 'rgba').replace(')', `, ${a})`);
+	}
+	throw new Error('Bad Hex');
 }
 
 const WrappedSketchPicker = ({ onSelect, ...rest }) => (