cpicker.jsx

'use strict';

var React = require('react'),
    _ = require('underscore'),
    DelayActionMixin = require('../mixins/DelayActionMixin'),
    ClassNameMixin = require('../mixins/ClassNameMixin'),
    PureRenderMixin = require('../mixins/PureRenderMixin');

var PALETTE = [
  "FECDD3","FD99A5","FC677A","FB334C","F6001F","C80019","970013","64000C",
  "FFE8CD","FFD199","FFBA67","FFA333","FA8900","CC7000","9A5400","663800",
  "FFF7CD","FFF09A","FFE969","FFE236","FAD603","CCAF03","9A8402","665701",
  "E4F4DA","C9EAB4","AFE090","93D56A","76C743","60A237","497A29","30511B",
  "E0F7FB","C1F0F7","A3E9F3","83E2EF","63D6E6","50AFBC","3C848D","28575E",
  "D9E5FA","B3CBF5","8DB1F0","6797EB","3F7AE1","3464B8","274B8A","1A325C",
  "F4D8F8","E9B1F2","DF8BEB","D463E5","C63BDA","A130B2","792486","501859",
  "FFDAEE","FFB5DD","FF90CC","FF6BBB","FA44A7","CC3888","9A2A67","661C44",
  "EFF1F5","DFE1E8","C0C5CF","9CA2AD","87939C","6C7680","4A5259","30333B"
];

var STRIPE_WIDTH = 7,
    ENTER_DELAY = 50;

var ColorPicker = React.createClass({
  mixins: [DelayActionMixin, ClassNameMixin, PureRenderMixin],

  statics: {
    getRandomColor: function () {
      return PALETTE[Math.floor(Math.random() * PALETTE.length)];
    }
  },

  propTypes: {
    color: React.PropTypes.string,
    onSelect: React.PropTypes.func.isRequired,
    onChange: React.PropTypes.func.isRequired
  },

  getInitialState: function () {
    return {
      index: 0,
      isActive: false
    };
  },

  getSelectedIndex: function () {
    return PALETTE.indexOf(this.props.color);
  },

  render: function () {
    var index = this.getSelectedIndex(),
        sliderStyle,
        colors;

    sliderStyle = {
      left: (index * (STRIPE_WIDTH + 1)) + 'px'
    };

    colors = _.map(PALETTE, function (color) {
      return (
        <div className='ColorPicker-stripe'
             key={'stripe' + color}
             style={{ background: '#' + color }}
             onClick={this.handleStripClick.bind(this, color)}
             onMouseOver={this.handleStripMouseOver.bind(this, color)} />
      );
    }, this);

    return (
      <div className={this.getClassName()}
           onMouseLeave={this.handleMouseLeave}>
        {colors}
        <div className='ColorPicker-slider'
             style={sliderStyle}
             data-custom-color={index === -1} />
      </div>
    );
  },

  handleStripMouseOver: function (color) {
    if (this.state.isActive) {
      this.setActiveColor(color);
      return;
    }

    this.scheduleAction(
      this.setState.bind(this, {
        isActive: true
      }, this.setActiveColor.bind(this, color)),
      ENTER_DELAY
    );
  },

  handleStripClick: function (color) {
    this.clearActiveColor();
    this.props.onSelect(color);
  },

  handleMouseLeave: function () {
    this.clearActiveColor();
  },

  clearActiveColor: function () {
    this.cancelScheduledAction();
    this.setState({
      isActive: false
    });

    this.setActiveColor(null);
  },

  setActiveColor: function (color) {
    var index = PALETTE.indexOf(color);
    if (index === -1) {
      index = this.getSelectedIndex();
    }

    this.setState({
      index: index
    });

    this.props.onChange(color);
  }
});

module.exports = ColorPicker;