exemploFormReact.tsx

import React from "react";
import { ContaLookup } from "components/conta-lookup";
import { FieldModelVO, f, FieldModel } from "lib/form-types";
import { ContaLookupItem } from "components/conta-lookup-data";
import { toFields, applySpec, FormSpec, anySpec, focus } from "lib/view-model";
import { FieldBox } from "components/field-box";
import { CrudForm2 } from "components/crud-form2";
import { Break } from "components/layout";

interface State {
  model: ConfiguracaoModel;
}

interface ConfiguracaoModel {
  _base: FieldModel;
  debitoParaPrestacaoDeServico: FieldModelVO<ContaLookupItem>;
  creditoParaVendaDeProdutoDoEstabelecimento: FieldModelVO<ContaLookupItem>;
  creditoParaVendaDeProdutoDeTerceiros: FieldModelVO<ContaLookupItem>;
  creditoParaPrestacaoDeServicos: FieldModelVO<ContaLookupItem>;
}

const configuracaoSpec = (): FormSpec<ConfiguracaoModel> => ({
  _base: anySpec,
  debitoParaPrestacaoDeServico: anySpec,
  creditoParaVendaDeProdutoDoEstabelecimento: anySpec,
  creditoParaVendaDeProdutoDeTerceiros: anySpec,
  creditoParaPrestacaoDeServicos: anySpec,
});

function newConfiguracao(): ConfiguracaoModel {
  return {
    _base: f.string(""),
    debitoParaPrestacaoDeServico: f.nullVo<ContaLookupItem>(),
    creditoParaVendaDeProdutoDoEstabelecimento: f.nullVo<ContaLookupItem>(),
    creditoParaVendaDeProdutoDeTerceiros: f.nullVo<ContaLookupItem>(),
    creditoParaPrestacaoDeServicos: f.nullVo<ContaLookupItem>(),
  };
}

export class ConfiguracaoDeContasDoFiscal extends React.Component<void, State> {
  validationFailed: any;
  save: any;
  load: any;
  constructor() {
    super();
    this.state = {
      model: applySpec(configuracaoSpec(), newConfiguracao()),
    };
  }

  private modelChanged = (model: ConfiguracaoModel) => {
    this.setState({ model });
  }

  private modelLoaded = (model: ConfiguracaoModel): ConfiguracaoModel => {
    const fields = toFields(model);
    return focus(model, fields.debitoParaPrestacaoDeServico.name);
  }

  render() {
    const { model } = this.state;
    const fields = toFields(model);

    return (
      <div style={{ maxWidth: "50em" }}>
        <CrudForm2
          title="Configurações das Contas para importação Fiscal"
          spec={configuracaoSpec()}
          model={this.state.model}
          onModelChanged={this.modelChanged}
          isNew
          load={this.load}
          save={this.save}
          onModelLoaded={this.modelLoaded}
          onValidationFailed={this.validationFailed}
          style={{ maxWidth: 1000 }}
        >
          <FieldBox label="Conta de débito para prestação de serviço" expand>
            <ContaLookup field={fields.debitoParaPrestacaoDeServico} />
          </FieldBox>
          <Break />
          <FieldBox label="Conta crédito para venda de produto do estabelecimento" expand>
            <ContaLookup field={fields.creditoParaVendaDeProdutoDoEstabelecimento} />
          </FieldBox>
          <Break />
          <FieldBox label="Conta crédito para venda de produto de terceiros" expand>
            <ContaLookup field={fields.creditoParaVendaDeProdutoDeTerceiros} />
          </FieldBox>
          <Break />
          <FieldBox label="Conta crédito para prestação de serviços" expand>
            <ContaLookup field={fields.creditoParaPrestacaoDeServicos} />
          </FieldBox>
          <Break />
        </CrudForm2>
      </div>
    );
  }
}