From 3d51095e6eba28634dc2cb8245fe4db2711a404d Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sat, 17 Dec 2016 21:52:27 +0100
Subject: [PATCH] Switch to chrome color picker

---
 package.json         |  1 +
 src/fields/color.jsx | 14 ++++++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 8a63ace..15c8eb3 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
     "react-collapse": "^2.3.3",
+    "react-color": "^2.10.0",
     "react-dom": "^15.4.0",
     "react-file-reader-input": "^1.1.0",
     "react-height": "^2.1.1",
diff --git a/src/fields/color.jsx b/src/fields/color.jsx
index a2163b0..90489f3 100644
--- a/src/fields/color.jsx
+++ b/src/fields/color.jsx
@@ -1,13 +1,11 @@
 import React from 'react'
 import inputStyle from './input.js'
-import ColorPicker from 'react-colorpickr'
-import 'react-colorpickr/dist/colorpickr.css'
+import { getColor } from 'react-colorpickr/dist/colorfunc'
+import { ChromePicker } from 'react-color';
 
 function formatColor(color) {
-  if(color.a !== 1) {
-    return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
-  }
-  return `rgb(${color.r}, ${color.g}, ${color.b})`
+  const rgb = color.rgb
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
 }
 
 /*** Number fields with support for min, max and units and documentation*/
@@ -26,8 +24,8 @@ static propTypes = {
         position: 'absolute',
         left: 200
       }}>
-        <ColorPicker
-          value={this.props.value}
+        <ChromePicker
+          color={getColor(this.props.value)}
           onChange={c => this.props.onChange(formatColor(c))}
         />
       </div>