v11.22

Remarque importante : attention lors de la mise à jour à vos peerDependencies, on n'est plus sur la dernière version de React ni d'i18next, il faudra bien avoir un 18 en face des deux packages react et react-dom et un 23 en face d'i18next. Une version (majeure !) ultérieure de Focus prendra en compte ces montées de versions.

hasChanged

Vous pouvez désormais utiliser node.form.hasChanged ou field.hasChanged dans un noeud de formulaire, pour savoir si une (ou plusieurs) valeur(s) a (ont) été modifiée(s) par rapport à leur(s) valeur(s) correspondantes dans le noeud source.

Remarque : un champ ajouté sera toujours identifié avec hasChanged = false puisqu'il n'existe pas dans le noeud source

router.confirmation

De nouvelles APIs ont été ajoutées sur le routeur afin de pouvoir entrer dans un mode de "confirmation", qui permet de bloquer toute navigation avant que l'utilisateur confirme son intention.

Si la méthode router.confirmation.toggle() permet d'activer/désactiver le mode manuellement, il peut se brancher directement à useFormActions via la méthode .withConfirmation(router) dans son configurateur. Cela aura pour effet d'activer le mode de confirmation si le formulaire est en édition et qu'au moins un champ a été modifié (via node.form.hasChanged), et de le désactiver sinon.

Vous pouvez interagir avec ce mode via :

• router.confirmation.active => Pour savoir si le mode est actif ou non
• router.confirmation.pending => Pour savoir si une confirmation est attendue de la part de l'utilisateur : vous pouvez l'utiliser pour afficher un Dialog par exemple
• router.confirmation.commit(save?: boolean) => Pour confirmer la navigation en attente. Si vous l'appelez avec true, alors la sauvegarde du formulaire sera effectuée avec la confirmation (le service de sauvegarde est passé au routeur via withConfirmation(router)
• router.confirmation.cancel() => Pour annuler la navigation en attente.

Vous pouvez utiliser ces APIs pour créer votre propre Dialog pour gérer la fonctionnalité. Le starter kit en implémente un exemple.

De plus, la documentation est évidemment à jour 🙂.

Remarques

• Si vous déclenchez une navigation en dehors de l'application, alors vous aurez le popup natif du navigateur (au lieu de votre Dialog), qui n'est pas personnalisable. Il ne permettra en particulier pas de déclencher la sauvegarde.
• Vous pouvez tout à fait avoir plusieurs formulaires sur la page qui sont branchés au mode de confirmation. Il sera actif dès lors qu'au moins un formulaire est en édition, et la confirmation avec sauvegarde appellera tous les services de sauvegarde des formulaires en édition.
• Le routeur a été partiellement réimplémenté, en internalisant la dépendance à yester (une librairie développé par un mec dans son coin il y a 8 ans), qui n'était une légère surcouche à history, la librairie de référence pour gérer la navigation en JS.