input-arrow.jsx

'use strict';

const React = require('react');
const InputWrapper = require('./input-wrapper');
const Widgets = require('react-widgets');

require('./input-tag.scss');

module.exports = React.createClass({
  displayName: 'InputTag',

  getDefaultProps() {
    return {
      label: '',
      arrow: false,
    };
  },

  changeHandler() {
    this.setState({
      open: !this.state.open,
      overlayShown: !this.state.open,
    });
  },

  multiSelect() {
    if (this.props.arrow) {
      return (
        <Widgets.Multiselect
          {...normalisedProps}
          duration={50}
        />
      );
    } else {
      return (
        <Widgets.Multiselect
          {...this.props}
          onClick={this.optionClickHandler}
          open={this.state.open}
          duration={50}
        />
      );
    }
  },

  inputWrapper() {
    const normalisedProps = InputWrapper.normaliseProps(this.props);
    
    return (
      <InputWrapper
        {...normalisedProps}
        inputType="Tag"
      >
        {this.multiSelect()}
      </InputWrapper>
    );
  },

  arrowWrapper() {
    let layer = null;

    if (this.state.overlayShown) {
      layer = (
        <div onClick={this.changeHandler} className="overlay" />
      );
    }

    let classes = cx({
      'empty': this.state.isEmpty,
      'multiselect-arrow-container':true
    });

    return (
      <div className={classes}>
        <button onClick={this.changeHandler} className="button-trigger">{this.props.label}<div/></button>
        {layer}
        <Widgets.Multiselect
          {...this.props}
          onClick={this.optionClickHandler}
          open={this.state.open}
          duration={50}
        />
      </div>
    );
  },

  render() {
    return (
      { this.props.arrow ? this.arrowWrapper() : this.inputWrapper() }
    );
  },
});