From af1843871a6d8c804768f8f863115ec665b0ec5a Mon Sep 17 00:00:00 2001
From: Darren Bangsund <darrenbangsund@gmail.com>
Date: Wed, 8 Jan 2020 08:47:55 -0800
Subject: [PATCH] Default chrome view picker (#665)

* extended chrome props to accept a default view on render
* added view alpha logic in chrome constructor
---
 src/components/chrome/Chrome.js       |  8 +++++++-
 src/components/chrome/ChromeFields.js | 22 ++++++++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/chrome/Chrome.js b/src/components/chrome/Chrome.js
index 44120711..8f2e651b 100644
--- a/src/components/chrome/Chrome.js
+++ b/src/components/chrome/Chrome.js
@@ -9,7 +9,7 @@ import ChromePointer from './ChromePointer'
 import ChromePointerCircle from './ChromePointerCircle'
 
 export const Chrome = ({ width, onChange, disableAlpha, rgb, hsl, hsv, hex, renderers,
-  styles: passedStyles = {}, className = '' }) => {
+  styles: passedStyles = {}, className = '', defaultView }) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -135,6 +135,7 @@ export const Chrome = ({ width, onChange, disableAlpha, rgb, hsl, hsv, hex, rend
           rgb={ rgb }
           hsl={ hsl }
           hex={ hex }
+          view={ defaultView }
           onChange={ onChange }
           disableAlpha={ disableAlpha }
         />
@@ -147,6 +148,11 @@ Chrome.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   disableAlpha: PropTypes.bool,
   styles: PropTypes.object,
+  defaultView: PropTypes.oneOf([
+    "hex",
+    "rgb",
+    "hsl",
+  ]),
 }
 
 Chrome.defaultProps = {
diff --git a/src/components/chrome/ChromeFields.js b/src/components/chrome/ChromeFields.js
index 7111048f..6b4424ea 100644
--- a/src/components/chrome/ChromeFields.js
+++ b/src/components/chrome/ChromeFields.js
@@ -8,15 +8,17 @@ import { EditableInput } from '../common'
 import UnfoldMoreHorizontalIcon from '@icons/material/UnfoldMoreHorizontalIcon'
 
 export class ChromeFields extends React.Component {
-  state = {
-    view: '',
-  }
+  constructor(props) {
+    super()
 
-  componentDidMount() {
-    if (this.props.hsl.a === 1 && this.state.view !== 'hex') {
-      this.setState({ view: 'hex' })
-    } else if (this.state.view !== 'rgb' && this.state.view !== 'hsl') {
-      this.setState({ view: 'rgb' })
+    if (props.hsl.a !== 1 && props.view === "hex") {
+      this.state = {
+        view: "rgb"
+      };
+    } else {
+      this.state = {
+        view: props.view,
+      }
     }
   }
 
@@ -267,4 +269,8 @@ export class ChromeFields extends React.Component {
   }
 }
 
+ChromeFields.defaultProps = {
+  view: "hex",
+}
+
 export default ChromeFields