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

Component library for Muvehealth

// @flow
import React, { PureComponent, type Node } from 'react'
import { curry, filter, prop, propEq, map } from 'ramda'
import RadioGroup from '../RadioGroup'
import Box from '../../elements/Box'
import { type EventType, type InputType, type MetaType } from '../../types'

const eqFunc = curry((val, obj) => propEq('showSupplementalValue', val)(obj))

type Props = {
  direction?: string,
  gridStyles?: {},
  input?: InputType,
  label: string,
  labelModifier: string,
  meta?: MetaType,
  modifier?: string,
  readOnly?: boolean,
  supplementaryFields: Array<{
    showSupplementalValue: string,
    render: () => Node,
  }>,
  values: Array<{
    label: string,
    value: string,
    id?: ?string,
  }>,
}

type State = {
  showingSupplementals: [],
}

class RadioGroupWithNSupFields extends PureComponent<Props, State> {
  static defaultProps = {
    direction: 'horizontal',
    gridStyles: undefined,
    readOnly: false,
    input: { name: null },
    meta: { touched: false, error: '' },
    modifier: 'horizontal',
  }

  state = { showingSupplementals: [] }

  componentWillMount() {
    const { supplementaryFields, input } = this.props
    const value = prop('value', input)
    let selectedValues
    if (value != null) {
      selectedValues = filter(eqFunc(value), supplementaryFields)
    }
    if (selectedValues != null) {
      this.setState(() => ({
        showingSupplementals: selectedValues,
      }))
    }
  }

  handleShowSupplemental = (e: EventType) => {
    const { target: { value } } = e
    const { supplementaryFields } = this.props
    const selectedValues = filter(eqFunc(value), supplementaryFields)
    this.setState(() => ({
      showingSupplementals: selectedValues,
    }))
  }

  render() {
    const { direction, gridStyles, label, labelModifier, input,
      meta, modifier, readOnly, supplementaryFields, values, ...styles } = this.props
    const { showingSupplementals } = this.state

    return (
      <Box {...styles}>
        <RadioGroup
          direction={direction}
          gridStyles={gridStyles}
          input={input}
          label={label}
          labelModifier={labelModifier}
          meta={meta}
          modifier={modifier}
          onChange={this.handleShowSupplemental}
          readOnly={readOnly}
          values={values}
        />
        { map(obj => (
          <Box mt={4} key={obj.showSupplementalValue}>
            { obj.render() }
          </Box>), showingSupplementals)
        }
      </Box>
    )
  }
}

export default RadioGroupWithNSupFields