Ant Design 4.0 foi lançado!

Introdução

Lançamos a versão 4.0 rc na SEE Conf. Depois de mais de um mês de coleta e ajustes de feedback, é hora de lançar o 4.0! Obrigado a todos que forneceram comentários, sugestões e contribuições durante este período. Vamos combinar as atualizações já envolvidas na versão rc e algumas atualizações recentemente aqui. A documentação completa atualizada pode ser encontrada aqui . endereço do documento v4: https://ant.design

Deve-se observar que a versão v3 foi incorporada à filial 3.x-stable em dezembro de 2019 e entrou em manutenção. Ainda faremos trabalho de manutenção semestral para a versão v3. O prazo de manutenção é maio de 2020.

Atualização de especificação de design

Ajustamos os cantos arredondados básicos de 4px para 2px . O filete em si é um detalhe e, nas cenas do meio e de fundo, consideramos a eficiência como a primeira prioridade, portanto, reduzimos os detalhes visuais da interface e melhoramos a eficiência da leitura das informações da interface. Além disso, ajustamos as sombras para torná-las mais consistentes com as sombras reais, ao mesmo tempo em que enfatizamos a hierarquia de informações.

Tema escuro

Atualizamos o sistema de cores com base na versão v3, e a v4 fornece um tema escuro. Você pode clicar na função de mudança de tema na página para ver o efeito do tema escuro:

Componente sem borda

No trabalho diário, descobrimos que existem componentes de seleção leves em alguns cenários. Portanto, fornecemos um novo estilo sem borda que permite aos desenvolvedores incorporar esses componentes com mais facilidade, sem substituir o estilo.

Ajuste de compatibilidade

O Ant Design 3.0 fez muitos esforços para ser compatível com versões anteriores do IE. No entanto, de acordo com estatísticas da indústria, os navegadores IE9 / 10 globais e domésticos estão diminuindo com as atualizações do sistema Windows. Paramos de oferecer suporte ao IE 9/10 em 4.0 (mas ainda ofereceremos suporte ao IE 11). Portanto, alguns componentes de baixo desempenho no passado também ganharão desempenho com os novos recursos de css.

Ao mesmo tempo, também atualizamos a versão mínima do React da qual a v4 depende para o React 16.9. Isso significa que a versão v4 fornecerá mais ganchos para simplificar seu código.

Além disso, removemos algumas APIs obsoletas que foram avisadas na versão v3. Recomendamos fortemente que você atualize seu projeto atual para a última versão da v3 e atualize a API obsoleta com base na mensagem de aviso.

Tamanho menor

Em antd @ 3.9.0 , introduzimos o ícone svg ( por que usar o ícone svg? ). A API de ícone usando o nome da string não pode ser carregada sob demanda, portanto, o arquivo de ícone svg é totalmente introduzido, o que aumenta muito o tamanho do produto embalado. No 4.0, ajustamos a API de uso do ícone para suportar a agitação da árvore, reduzindo o tamanho do pacote padrão do Antant em cerca de 150 KB (Gzip).

O uso do ícone legado será descartado:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

No 4.0, ele será introduzido sob demanda:

  import { Button } from 'antd';

 // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

Além disso, também removemos algumas dependências relacionadas para reduzir o tamanho do pacote compactado com gzip:

Reescrever componente

Reescrever formulário

O formulário, como um componente de alta frequência, tem uma API ligeiramente redundante. O usuário precisa obter a instância do formulário por meio do HOC de Form.create e usar form.getFieldDecorator para realizar a vinculação de dados no componente. Além disso, todo o formulário é renderizado novamente sempre que os dados são alterados, o que torna o desempenho preocupante em formulários de big data. Na versão v4, o Form virá com uma instância de formulário. Você pode vincular dados diretamente por meio da propriedade name de Form.Item, simplificando assim seu código:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

