@b-cedric/react-common-bootstrap v2.0.14

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