Merge in @WickyNilliams code to detect a change to props without affe…

…cting HSV values
stayradiated · Aug 28, 2014 · 70aeb02 · 70aeb02
1 parent 2def203
commit 70aeb02
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 39 deletions.
diff --git a/example/app.jsx b/example/app.jsx
@@ -5,10 +5,8 @@ var ColorPicker = require('../lib/index');
 var App = React.createClass({
 
   getInitialState: function () {
-    var color = Colr.fromHex('FFF');
     return {
-      color: color,
-      origin: color.toHex()
+      color: '#000000',
     };
   },
 
@@ -21,14 +19,13 @@ var App = React.createClass({
 
     // replace current color and origin color
     this.setState({
-      color: color,
-      origin: color.toHex(),
+      color: color.toHex()
     });
   },
 
   handleChange: function (color) {
     this.setState({
-      color: color
+      color: color.toHex()
     });
   },
 
@@ -37,12 +34,10 @@ var App = React.createClass({
     return (
       <div>
         <button onClick={this.setColor}>Load Random Color</button>
-        <div>Active: {this.state.color.toHex()}</div>
-        <div>Origin: {this.state.origin}</div>
+        <div>Active: {this.state.color}</div>
 
         <div id='container'>
           <ColorPicker
-            key={this.state.origin}
             color={this.state.color}
             onChange={this.handleChange}
           />

diff --git a/lib/components/colorpicker.react.jsx b/lib/components/colorpicker.react.jsx
@@ -14,34 +14,33 @@ var ColorPicker = React.createClass({
   mixins: [OnChangeMixin],
 
   propTypes: {
-    // you can pass in hex strings or Colr instances
-    color: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.instanceOf(Colr)
-    ]),
+    color: React.PropTypes.string,
   },
 
-  // default colors
+  // default color
   getDefaultProps: function () {
-    var initial = Colr.fromHex('#808080');
     return {
-      color: initial
+      color: '#000000'
     };
   },
 
-  // create the initial state using props.color 
-  getInitialState: function () {
-    var color = this.makeColor(this.props.color);
-    return this.makeState(color);
+  componentWillReceiveProps: function(nextProps) {
+    var nextColor = nextProps.color.toUpperCase();
+    var currentColor = Colr.fromScaledHsvObject(this.state.rawHsv).toHex();
+
+    if(nextColor !== currentColor) {
+      this.setState(this.getStateFrom(Colr.fromHex(nextProps.color)));
+    }
   },
 
-  // convert hex string into a Colr instance
-  makeColor: function (color) {
-    return typeof color === 'string' ? Colr.fromHex(color) : color;
+  // create the initial state using props.color 
+  getInitialState: function () {
+    var color = Colr.fromHex(this.props.color);
+    return this.getStateFrom(color);
   },
 
   // generate state object from a Colr instance
-  makeState: function (color) {
+  getStateFrom: function (color) {
     return {
       color: color,
       origin: color.clone(),
@@ -51,7 +50,7 @@ var ColorPicker = React.createClass({
 
   // replace current color with another one
   loadColor: function (color) {
-    this.setState(this.makeState(color));
+    this.setState(this.getStateFrom(color));
     this.props.onChange(color);
   },
 

diff --git a/lib/index.js b/lib/index.js
@@ -9,4 +9,12 @@ Colr.prototype.toScaledHsvObject = function () {
   };
 };
 
+Colr.fromScaledHsvObject = function (obj) {
+  return Colr.fromHsv(
+    obj.h * 360,
+    obj.s * 100,
+    obj.v * 100
+  );
+};
+
 module.exports = require('./components/colorpicker.react');
diff --git a/readme.md b/readme.md
@@ -33,10 +33,7 @@ React.renderComponent(colorpicker, document.body);
 
 ## Setting the Color
 
-Use the `key` attribute to change the current color.
-
-**Note:** The value of `key` isn't actually read, it's just used to detect if
-the value has changed.
+Just change the `color` attribute. Simple.
 
 ```javascript
 var Colr = require('colr');
@@ -46,10 +43,8 @@ var ColorPicker = require('react-colorpicker');
 var App = React.createClass({
 
   getInitialState: function () {
-    var color = Colr.fromHex('FFF');
     return {
-      color: color,
-      origin: color.toHex()
+      color: '#000000',
     };
   },
 
@@ -62,14 +57,13 @@ var App = React.createClass({
 
     // replace current color and origin color
     this.setState({
-      color: color,
-      origin: color.toHex(),
+      color: color.toHex()
     });
   },
 
   handleChange: function (color) {
     this.setState({
-      color: color
+      color: color.toHex()
     });
   },
 
@@ -78,12 +72,10 @@ var App = React.createClass({
     return (
       <div>
         <button onClick={this.setColor}>Load Random Color</button>
-        <div>Active: {this.state.color.toHex()}</div>
-        <div>Origin: {this.state.origin}</div>
+        <div>Active: {this.state.color}</div>
 
         <div id='container'>
           <ColorPicker
-            key={this.state.origin}
             color={this.state.color}
             onChange={this.handleChange}
           />