MultiSelectInput

import React, { Component } from 'react';
import Select from 'react-select';
import { customStyles } from '../../helpers/styleSelect';
import CustomOption from './CustomOption';

const transformValue = (value, options, multi) => {
  if (multi && typeof value === 'string') return [];

  const filteredOptions = options.filter(option =>
    multi ? value.indexOf(option.value) !== -1 : option.value === value
  );

  return multi ? filteredOptions : filteredOptions[0];
};

const multiChangeHandler = func => values => {
  func(values.map(value => value.value));
};

class MultiSelectInput extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onBlur = e => {
    const blurHandler = this.props.onBlur;
    if (blurHandler) {
      blurHandler({
        type: 'blur',
        target: {
          value: e.target.value
        }
      });
    }
  };

  render() {
    const {
      input,
      options,
      name,
      id,
      label,
      disabled,
      placeholder,
      requiredStar,
      defaultValue,
      meta: { touched, error, warning }
    } = this.props;

    const transformedValue = transformValue(input.value, options, true);

    return (
      <div>
        <div className="form-group">
          <label htmlFor={id}>
            {label}
            {requiredStar === true ? (
              <span className="text-required"> *</span>
            ) : (
              ''
            )}
          </label>
          <Select
            {...input}
            id={id}
            name={name}
            defaultValue={defaultValue}
            isSearchable
            isMulti
            isDisabled={disabled}
            className={`${touched && error ? 'focus-error-select' : ''}`}
            styles={customStyles}
            placeholder={placeholder}
            optionClassName="needsclick"
            options={options}
            components={{ Option: CustomOption }}
            value={transformedValue}
            isClearable
            onChange={multiChangeHandler(input.onChange)}
            onBlur={this.onBlur}
          />
          {touched &&
            ((error && error !== 'Required' && (
              <span className="form-error">{error}</span>
            )) ||
              (warning && <span className="form-error">{warning}</span>))}
        </div>
      </div>
    );
  }
}

export default MultiSelectInput;