Descobrimos que, na maioria dos cenários, o desenvolvedor está realmente preocupado apenas com os valores que o formulário envia com êxito. Portanto, fornecemos onFinish , que só disparará depois que a validação do formulário for aprovada, e validateFields não são mais necessários.

Além disso, o Form fornece o método hooks Form.useForm para permitir que você controle o exemplo do formulário:

const [form] = Form.useForm();

React.useEffect(() => {
  form.setFieldValues({ ... });
});

<Form form={form} />

Ao mesmo tempo, fornecemos o componente Form.List, para que você possa controlar facilmente os campos da lista:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Reescrever tabela

Como ajustamos os requisitos mínimos de compatibilidade, mudamos para a implementação de colunas fixas usando o estilo sticky , reduzindo significativamente o consumo de desempenho quando o formulário tem colunas fixas. Para o IE 11 que não suporta sticky , aceitamos processamento de downgrade.

Ao mesmo tempo, fornecemos uma nova API summary para obter o efeito da linha de resumo:

O classificador fornece uma função de classificação em várias colunas:

Além disso, ajustamos a lógica subjacente para que fixedColumn , expandable e scroll agora possam ser misturados. Fornece uma API body para personalizar implementações de conteúdo de tabela, a partir da qual você pode implementar efeitos como rolagem virtual.

Novo DatePicker, TimePicker e Calendário

Reescrevemos o componente de data como um todo para separá-lo de moment . Você pode gerar componentes do Seletor para bibliotecas de datas personalizadas usando o método generate que fornecemos. Para manter a compatibilidade, o componente Seletor padrão ainda usa moment como a biblioteca de datas. Consulte aqui a biblioteca de datas personalizadas.

Além disso, fornecemos um conjunto completo de seletores de hora, data, semana, mês, ano e seletores de intervalo correspondentes. Você pode defini-lo por meio da propriedade picker, em vez de implementar o seletor especial por meio do método controlado do modo:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

Para o seletor de intervalo, também otimizamos a interação. Agora você pode selecionar a hora de início ou de término individualmente, e isso otimiza perfeitamente a experiência de entrada manual de data.

Notificação / Ganchos de suporte modal

No passado, você pode ter encontrado o problema de que os métodos de chamada Modal.xxx e Notification.xxx não podem obter Contexto. Isso porque criaremos adicionalmente uma instância do React por meio de ReactDOM.render para esses açúcares sintáticos, o que também causa o problema de perda de contexto. Na nova versão, fornecemos o método hooks, que permite injetar nós onde você precisa obter o contexto:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Pergaminho virtual

Na v4, atualizamos Tree, TreeSelect e Select. Por padrão, eles usam tecnologia de rolagem virtual para otimizar seu desempenho para realizar uma grande quantidade de renderização de opções.

Demonstração viva

Além disso, a interação e acessibilidade do teclado são otimizadas.

Mais novos recursos / recursos / otimizações

• O ConfigProvider fornece a configuração direction para suportar a internacionalização de rtl .
• Form e ConfigProvider suportam a configuração size incluindo o tamanho do componente.
• A tipografia adiciona o atributo suffix .
• O progresso adiciona steps subcomponente.
• TextArea suporta onResize .
• A grade usa o layout flex .
• ......

Você pode clicar aqui para ver o log de atualização completo.

Como fazer o upgrade

Para tornar a atualização o mais fácil possível, mantemos a compatibilidade máxima. Mas ainda existem algumas mudanças importantes que precisam de atenção. Você pode primeiro tentar migrar usando a ferramenta codemod fornecida por nós e migrar manualmente algumas partes que não podem ser migradas. Consulte o documento para atualização.

Sobre tudo

O nascimento do Ant Design 4.0 é inseparável das contribuições e apoio dos voluntários da comunidade. Obrigado a @saeedrahimi pela internacionalização de rtl , @shaodahong Contribuições para Pacotes de Compatibilidade e todos os envolvidos em ajudar no desenvolvimento. É a sua contribuição para o código aberto que torna o Ant Design ainda melhor!

