ApplicationFormPreviewV1.0.md

// @flow

import * as React from 'react';
import {reduxForm} from 'redux-form';
import {FormattedMessage, TextField, Checkbox, DatePicker, SelectField, MenuItem} from 'universal/common/components';
import css from './ApplicationFormPreview.scss';

export const APPLICATION_FORM_NAME = 'APPLICATION_FORM_NAME';

type Props = {
  onSubmit: React.PropTypes.func.isRequired,
  onCheckboxSelected: React.PropTypes.func.isRequired,
  blueprint: React.PropTypes.object.isRequired,
};

const styles = {
  datePicker: {
    container: {
      width: '100%',
      height: '72px',
      display: 'flex',
    },
    style: {
      width: '100%',
      marginTop: 'auto',
    },
    textFieldStyle: {
      width: '100%',
    },
  },
  selectField: {
    style: {
      width: '100%',
      height: '60px',
    },
    floatingLabelStyle: {
      top: '37px',
    },
    underlineStyle: {
      bottom: '-4px',
    },
  },
};

const getComponent = (sectionFieldRowData = {}, fieldKey = '') => {
  const hintText = `App.admin.applicationFormTemplates.label.${fieldKey}`;
  const isText = sectionFieldRowData.type === 'text';
  const isEmail = sectionFieldRowData.type === 'email';
  const isPhone = sectionFieldRowData.type === 'phone';
  const isDate = sectionFieldRowData.type === 'date';
  const isSelect = sectionFieldRowData.type === 'select';

  return (
    <div>
      {isText && <TextField
        fullWidth
        floatingLabelText={<FormattedMessage id={hintText} />}
      />}

      {isEmail && <TextField
        fullWidth
        type="email"
        floatingLabelText={<FormattedMessage id={hintText} />}
      />}

      {isPhone && <TextField
        fullWidth
        type="tel"
        floatingLabelText={<FormattedMessage id={hintText} />}
      />}

      {isDate &&
        <div style={styles.datePicker.container}>
          <DatePicker
            style={styles.datePicker.style}
            textFieldStyle={styles.datePicker.textFieldStyle}
            hintText={<FormattedMessage id={hintText} />}
          />
        </div>}

      {isSelect &&
        <SelectField
          style={styles.selectField.style}
          floatingLabelStyle={styles.selectField.floatingLabelStyle}
          underlineStyle={styles.selectField.underlineStyle}
          floatingLabelText={<FormattedMessage id={hintText} />}
        >
          {sectionFieldRowData.possibleValues.map((possibleValue, index) => (
            <MenuItem key={index} value={index} primaryText={possibleValue} />
          ))}
        </SelectField>}
    </div>
  );
};

const Section = ({blueprint = {}, onCheckboxSelected = () => {}, sectionField = ''} = {}) => {
  const fieldsKeys = Object.keys(blueprint[sectionField].fields);

  return (
    <div>
      <h3 className={css.ApplicationFormPreview_sectionHeader}>{blueprint[sectionField].title}</h3>
      {fieldsKeys.map((fieldKey, index) => getRow(blueprint, sectionField, fieldKey, index, onCheckboxSelected))}
    </div>
  );
};

const getRow = (blueprint, sectionField, fieldKey, index, onCheckboxSelected) => {
  const shouldDisplay = blueprint[sectionField].fields[fieldKey].shouldDisplay;
  return (
    <div key={index}>
      {shouldDisplay && <Row
        blueprint={blueprint}
        fieldKey={fieldKey}
        sectionField={sectionField}
        onCheckboxSelected={onCheckboxSelected}
      />}
    </div>);
};

const Row = ({blueprint = {}, fieldKey = '', sectionField = '', onCheckboxSelected = () => {}} = {}) => (
  <div className={css.ApplicationFormPreview_rowContainer}>
    <div className={css.ApplicationFormPreview_inputContainer}>
      {getComponent(blueprint[sectionField].fields[fieldKey], fieldKey)}
    </div>
    <div className={css.ApplicationFormPreview_checkbox}>
      <Checkbox
        checked={blueprint[sectionField].fields[fieldKey].status === 'step1'}
        onCheck={(_, isInputChecked) => { onCheckboxSelected({sectionField, fieldKey, isInputChecked}); }}
      />
    </div>
  </div>
);

@reduxForm({
  form: APPLICATION_FORM_NAME,
})
export default class ApplicationFormPreview extends React.Component {
  props: Props

  render() {
    const {previewData} = this.props;

    return (
      <form onSubmit={onSubmit}>
        <Section blueprint={blueprint} sectionField={'basicInformation'} onCheckboxSelected={onCheckboxSelected} />
      </form>
    );
  }
}