Attempted Global Colors /:

casesandberg · Aug 12, 2015 · 4ff8df5 · 4ff8df5
1 parent ad28bb8
commit 4ff8df5
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 16 deletions.
diff --git a/docs/components/home/HomeFeature.jsx b/docs/components/home/HomeFeature.jsx
@@ -7,15 +7,21 @@ var ColorPicker = require('react-color');
 var { Container, Grid } = require('react-basic-layout');
 var { Raised } = require('react-material-design');
 
-var green = {
-  h: 122,
-  s: 39,
-  l: 49,
-  a: 100,
-};
-
 class HomeFeature extends ReactCSS.Component {
 
+  constructor() {
+    super();
+
+    // this.state = {
+    //   h: 174,
+    //   s: 100,
+    //   l: 29,
+    //   a: 100,
+    // };
+
+    // this.handleChange = this.handleChange.bind(this);
+  }
+
   classes() {
     return {
       'default': {
@@ -87,6 +93,12 @@ class HomeFeature extends ReactCSS.Component {
     };
   }
 
+  // handleChange(data) {
+  //   if (data !== this.state) {
+  //     this.setState(data);
+  //   }
+  // }
+
   render() {
     return (
       <div is="feature">
@@ -104,7 +116,7 @@ class HomeFeature extends ReactCSS.Component {
                 </div>
               </div>
               <div is="chrome">
-                <ColorPicker type="chrome"  />
+                <ColorPicker type="chrome" {...this.state} />
               </div>
             </Grid>
             <div is="over">

diff --git a/src/components/Color.js b/src/components/Color.js
@@ -16,6 +16,10 @@ class ColorPicker extends ReactCSS.Component {
     super();
 
     this.state = {
+      // h: props.h,
+      // s: props.s,
+      // l: props.l,
+      // a: props.a,
       h: 174,
       s: 100,
       l: 29,
@@ -34,29 +38,51 @@ class ColorPicker extends ReactCSS.Component {
   }
 
   handleChange(data) {
-    this.setState(data);
+    if (this.props.onChange) {
+      this.props.onChange(this.state);
+    } else {
+      this.setState(data);
+    }
   }
 
+  // componentWillReceiveProps(nextProps) {
+  //   if (nextProps.h) {
+  //     this.setState({
+  //       h: nextProps.h,
+  //       s: nextProps.s,
+  //       l: nextProps.l,
+  //       a: nextProps.a,
+  //     });
+  //   }
+  // }
+
   render() {
-    var picker = <Sketch {...this.state} {...this.props} onChange={ this.handleChange } />;
+    var picker = <Sketch {...this.state} onChange={ this.handleChange } />;
 
     if (this.props.type === 'sketch') {
-      picker = <Sketch {...this.state} {...this.props} onChange={ this.handleChange } presetColors={ ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'] } />;
+      picker = <Sketch {...this.state} onChange={ this.handleChange } presetColors={ ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'] } />;
     } else if (this.props.type === 'photoshop') {
-      picker = <Photoshop {...this.state} {...this.props} onChange={ this.handleChange } />;
+      picker = <Photoshop {...this.state} onChange={ this.handleChange } />;
     } else if (this.props.type === 'chrome') {
-      picker = <Chrome {...this.state} {...this.props} onChange={ this.handleChange } />;
+      picker = <Chrome {...this.state} onChange={ this.handleChange } />;
     } else if (this.props.type === 'swatches') {
-      picker = <Swatches {...this.state} {...this.props} onChange={ this.handleChange } />;
+      picker = <Swatches {...this.state} onChange={ this.handleChange } />;
     } else if (this.props.type === 'slider') {
-      picker = <Slider {...this.state} {...this.props} onChange={ this.handleChange } />;
+      picker = <Slider {...this.state} onChange={ this.handleChange } />;
     } else if (this.props.type === 'material') {
-      picker = <Material {...this.state} {...this.props} onChange={ this.handleChange } />;
+      picker = <Material {...this.state} onChange={ this.handleChange } />;
     }
 
     return picker;
   }
 
 }
 
+// ColorPicker.defaultProps = {
+//   h: 174,
+//   s: 100,
+//   l: 29,
+//   a: 100,
+// };
+
 module.exports = ColorPicker;