sccoreui
Version:
ui-sccore
80 lines (79 loc) • 4.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const react_1 = require("react");
const ProgressSteps = (props) => {
const { stepsItems, orientation, activeIndex, withButtons = true, icons, className, style, onNext, onPrev } = props;
const [currentActive, setCurrentActive] = (0, react_1.useState)(!activeIndex
? 0
: activeIndex > stepsItems.length
? stepsItems.length - 1
: activeIndex);
const progressRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (!orientation || orientation === "horizontal") {
progressRef.current.style.width = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
progressRef.current.style.height = "2px";
}
else {
progressRef.current.style.height = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
progressRef.current.style.width = "2px";
}
}, [currentActive, orientation]);
const handleNext = () => {
if (currentActive > stepsItems.length) {
setCurrentActive(stepsItems.length);
if (onNext) {
onNext(stepsItems.length);
}
}
else {
setCurrentActive(currentActive + 1);
if (onNext) {
onNext(currentActive + 1);
}
}
};
const handlePrev = () => {
if (currentActive < 1) {
setCurrentActive(1);
if (onPrev) {
onPrev(1);
}
}
else {
setCurrentActive(currentActive - 1);
onPrev(currentActive - 1);
}
};
const orientationClass = !orientation ? "horizontal" : orientation;
const userClassNames = !className ? "" : className;
if (!stepsItems) {
throw new Error("stepItems must be specified in order to generate steps");
}
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `progress-container flex justify-content-between relative ${orientationClass === "horizontal"
? "flex-row max-w-full"
: "flex-column max-h-full"} ${orientationClass} ${userClassNames}`, style: style }, { children: [(0, jsx_runtime_1.jsx)("div", { className: `progressbar bg-primary-600 absolute ${orientationClass}`, ref: progressRef }), stepsItems.map((eachItem, index) => ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `progress-step-item ${orientationClass === "horizontal"
? "flex flex-column align-items-center gap-5"
: "flex align-items-start gap-5"} ${orientationClass}`, onClick: () => {
if (eachItem.action) {
eachItem.action();
}
} }, { children: [!icons ? ((0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === currentActive
? "step-current"
: index > currentActive
? "step-unvisited"
: "step-checked" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: index === currentActive
? icons.current
: index > currentActive
? icons.unvisited
: icons.visited })), !eachItem.template ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: eachItem.title }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `flex flex-column line-height-2 ${orientationClass === "horizontal"
? "align-items-center"
: "align-items-start"} ${orientationClass}` }, { children: eachItem.template })))] }), eachItem.id)))] })), withButtons && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex${orientationClass === "horizontal"
? ""
: " flex-column align-self-center"} gap-2 mt-5` }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === 0, onClick: handlePrev }, { children: "Prev" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === stepsItems.length - 1, onClick: handleNext }, { children: "Next" }))] })))] }));
};
exports.default = ProgressSteps;