Read/Edit Mode example

import React from "react";
import PropTypes from "prop-types";
import { translate } from "react-i18next";

import {
  Form,
  Input,
  Checkbox,
  DynamicInputField,
  Select,
} from "@ematix/tesseract-component-library";

import cls from "./salary.scss";
import TwoColumnWrapper from "../../TwoColumnWrapper";

const EditMode = ({ t }) => (
  <Form onSubmit={() => {}}>
    <TwoColumnWrapper>
      <div className={cls.gridColLeft}>
        <div className={cls.salaryPart}>
          <Input label={t("Gross Salary")} className={cls.salary} />
          <Select name="select" label={t("Currency")} options={[]} />
        </div>
        <DynamicInputField
          name="fields"
          label={t("Financial Bonuses")}
          className={cls.bonuses}
        />
        <DynamicInputField
          name="fields"
          label={t("Benefits")}
          className={cls.benefits}
        />
      </div>
      <div className={cls.gridColRight}>
        <Select
          name="select"
          label={t("Pension")}
          options={[]}
          className={cls.pension}
        />
        <div className={cls.checkBox}>
          <Checkbox
            label={t("Commission Paid to:")}
            name="commissionPaidTo"
            id="1"
          />
        </div>
        <Input label={t("Name")} className={cls.name} />
        <Input label={t("Email")} className={cls.email} />
      </div>
    </TwoColumnWrapper>
  </Form>
);

const ReadMode = ({ t }) => (
  <TwoColumnWrapper>
    <div className={cls.gridColLeft}>
      <div className={cls.group}>
        <div className={cls.label}>{t("Gross Salary")}</div>
        <div className={cls.content}>50 000 CZK</div>
      </div>
      <div className={cls.group}>
        <div className={cls.label}>{t("Financial Bonuses")}</div>
        <div className={cls.content}>Comission</div>
        <div className={cls.content}>Extra ordinary</div>
      </div>
      <div className={cls.group}>
        <div className={cls.label}>{t("Benefits")}</div>
        <div className={cls.content}>Food coupons</div>
        <div className={cls.content}>Mobile phone</div>
      </div>
    </div>

    <div className={cls.gridColRight}>
      <div>
        <div className={cls.label}>{t("Pension")}</div>
        <div className={cls.content}>{t("10% from salary")}</div>
      </div>

      <div className={cls.agency}>{t("Employment Agency")}</div>
      <div className={cls.group}>
        <div className={cls.label}>{t("Name")}</div>
        <div className={cls.content}>Luke Skywalker</div>
      </div>
      <div className={cls.group}>
        <div className={cls.label}>{t("Contact")}</div>
        <div className={cls.content}>space@gmail.com</div>
      </div>
    </div>
  </TwoColumnWrapper>
);

class SalaryForm extends React.PureComponent {
  render() {
    const { isReadOnly, t } = this.props;
    return isReadOnly ? <ReadMode t={t} /> : <EditMode t={t} />;
  }
}

SalaryForm.propTypes = {
  t: PropTypes.func.isRequired,
  isReadOnly: PropTypes.bool.isRequired,
};

EditMode.propTypes = {
  t: PropTypes.func.isRequired,
};

ReadMode.propTypes = {
  t: PropTypes.func.isRequired,
};

export default translate("SalaryForm")(SalaryForm);