Ant Design 4.0 est sorti!

introduction

Nous avons publié la version 4.0 rc sur SEE Conf. Après plus d'un mois de collecte et d'ajustement des commentaires, il est temps de sortir 4.0! Merci à tous ceux qui ont fourni des commentaires, des suggestions et des contributions pendant cette période. Nous allons combiner les mises à jour déjà impliquées dans la version rc et certaines mises à jour récemment ici. La documentation mise à jour complète peut être trouvée ici . Adresse du document v4: https://ant.design

Il convient de noter que la version v3 a fusionné dans la branche 3.x-stable en décembre 2019 et est entrée en maintenance. Nous continuerons d'effectuer des travaux de maintenance semestriels pour la version v3. La date limite de maintenance est mai 2020.

Mise à niveau des spécifications de conception

Nous avons ajusté les coins arrondis de base de 4px à 2px . Le filet lui-même est un détail, et dans les scènes du milieu et de l'arrière-plan, nous prenons l'efficacité comme première priorité, nous réduisons donc les détails visuels de l'interface et améliorons l'efficacité de la lecture des informations de l'interface. De plus, nous avons ajusté les ombres pour les rendre plus cohérentes avec les ombres réelles, tout en mettant également l'accent sur la hiérarchie des informations.

Thème sombre

Nous avons mis à niveau le système de couleurs basé sur la version v3, et la v4 fournit un thème sombre. Vous pouvez cliquer sur la fonction de changement de thème sur la page pour voir l'effet de thème sombre:

Composant sans bordure

Dans le travail quotidien, nous avons constaté qu'il existe des composants de sélection légers dans certains scénarios. Nous proposons donc un nouveau style sans bordure qui permet aux développeurs d'intégrer plus facilement ces composants sans remplacer le style.

Ajustement de compatibilité

Ant Design 3.0 a fait beaucoup d'efforts pour être compatible avec les anciennes versions d'IE. Cependant, selon les statistiques de l'industrie, les navigateurs IE9 / 10 mondiaux et nationaux diminuent avec les mises à jour du système Windows. Nous avons arrêté de prendre en charge IE 9/10 à 4.0 (mais continuerons de prendre en charge IE 11). Par conséquent, certains composants à faible performance du passé gagneront également en performances avec les nouvelles fonctionnalités css.

Dans le même temps, nous avons également mis à niveau la version minimale de React dont dépend la v4 vers React 16.9. Cela signifie que la version v4 fournira plus de hooks pour simplifier votre code.

De plus, nous avons supprimé certaines API obsolètes qui avaient été signalées dans la version v3. Nous vous recommandons vivement de mettre à niveau votre projet actuel vers la dernière version de la v3 et de mettre à jour l'API obsolète en fonction du message d'avertissement.

Petite taille

Dans antd @ 3.9.0 , nous avons introduit l'icône svg ( Pourquoi utiliser l'icône svg? ). L'API d'icône utilisant le nom de chaîne ne peut pas être chargée à la demande, le fichier d'icône svg est donc complètement introduit, ce qui augmente considérablement la taille du produit emballé. Dans la version 4.0, nous avons ajusté l'API d'utilisation des icônes pour prendre en charge le tremblement de l'arbre, réduisant la taille par défaut du package d'Antant d'environ 150 Ko (gzippé).

L'utilisation de l'ancienne icône sera supprimée:

import { Icon, Button } from 'antd';

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

En 4.0, il sera introduit à la demande:

  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';

De plus, nous avons également supprimé certaines dépendances associées pour réduire la taille du bundle gzippé:

Réécriture des composants

Réécriture de formulaire

Form, en tant que composant haute fréquence, a une API légèrement redondante. L'utilisateur doit obtenir l'instance de formulaire via le HOC de Form.create et utiliser form.getFieldDecorator pour effectuer la liaison de données sur le composant. De plus, l'ensemble du formulaire est rendu à nouveau à chaque fois que les données changent, ce qui rend les performances préoccupantes dans les formulaires Big Data. Dans la version v4, Form sera fourni avec une instance de formulaire. Vous pouvez directement lier des données via la propriété name de Form.Item, simplifiant ainsi votre code:

- 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>

Nous avons constaté que dans la plupart des scénarios, le développeur n'est en fait concerné que par les valeurs que le formulaire soumet avec succès. Nous fournissons donc onFinish , qui ne se déclenchera qu'après la validation du formulaire, et validateFields ne sont plus nécessaires.

