refactor all radio group logic (breaking changes)

#229 (closed)

To check

• Explain what has changed in the changelog

Résumé

• La prop checked est désormais un state => breaking change qui a engendré beaucoup de changements
• Gestion des radios qui sont disabled + checked en même temps
• Adaptation des radio dans la grid qui sont maintenant en natif (voir grid-radio.tsx pour le composant fonctionnel et grid.scss pour le style)
• Refacto fortement inspiré de Ionic

Nouveau modèle de données

Plus d'infos

Couleurs
#eeeeee code dans radio.tsx
#ccffcc code dans radio-group.tsx

Initialisation / onSlotChange

flowchart TB
    A[componentDidLoad / onSlotChange]
    A --> B["Watch('value')"]
    subgraph _
    B --> C["updateRadioTabIndex"]
    C --> D["updateAllRadioState"]
    end
    D --> E["updateAllRadioModeAndName()"]
    
    classDef radio fill:##0fd6cc,stroke:#245c8a;
    classDef radiogroup fill:#ccffcc,stroke:#008800;
    class A,B,C,D,E radiogroup

1. Appelle une première fois le Watch value du radio-group
   • Met à jour les tabindex (via la méthode setTabindex des radios)
   • Met à jour les statuts checked (via la méthode updateState des radios)
2. Met à jour mode et name pour chaque enfant

👉 Aucun n'évènement n'est émis dans ce cas là

Click sur un radio

flowchart TB
    A[Click sur radio]
    A --> B["onChange"]
    B --> C["Radio désactivée ou déjà cochée ?"]
    C -- oui --> C1["∅"]
    C -- non --> C2["checked = true"]
    C2 --> C3["emitRadioChangeEvent"]
    C3 --> D["@Listen('wcsRadioClick')"]
    D --> E["update this.value"]

    E --> Z1["Watch('value')"]
    subgraph _
    Z1 --> Z2["updateRadioTabIndex"]
    Z2 --> Z3["updateAllRadioState"]
    end
    
    Z3 --> F["emitWcsChange"]
    
    classDef radio fill:##0fd6cc,stroke:#245c8a;
    classDef radiogroup fill:#ccffcc,stroke:#008800;
    class A,B,C,C1,C2,C3 radio
    class D,E,F,Z1,Z2,Z3 radiogroup

1. Trigger le onChange du radio
2. Si désactivé ou déjà checké, rien ne se passe
3. Sinon, on le check et on émet un wcsRadioClick qui remonte au radio-group
4. Le radio-group catch l'évènement, met à jour this.value (donc repassage dans le watch) et envoie un évènement wcsChange

👉 Évènements wcsRadioClick et wcsChange émis

Clavier

flowchart TB
    A[Keydown]
    A --> B["radioToSelect.focus()"]
    B --> C["emitWcsChange"]
    C --> D["update this.value"]

    D --> Z1["Watch('value')"]
    subgraph _
    Z1 --> Z2["updateRadioTabIndex"]
    Z2 --> Z3["updateAllRadioState"]
    end
    
    Z3 --> F["emitWcsChange"]
    
    classDef radio fill:##0fd6cc,stroke:#245c8a;
    classDef radiogroup fill:#ccffcc,stroke:#008800;
    class A,B,C,D,Z1,Z2,Z3,F radiogroup

1. Si espace ou entrée et non checked => check la radio (dans radio.tsx)
2. Si haut / bas / tab => gestion dans radio-group.tsx
   • Focus le nouveau radio
   • Si la value a changé, on emit un évènement
   • On met à jour this.value => repassage dans le watch du radio-group

👉 Évènement wcsChange émis

Value qui change programmatiquement

flowchart TB
A[value changé programmatiquement] --> Z1["Watch('value')"]
    subgraph _
    Z1 --> Z2["updateRadioTabIndex"]
    Z2 --> Z3["updateAllRadioState"]
    end
    
    classDef radio fill:##0fd6cc,stroke:#245c8a;
    classDef radiogroup fill:#ccffcc,stroke:#008800;
    class A,Z1,Z2,Z3 radiogroup

1. On passe dans le watch value du radio-group
   • Met à jour les tabindex (via la méthode setTabindex des radios)
   • Met à jour les statuts checked (via la méthode updateState des radios)

👉 Aucun évènement n'est émis dans ce cas là