@muvehealth/fixins/dist/blocks/SelectWithSupplementaryField/index.js.flow

Component library for Muvehealth

// @flow
import React, { type Node, Fragment, PureComponent } from 'react'
import { contains, prop } from 'ramda'
import Box from '../../elements/Box'
import Select from '../../elements/Select'
import { type EventType, type InputType, type MetaType } from '../../types'

type Props = {
  change: (string | () => string,
    string | () => string) => void,
  direction?: string,
  input?: InputType,
  label: string,
  maxWidth?: ?number,
  meta?: MetaType,
  options: Array<{
    label: string,
    value: ?string,
  }>,
  placeholder: string,
  render: () => Node,
  showSupplementalValue: Array<string>,
}

type State = {
  showSupplemental: boolean,
}

class SelectWithSupplementaryField extends PureComponent<Props, State> {
  static defaultProps = {
    direction: 'horizontal',
    maxWidth: null,
    input: undefined,
    meta: undefined,
  }

  state = {
    showSupplemental: false,
  }

  componentWillMount() {
    const { showSupplementalValue, input } = this.props
    const value = prop('value', input)
    if (value && contains(value, showSupplementalValue)) {
      this.setState(() => ({
        showSupplemental: true,
      }))
    }
  }

  handleShowSupplemental = (e: EventType) => {
    const { target: { value } } = e
    const { change, input } = this.props
    this.setState((state, { showSupplementalValue }) => ({
      showSupplemental: contains(value, showSupplementalValue),
    }))
    if (change) {
      change(prop('name', input), value)
    }
  }

  render() {
    const { direction, input, label, maxWidth, meta,
      options, placeholder, render } = this.props
    const { showSupplemental } = this.state
    return (
      <Fragment>
        <Select
          data-test={prop('name', input)}
          input={input}
          label={label}
          maxWidth={maxWidth}
          meta={meta}
          name={prop('name', input)}
          onChange={this.handleShowSupplemental}
          options={options}
          placeholder={placeholder}
        />
        <Box mt={direction === 'vertical' ? 4 : null}>
          { showSupplemental ? render() : null }
        </Box>
      </Fragment>
    )
  }
}

export default SelectWithSupplementaryField