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

Component library for Muvehealth

// @flow
import React, { PureComponent } from 'react'
import any from 'ramda/src/any'
import equals from 'ramda/src/equals'
import propOr from 'ramda/src/propOr'
import intersection from 'ramda/src/intersection'
import length from 'ramda/src/length'
import CheckboxGroup from '../CheckboxGroup'
import Box from '../../elements/Box'
import { type InputType, type MetaType } from '../../types'

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

type State = {
  showSupplemental: boolean
}

class CheckboxGroupWithSupplementaryField extends PureComponent<Props, State> {
  static defaultProps = {
    change: undefined,
    gridStyles: undefined,
    labelModifier: undefined,
    noLabel: false,
    direction: 'horizontal',
    readOnly: false,
    input: { name: null, value: null },
    meta: { touched: false, error: '' },
    showSupplementalValue: undefined,
  }

  state = { showSupplemental: false }

  componentWillMount() {
    const { showSupplementalValue, input } = this.props
    const value = propOr([], 'value', input)

    if (
      any(equals(showSupplementalValue), value)
      || length(intersection(value, showSupplementalValue)) >= 1
    ) {
      this.setState(() => ({
        showSupplemental: true,
      }))
    }
  }

    handleShowSupplemental = (isChecked: boolean, values: Array<string>) => {
      const { showSupplementalValue } = this.props
      this.setState(() => ({
        showSupplemental:
        any(equals(showSupplementalValue), values)
        || length(intersection(values, showSupplementalValue)) >= 1,
      }))
    }

    render() {
      const { change, direction, input, label, labelModifier, meta, noLabel,
        readOnly, values, render, gridStyles, showSupplementalValue, ...styles } = this.props

      const { showSupplemental } = this.state

      return (
        <Box {...styles}>
          <CheckboxGroup
            change={change}
            direction={direction}
            gridStyles={gridStyles}
            input={input}
            label={label}
            labelModifier={labelModifier}
            meta={meta}
            noLabel={noLabel}
            onChange={this.handleShowSupplemental}
            readOnly={readOnly}
            values={values}
          />
          { showSupplemental && (
          <Box mt={4}>
            {render()}
          </Box>
          )}
        </Box>
      )
    }
}

export default CheckboxGroupWithSupplementaryField