A hoc to render components dynamically.

intent-hoc.jsx

import React from 'react'
import PropTypes from 'prop-types'

import Wrapper from './wrapper'
import { Definition, Translation, Help, Normal } from './intents-templates'

const withIntent = Component => {
  const Balon = ({
    intent = 'normal',
    title,
    position,
    backgroundColor,
    fulfillment,
    ...props
  }) => (
    <Component backgroundColor={backgroundColor} title={title} position={position}>
      {
        {
          'inquiry.help': <Help content={fulfillment.content} />,
          'inquiry.definition': <Definition content={fulfillment.content} />,
          'inquiry.translation': <Translation content={fulfillment.content} />,
          normal: <Normal text={fulfillment.text} color={props.color} />
        }[intent]
      }
    </Component>
  )

  Balon.propTypes = {
    color: PropTypes.string,
    intent: PropTypes.string,
    fulfillment: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    title: PropTypes.string,
    position: PropTypes.string,
    backgroundColor: PropTypes.string
  }

  return Balon
}

export const BallonWithIntent = withIntent(Wrapper)
export const Ballon = Wrapper