Added script for promoting example dev code back to src directory. Renamed example scripts so that they are prefaced with example- rather than the action. Promoted example code to src

Author: rohan-deshpande

package.json

@@ -29,7 +29,8 @@
     "build": "webpack --env build",
     "dev": "webpack --progress --colors --watch --env dev",
     "example": "npm run start --prefix example",
-    "example:seed": "sh scripts/seed-example",
+    "example:seed": "sh scripts/example-seed",
+    "example:promote": "sh scripts/example-promote",
     "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js",
     "test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js",
     "lint": "eslint src test build",

scripts/example-promote

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+rm -rf src;
+cp -r example/src/dev src;

scripts/seed-example renamed to scripts/example-seed

@@ -5,7 +5,6 @@ import isString from 'lodash.isstring';
 import result from 'lodash.result';
 
 export default class DatBoolean extends Component {
-
   static propTypes = {
     data: PropTypes.object,
     path: PropTypes.string,

src/components/DatBoolean.js

@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+
+import ColorPicker from './Picker/';
+import PropTypes from 'prop-types';
+import isString from 'lodash.isstring';
+import reactCSS from 'reactcss';
+import result from 'lodash.result';
+
+export default class DatColor extends Component {
+  static propTypes = {
+    data: PropTypes.object,
+    path: PropTypes.string,
+    label: PropTypes.string,
+    labelWidth: PropTypes.number,
+    liveUpdate: PropTypes.bool,
+    onUpdate: PropTypes.func,
+    _onUpdateValue: PropTypes.func,
+  };
+
+  state = {
+    value: this.getValue(),
+    displayColorPicker: false,
+  }
+
+  componentWillMount() {
+    this.setState({
+      value: this.getValue()
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      value: this.getValue(nextProps)
+    });
+  }
+
+  getValue(props = this.props) {
+    return result(props.data, props.path);
+  }
+
+  handleClick = () => {
+    this.setState({
+      displayColorPicker: !this.state.displayColorPicker
+    });
+  };
+
+  handleClose = () => {
+    this.setState({
+      displayColorPicker: false
+    });
+  };
+
+  handleChange = color => {
+    const value = isString(color) ? color : color.hex;
+
+    this.setState({ value }, () => {
+      this.props.liveUpdate && this.update();
+    });
+  }
+
+  update() {
+    const { value } = this.state;
+
+    this.props._onUpdateValue && this.props._onUpdateValue(this.props.path, value);
+    this.props.onUpdate && this.props.onUpdate(value);
+  }
+
+  renderPicker(styles) {
+    const { value, displayColorPicker } = this.state;
+
+    return (!displayColorPicker) ? null : (
+      <div style={ styles.popover }>
+        <div style={ styles.cover } onClick={ this.handleClose }/>
+        <ColorPicker color={ value } onChange={ this.handleChange } />
+      </div>
+    );
+  }
+
+  render() {
+    const { path, label, labelWidth } = this.props;
+    const { value } = this.state;
+    const labelText = isString(label) ? label : path;
+    const styles = reactCSS({
+      'default': {
+        color: {
+          width: '36px',
+          height: '14px',
+          borderRadius: '2px',
+          backgroundColor: `${value}`,
+        },
+        swatch: {
+          padding: '5px',
+          background: '#fff',
+          borderRadius: '1px',
+          boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+          display: 'inline-block',
+          cursor: 'pointer',
+        },
+        popover: {
+          position: 'absolute',
+          zIndex: '2',
+          right: '4px'
+        },
+        cover: {
+          position: 'fixed',
+          top: '0px',
+          right: '0px',
+          bottom: '0px',
+          left: '0px',
+        },
+      },
+    });
+
+    return (
+      <li className="cr color" style={{borderLeftColor: `${value}`}}>
+        <label>
+          <span className="label-text" style={{ width: `${labelWidth}%` }}>{labelText}</span>
+          <div style={{ width: `${100 - labelWidth}%`, backgroundColor: `${value}` }}>
+            <div className='swatch' onClick={ this.handleClick }>
+              {value}
+            </div>
+            {this.renderPicker(styles)}
+          </div>
+        </label>
+      </li>
+    );
+  }
+}

src/components/DatColor.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+
+import { EditableInput } from 'react-color/lib/components/common';
+import color from 'react-color/lib/helpers/color';
+
+export default class Fields extends Component {
+  handleChange = (value, e) => {
+    color.isValidHex(value) && this.props.onChange({
+      hex: value,
+      source: 'hex',
+    }, e);
+  }
+
+  render() {
+    return (
+      <div className="flexbox-fix fields-wrap">
+        <div className="flexbox-fix fields">
+          <div className='field'>
+            <EditableInput
+              value={this.props.hex}
+              onChange={this.handleChange}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/Picker/Fields.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Pointer = () => <div className='pointer' />;
+
+export default Pointer;

src/components/Picker/Pointer.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const PointerCircle = () =>  <div className='pointer-circle' />;
+
+export default PointerCircle;

src/components/Picker/PointerCircle.js

@@ -0,0 +1,57 @@
+import { ColorWrap, Hue, Saturation } from 'react-color/lib/components/common';
+
+import Fields from './Fields';
+import Pointer from './Pointer';
+import PointerCircle from './PointerCircle';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Picker = ({
+  onChange,
+  hsl,
+  hsv,
+  hex,
+  className = ''
+}) => {
+  return (
+    <div className={`picker ${className}`}>
+      <div className='saturation-wrap'>
+        <Saturation
+          className='saturation'
+          hsl={hsl}
+          hsv={hsv}
+          pointer={PointerCircle}
+          onChange={onChange}
+        />
+      </div>
+      <div className='body'>
+        <div className="controls">
+          <div className='toggles'>
+            <div className='hue-wrap'>
+              <Hue
+                className='hue'
+                hsl={hsl}
+                pointer={Pointer}
+                onChange={onChange}
+              />
+            </div>
+          </div>
+        </div>
+        <Fields
+          hex={hex}
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+Picker.propTypes = {
+  disableAlpha: PropTypes.bool,
+};
+
+Picker.defaultProps = {
+  disableAlpha: false,
+};
+
+export default ColorWrap(Picker);

src/components/Picker/index.js

@@ -66,3 +66,4 @@ export { default as DatBoolean } from './components/DatBoolean';
 export { default as DatButton } from './components/DatButton';
 export { default as DatFolder } from './components/DatFolder';
 export { default as DatSelect } from './components/DatSelect';
+export { default as DatColor } from './components/DatColor';