De plus, Form fournit la méthode hooks Form.useForm pour vous permettre de contrôler l'exemple de formulaire:

const [form] = Form.useForm();

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

<Form form={form} />

En même temps, nous fournissons le composant Form.List, afin que vous puissiez facilement contrôler les champs de la liste:

<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>

Réécriture de table

Étant donné que nous avons ajusté les exigences minimales de compatibilité, nous sommes passés à l'implémentation de colonnes fixes en utilisant le style sticky , réduisant ainsi considérablement la consommation de performances lorsque le formulaire a des colonnes fixes. Pour IE 11 qui ne prend pas en charge sticky , nous prenons le processus de rétrogradation.

En même temps, nous fournissons une nouvelle API summary pour obtenir l'effet de la ligne de résumé:

Le trieur fournit une fonction de tri multi-colonnes:

De plus, nous avons ajusté la logique sous-jacente afin que fixedColumn , expandable et scroll puissent maintenant être mélangés. Fournit une body API pour personnaliser les implémentations de contenu de table, à partir de laquelle vous pouvez implémenter des effets tels que le défilement virtuel.

Nouveau DatePicker, TimePicker et calendrier

Nous avons réécrit le composant de date dans son ensemble pour le découpler de moment . Vous pouvez générer des composants Picker pour des bibliothèques de dates personnalisées en utilisant la méthode generate nous fournissons. Pour maintenir la compatibilité, le composant Picker par défaut utilise toujours moment comme bibliothèque de dates. Veuillez consulter ici pour la bibliothèque de dates personnalisée.

En outre, nous fournissons un ensemble complet de sélecteurs d'heure, de date, de semaine, de mois, d'année et de sélecteurs de plage correspondants. Vous pouvez le définir via la propriété picker, au lieu d'implémenter le sélecteur spécial via la méthode contrôlée du mode:

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

Pour le sélecteur de gamme, nous avons également optimisé l'interaction. Vous pouvez maintenant sélectionner l'heure de début ou de fin individuellement, et cela optimise parfaitement l'expérience de saisie manuelle de la date.

Crochets de notification / support modal

Dans le passé, vous avez peut-être rencontré le problème suivant Notification.xxx les méthodes d'appel Modal.xxx et Notification.xxx ne peuvent pas obtenir le contexte. En effet, nous allons également créer une instance React via ReactDOM.render pour ces sucres syntaxiques, ce qui pose également le problème de la perte de contexte. Dans la nouvelle version, nous fournissons la méthode hooks, qui vous permet d'injecter des nœuds où vous avez besoin d'obtenir le contexte:

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>
);

Défilement virtuel

Dans la v4, nous avons mis à jour Tree, TreeSelect et Select. Par défaut, ils utilisent la technologie de défilement virtuel pour optimiser leurs performances afin de transporter une grande quantité de rendu d'options.

Démo vivante

De plus, l'interaction et l'accessibilité du clavier sont optimisées.

Plus de nouvelles fonctionnalités / fonctionnalités / optimisations

• ConfigProvider fournit une configuration direction pour prendre en charge l'internationalisation des langues rtl .
• Form et ConfigProvider prennent en charge le paramètre size , y compris la taille du composant.
• La typographie ajoute l'attribut suffix .
• Progress ajoute steps sous-composant
• TextArea prend en charge onResize .
• Grid utilise la mise en page flex .
• ......

Vous pouvez cliquer ici pour voir le journal de mise à jour complet.

Comment mettre à jour

Pour rendre la mise à niveau aussi simple que possible, nous maintenons une compatibilité maximale. Mais il y a encore des changements de rupture qui nécessitent une attention. Vous pouvez d'abord essayer de migrer à l'aide de l'outil codemod fourni par nos soins et migrer manuellement certaines parties qui ne peuvent pas être migrées. Veuillez consulter le document pour la mise à niveau.

Par dessus tout

La naissance d'Ant Design 4.0 est indissociable des contributions et du soutien des bénévoles de la communauté. Merci à @saeedrahimi pour l'internationalisation de rtl , @shaodahong Contributions aux packs de compatibilité, et à toutes les personnes impliquées dans l'aide au développement. C'est votre contribution à l'open source qui rend Ant Design encore meilleur!

La version officielle d'Ant Design 4.0 est arrivée!

