<commit_before>var React = require('react');
var Colr = require('colr');
var Map = require('./map.react');
var Slider = require('./slider.react');


var ColorPicker = React.createClass({

  getDefaultProps : function() {
    return {
      color : "#000000"
    };
  },

  getInitialState: function() {
    return this.getStateFrom(this.props.color);
  },

  componentWillReceiveProps: function(nextProps) {
    var nextColor = nextProps.color.toLowerCase();
    var currentColor = this.getColorFromRaw().toHex().toLowerCase();

    if(nextColor !== currentColor) {
      this.setState(this.getStateFrom(nextProps.color));
    }
  },

  getStateFrom : function(color) {
    color = Colr.fromHex(color);
    return {
      color : color,
      raw : this.getRawHsv(color)
    };
  },

  render: function () {
    var rawHsv = this.state.raw;
    var luminosity = this.getLuminosity();
    var hue = this.getBackgroundHue();

    var classes = React.addons.classSet({
      dark: luminosity <= 0.5,
      light: luminosity > 0.5
    });

    return (
      /* jshint ignore: start */
      <div className="colorpicker">
        <div className="hue-slider">
          <Slider
            vertical={true}
            value={rawHsv.h}
            onChange={this.handleHueChange}
          />
        </div>
        <Map
          x={rawHsv.s}
          y={rawHsv.v}
          className={classes}
          backgroundColor={hue}
          onChange={this.handleSaturationValueChange} 
        />
      </div>
      /* jshint ignore: end */
    );
  },

  getLuminosity : function() {
    return this.state.color.toGrayscale() / 255;
  },

  getBackgroundHue : function() {
    return Colr.fromHsv(this.state.raw.h * 360, 100, 100).toHex();
  },

  getRawHsv : function(color) {
    var hsv = color.toHsvObject();
    return {
      h: hsv.h / 360,
      s: hsv.s / 100,
      v: hsv.v / 100
    };
  },

  getColorFromRaw : function() {
    var raw = this.state.raw;
    return Colr.fromHsv(raw.h * 360, raw.s * 100, raw.v * 100);
  },

  handleHueChange : function(hue) {
    this.state.raw.h = hue;
    this.update();
  },

  handleSaturationValueChange : function(saturation, value) {
    this.state.raw.s = saturation;
    this.state.raw.v = value;
    this.update();
  },

  update : function() {
    var color = this.getColorFromRaw()
    this.props.onChange(color.toHex());
    this.setState({ color : color });
  }

});

module.exports = ColorPicker;
<commit_msg>a little cleanup<commit_after>var React = require('react');
var Colr = require('colr');
var Map = require('./map.react');
var Slider = require('./slider.react');

Colr.prototype.toScaledHsv = function(color) {
  var hsv = this.toHsvObject();

  return {
    h: hsv.h / 360,
    s: hsv.s / 100,
    v: hsv.v / 100
  };
};


var ColorPicker = React.createClass({

  getDefaultProps : function() {
    return {
      color : "#000000"
    };
  },

  getInitialState: function() {
    return this.getStateFrom(this.props.color);
  },

  componentWillReceiveProps: function(nextProps) {
    var nextColor = nextProps.color.toLowerCase();
    var currentColor = this.getColorFromRaw().toHex().toLowerCase();

    if(nextColor !== currentColor) {
      this.setState(this.getStateFrom(nextColor));
    }
  },

  getStateFrom : function(color) {
    color = Colr.fromHex(color);
    return {
      hsv : color.toScaledHsv()
    };
  },

  render: function () {
    var hsv = this.state.hsv;
    var luminosity = this.getLuminosity();
    var hue = this.getBackgroundHue();

    var classes = React.addons.classSet({
      dark: luminosity <= 0.5,
      light: luminosity > 0.5
    });

    return (
      <div className="colorpicker">
        <div className="hue-slider">
          <Slider
            vertical={true}
            value={hsv.h}
            onChange={this.handleHueChange}
          />
        </div>
        <Map
          x={hsv.s}
          y={hsv.v}
          className={classes}
          backgroundColor={hue}
          onChange={this.handleSaturationValueChange}
        />
      </div>
    );
  },

  getLuminosity : function() {
    return this.getColorFromRaw().toGrayscale() / 255;
  },

  getBackgroundHue : function() {
    return Colr.fromHsv(this.state.hsv.h * 360, 100, 100).toHex();
  },

  getColorFromRaw : function() {
    var hsv = this.state.hsv;
    return Colr.fromHsv(hsv.h * 360, hsv.s * 100, hsv.v * 100);
  },

  handleHueChange : function(hue) {
    this.state.hsv.h = hue;
    this.update();
  },

  handleSaturationValueChange : function(saturation, value) {
    this.state.hsv.s = saturation;
    this.state.hsv.v = value;
    this.update();
  },

  update : function() {
    var color = this.getColorFromRaw()
    this.props.onChange(color.toHex());
  }

});

module.exports = ColorPicker;

{'fraction_non_alphanumeric': 0.1491447642886942, 'fraction_numerical': 0.016687526074259492, 'mean_word_length': 2.420114122681883, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4250491', 'n_tokens_mistral': 1702, 'n_tokens_neox': 1587, 'n_words': 291}