Fuse-box test material

Header.tsx

import * as React from 'react'
import { translate } from 'react-i18next'
import * as classNames from 'classnames'

import { getTranslatedTextIfAvailable } from '../utils/text'
import { LocalizableComponent } from '../constants/types'

export interface HeaderProps extends LocalizableComponent {
  text?: string
  translationId?: string
  className?: string
  style?: 'strong' | 'regular'
}

const Header = (props: HeaderProps) => {
  const headerStyle = `Header-${props.style ? props.style : 'regular'}`

  return (
    <span className={classNames('Header', props.className, headerStyle)}>
      {getTranslatedTextIfAvailable(props.text, props.translationId, props.t)}
    </span>
  )
}

export default translate()(Header)

Modules.tsx

import * as React from 'react'
import * as classNames from 'classnames'

import { FormModule, FormModuleType } from '../../../core/constants/types'

import EditModules from './Edit'
import ViewModules from './View'
import { FormModuleRenderType } from '../../constants/types'
import { isModuleHidden } from '../../utils/module'

export interface ModuleProps {
  module: FormModule
  renderType: FormModuleRenderType
  children?: React.ReactNode
}

const renderers = {
  [FormModuleRenderType.View]: ViewModules,
  [FormModuleRenderType.Edit]: EditModules
}

const Module = ({ module, renderType, children }: ModuleProps) => {
  return (
    <div
      className={classNames('Module-wrapper', {
        hidden: isModuleHidden(module),
        'Module-wrapper-border-bottom': module.borderBottom,
        'Module-wrapper-border-top': module.borderTop
      })}
    >
      {module.title ? <span>{module.title}</span> : null}
      {renderModule(module, renderType, children)}
    </div>
  )
}

const renderModule = (
  m: FormModule,
  renderType: FormModuleRenderType,
  children?: React.ReactNode
): JSX.Element => {
  const renderer = renderers[renderType]
  switch (m.type) {
    case FormModuleType.Label:
      return <renderer.Label module={m}>{children}</renderer.Label>
    case FormModuleType.Columns2:
      return <renderer.Col2 module={m}>{children}</renderer.Col2>
    case FormModuleType.Columns3:
      return <renderer.Col3 module={m}>{children}</renderer.Col3>
    case FormModuleType.TextBox:
      return <renderer.TextBox module={m} />
    case FormModuleType.TextArea:
      return <renderer.TextArea module={m} />
    case FormModuleType.DropDown:
      return <renderer.DropDown module={m} />
    case FormModuleType.DateTime:
      return <renderer.DateTime module={m} />
    case FormModuleType.Date:
      return <renderer.Date module={m} />
    case FormModuleType.Integer:
      return <renderer.Integer module={m} />
    case FormModuleType.Checkbox:
      return <renderer.Checkbox module={m} />
    case FormModuleType.Signature:
      return <renderer.Signature module={m} />
    case FormModuleType.PositiveNegativeCount:
      return <renderer.PositiveNegativeCount module={m} />
    case FormModuleType.PositiveNeutralNegativeChoice:
      return <renderer.PositiveNeutralNegativeChoice module={m} />
    case FormModuleType.CorrectIncorrectChoice:
      return <renderer.CorrectIncorrectChoice module={m} />
    case FormModuleType.Matrix:
      return <renderer.Matrix module={m} />
    default:
      return <span />
  }
}

export default Module