@b-cedric/react-common-bootstrap v2.0.67
Librairie de composants React
Compilation du style : npm run build:style
Démarrage de storybook: npm run storybook
=> démarrage sur localhost:6006
Publication du package sur NPM (nécessite npm login
): npm publish:npm
Form
CustomForm
props : |nom|type|defaut| |---|---|---| |onSubmit|fonction|() => Promise| |submitLabel|string|'Valider| |cancelLabel|string|'Annuler| |className|string|''| |disabled|boolean|false| |isLoading|boolean|false| |onCancel|fonction|null| |errorMessage|string|null| |isFormValid|boolean|false| |formFields|object|{}| |setFormFields|function|() => {}|
exemple :
<CustomForm
onSubmit={submit}
onCancel={cancel}
isValid={isFormValid}
errorMessage={errorMessage}
formFields={formFields}
setFormFields={setFormFields}
>
<CustomFormField type="text" fieldName="libelle" />
</CustomForm>
CustomFormField
props : |nom|type|defaut| |---|---|---| |label|string / template|null| |fieldName|string|''| |value||null| |onChange|fonction|() => {}| |type|string|'text'| |options|array|[]| |className|string|''| |name|string|''| |disabled|bool|false| |isValid|bool|true| |feedback|string|''| |emptySelectOption|bool|false| |prefix|string / fonction|null| |placeholder|string|''|
exemple :
<CustomFormField
value={name}
onChange={(e) => setName(e.target.value)}
label="Nom du modèle"
isValid={name != ''}
/>
<CustomFormField
fieldName="name"
label="Nom du modèle"
isValid={formFields.name != ''}
/>
Info-bulle
props : |nom|type|defaut| |---|---|---| |info|string|''|
exemple :
<InfoBulle info={info} />
ListFormControl
props : |nom|type|defaut| |---|---|---| |label|string|''| |list|array|[]| |setList|fonction|() => {}| |titleActions|array|[]| |fields|array|[]| |titleClass|string|''| |canSwitch|boolean|false|
exemple:
<ListFormControl
label="Composantes essentielles"
list={composantes}
setList={setComposantes}
titleActions={[
{
label: 'Ajouter une composante',
onClick: () => setComposantes([...composantes, { libelle: '' }])
}
]}
fields={[{ propName: 'libelle', label: 'Libellé', required: true }]}
/>
Steps
Ce composant permet d'afficher les étapes d'avancement du remplissage d'un formulaire sur plusieurs pages.
props : |nom|type|defaut| |---|---|---| |currentStep|number| 0| |steps |array| []| |pendingIcon|string|warning|
<Steps currentStep={1} steps={['step 1', 'step 2']} />
Subtitle
props : |nom|type|defaut| |---|---|---| |actions |array| []| |className |string| ''|
exemple:
<SubTitle
actions={[
{
label: 'Ajouter un niveau',
onClick: () => ...
}
]}
>
Niveaux de développement
</SubTitle>
useFormField
paramètres:
- valeur par défaut
- callback de validité du champ de formulaire : val => bool
retourne:
- valeur
- set de la valeur
- is valeur valide
exemple:
const [composantes, setComposantes, isComposantesValid] = useFormField(
[{ libelle: '' }],
(val) => val.length > 0 && val.every((obj) => obj.libelle != '')
)
Modal
Confirm
ConfirmContext, initConfirm et Confirm
ConfirmContext permet l'utilisation du hook useConfirm dans un composant sous jacent. la fonction initConfirm renvoie une valeur par défaut à passer au ConfirmContext. Il faut que dans ce context, le composant Confirm soit instancié.
const Composant = () => {
const contextValue = initConfirm()
return (
<ConfirmContext.Provider value={contextValue}>
<Confirm />
...
<ConfirmContext.Provider/>
)
}
useConfirm
Retourne une fonction :
* paramètres:
* Message de confirmation
* Fonction éxecutée à la confirmation
L'exécution de cette fonction permet l'affichage d'une fenêtre de confirmation
exemple:
const confirm = useConfirm()
confirm('Veuillez confirmer la suppression', () => remove())
CustomModal
props : |nom|type|defaut| |---|---|---| |show|bool|false| |title|string|''| |content| HTML |''| |onValidate|fonction|() => {}| |setShow|fonction|() => {}| |validateLabel|string|'Enregistrer'| |cancelLabel|string|'Annuler'| |validateDisabled|bool|false| |hideCancel|bool|false| |width|string|''|
exemple:
<CustomModal
title={'Ajouter un partenaire'}
content={
<PartenaireForm
show={show}
setShow={setShow}
formfields={formfields}
setFormFields={setFormFields}
/>
}
show={show}
setShow={setShow}
onValidate={submit}
/>
Hooks
useSetField
Lorsque une liste de champs est définie sous forme d'un objet :
const [fields, setFields] = useState({
propA: '',
propB: ''
})
useSetField fourni une fonction qui permet de changer la valeur d'une propriété de l'objet 'fields' :
;(propName, value) => null
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago