allaw-ui 4.7.2 → 4.7.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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes } from "react";
|
|
2
2
|
import "./PrimaryButton.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
|
+
export type ResponsiveLabels = Record<number, string>;
|
|
4
5
|
export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
6
|
startIcon?: React.ReactNode;
|
|
6
7
|
endIcon?: React.ReactNode;
|
|
@@ -15,6 +16,7 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
15
16
|
isLoading?: boolean;
|
|
16
17
|
variant?: "default" | "warning";
|
|
17
18
|
size?: "medium" | "large";
|
|
19
|
+
responsiveLabels?: ResponsiveLabels;
|
|
18
20
|
}
|
|
19
21
|
declare const PrimaryButton: React.ForwardRefExoticComponent<PrimaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
20
22
|
export default PrimaryButton;
|
|
@@ -62,10 +62,11 @@ import Image from "next/image";
|
|
|
62
62
|
import "./PrimaryButton.css";
|
|
63
63
|
import "../../../styles/global.css";
|
|
64
64
|
var PrimaryButton = forwardRef(function (_a, ref) {
|
|
65
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, _b = _a.additionalIcons, additionalIcons = _b === void 0 ? [] : _b, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, variant = _a.variant, _g = _a.size, size = _g === void 0 ? "medium" : _g, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "additionalIcons", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size"]);
|
|
65
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, _b = _a.additionalIcons, additionalIcons = _b === void 0 ? [] : _b, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, variant = _a.variant, _g = _a.size, size = _g === void 0 ? "medium" : _g, responsiveLabels = _a.responsiveLabels, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "additionalIcons", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size", "responsiveLabels"]);
|
|
66
66
|
var buttonRef = React.useRef(null);
|
|
67
67
|
var _h = useState(false), internalIsLoading = _h[0], setInternalIsLoading = _h[1];
|
|
68
68
|
var _j = useState(""), loadingDots = _j[0], setLoadingDots = _j[1];
|
|
69
|
+
var _k = useState(label), currentLabel = _k[0], setCurrentLabel = _k[1];
|
|
69
70
|
useImperativeHandle(ref, function () { return buttonRef.current; });
|
|
70
71
|
var isButtonLoading = isLoading || internalIsLoading;
|
|
71
72
|
// Determine where to place additional icons
|
|
@@ -90,6 +91,39 @@ var PrimaryButton = forwardRef(function (_a, ref) {
|
|
|
90
91
|
}
|
|
91
92
|
};
|
|
92
93
|
}, [isButtonLoading]);
|
|
94
|
+
// Effect for responsive labels
|
|
95
|
+
useEffect(function () {
|
|
96
|
+
if (!responsiveLabels) {
|
|
97
|
+
setCurrentLabel(label);
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
var handleResize = function () {
|
|
101
|
+
var width = window.innerWidth;
|
|
102
|
+
var breakpoints = Object.keys(responsiveLabels)
|
|
103
|
+
.map(Number)
|
|
104
|
+
.sort(function (a, b) { return a - b; });
|
|
105
|
+
// Find the appropriate label for the current width
|
|
106
|
+
var selectedLabel = label; // Default to the prop label
|
|
107
|
+
for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
|
|
108
|
+
var breakpoint = breakpoints_1[_i];
|
|
109
|
+
if (width >= breakpoint) {
|
|
110
|
+
selectedLabel = responsiveLabels[breakpoint];
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
break;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
setCurrentLabel(selectedLabel);
|
|
117
|
+
};
|
|
118
|
+
// Initial check
|
|
119
|
+
handleResize();
|
|
120
|
+
// Add event listener
|
|
121
|
+
window.addEventListener("resize", handleResize);
|
|
122
|
+
// Cleanup
|
|
123
|
+
return function () {
|
|
124
|
+
window.removeEventListener("resize", handleResize);
|
|
125
|
+
};
|
|
126
|
+
}, [responsiveLabels, label]);
|
|
93
127
|
var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
94
128
|
return __generator(this, function (_a) {
|
|
95
129
|
switch (_a.label) {
|
|
@@ -122,7 +156,7 @@ var PrimaryButton = forwardRef(function (_a, ref) {
|
|
|
122
156
|
return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : "").concat(variant === "warning" ? "primary-button-warning" : "", " ").concat(size === "large" ? "primary-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
123
157
|
shouldPlaceAtStart && renderAdditionalIcons(),
|
|
124
158
|
startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
|
|
125
|
-
React.createElement("span", { className: "primary-button-label" },
|
|
159
|
+
React.createElement("span", { className: "primary-button-label" }, currentLabel),
|
|
126
160
|
isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })),
|
|
127
161
|
!shouldPlaceAtStart && renderAdditionalIcons()));
|
|
128
162
|
});
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
/* Wrapper principal */
|
|
1
|
+
/* Wrapper principal - crée un contexte de z-index isolé */
|
|
2
2
|
.wrapper {
|
|
3
3
|
position: relative;
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: center;
|
|
7
|
+
z-index: 0;
|
|
8
|
+
isolation: isolate;
|
|
7
9
|
}
|
|
8
10
|
|
|
9
11
|
/* Container pour l'effet glowing */
|