demo for using the application

[vnallamhawk]

Hi Team,

Could you please let me know how to use this component. I am getting error in the following line import {storiesOf} from '@kadira/storybook'; while I am trying to build the bundle. Could you please help with the same.

[v-honcharenko]

There is an example of using this component with material-ui components (Checkbox, Chip):

import React, { Component } from 'react';

import MultiSelect from '@khanacademy/react-multi-select';
import Checkbox from 'material-ui/Checkbox';
import Chip from 'material-ui/Chip';

const options = [
  { value: 1, label: "Brian Genisio" },
  { value: 2, label: "John Doe" },
  { value: 3, label: "Jane Doe" },
  { value: 4, label: "Zach Morris" },
  { value: 5, label: "Kelly Kapowski" },
  { value: 6, label: "A.C. Slater" },
  { value: 7, label: "Lisa Turtle" },
  { value: 8, label: "Jessie Spano" },
  { value: 9, label: "Samuel Powers" },
];

const styles = {
  chip: {
    margin: 2,
    marginRight: 4,
  },
  wrapper: {
    display: 'flex',
    flexWrap: 'wrap',
    maxHeight: '100%',
  },
};

export default class MultiSelectExample extends Component {
  state = {
    selectedOptions: [],
  }

  handleSelectedChanged = (selectedOptions) => (
    this.setState({ selectedOptions })
  )

  handleUnselectItem = (removedVal) => () => (
    this.setState({
      selectedOptions: this.state.selectedOptions
        .filter(option => option !== removedVal)
    })
  )

  renderOption = ({ checked, option, onClick }) => (
    <Checkbox
      label={option.label}
      onCheck={onClick}
      checked={checked}
    />
  )

  renderSelected = (selected, options) => {
    if (!options.length) {
      return <span>No users available</span>;
    }

    if (!selected.length) {
      return <span>Select users ({options.length} available)</span>;
    }

    if (selected.length === options.length) {
      return <span>All users</span>;
    }

    if (selected.length > 3) {
      return <span>Selected {selected.length} users</span>;
    }

    return (
      <div style={styles.wrapper}>
        {selected.map(value => (
          <Chip
            key={value}
            style={styles.chip}
            onRequestDelete={this.handleUnselectItem(value)}
          >
            {options.find(o => value === o.value).label}
          </Chip>
        ))}
      </div>
    )
  }

  render() {
    const { selectedOptions } = this.state;

    return (
      <MultiSelect
        options={options}
        selected={selectedOptions}
        ItemRenderer={this.renderOption} 
        valueRenderer={this.renderSelected}
        onSelectedChanged={this.handleSelectedChanged}
      />
    );
  }
}

[vnallamhawk]

i am facing the following attached issue
. The context muiTheme is required in Checkbox but its value is undefined. Is there a way to create this multiselect dropdown without including the material-ui component.

[v-honcharenko]

material-ui components with version 0.x (stable) requires MuiThemeProvider (info)

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import getMuiTheme from 'material-ui/styles/getMuiTheme';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MultiSelectExample from './MultiSelectExample';

const muiTheme = getMuiTheme({});
const App = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <MultiSelectExample />
  </MuiThemeProvider>
);

ReactDOM.render(<App />, document.body);

[vnallamhawk]

Hello Team,

Thanks for the awesome support. Is there a way to reduce the height of the Multiselect dropdown and also to change the cyan color on selection of values in Multiselect dropdown. I would like to apply custom CSS for this component.

Thanks.

[v-honcharenko]

@vnallamhawk
Thanks, but i am not a maintainer. It seems that this component is not maintained by author at this moment.

You can wrap this component into some container with some class and style it using !important also you can use valueRenderer and ItemRenderer to customize your elements with inline styles.

<div className="multiselect-wrapper">
  <MultiSelectExample />
</div>

.multiselect-wrapper label:hover,
.multiselect-wrapper label[aria-selected="true"] {
    background: red !important;
}

[BrianGenisio]

I somehow missed all of the issues that were raised in this repo! I'm just seeing them. Sorry! I thought nobody was using it. I'm certainly open to PRs on this component. :)

[BrianGenisio]

@vnallamhawk I'm doing some updates on this component. I just published 0.2.3 which adds className to most of the levels within the component if you'd like to override styles. Most of the customizing is intended to be done via the valueRenderer and ItemRenderer... but if you want to control more fine-grained details of the existing flow, you can utilize these classes now.

[ALIRAZA705]

hi sir kindly guide me how can i give pre select values in this @khanacademy/react-multi-select npm pacakge ? i mean when user visit this page then i want to preselect some option how can i do that?