React-color: Get Name of the Picker?

[dekkofilms]

I saw the merge where you can now pass up the event with the onChange handler, so I'm just having trouble actually getting the name of the picker I want to see. This is what I currently have for the Picker right now (which is mainly taken from docs):

{ (this.state.displayColorPicker) ?
          <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }></div>
          <SketchPicker color={ this.state.color } label="bgColor" onChange={ this.props.onChange } name={this.props.name} />
          </div> : null }

And my onChange is as such:

  handleColorChange(color, event) {
    const target = event.target;
    const name = target.name;

    console.log("NAME: " + name)
    console.log("COLOR CHANGING:" + JSON.stringify(color))

    // this.setState({ color: color.hex })
  };

I can succesfully get the color information, I'm just stuck on trying to get which color should go where. Feeling like I'm probably missing a very basic step here. :/

[casesandberg]

Great point @dekkofilms, you actually aren't missing anything. The problem with the event data is that the name is whatever is attached to a name on the nested html element itself. So an onChange triggered by an input would return the name of the input, not the component. Currently, nothing maps the name prop of the component to anything.

My first thought was to just mutate the event object that gets sent up in the callback but that seems a little weird to me. What are your thoughts on me adding it to the color object? I have been wanting to rename it in the docs to picker for a while now anyways:

handleChange(picker, event) {
    // picker = {
    //
    //   name: 'nameProp',
    //
    //   hex: '#333',
    //   rgb: {
    //     r: 51,
    //     g: 51,
    //     b: 51,
    //     a: 1,
    //   },
    //   hsl: {
    //     h: 0,
    //     s: 0,
    //     l: .20,
    //     a: 1,
    //   },
    // }
  }

[dekkofilms]

@casesandberg ah! yeah ... I would also be a little apprehensive to mutating the event object. I don't have a problem with it being added to the color (or picker) object at all! I think that would work for me.

Would love to stay posted on that! Thanks for the fast reply.

[dekkofilms]

@casesandberg ... so right now, to kind of get things going on my end, I manipulated the color object, but not sure if there is a better or smoother way, but in ColorWrap.js I just threw in the props.name in the toState params:

_createClass(ColorPicker, [{
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        this.setState(_extends({}, _color2.default.toState(nextProps.color, this.state.oldHue, nextProps.name), {
          visible: nextProps.display
        }));
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2.default.createElement(Picker, _extends({}, this.props, this.state, { onChange: this.handleChange }));
      }
    }]);

I did the same in the handleChange function as well ... and in the return of the toState function I just added name as a key:

return {
      hsl: hsl,
      hex: '#' + color.toHex(),
      rgb: color.toRgb(),
      hsv: hsv,
      oldHue: data.h || oldHue || hsl.h,
      source: data.source,
      name: name
    };

Seems to be working right now...but curious, since you are obviously way more familiar with the codebase how you would approach that.

[casesandberg]

You are on the right track! If you feel comfortable it would be cool if you could submit a PR!

This is what you are going to want to change: https://github.com/casesandberg/react-color/blob/master/src/components/common/ColorWrap.js#L33-L34

You will want to make the color obj param also have name: this.props.name for both the onChange and onChangeComplete

[iharvey]

Hi @dekkofilms, @casesandberg - can I ask, have either of you progressed this at all? I have the same requirement as above, needing an identifier for the picker.

I'd be happy to take a look if I find time later this week, just checking I'm not redoing anything already actioned / stepping on any toes here.

Ta

[casesandberg]

I have thought about this and I don't think adding this complexity to the library makes sense. What I propose is just using a curry function like below to pass the names of multiple pickers:

const handleColorChange = (name) => (color) => {
  this.setState({ name, color: color.hex })
}

and then you would use it like this:

<SketchPicker onChange={ handleColorChange('foreground') } />
<SketchPicker onChange={ handleColorChange('background') } />

The handleColorChange would take the name as the first argument and then retuns the traditional change information, along with the name.

[iharvey]

Currying FTW 👍

Thanks again @casesandberg, I expect we can mark this resolved.

[tmercado]

Not sure if anyone is still following this but doesn't currying a function like that create copies of the handleColorChange function? so if you are mapping say 1000 things that could have a color changing option you'll start to have performance issues.

changeHandler => name => color {
    const {pickers} = this.state;
    pickers[name] = color;
    this.setState({pickers});
}
this.state.pickers.map((p, i) => ( // I have 1000+ pickers to create
    <SketchPicker onChange={this.changeHandler('i')} value={p.color} />
);