allaw-ui 1.0.47 → 1.0.48
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.
|
@@ -45,7 +45,8 @@ import PrimaryButton from "../../atoms/buttons/PrimaryButton";
|
|
|
45
45
|
import SecondaryButton from "../../atoms/buttons/SecondaryButton";
|
|
46
46
|
var Stepper = function (_a) {
|
|
47
47
|
var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? [] : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, children = _a.children, _d = _a.secondaryButton, secondaryButton = _d === void 0 ? [] : _d, _e = _a.primaryButton, primaryButton = _e === void 0 ? [] : _e, _f = _a.showProgressBar, showProgressBar = _f === void 0 ? [] : _f, onClose = _a.onClose, validateStep = _a.validateStep;
|
|
48
|
-
var _g = useState(
|
|
48
|
+
var _g = useState(currentStep || 1), step = _g[0], setStep = _g[1];
|
|
49
|
+
var _h = useState(false), isVisible = _h[0], setIsVisible = _h[1];
|
|
49
50
|
var portalContainerRef = useRef(null);
|
|
50
51
|
useEffect(function () {
|
|
51
52
|
var container = document.createElement("div");
|
|
@@ -60,62 +61,61 @@ var Stepper = function (_a) {
|
|
|
60
61
|
}
|
|
61
62
|
};
|
|
62
63
|
}, []);
|
|
64
|
+
useEffect(function () {
|
|
65
|
+
setStep(currentStep || 1);
|
|
66
|
+
}, [currentStep]);
|
|
63
67
|
var handleNext = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
64
68
|
var currentPrimaryButton, isValid;
|
|
65
69
|
return __generator(this, function (_a) {
|
|
66
70
|
switch (_a.label) {
|
|
67
71
|
case 0:
|
|
68
|
-
|
|
69
|
-
currentPrimaryButton
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return [
|
|
72
|
+
currentPrimaryButton = primaryButton[step - 1];
|
|
73
|
+
if (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.onPrimaryButtonClick) {
|
|
74
|
+
currentPrimaryButton.onPrimaryButtonClick(step);
|
|
75
|
+
}
|
|
76
|
+
if (!validateStep) return [3 /*break*/, 2];
|
|
77
|
+
return [4 /*yield*/, validateStep(step)];
|
|
73
78
|
case 1:
|
|
74
|
-
_a.sent();
|
|
75
|
-
_a.label = 2;
|
|
76
|
-
case 2:
|
|
77
|
-
if (!validateStep) return [3 /*break*/, 4];
|
|
78
|
-
console.log("[Stepper.handleNext] Validating step");
|
|
79
|
-
return [4 /*yield*/, validateStep(currentStep)];
|
|
80
|
-
case 3:
|
|
81
79
|
isValid = _a.sent();
|
|
82
|
-
console.log("[Stepper.handleNext] Validation result:", isValid);
|
|
83
80
|
if (!isValid) {
|
|
84
|
-
console.log("[Stepper.handleNext] Validation failed");
|
|
85
81
|
return [2 /*return*/];
|
|
86
82
|
}
|
|
87
|
-
_a.label =
|
|
88
|
-
case
|
|
83
|
+
_a.label = 2;
|
|
84
|
+
case 2:
|
|
85
|
+
if (step < steps) {
|
|
86
|
+
setStep(step + 1);
|
|
87
|
+
}
|
|
88
|
+
else if (step === steps && onClose) {
|
|
89
|
+
onClose();
|
|
90
|
+
}
|
|
91
|
+
return [2 /*return*/];
|
|
89
92
|
}
|
|
90
93
|
});
|
|
91
|
-
}); }, [
|
|
94
|
+
}); }, [step, steps, validateStep, primaryButton, onClose]);
|
|
95
|
+
var handlePrevious = useCallback(function () {
|
|
96
|
+
if (step > 1) {
|
|
97
|
+
setStep(step - 1);
|
|
98
|
+
}
|
|
99
|
+
}, [step]);
|
|
100
|
+
var currentSecondaryButton = secondaryButton[step - 1] || {};
|
|
101
|
+
var currentPrimaryButton = primaryButton[step - 1] || {};
|
|
102
|
+
var currentShowProgressBar = showProgressBar[step - 1] !== false;
|
|
103
|
+
var currentShowStartIcon = startIcon[step - 1];
|
|
92
104
|
var handleClose = useCallback(function () {
|
|
105
|
+
setIsVisible(false);
|
|
93
106
|
if (onClose) {
|
|
94
107
|
onClose();
|
|
95
108
|
}
|
|
96
109
|
}, [onClose]);
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
}, [currentStep, secondaryButton]);
|
|
103
|
-
var currentSecondaryButton = secondaryButton[currentStep - 1] || {};
|
|
104
|
-
var currentPrimaryButton = primaryButton[currentStep - 1] || {};
|
|
105
|
-
var currentShowProgressBar = showProgressBar[currentStep - 1] !== false;
|
|
106
|
-
var currentShowStartIcon = startIcon[currentStep - 1];
|
|
107
|
-
var stepperContent = (React.createElement("div", { className: "stepper-container" },
|
|
108
|
-
React.createElement("div", { className: "stepper-wrapper" },
|
|
109
|
-
React.createElement(ProgressBar, { steps: steps, currentStep: currentStep, startIcon: currentShowStartIcon, endIcon: endIcon, onStartIconClick: handlePrevious, onEndIconClick: handleClose, showProgressBar: currentShowProgressBar }),
|
|
110
|
-
React.createElement("div", { className: "stepper-content" }, children[currentStep - 1]),
|
|
110
|
+
var stepperContent = (React.createElement("div", { className: "stepper-overlay ".concat(isVisible ? "visible" : ""), onClick: handleClose },
|
|
111
|
+
React.createElement("div", { className: "stepper-container", onClick: function (e) { return e.stopPropagation(); } },
|
|
112
|
+
React.createElement(ProgressBar, { steps: steps, currentStep: step, startIcon: currentShowStartIcon, endIcon: endIcon, onStartIconClick: handlePrevious, onEndIconClick: handleClose, showProgressBar: currentShowProgressBar }),
|
|
113
|
+
React.createElement("div", { className: "stepper-content" }, children[step - 1]),
|
|
111
114
|
React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) ? "no-buttons" : "") },
|
|
112
115
|
(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
|
|
113
|
-
React.createElement(SecondaryButton, { fullWidth: true, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton,
|
|
116
|
+
React.createElement(SecondaryButton, { fullWidth: true, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, step); } }))),
|
|
114
117
|
(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
|
|
115
118
|
React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))))));
|
|
116
|
-
useEffect(function () {
|
|
117
|
-
console.log("[Stepper] currentStep changed:", currentStep);
|
|
118
|
-
}, [currentStep]);
|
|
119
119
|
return portalContainerRef.current && isVisible
|
|
120
120
|
? ReactDOM.createPortal(stepperContent, portalContainerRef.current)
|
|
121
121
|
: null;
|