Champ select

Zone de saisie avec liste déroulante.

Props

Obligatoires

Nom	Type	Commentaire
name	Chaine	Le nom du champ, en snakeCase si possible

Optionnels

Nom	Type	Remarque	Commentaire
id	Chaine		Identifiant
label	Chaine		Le libellé du champ, sans html
value	Chaine		La valeur
disabled	Booléen	Faux	Pour désactiver le champ
required	Booléen	Faux	Pour rendre le champ obligatoire
labelTop	Booléen	Vrai	Le libellé s'affiche au dessus du champ
size	Taille		Pour changer la taille par défaut
labelSize	Taille	6	Taille du libellé
inputSize	Taille	30	Taille du champ de saisie
error	Element		Gestion du champ en erreur
warning	Element		Gestion du champ en anomalie
options	Element	[]	Liste des options de la liste déroulante
addEmpty	Booléen	Faux	Ajout d'une ligne par défaut
defaultLabel	Chaine	'Aucune sélection'	Libellé de la valeur par défaut
defaultValue	Chaine	''	Valeur par défaut
inline	Booléen	Faux
datas	Objet	[]

Fonctions appelées

Nom	Type	Remarque	Commentaire
onChange	Fonction		onChange(event)

Spécificités

• Si 'id' non renseigné, l'identifiant sera 'name'

• Si 'error' ou 'warning' sont renseignés, le champ sera invalide et l'élement erreur anomalie sera ajouté après (le plus souvent celà sera un message d'erreur en dessous)
• datas est utilisé lors d'un changement de ligne ou quand la valeur n'est pas trouvée dans les options

Exemple

<InputSelect
  label="Langue"
  name="lang.id"
  labelTop={true}
  value={values.lang ? values.lang.id : null}
  onChange={handleChange}
  options={langAsOptions(props.languages)}
/>

To Do

• Ajouter et gérer l'attribut className ?

• Ajouter et gérer l'attribut help ?

• Gérer l'id comme l'InputText avec un nombre aléatoire ajouter à 'name'

• Renommer addEmpty en addDefault

• Supprimer Attribut inline ? Pas d'intérêt avec labelTop et pas juste inline -> inputSize=36 ??