select.js

import React, { Component, PropTypes } from 'react'
import { mapProps, compose, withState, setPropTypes, defaultProps, withHandlers } from 'recompose'
import { is } from 'ramda'
import { useSheet } from 'ui/styles/jss'
import { heightRow } from 'ui/styles/styles'
import { blackList } from 'ui/utils/'
import { Input } from '../input/'
import { DropDown, DropDownItem } from '../dropdown/'
import { ArrowIcon } from '../icons/'

const styles = {
  Select: {
    width: '100%',
    height: heightRow,
  },
  arrowDown: {
    alignSelf: 'center',
    display: 'inline-flex',
    fontSize: '10px',
    height: heightRow,
  },
}

const enhance = compose(
  useSheet(styles),
  defaultProps({
    name: 'defaultAutocompleteName',
    keys: {
      id: 'id',
      value: 'value',
    },
    options: [],
  }),
  withState('isShow', 'toggleShow', false),
  mapProps(({ sheet: { classes }, defaultValue, keys, value, ...props }) => ({
    classes,
    keys,
    ...defaultValue && { defaultValue: { [keys.id]: null, [keys.value]: defaultValue } },
    value: is(Object, value) ? value[keys.value] : value || defaultValue,
    ...props,
  })),
  withHandlers({
    onInputClick: ({ isShow, toggleShow }) => () => {
      !isShow && toggleShow(true)
    },
    onChangeValue: ({ name, toggleShow, onChange, simpleValue, keys }) => (item) => {
      onChange && onChange({ target: { type: 'text', value: simpleValue ? item[keys.id] : item, name } })
      toggleShow(false)
    },
  }),
)

class Select extends Component {
  constructor() {
    super()

    this.element = null
    this.onOutsideClick = this.onOutsideClick.bind(this)
  }

  onOutsideClick(event) {
    !this.element.contains(event.target) && this.props.toggleShow(false)
  }

  renderDropDown(onChangeValue, options, keys, value, defaultValue) {
    return (
      <DropDown onOutsideClick={this.onOutsideClick}>
        {
          [].concat(defaultValue || [], options).map((option, index) => {
            const active = option[keys.value] === value

            return (
              <DropDownItem key={option[keys.id] || index} onClick={() => onChangeValue(option)} active={active}>
                {option[keys.value]}
              </DropDownItem>
            )
          })
        }
      </DropDown>
    )
  }

  render() {
    const {
      options, classes, isShow, onInputClick, onChangeValue, keys, value, simpleValue, defaultValue,
      ...otherProps
    } = blackList('toggleShow')(this.props)

    const arrowIcon = <ArrowIcon size={'12px'} rotate={-90} onClick={onInputClick} />
    const val = simpleValue
      ? value
      : value
    return (
      <div className={classes.Select} ref={(node) => { this.element = node }}>
        <Input onClick={onInputClick} {...otherProps} value={val || ''} rightIcons={arrowIcon} styled />
        {isShow && !!options.length && this.renderDropDown(onChangeValue, options, keys, value, defaultValue)}
      </div>
    )
  }
}

Select.propTypes = {
  options: PropTypes.arrayOf(PropTypes.object),
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
  ]),
  keys: PropTypes.shape({
    id: PropTypes.string,
    value: PropTypes.string,
  }),
  errors: PropTypes.array,
  name: PropTypes.string,
  isShow: PropTypes.bool,
  valueKey: PropTypes.string,
  classes: PropTypes.object,
  toggleShow: PropTypes.func,
  onChange: PropTypes.func,
  onChangeValue: PropTypes.func,
  onInputClick: PropTypes.func,
  onItemClick: PropTypes.func,
}

export default enhance(Select)