introduction

Nous avons sorti la version 4.0 rc à l'occasion de SEE Conf. Après plus d'un mois de collecte et d'ajustement des commentaires, nous avons enfin inauguré la version officielle de 4.0! Merci à tous ceux qui ont fait part de leurs commentaires, suggestions et contributions pendant cette période. Nous combinerons les mises à jour déjà impliquées dans la version rc et quelques nouveaux ajouts importants à lister ici. Le document complet mis à jour peut être cliqué ici . Adresse du document v4: https://ant.design

Il convient de noter que la version v3 a fusionné dans la branche 3.x-stable et est entrée en état de maintenance en décembre 2019. Nous continuerons d'effectuer des travaux de maintenance semestriels pour la version v3. La date limite de maintenance est mai 2020.

Mise à niveau des spécifications de conception

Nous avons ajusté le filet de base de 4px à 2px . Les produits du milieu et du back-end font de l'efficacité la première priorité, et le style des coins arrondis est un détail important de l'interface utilisateur. Des coins arrondis plus petits réduisent visuellement les détails de l'interface et améliorent l'efficacité de la lecture des informations. De plus, nous avons ajusté l'ombre pour la rendre plus conforme à l'ombre réelle, et en même temps mieux refléter le niveau d'information.

Thème sombre

Nous avons mis à niveau le système de couleurs basé sur la version v3, et la v4 fournit un thème sombre. Vous pouvez cliquer sur la fonction de changement de thème sur la page pour afficher l'effet de thème sombre:

Composants sans bordure

En entreprise, nous avons constaté que certains scénarios comporteront des composants de sélection légers. Par conséquent, nous proposons un nouveau style sans bordure qui permet aux développeurs d'intégrer ces composants plus facilement sans styles de remplacement supplémentaires.

Ajustement de compatibilité

Ant Design 3.0 a fait beaucoup d'efforts pour être compatible avec l'ancienne version d'IE. Cependant, selon les statistiques de l'industrie, la part mondiale et nationale du navigateur IE9 / 10 diminue avec la mise à jour du système Windows. Nous sommes dans la version 4.0 et cessons de prendre en charge IE 9/10 (mais continuerons de prendre en charge IE 11). Par conséquent, certains composants peu performants du passé bénéficieront également d'améliorations de performances avec les nouvelles fonctionnalités css.

Dans le même temps, nous avons également mis à niveau la version minimale de React dont dépend la v4 vers React 16.9. Cela signifie que la version v4 fournira plus de hooks pour simplifier votre code.

De plus, nous avons également supprimé certaines API obsolètes qui avaient été signalées dans la version v3. Nous vous recommandons vivement de mettre à niveau votre projet actuel vers la dernière version de la v3 et de mettre à jour l'API obsolète en fonction des informations d'avertissement.

Petite taille

Dans [email protected] , nous avons introduit l'icône svg ( pourquoi utiliser l'icône svg? ). L'API d'icône qui utilise la dénomination de chaîne ne peut pas être chargée à la demande, le fichier d'icône svg est donc entièrement introduit, ce qui augmente considérablement la taille du produit emballé. Dans la version 4.0, nous avons ajusté l'API d'utilisation des icônes pour prendre en charge le tremblement de l'arbre et réduire la taille par défaut du package antd d'environ 150 Ko (gzippé).

L'ancienne version de l'utilisation de Icon sera obsolète:

import { Icon, Button } from 'antd';

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

Dans la version 4.0, une méthode d'introduction à la demande sera adoptée:

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';

En outre, nous avons également rationalisé les dépendances associées pour réduire la taille de l'emballage (gzippé):

Refaire le composant

Refaire le formulaire

Le formulaire est un composant fréquemment utilisé et son API est légèrement redondante. L'utilisateur doit obtenir l'instance de formulaire via la méthode HOC de Form.create et utiliser form.getFieldDecorator pour lier les données au composant. De plus, le formulaire entier sera rendu à nouveau à chaque fois que les données changent, ce qui rend les performances inquiétantes dans le formulaire Big Data. Dans la version v4, Form aura sa propre instance de formulaire. Vous pouvez directement lier les données via la propriété name de Form.Item pour simplifier votre code:

- 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>

