ar-design
Version:
AR Design is a (react | nextjs) ui library.
94 lines (93 loc) • 4.32 kB
JavaScript
"use client";
import React, { useEffect, useState } from "react";
import "../../../assets/css/components/navigation/steps/styles.css";
import Typography from "../../data-display/typography";
import Button from "../../form/button";
import { useValidation } from "../../../libs/core/application/hooks";
const { Title } = Typography;
const Steps = function ({ children, steps = [], onChange, validation }) {
// states
const [currentStep, setCurrentStep] = useState(0);
let _errors;
let _onSubmit;
let _setSubmit;
if (validation) {
const { errors, onSubmit, setSubmit } = useValidation(validation.data, validation.rules, currentStep + 1);
_errors = errors;
_onSubmit = onSubmit;
_setSubmit = setSubmit;
}
// methods
const getStepIconStatus = (currentStep, index) => {
if (currentStep < index)
return "pending";
if (currentStep === index)
return "in-progress";
return "completed";
};
// useEffects
useEffect(() => onChange(0), []);
return (React.createElement("div", { className: "ar-steps" },
React.createElement("div", { className: "steps" }, steps.length > 0 &&
steps.map((step, index) => {
let itemIcon = ["item-icon"];
itemIcon.push(getStepIconStatus(currentStep, index));
return (React.createElement("div", { key: step.title || index, className: "item", onClick: () => {
if (validation) {
_onSubmit((result) => {
if (!result)
return;
setCurrentStep(index);
onChange(index);
_setSubmit(false);
});
}
else {
setCurrentStep(index);
onChange(index);
}
} },
React.createElement("div", { className: itemIcon.map((c) => c).join(" ") },
React.createElement("span", { className: getStepIconStatus(currentStep, index) })),
React.createElement("div", { className: "item-informations" },
React.createElement("span", { className: "step" },
"STEP ",
index + 1),
React.createElement(Title, { Level: "h3" }, step.title))));
})),
React.createElement("div", { className: "content" },
steps.map((step, stepIndex) => {
return (React.createElement("div", { key: stepIndex }, React.Children.map(step.content, (child) => {
if (React.isValidElement(child) && stepIndex === currentStep) {
return validation
? React.cloneElement(child, {
errors: _errors,
})
: child;
}
return null;
})));
}),
React.createElement("div", { className: "buttons" },
currentStep > 0 && (React.createElement(Button, { status: "light", onClick: () => {
setCurrentStep((prev) => prev - 1);
onChange(currentStep - 1);
} }, "Geri")),
children && children,
currentStep < steps.length - 1 && (React.createElement(Button, { onClick: () => {
if (validation) {
_onSubmit((result) => {
if (!result)
return;
setCurrentStep((prev) => prev + 1);
onChange(currentStep + 1);
_setSubmit(false);
});
}
else {
setCurrentStep((prev) => prev + 1);
onChange(currentStep + 1);
}
} }, "\u0130leri"))))));
};
export default Steps;