color checks

casesandberg · Aug 11, 2015 · 06a9138 · 06a9138
1 parent b77b1e4
commit 06a9138
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 7 deletions.
diff --git a/src/components/Sketch/SketchFields.jsx b/src/components/Sketch/SketchFields.jsx
@@ -73,6 +73,7 @@ class ShetchFields extends ReactCSS.Component {
       } else if (data.a > 100) {
         data.a = 100;
       }
+
       this.props.onChange(data);
     }
   }

diff --git a/src/components/photoshop/PhotoshopFields.jsx b/src/components/photoshop/PhotoshopFields.jsx
@@ -8,6 +8,12 @@ var EditableInput = require('../common/EditableInput');
 
 class PhotoshopPicker extends ReactCSS.Component {
 
+  constructor() {
+    super();
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
   classes() {
     return {
       'default': {
@@ -86,21 +92,53 @@ class PhotoshopPicker extends ReactCSS.Component {
     };
   }
 
+  handleChange(data) {
+    if (data['#']) {
+      var color = tinycolor(data['#']);
+      if (color.isValid()) {
+        var hsl = color.toHsl();
+        this.props.onChange({ h: hsl.h, s: hsl.s, l: hsl.l });
+      }
+    } else if (data.r || data.g || data.b) {
+      var oldColor = tinycolor({ h: this.props.h, s: this.props.s, l: this.props.l}).toRgb();
+      for (var key in data) {
+        oldColor[key] = Number(data[key]);
+      }
+
+      var color = tinycolor(oldColor);
+      if (color.isValid()) {
+        var hsl = color.toHsl();
+        this.props.onChange({ h: hsl.h, s: hsl.s, l: hsl.l });
+      }
+    } else if (data.h || data.s || data.v) {
+      var oldColor = tinycolor({ h: this.props.h, s: this.props.s, l: this.props.l}).toHsv();
+      for (var key in data) {
+        oldColor[key] = Number(data[key]);
+      }
+
+      var color = tinycolor(oldColor);
+      if (color.isValid()) {
+        var hsl = color.toHsl();
+        this.props.onChange({ h: hsl.h, s: hsl.s, l: hsl.l });
+      }
+    }
+  }
+
   render() {
     var hsv = tinycolor(this.props).toHsv();
     var rgb = tinycolor(this.props).toRgb();
     var hex = tinycolor(this.props).toHex();
     return (
       <div is="fields">
-        <EditableInput is="Input" label="h" value={ hsv.h } />
-        <EditableInput is="Input" label="s" value={ Math.round(hsv.s * 100) } />
-        <EditableInput is="Input" label="b" value={ Math.round(hsv.v * 100) } />
+        <EditableInput is="Input" label="h" value={ Math.round(hsv.h) } onChange={ this.handleChange }/>
+        <EditableInput is="Input" label="s" value={ Math.round(hsv.s * 100) } onChange={ this.handleChange }/>
+        <EditableInput is="Input" label="v" value={ Math.round(hsv.v * 100) } onChange={ this.handleChange }/>
         <div is="divider" />
-        <EditableInput is="Input" label="r" value={ rgb.r } />
-        <EditableInput is="Input" label="g" value={ rgb.g } />
-        <EditableInput is="Input" label="b" value={ rgb.b } />
+        <EditableInput is="Input" label="r" value={ rgb.r } onChange={ this.handleChange }/>
+        <EditableInput is="Input" label="g" value={ rgb.g } onChange={ this.handleChange }/>
+        <EditableInput is="Input" label="b" value={ rgb.b } onChange={ this.handleChange }/>
         <div is="divider" />
-        <EditableInput is="Hex" label="#" value={ hex } />
+        <EditableInput is="Hex" label="#" value={ hex } onChange={ this.handleChange }/>
         <div is="fieldSymbols">
           <div is="symbol">°</div>
           <div is="symbol">%</div>