Nous avons constaté que dans la plupart des scénarios, les développeurs ne prêtent attention qu'à la valeur de la soumission du formulaire. Par conséquent, nous fournissons onFinish , qui ne sera déclenché qu'après la validation du formulaire, et validateFields n'est plus nécessaire.

De plus, Form fournit la méthode hooks Form.useForm vous permettant de contrôler l'exemple de formulaire:

const [form] = Form.useForm();

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

<Form form={form} />

En même temps, nous fournissons le composant Form.List, afin que vous puissiez facilement contrôler les champs de la liste:

<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>

Refaire la table

Depuis que nous avons amélioré les exigences minimales de compatibilité, nous avons changé pour utiliser le style sticky pour implémenter des colonnes fixes, ce qui réduit considérablement la consommation de performances lorsque le formulaire a des colonnes fixes. Pour IE 11 qui ne prend pas en charge sticky , nous le déclasserons.

En même temps, nous fournissons une nouvelle API summary pour obtenir l'effet de la ligne de résumé:

Le trieur fournit la fonction de tri multi-colonnes:

De plus, nous avons ajusté la logique sous-jacente, et maintenant fixedColumn , expandable , scroll peuvent être mélangés. L'API body est fournie pour l'implémentation du contenu de table personnalisé, afin que vous puissiez obtenir des effets tels que le défilement virtuel.

Nouveau DatePicker, TimePicker et calendrier

Nous avons réécrit le composant de date dans son ensemble, nous l'avons donc découplé de moment . Vous pouvez générer le composant Picker de la bibliothèque de dates personnalisée via la méthode generate nous fournissons. Afin de maintenir la compatibilité, le composant Picker par défaut utilise toujours moment comme bibliothèque de dates. Veuillez consulter ici pour la bibliothèque de dates personnalisée.

En outre, nous fournissons un ensemble complet de sélecteurs d'heure, de date, de semaine, de mois, d'année et de sélecteurs de plage correspondants. Vous pouvez utiliser la propriété picker pour le définir, vous n'avez plus besoin d'utiliser la méthode contrôlée de mode pour implémenter un sélecteur spécial:

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

Sur le sélecteur de gamme, nous avons également optimisé l'interaction. Vous pouvez maintenant sélectionner l'heure de début ou de fin individuellement, et l'expérience de la saisie manuelle de la date est parfaitement optimisée.

Notification / Modal fournit des crochets

Dans la version précédente, vous pouvez rencontrer le problème que les méthodes d'appel Modal.xxx et Notification.xxx ne peuvent pas obtenir le contexte. En effet, nous allons également créer une instance React via ReactDOM.render pour ces sucres syntaxiques, ce qui conduit également au problème de la perte de contexte. Dans la nouvelle version, nous fournissons la méthode hooks afin que vous puissiez injecter des nœuds à l'endroit où vous devez obtenir le contexte:

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>
);

Défilement virtuel

Dans la version 4, nous avons modifié Tree, TreeSelect et Select. Par défaut, la technologie de défilement virtuel est utilisée pour l'optimisation des performances afin de transporter le rendu d'options de gros volumes de données.

Démo vivante

En outre, l'interaction et l'accessibilité du clavier ont également été optimisées.

Plus de nouvelles fonctions / fonctionnalités / pièces d'optimisation

• ConfigProvider fournit une configuration direction pour prendre en charge l'internationalisation des langues rtl .
• Form et ConfigProvider prennent en charge size définir la taille du composant inclus.
• La typographie ajoute des attributs suffix .
• Progress ajoute des composants enfants steps .
• TextArea prend en charge onResize .
• Grid utilise la disposition flex .
• ...

Vous pouvez cliquer ici pour afficher le journal de mise à jour complet.

Comment mettre à jour

Afin de simplifier au maximum la mise à niveau, nous avons maintenu une compatibilité maximale. Mais il y a encore des changements de rupture qui nécessitent une attention. Vous pouvez d'abord essayer d'utiliser l'outil codemod que nous fournissons pour migrer et migrer manuellement une partie du contenu qui ne peut pas être migré. Veuillez consulter ce document pour la mise

ce qui précède

La naissance d'Ant Design 4.0 est indissociable de la contribution et du soutien des bénévoles de la communauté, merci à @saeedrahimi pour la réalisation de la fonction d'internationalisation de rtl , @shaodahong pour la contribution du package compatible, et à tous ceux qui ont participé au développement. C'est votre contribution à l'open source qui rend Ant Design encore meilleur!