Feature/select - Githubissues

Ready for review!

There are many places where this component gets complex internally. I would like to make it as easy to understand and use as possible, so if there's anything I can do to help with that then please let me know.

On that note, I'd go in this order to get an understanding of how it works:

npm start and look at the browser console when using the <select>s
See the usage in demo/src/index.jsx
See the smart component in demo/src/demo-select.jsx
See the implementation in components/Select/standard/Select.jsx.

"processing" state:

I initially wanted to be able to just have something like this for option state (as we discussed):

this.state = {
  optionState: {
    option1: 'checked',
    option2: 'unchecked',
    option3: 'unchecked',
    option4: 'processing',
  },
  ...
}

There was a lot of added complexity involved with doing it that way, so I opted for the way quartz currently handles processing state, which is to pass an array of processing option ids as a prop.

So currently it works like this:

this.state = {
  selectedOptions: {
    option1: true
    option2: false
    option3: false
    option4: false
  },
  processingOptions: [ 'option4' ],
  ...
}

The stateful component might look like this:

function removeFromArray(array, item) {
  const index = array.indexOf(item);
  if (index !== -1) { array.splice(index, 1); }
  return array;
}

class ProcessingSelect extends Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
      selectedOptions: {},
      selectedLabel: '',
      processingOptions: [],
    };
    this.setOpen = this.setOpen.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  setOpen(isOpen) {
    this.setState({ isOpen });
  }

  handleChange(selectedOptions, selectedLabel, item) {
    const { processingOptions } = this.state;
    this.setState({ processingOptions: processingOptions.concat(item.uniqueId) });
    setTimeout(() => {
      this.setState({
        selectedOptions,
        selectedLabel,
        processingOptions: removeFromArray(processingOptions, item.uniqueId),
      });
    }, 500);
  }

  render() {
    return (
      <Select
        {...this.props}
        isOpen={this.state.isOpen}
        selectedOptions={this.state.selectedOptions}
        onSelectionToggle={this.handleChange}
        onOpenToggle={this.setOpen}
        triggerLabel={this.state.selectedLabel}
      />
    );
  }
}

// used like this:
<ProcessingSelect options={[/* some options go here */]} />

Initially I didn't like this way of handling "processing" state as much, but it has a few benefits.

No string constants. You can do if (this.state.selectedOptions[foo]) { ... } instead of if (this.state.optionState[foo] === 'checked') { ... }
Since most of the time you won't be using this option, the default api is simpler.
Simpler implementation internally (easier to refactor)

(If this isn't ok, I can go back to the first way.)

Still left to do:

~Add tests~
Maybe implement action and onAction (although I do not think this currently works, so I am not sure if it is needed). This image is a component that uses those props, and the action does not show up at all.
Maybe add custom dropdown menu vertical offsets. Do you think this would be needed? I didn't see them in use in Crystal (but didn't look too hard).
Add :hover state to standard dropdowns. I wanted to implement this in quartz css, but if that is not possible for now then I can use onMouseOver and onMouseOut to do the same thing.

vhx / quartz-react

Feature/select #11

Ready for review!

"processing" state:

Still left to do: