Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[V2] Remove primitives and refactor MultiValue components #2821

Merged
merged 1 commit into from
Jul 23, 2018

Conversation

JedWatson
Copy link
Owner

This primarily makes the MultiValue{X} components more consistent with the rest of the customisable components' APIs.

MultiValueContainer, MultiValueLabel, and MultiValueRemove all now receive the following props:

  • data - the option data for the value being displayed
  • innerProps - as per other components, these are spread onto the dom component
  • selectProps - passed from the outer Select component so functionality can be extended

This should be sufficient to recreate the onValueClick behaviour in v1.

Inspired by #2806

MultiValue{X} Components are now more consistent with the other replaceable components' APIs
@JedWatson JedWatson changed the base branch from master to v2 July 23, 2018 04:49
@JedWatson JedWatson added the v2 label Jul 23, 2018
Copy link
Collaborator

@gwyneplaine gwyneplaine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@SimonGodefroid
Copy link

Any chance to have someone providing an example of how to replicate the onValueClick with the props you have here ?

The example of Github users in V1 was super explicit, any chance to have such a snippet?

Thanks.

@TrevorSayre
Copy link

@SimonGodefroid

const MultiValueLabel = props => {
  return (
    <components.MultiValueLabel
      {...props}
      innerProps={{
        ...props.innerProps,
        onClick: e => {
          console.log(props.data.label);
        }
      }}
    />
  );
};

This seems to be what they're thinking, and it works, but it's not clear to me how to prevent opening the menu when clicking the label as e.preventDefault() and e.stopPropagation() in the above defined onClick do not fix this.

@SimonGodefroid
Copy link

Thanks for sharing @TrevorSayre, in the end a colleague suggested to use Single Value.

Here's a snippet with how I got around, although I do remember having the menu opening as you mention... however I tanked my project so haven't be cracking the right way to do it.

import React, { Component } from 'react';
import AsyncCreatableSelect from 'react-select/async-creatable';

const Option = ({ innerProps, data, selectProps, isSelected }) => {
  return (
    <div {...innerProps}>
      <span>{data.label}</span>
    </div>
  );
};

const SingleValue = ({ innerProps, data, selectProps, isSelected }) => {
  return (
    <div {...innerProps} onClick={this.handleClick}>
      <a href={data.url}>{data.label}</a>
    </div>
  );
};

class Form extends Component {
  render() {
    return (
      <div>
        <AsyncCreatableSelect
          {...props}
          creatable={true}
          isClearable
          components={{ Option, SingleValue }}
          loadOptions={this.getOptionsArtists}
          value={props.input.value}
          onChange={props.input.onChange}
          onBlur={() => props.input.onBlur(props.input.value)}
        />
      </div>
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants