Introdução ao Ant Design ProComponents

O Ant Design ProComponents é uma biblioteca de componentes avançados construída sobre o Ant Design, otimizada para a criação eficiente de sistemas de backend profissionais. Ela simplifica o desenvolvimento ao fornecer componentes pré-configurados e padrões de uso, permitindo que desenvolvedores foquem na lógica de negócios em vez de implementações repetitivas.

Vantagens do ProComponents

Para sistemas de backend, o ProComponents oferece benefícios significativos:

• Biblioteca Completa: Inclui componentes para formulários, tabelas, layouts e cards, atendendo a necessidades comuns.
• Práticas Integradas: Incorpora padrões de design e lógica de interação específicos para backends.
• Alta Customização: Permite configurações flexíveis para se adaptar a diferentes requisitos de negócios.
• Suporte a TypeScript: Oferece definições de tipo robustas para uma experiência de desenvolvimento superior.

Componentes Principais

O ProComponents disponibiliza diversos componentes essenciais para desenvolvimento de backend:

Início Rápido

Instalação

Para começar, instale as dependências necessárias em seu projeto:

npm install @ant-design/pro-components
# ou
yarn add @ant-design/pro-components

Exemplo Básico

Veja como criar uma tabela com pesquisa e paginação usando o ProTable:

import { ProTable } from '@ant-design/pro-components';

const configColunas = [
  { title: 'Nome Completo', dataIndex: 'nomeCompleto', key: 'nome' },
  { title: 'Idade', dataIndex: 'idadeUsuario', key: 'idade', valueType: 'digit' },
  { title: 'Data de Admissão', dataIndex: 'dataAdmissao', key: 'data', valueType: 'date' },
];

const TabelaDados = () => {
  const obterDados = async (parametrosRequisicao) => {
    const respostaApi = await fetch('/api/dados', { method: 'GET', params: parametrosRequisicao });
    const dadosConvertidos = await respostaApi.json();
    return dadosConvertidos;
  };

  return <ProTable columns={configColunas} request={obterDados} />;
};

Recursos Avançados

ValueType para Exibição de Dados

O ProComponents utiliza valueType para renderizar UIs com base no tipo de dados, simplificando o código. Exemplos incluem:

• text: Texto padrão.
• date, dateTime: Tipos de data.
• select: Caixa de seleção (requer valueEnum ou request).
• money: Formato monetário.
• percent: Formato percentual.

Exemplo de configuração com valueType:

{
  title: 'Situação',
  dataIndex: 'situacaoAtual',
  key: 'situacao',
  valueType: 'select',
  valueEnum: {
    0: { text: 'Inativo', status: 'Error' },
    1: { text: 'Ativo', status: 'Success' },
  },
}

Integração com Requisições de Dados

Componentes como ProTable e ProForm possuem capacidade integrada de requisição de dados, facilitando carregamento e atualização:

<ProTable
  columns={configColunas}
  request={async (params) => {
    const resp = await fetch('/api/info', { params });
    return resp.json();
  }}
/>

Formulários com Lógica Condicional

O ProForm suporta lógica complexa de dependência e validação em formulários:

<ProForm
  initialValues={{}}
  onFinish={async (valores) => {
    // Lógica de submissão
  }}
>
  <ProFormSelect
    name="categoria"
    label="Categoria"
    options={[
      { label: 'Opção A', value: 'a' },
      { label: 'Opção B', value: 'b' },
    ]}
  />
  <ProFormText
    name="descricao"
    label="Descrição"
    rules={[{ required: true, message: 'Campo obrigatório' }]}
    dependencies={['categoria']}
    renderFormItem={(item, { categoria }) => {
      return categoria === 'a' ? item : null;
    }}
  />
</ProForm>

Dicas de Performance e Reutilização

Para otimizar o uso do ProComponents:

• Reutilização de Componentes: Extraia configurações comuns, como colunas de tabelas, e crie componentes de campo personalizados.
• Gerenciamento de Estado de Carregamento: Use a propriedade loading para controlar indicadores visuais.
• Cache de Dados: Implemente cache para dados estáticos, reduzindo requisições.
• Rolagem Virtual: Para tabelas com grandes volumes de dados, ative a rolagem virtual para melhorar performnace.
• Carrgeamento Sob Demanda: Utilize imports dinâmicos para reduzir o tamanho inicial do bundle.

Recursos de Aprendizado

Para aprofundar seus conhecimentos, consulte a documentação oficial incluída no projeto, como os guias no diretório guidelines/ e exemplos práticos em demos/. As definições de tipo no diretório src/ também auxiliam no desenvolvimento com TypeScript.