@alveole/components 2.0.0-alpha.1 → 2.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/generated/version.d.ts +1 -1
- package/dist/generated/version.js +1 -1
- package/dist/ui/Button/Button.d.ts.map +1 -1
- package/dist/ui/Button/Button.js +22 -2
- package/dist/ui/Button/Button.stories.d.ts +12 -0
- package/dist/ui/Button/Button.stories.d.ts.map +1 -1
- package/dist/ui/Button/Button.stories.js +20 -0
- package/dist/ui/Button/Button.stories.sources.d.ts +2 -0
- package/dist/ui/Button/Button.stories.sources.d.ts.map +1 -1
- package/dist/ui/Button/Button.stories.sources.js +3 -0
- package/dist/ui/Button/Button.types.d.ts +4 -0
- package/dist/ui/Button/Button.types.d.ts.map +1 -1
- package/dist/ui/LucideIcon/catalogueLucide.d.ts +117 -0
- package/dist/ui/LucideIcon/catalogueLucide.d.ts.map +1 -1
- package/dist/ui/LucideIcon/vendor/lab.js +1 -1
- package/dist/ui/LucideIcon/vendor/lucide.d.ts +2233 -1722
- package/dist/ui/LucideIcon/vendor/lucide.js +3 -3
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.
|
|
1
|
+
export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.2";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.
|
|
1
|
+
export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.2";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAO/C,cAAc,gBAAgB,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;8BA0EjB,CAAC"}
|
package/dist/ui/Button/Button.js
CHANGED
|
@@ -1,13 +1,33 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { focusRingProps } from '@alveole/theme';
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useRef, useState } from 'react';
|
|
4
4
|
import { Pressable } from 'react-native';
|
|
5
5
|
import { useStyles } from './Button.styles';
|
|
6
6
|
import { etatDuBouton } from './Button.types';
|
|
7
7
|
import { ButtonContent } from './ButtonContent';
|
|
8
8
|
import { styleDuPressable } from './buttonStyling';
|
|
9
9
|
export * from './Button.types';
|
|
10
|
-
export const Button = React.forwardRef(function Button(
|
|
10
|
+
export const Button = React.forwardRef(function Button(propsDeLAppelant, ref) {
|
|
11
|
+
const verrou = useRef(false);
|
|
12
|
+
const [enCours, setEnCours] = useState(false);
|
|
13
|
+
// Un onPress qui rend une promesse (soumission de formulaire) verrouille le bouton jusqu'a sa
|
|
14
|
+
// fin. Le ref ferme la porte des le premier clic, avant que le state n'ait rafraichi le rendu :
|
|
15
|
+
// le second clic d'un double clic arrive sinon pendant que le bouton parait encore libre.
|
|
16
|
+
const onPress = event => {
|
|
17
|
+
if (verrou.current)
|
|
18
|
+
return;
|
|
19
|
+
const resultat = propsDeLAppelant.onPress?.(event);
|
|
20
|
+
if (!(resultat instanceof Promise))
|
|
21
|
+
return;
|
|
22
|
+
verrou.current = true;
|
|
23
|
+
setEnCours(true);
|
|
24
|
+
const liberer = () => {
|
|
25
|
+
verrou.current = false;
|
|
26
|
+
setEnCours(false);
|
|
27
|
+
};
|
|
28
|
+
resultat.then(liberer, liberer);
|
|
29
|
+
};
|
|
30
|
+
const props = { ...propsDeLAppelant, onPress, isLoading: propsDeLAppelant.isLoading || enCours };
|
|
11
31
|
const { type, disabled, isLoading, active = false, expanded = false, ...buttonProps } = props;
|
|
12
32
|
const styles = useStyles();
|
|
13
33
|
const etat = etatDuBouton(props);
|
|
@@ -305,6 +305,18 @@ export declare const States: () => React.JSX.Element;
|
|
|
305
305
|
* attendent le délai par défaut d'une seconde.
|
|
306
306
|
*/
|
|
307
307
|
export declare const Loading: () => React.JSX.Element;
|
|
308
|
+
/**
|
|
309
|
+
* Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :
|
|
310
|
+
* c'est la protection contre la double soumission d'un formulaire. Le verrou est posé dès le
|
|
311
|
+
* premier clic, avant même le rafraîchissement : le second clic d'un double clic est ignoré.
|
|
312
|
+
* Pas besoin de gérer `isLoading` : le bouton charge seul, avec le même `loadingDelay`.
|
|
313
|
+
*
|
|
314
|
+
* Avec react-hook-form, `onPress={handleSubmit(...)}` suffit, `handleSubmit` rendant une promesse.
|
|
315
|
+
* Un `onPress` synchrone n'est pas verrouillé.
|
|
316
|
+
*
|
|
317
|
+
* Double-cliquez sur le bouton : l'envoi de 3 secondes n'est compté qu'une fois.
|
|
318
|
+
*/
|
|
319
|
+
export declare const OnPressAsynchrone: () => React.JSX.Element;
|
|
308
320
|
/** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
|
|
309
321
|
export declare const Icons: () => React.JSX.Element;
|
|
310
322
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS1B,wBAQkB;AAElB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,yBAOpB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,KAAK,yBAMjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM,yBAOlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,OAAO,yBAenB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,yBAc7B,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,KAAK,yBAMjB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yBAK/B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,yBASpB,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,SAAS,yBAAkE,CAAC;AAEzF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Box } from '../../core/Box';
|
|
4
|
+
import { Typography } from '../../core/Typography';
|
|
4
5
|
import { Avatar } from '../Avatar';
|
|
5
6
|
import { Button } from './Button';
|
|
6
7
|
import { useStyles } from './Button.styles';
|
|
@@ -72,6 +73,25 @@ export const Loading = () => {
|
|
|
72
73
|
};
|
|
73
74
|
return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
|
|
74
75
|
};
|
|
76
|
+
/**
|
|
77
|
+
* Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :
|
|
78
|
+
* c'est la protection contre la double soumission d'un formulaire. Le verrou est posé dès le
|
|
79
|
+
* premier clic, avant même le rafraîchissement : le second clic d'un double clic est ignoré.
|
|
80
|
+
* Pas besoin de gérer `isLoading` : le bouton charge seul, avec le même `loadingDelay`.
|
|
81
|
+
*
|
|
82
|
+
* Avec react-hook-form, `onPress={handleSubmit(...)}` suffit, `handleSubmit` rendant une promesse.
|
|
83
|
+
* Un `onPress` synchrone n'est pas verrouillé.
|
|
84
|
+
*
|
|
85
|
+
* Double-cliquez sur le bouton : l'envoi de 3 secondes n'est compté qu'une fois.
|
|
86
|
+
*/
|
|
87
|
+
export const OnPressAsynchrone = () => {
|
|
88
|
+
const [envois, setEnvois] = React.useState(0);
|
|
89
|
+
const envoyer = async () => {
|
|
90
|
+
setEnvois(n => n + 1);
|
|
91
|
+
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
92
|
+
};
|
|
93
|
+
return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
|
|
94
|
+
};
|
|
75
95
|
/** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
|
|
76
96
|
export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Ajouter", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Exporter", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
|
|
77
97
|
/**
|
|
@@ -2,6 +2,7 @@ export declare const Variants: () => string;
|
|
|
2
2
|
export declare const Sizes: () => string;
|
|
3
3
|
export declare const States: () => string;
|
|
4
4
|
export declare const Loading: () => string;
|
|
5
|
+
export declare const OnPressAsynchrone: () => string;
|
|
5
6
|
export declare const Icons: () => string;
|
|
6
7
|
export declare const TertiaireAvecAvatar: () => string;
|
|
7
8
|
export declare const IconOnly: () => string;
|
|
@@ -11,6 +12,7 @@ export declare const storySources: {
|
|
|
11
12
|
readonly Sizes: () => string;
|
|
12
13
|
readonly States: () => string;
|
|
13
14
|
readonly Loading: () => string;
|
|
15
|
+
readonly OnPressAsynchrone: () => string;
|
|
14
16
|
readonly Icons: () => string;
|
|
15
17
|
readonly TertiaireAvecAvatar: () => string;
|
|
16
18
|
readonly IconOnly: () => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6U,CAAC;AAEnW,eAAO,MAAM,KAAK,cAAiW,CAAC;AAEpX,eAAO,MAAM,MAAM,cAA4W,CAAC;AAEhY,eAAO,MAAM,OAAO,cAAypB,CAAC;AAE9qB,eAAO,MAAM,KAAK,cAAwW,CAAC;AAE3X,eAAO,MAAM,mBAAmB,cAAkW,CAAC;AAEnY,eAAO,MAAM,QAAQ,cAAizB,CAAC;AAEv0B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6U,CAAC;AAEnW,eAAO,MAAM,KAAK,cAAiW,CAAC;AAEpX,eAAO,MAAM,MAAM,cAA4W,CAAC;AAEhY,eAAO,MAAM,OAAO,cAAypB,CAAC;AAE9qB,eAAO,MAAM,iBAAiB,cAA2f,CAAC;AAE1hB,eAAO,MAAM,KAAK,cAAwW,CAAC;AAE3X,eAAO,MAAM,mBAAmB,cAAkW,CAAC;AAEnY,eAAO,MAAM,QAAQ,cAAizB,CAAC;AAEv0B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}
|
|
@@ -4,6 +4,7 @@ export const Variants = () => "export const Variants = () => (\n <Box display=\
|
|
|
4
4
|
export const Sizes = () => "export const Sizes = () => (\n <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={24}>\n <Button variant=\"secondary\" size=\"sm\" title=\"Bouton sm\" />\n <Button variant=\"secondary\" size=\"md\" title=\"Bouton md\" />\n <Button variant=\"secondary\" size=\"lg\" title=\"Bouton lg\" />\n </Box>\n);";
|
|
5
5
|
export const States = () => "export const States = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n <Button variant=\"secondary\" title=\"Normal\" />\n <Button variant=\"secondary\" title=\"Disabled\" disabled />\n <Button variant=\"secondary\" title=\"Selected\" selected />\n <Button variant=\"secondary\" title=\"Expanded\" expanded />\n </Box>\n);";
|
|
6
6
|
export const Loading = () => "export const Loading = () => {\n const [isLoading, setIsLoading] = React.useState(false);\n\n const handlePress = () => {\n setIsLoading(true);\n setTimeout(() => setIsLoading(false), 3000);\n };\n\n return (\n <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n <Button variant=\"primary\" title=\"Enregistrer\" isLoading={isLoading} onPress={handlePress} />\n <Button variant=\"secondary\" title=\"Exporter\" leading=\"Download\" isLoading={isLoading} onPress={handlePress} />\n <Button variant=\"primary\" title=\"Délai court\" loadingDelay=\"short\" isLoading={isLoading} onPress={handlePress} />\n </Box>\n );\n};";
|
|
7
|
+
export const OnPressAsynchrone = () => "export const OnPressAsynchrone = () => {\n const [envois, setEnvois] = React.useState(0);\n\n const envoyer = async () => {\n setEnvois(n => n + 1);\n await new Promise(resolve => setTimeout(resolve, 3000));\n };\n\n return (\n <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n <Button variant=\"primary\" title=\"Envoyer\" loadingDelay=\"short\" onPress={envoyer} />\n <Typography>Envois : {envois}</Typography>\n </Box>\n );\n};";
|
|
7
8
|
export const Icons = () => "export const Icons = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n <Button variant=\"secondary\" title=\"Ajouter\" leading=\"Plus\" />\n <Button variant=\"secondary\" title=\"Exporter\" trailing=\"Download\" />\n <Button variant=\"secondary\" title=\"Filtres\" leading=\"Plus\" trailing=\"ChevronDown\" />\n </Box>\n);";
|
|
8
9
|
export const TertiaireAvecAvatar = () => "export const TertiaireAvecAvatar = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n <Button variant=\"tertiary\" title=\"Marie Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Marie Curie\" />} />\n <Button variant=\"tertiary\" title=\"Marie Curie\" leading=\"User\" />\n </Box>\n);";
|
|
9
10
|
export const IconOnly = () => "export const IconOnly = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n <ButtonIcon variant=\"tertiary\" size=\"sm\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n <ButtonIcon variant=\"tertiary\" size=\"lg\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n <ButtonIcon variant=\"secondary\" size=\"md\" icon=\"Trash\" accessibilityLabel=\"Supprimer\" />\n <ButtonIcon variant=\"primary\" size=\"md\" icon=\"Plus\" accessibilityLabel=\"Ajouter\" />\n <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"CircleUser\" iconSize=\"xs\" accessibilityLabel=\"Voir le profil\" />\n </Box>\n);";
|
|
@@ -13,6 +14,7 @@ export const storySources = {
|
|
|
13
14
|
Sizes,
|
|
14
15
|
States,
|
|
15
16
|
Loading,
|
|
17
|
+
OnPressAsynchrone,
|
|
16
18
|
Icons,
|
|
17
19
|
TertiaireAvecAvatar,
|
|
18
20
|
IconOnly,
|
|
@@ -23,6 +25,7 @@ export const storyDescriptions = {
|
|
|
23
25
|
Sizes: "`md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant.",
|
|
24
26
|
States: "- `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.\n- `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.\n- `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi\n l'état accessible correspondant, ce que `selected` ne fait pas.",
|
|
25
27
|
Loading: "Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la\nprop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).\nIl vaut `'long'` (1 000 ms) par défaut.\n\nCe délai évite un clignotement visuel quand l'opération se termine rapidement :\nsi le serveur répond en moins d'une seconde, l'utilisateur ne voit jamais le spinner.\nAu-delà, le spinner s'affiche pour signaler que l'attente va durer.\n\n**Le spinner prend la place de quelque chose, il ne s'ajoute jamais** : le bouton garde donc\nexactement sa largeur. S'il porte une icône, c'est elle que le spinner remplace, et le\nlibellé reste lisible. Sinon le spinner se centre et le libellé devient invisible sans\nquitter le flux, pour continuer d'imposer sa largeur.\n\nPendant toute l'attente - y compris avant que le spinner ne paraisse - le bouton cesse de\nrépondre : il sort du parcours au clavier et se déclare `aria-disabled`, pour qu'un second\nappui ne relance pas l'opération. Son apparence, elle, reste celle du repos.\n\nAppuyez sur un bouton pour simuler une opération de 3 secondes. Le troisième bouton, avec\n`loadingDelay=\"short\"`, montre son spinner dès 300 ms - avant les deux premiers, qui\nattendent le délai par défaut d'une seconde.",
|
|
28
|
+
OnPressAsynchrone: "Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :\nc'est la protection contre la double soumission d'un formulaire. Le verrou est posé dès le\npremier clic, avant même le rafraîchissement : le second clic d'un double clic est ignoré.\nPas besoin de gérer `isLoading` : le bouton charge seul, avec le même `loadingDelay`.\n\nAvec react-hook-form, `onPress={handleSubmit(...)}` suffit, `handleSubmit` rendant une promesse.\nUn `onPress` synchrone n'est pas verrouillé.\n\nDouble-cliquez sur le bouton : l'envoi de 3 secondes n'est compté qu'une fois.",
|
|
26
29
|
Icons: "`leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister.",
|
|
27
30
|
TertiaireAvecAvatar: "`leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.\nIl est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien\nque le bouton garde sa hauteur et son alignement.",
|
|
28
31
|
IconOnly: "`ButtonIcon` est la **seule** façon d'obtenir un bouton carré. `Button` exige un `title` :\nil ne bascule plus en mode icône seule quand on le lui retire.\n\nC'est la règle des trois références. Atlassian rend les `children` de son bouton par défaut\nobligatoires, si bien qu'un bouton-icône ne peut y être écrit qu'avec `IconButton`. Primer a\ndeux composants, et la géométrie carrée n'existe que sur la classe que pose `IconButton`.\nBase n'a qu'un composant, mais la forme s'y demande (`shape=\"square\"`), jamais ne se déduit.\n\nLa raison est mesurable : tant que l'absence de `title` suffisait, rien ne signalait un\nbouton muet. Deux des quatre appels de ce genre écrits dans les applications n'avaient aucun\n`accessibilityLabel`. `ButtonIcon` le rend obligatoire, et le compilateur fait le reste.\n\nIl accepte `primary`, `secondary` et `tertiary`, et `iconSize` pour dissocier la taille de\nl'icône de celle du bouton.",
|
|
@@ -32,6 +32,10 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
|
|
|
32
32
|
active?: boolean;
|
|
33
33
|
/** Le bouton commande un menu ou un panneau actuellement deplie. */
|
|
34
34
|
expanded?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Inutile pour un `onPress` qui rend une promesse : le bouton se verrouille et charge seul
|
|
37
|
+
* jusqu'a sa fin, ce qui empeche le double envoi d'un formulaire.
|
|
38
|
+
*/
|
|
35
39
|
isLoading?: boolean;
|
|
36
40
|
/**
|
|
37
41
|
* Retard avant que le spinner de `isLoading` ne paraisse. Memes valeurs que la prop `delay`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,YAMhD,CAAC"}
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,YAMhD,CAAC"}
|