A versão oficial do Ant Design 4.0 está aqui!

introdução

Lançamos a versão 4.0 rc por ocasião da SEE Conf. Depois de mais de um mês de coleta e ajustes de feedback, finalmente anunciamos a versão oficial 4.0! Obrigado a todos que forneceram feedback, sugestões e contribuições durante este período. Vamos combinar as atualizações já envolvidas na versão rc e algumas novas adições importantes para listar aqui. O documento completo atualizado pode ser clicado aqui . endereço do documento v4: https://ant.design

Deve-se observar que a versão v3 foi incorporada à filial 3.x-stable em dezembro de 2019 e entrou no estado de manutenção. Ainda manteremos a versão v3 por seis meses. O prazo de manutenção é maio de 2020.

Atualização de especificação de design

Ajustamos o filé básico de 4px para 2px . Os produtos intermediários e finais consideram a eficiência como a primeira prioridade, e o estilo de canto arredondado é um detalhe importante na IU. Cantos arredondados menores reduzem visualmente os detalhes da interface e melhoram a eficiência da leitura de informações. Além disso, ajustamos a sombra para torná-la mais alinhada com a sombra real e, ao mesmo tempo, refletir melhor o nível de informação.

Tema escuro

Atualizamos o sistema de cores com base na versão v3 e a v4 fornece um tema escuro. Você pode clicar na função de mudança de tema na página para visualizar o efeito do tema escuro:

Componentes sem borda

Nos negócios, descobrimos que alguns cenários terão componentes de seleção leves. Portanto, fornecemos um novo estilo sem borda que permite aos desenvolvedores incorporar esses componentes com mais facilidade, sem a necessidade de sobrescrever o estilo.

Ajuste de compatibilidade

Ant Design 3.0 fez muitos esforços para ser compatível com a versão antiga do IE. No entanto, de acordo com estatísticas da indústria, a participação global e doméstica do navegador IE9 / 10 está diminuindo com a atualização do sistema Windows. Estamos na versão 4.0 e paramos de oferecer suporte ao IE 9/10 (mas ainda ofereceremos suporte ao IE 11). Portanto, alguns componentes de baixo desempenho no passado também obterão melhorias de desempenho com os novos recursos de css.

Ao mesmo tempo, também atualizamos a versão mínima do React da qual a v4 depende para o React 16.9. Isso significa que a versão v4 fornecerá mais ganchos para simplificar seu código.

Além disso, também removemos algumas APIs obsoletas que eram avisadas na versão v3. Recomendamos fortemente que você atualize seu projeto atual para a última versão da v3 e atualize a API obsoleta com base nas informações de aviso.

Tamanho menor

Em [email protected] , introduzimos o ícone svg ( por que usar o ícone svg? ). A API de ícone que usa nomenclatura de string não pode ser carregada sob demanda, então o arquivo de ícone svg é totalmente introduzido, o que aumenta muito o tamanho do produto embalado. No 4.0, ajustamos a API de uso do ícone para suportar a agitação da árvore e reduzir o tamanho do pacote padrão antd em aproximadamente 150 KB (Gzip).

A versão antiga do uso do ícone ficará obsoleta:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Na versão 4.0, um método de introdução sob demanda será adotado:

import { Button } from 'antd';

// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

Além disso, também simplificamos as dependências relacionadas para reduzir o tamanho do pacote (Gzip):

Refazer componente

Refazer formulário

O formulário é um componente usado com frequência e sua API é ligeiramente redundante. O usuário precisa obter a instância do formulário por meio do método HOC de Form.create e usar form.getFieldDecorator para vincular os dados ao componente. Além disso, todo o formulário será renderizado novamente sempre que os dados forem alterados, o que torna o desempenho preocupante no formulário de big data. Na versão v4, o Form terá sua própria instância de formulário e você pode realizar vinculação de dados diretamente por meio da propriedade name de Form.Item para simplificar seu código:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

Descobrimos que, na maioria dos cenários, os desenvolvedores só prestam atenção ao valor do envio do formulário. Portanto, fornecemos onFinish , que só será acionado após a validação do formulário, e validateFields não

Além disso, o Form fornece o método de ganchos Form.useForm permitindo que você controle o exemplo de formulário:

const [form] = Form.useForm();

React.useEffect(() => {
    form.setFieldValues({ ... });
});

<Form form={form} />

Ao mesmo tempo, fornecemos o componente Form.List, para que você possa controlar facilmente os campos da lista:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Mesa refazer

Como aprimoramos os requisitos mínimos de compatibilidade, mudamos para usar o estilo sticky para implementar colunas fixas, o que reduz muito o consumo de desempenho quando o formulário tem colunas fixas. Para o IE 11 que não suporta sticky , faremos o downgrade dele.

Ao mesmo tempo, fornecemos uma nova API summary para obter o efeito da linha de resumo:

Para o classificador, a função de classificação em várias colunas é fornecida:

Além disso, ajustamos a lógica subjacente e agora fixedColumn , expandable , scroll podem ser misturados. A API body é fornecida para a realização do conteúdo da tabela personalizada, para que você possa obter efeitos como rolagem virtual.

Novo DatePicker, TimePicker e Calendário

Reescrevemos o componente de data como um todo, então o dissociamos de moment . Você pode gerar o componente Selecionador da biblioteca de data personalizada por meio do método generate que fornecemos. Para manter a compatibilidade, o componente Seletor padrão ainda usa moment como biblioteca de datas. Consulte aqui a biblioteca de datas personalizadas.

Além disso, fornecemos um conjunto completo de seletores de hora, data, semana, mês e ano e seletores de intervalo correspondentes. Você pode usar a propriedade picker para defini-lo, não precisa mais usar o método controlado de mode para implementar um seletor especial:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

No seletor de intervalo, também otimizamos a interação. Agora você pode selecionar a hora de início ou de término individualmente, e a experiência de inserir a data manualmente é perfeitamente otimizada.

Notificação / Modal fornece ganchos

Na versão anterior, você pode encontrar o problema de que os métodos de chamada Modal.xxx e Notification.xxx não podem obter o Contexto. Isso porque criaremos adicionalmente uma instância do React por meio de ReactDOM.render para esses açúcares sintáticos, o que também leva ao problema de perda de contexto. Na nova versão, fornecemos o método hooks para que você possa injetar nós no lugar onde você precisa obter o contexto:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Pergaminho virtual

Na v4, modificamos Tree, TreeSelect e Select. Por padrão, a tecnologia de rolagem virtual é usada para otimização de desempenho para transportar a renderização de opção de grande volume de dados.

Demonstração viva

Além disso, a interação e acessibilidade do teclado também foram otimizadas.

Mais novas funções / recursos / peças de otimização

• O ConfigProvider fornece a configuração direction para suportar a internacionalização de rtl .
• Form e ConfigProvider suportam size definir o tamanho do componente incluído.
• A tipografia adiciona suffix atributos.
• O progresso adiciona steps componentes filhos.
• TextArea suporta onResize .
• A grade usa o layout flex .
• ...

Você pode clicar aqui para ver o log de atualização completo.

Como fazer o upgrade

Para simplificar ao máximo a atualização, mantemos a compatibilidade máxima. Mas ainda existem algumas mudanças importantes que precisam de atenção. Você pode primeiro tentar usar a ferramenta codemod que fornecemos para migrar e migrar manualmente parte do conteúdo que não pode ser migrado. Consulte este documento para atualização.

o de cima

O nascimento do Ant Design 4.0 é inseparável da contribuição e apoio de voluntários da comunidade. Obrigado a @saeedrahimi por realizar a função de internacionalização de rtl , @shaodahong pela contribuição do pacote compatível e a todos que participaram do desenvolvimento. É a sua contribuição para o código aberto que torna o Ant Design ainda melhor!