Error when opacity = 0.

Sometime input is rgb instead of hex

Author: dungnt12

README.md

@@ -97,13 +97,24 @@ import { SketchPicker } from 'react-color';
 import { GradientPickerPopover } from 'react-linear-gradient-picker';
 import './index.css';
 
-const addOpacityToHex = (color, opacity = 1) => {
-	if (opacity === 1 || color.length > 9) {
-		return color;
-	}
-
-	return color + Math.floor(opacity * 255).toString(16);
-};
+/**
+ * (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');
+}
 
 const WrappedSketchPicker = ({ onSelect, ...rest }) => (
 	<SketchPicker {...rest}

stories/GradientPicker/index.js

@@ -6,13 +6,24 @@ import UseCase from './UseCase';
 
 import 'rc-color-picker/assets/index.css';
 
-const addOpacityToHex = (color, opacity = 1) => {
-	if (opacity === 1 || color.length > 9) {
-		return color;
-	}
-
-	return color + Math.floor(opacity * 255).toString(16);
-};
+/**
+ * (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');
+}
 
 const WrapperPropTypes = {
 	onSelect: PropTypes.func

stories/Popover/index.js

@@ -4,13 +4,24 @@ import { SketchPicker } from 'react-color';
 import GradientPickerPopover from '../../src/components/GradientPickerPopover';
 import './index.css';
 
-const addOpacityToHex = (color, opacity = 1) => {
-	if (opacity === 1 || color.length > 9) {
-		return color;
-	}
-
-	return color + Math.floor(opacity * 255).toString(16);
-};
+/**
+ * (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');
+}
 
 const WrappedSketchPicker = ({ onSelect, ...rest }) => (
 	<SketchPicker {...rest}