2.0.67 • Published 10 months ago

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

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

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
2.0.67

10 months ago

2.0.28

1 year ago

2.0.29

1 year ago

2.0.37

1 year ago

2.0.38

1 year ago

2.0.35

1 year ago

2.0.36

1 year ago

2.0.33

1 year ago

2.0.34

1 year ago

2.0.31

1 year ago

2.0.32

1 year ago

2.0.30

1 year ago

2.0.39

1 year ago

2.0.48

1 year ago

2.0.49

1 year ago

2.0.46

1 year ago

2.0.47

1 year ago

2.0.44

1 year ago

2.0.42

1 year ago

2.0.43

1 year ago

2.0.40

1 year ago

2.0.41

1 year ago

2.0.59

1 year ago

2.0.57

1 year ago

2.0.58

1 year ago

2.0.55

1 year ago

2.0.56

1 year ago

2.0.53

1 year ago

2.0.54

1 year ago

2.0.51

1 year ago

2.0.52

1 year ago

2.0.50

1 year ago

2.0.66

1 year ago

2.0.64

1 year ago

2.0.65

1 year ago

2.0.62

1 year ago

2.0.63

1 year ago

2.0.60

1 year ago

2.0.61

1 year ago

2.0.26

1 year ago

2.0.27

1 year ago

2.0.24

1 year ago

2.0.25

1 year ago

2.0.23

1 year ago

2.0.16

1 year ago

2.0.19

1 year ago

2.0.17

1 year ago

2.0.18

1 year ago

2.0.22

1 year ago

2.0.20

1 year ago

2.0.21

1 year ago

2.0.15

1 year ago

1.1.13

1 year ago

2.0.13

1 year ago

2.0.14

1 year ago

1.1.12

1 year ago

2.0.12

1 year ago

2.0.9

1 year ago

1.1.11

1 year ago

1.1.10

1 year ago

2.0.11

1 year ago

2.0.10

1 year ago

2.0.5

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.8

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.4

1 year ago

2.0.1

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.0.79

2 years ago

1.1.1

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.0.77

2 years ago

1.0.76

2 years ago

1.0.75

2 years ago

1.0.78

2 years ago

1.0.66

2 years ago

1.0.65

2 years ago

1.0.69

2 years ago

1.0.68

2 years ago

1.0.67

2 years ago

1.0.73

2 years ago

1.0.72

2 years ago

1.0.70

2 years ago

1.0.74

2 years ago

1.0.62

2 years ago

1.0.61

2 years ago

1.0.60

2 years ago

1.0.64

2 years ago

1.0.63

2 years ago

1.0.59

2 years ago

1.0.58

2 years ago

1.0.57

2 years ago

1.0.56

2 years ago

1.0.37

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.40

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.49

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.0.55

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.36

2 years ago

1.0.35

3 years ago

1.0.34

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.19

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago