allaw-ui 4.2.2 → 4.2.4
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/components/molecules/modal/Modal.d.ts +1 -0
- package/dist/components/molecules/modal/Modal.js +2 -2
- package/dist/components/molecules/proSwitch/AvatarBubble.d.ts +1 -0
- package/dist/components/molecules/proSwitch/AvatarBubble.js +20 -6
- package/dist/components/molecules/proSwitch/AvatarBubble.stories.d.ts +7 -0
- package/dist/components/molecules/proSwitch/AvatarBubble.stories.js +16 -0
- package/dist/components/molecules/proSwitch/avatarBubble.module.css +7 -0
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
|
|
|
26
26
|
import Heading from "../../atoms/typography/Heading";
|
|
27
27
|
import Paragraph from "../../atoms/typography/Paragraph";
|
|
28
28
|
var Modal = function (_a) {
|
|
29
|
-
var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, maxWidthConfig = _a.maxWidthConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
|
|
29
|
+
var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, maxWidthConfig = _a.maxWidthConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset, confirmDisabled = _a.confirmDisabled;
|
|
30
30
|
var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
|
|
31
31
|
var _e = useState(false), imgError = _e[0], setImgError = _e[1];
|
|
32
32
|
var portalContainerRef = useRef(null);
|
|
@@ -106,7 +106,7 @@ var Modal = function (_a) {
|
|
|
106
106
|
React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))),
|
|
107
107
|
React.createElement("footer", { className: style.modalFooter },
|
|
108
108
|
cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
|
|
109
|
-
React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true }))));
|
|
109
|
+
React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true, disabled: confirmDisabled }))));
|
|
110
110
|
};
|
|
111
111
|
// Générer les styles pour la largeur maximale responsive
|
|
112
112
|
var getMaxWidthStyles = function () {
|
|
@@ -36,8 +36,8 @@ var generateInitials = function (firstName, name) {
|
|
|
36
36
|
return "".concat(firstInitial).concat(lastInitial);
|
|
37
37
|
};
|
|
38
38
|
var AvatarBubble = function (_a) {
|
|
39
|
-
var firstName = _a.firstName, name = _a.name, src = _a.src, _b = _a.size, size = _b === void 0 ? 42.5 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableHoverAnimation, disableHoverAnimation = _e === void 0 ? false : _e, onClick = _a.onClick, alt = _a.alt, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.borderThick, borderThick = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? false : _h, _j = _a.tooltipId, tooltipId = _j === void 0 ? "avatar-tooltip" : _j;
|
|
40
|
-
var
|
|
39
|
+
var firstName = _a.firstName, name = _a.name, src = _a.src, _b = _a.size, size = _b === void 0 ? 42.5 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableHoverAnimation, disableHoverAnimation = _e === void 0 ? false : _e, onClick = _a.onClick, alt = _a.alt, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.borderThick, borderThick = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? false : _h, _j = _a.tooltipId, tooltipId = _j === void 0 ? "avatar-tooltip" : _j, _k = _a.clickable, clickable = _k === void 0 ? true : _k;
|
|
40
|
+
var _l = useState(false), imageError = _l[0], setImageError = _l[1];
|
|
41
41
|
var hasValidSrc = src && src.trim() !== "";
|
|
42
42
|
var shouldShowInitials = !hasValidSrc || imageError;
|
|
43
43
|
var backgroundColor = generateBackgroundColor(firstName, name);
|
|
@@ -49,19 +49,22 @@ var AvatarBubble = function (_a) {
|
|
|
49
49
|
setImageError(true);
|
|
50
50
|
}, []);
|
|
51
51
|
var handleClick = useCallback(function () {
|
|
52
|
-
if (!disabled && onClick) {
|
|
52
|
+
if (!disabled && clickable && onClick) {
|
|
53
53
|
onClick();
|
|
54
54
|
}
|
|
55
|
-
}, [disabled, onClick]);
|
|
55
|
+
}, [disabled, clickable, onClick]);
|
|
56
56
|
var handleKeyDown = useCallback(function (event) {
|
|
57
|
+
if (!clickable)
|
|
58
|
+
return;
|
|
57
59
|
if (event.key === "Enter" || event.key === " ") {
|
|
58
60
|
event.preventDefault();
|
|
59
61
|
handleClick();
|
|
60
62
|
}
|
|
61
|
-
}, [handleClick]);
|
|
63
|
+
}, [handleClick, clickable]);
|
|
62
64
|
var containerStyle = {
|
|
63
65
|
width: "".concat(size, "px"),
|
|
64
66
|
height: "".concat(size, "px"),
|
|
67
|
+
cursor: clickable && !disabled ? "pointer" : "default",
|
|
65
68
|
};
|
|
66
69
|
var initialsStyle = {
|
|
67
70
|
backgroundColor: backgroundColor,
|
|
@@ -75,7 +78,18 @@ var AvatarBubble = function (_a) {
|
|
|
75
78
|
: styles.thick
|
|
76
79
|
: isSelected
|
|
77
80
|
? styles.selectedThin
|
|
78
|
-
: styles.thin), style: containerStyle
|
|
81
|
+
: styles.thin), style: containerStyle }, (clickable
|
|
82
|
+
? {
|
|
83
|
+
role: "button",
|
|
84
|
+
tabIndex: disabled ? -1 : 0,
|
|
85
|
+
onClick: handleClick,
|
|
86
|
+
onKeyDown: handleKeyDown,
|
|
87
|
+
"aria-label": ariaLabel,
|
|
88
|
+
}
|
|
89
|
+
: {
|
|
90
|
+
tabIndex: -1,
|
|
91
|
+
"aria-label": ariaLabel,
|
|
92
|
+
}), { "data-selected": isSelected, "data-disabled": disabled, "data-disable-hover-animation": disableHoverAnimation }, (showTooltip && {
|
|
79
93
|
"data-tooltip-id": tooltipId,
|
|
80
94
|
"data-tooltip-content": fullName,
|
|
81
95
|
})), shouldShowInitials ? (React.createElement("div", { className: styles.initials, style: initialsStyle, "aria-label": displayAlt }, initials)) : (React.createElement("div", { className: styles.imageContainer },
|
|
@@ -77,6 +77,12 @@ declare namespace _default {
|
|
|
77
77
|
let description_11: string;
|
|
78
78
|
export { description_11 as description };
|
|
79
79
|
}
|
|
80
|
+
namespace clickable {
|
|
81
|
+
let control_11: string;
|
|
82
|
+
export { control_11 as control };
|
|
83
|
+
let description_12: string;
|
|
84
|
+
export { description_12 as description };
|
|
85
|
+
}
|
|
80
86
|
}
|
|
81
87
|
export namespace parameters {
|
|
82
88
|
namespace backgrounds {
|
|
@@ -101,5 +107,6 @@ export const SelectedWithoutHoverAnimation: any;
|
|
|
101
107
|
export function MultipleSizes(): React.JSX.Element;
|
|
102
108
|
export function ColorVariations(): React.JSX.Element;
|
|
103
109
|
export function HoverAnimationComparison(): React.JSX.Element;
|
|
110
|
+
export const NotClickable: any;
|
|
104
111
|
import AvatarBubble from "./AvatarBubble";
|
|
105
112
|
import React from "react";
|
|
@@ -66,6 +66,10 @@ export default {
|
|
|
66
66
|
control: "text",
|
|
67
67
|
description: "Texte alternatif pour l'accessibilité",
|
|
68
68
|
},
|
|
69
|
+
clickable: {
|
|
70
|
+
control: "boolean",
|
|
71
|
+
description: "État cliquable de l'avatar",
|
|
72
|
+
},
|
|
69
73
|
},
|
|
70
74
|
parameters: {
|
|
71
75
|
backgrounds: {
|
|
@@ -237,3 +241,15 @@ export var HoverAnimationComparison = function () {
|
|
|
237
241
|
React.createElement("h4", { style: { marginBottom: "10px" } }, "Sans animation"),
|
|
238
242
|
React.createElement(AvatarBubble, { firstName: "Marie", name: "Martin", src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 1, onClick: function () { return setSelectedIndex(1); }, disableHoverAnimation: true, showTooltip: true, tooltipId: "hover-comparison-tooltip" }))));
|
|
239
243
|
};
|
|
244
|
+
export var NotClickable = Template.bind({});
|
|
245
|
+
NotClickable.args = {
|
|
246
|
+
firstName: "Non",
|
|
247
|
+
name: "Cliquable",
|
|
248
|
+
src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
|
|
249
|
+
size: 42.5,
|
|
250
|
+
isSelected: false,
|
|
251
|
+
disabled: false,
|
|
252
|
+
clickable: false,
|
|
253
|
+
showTooltip: true,
|
|
254
|
+
tooltipId: "avatar-not-clickable",
|
|
255
|
+
};
|