ar-design
Version:
AR Design is a (react | nextjs) ui library.
103 lines (102 loc) • 5.01 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, name, steps = [], currentStep, onChange, validation, config, }) {
// states
const [_currentStep, setCurrentStep] = useState(0);
// hooks
const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, _currentStep + 1);
// methods
const getStepIconStatus = (currentStep, index) => {
if (currentStep < index)
return "pending";
if (currentStep === index)
return "in-progress";
return "completed";
};
// useEffects
useEffect(() => {
setCurrentStep(currentStep ?? 0);
}, [currentStep]);
useEffect(() => {
if (config?.isAutomatic)
return;
const key = `${window.location.pathname}::${name}`;
const stored = sessionStorage.getItem(key);
setCurrentStep(stored !== null ? Number(stored) : (currentStep ?? 0));
onChange?.(stored !== null ? Number(stored) : (currentStep ?? 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 (config?.isAutomatic)
return;
if (validation) {
onSubmit((result) => {
if (!result)
return;
setCurrentStep(index);
onChange(index);
setSubmit(false);
});
}
else {
setCurrentStep(index);
onChange(index);
}
const key = `${window.location.pathname}::${name}`;
sessionStorage.setItem(key, String(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;
})));
}),
!config?.isAutomatic && (React.createElement("div", { className: "buttons" },
_currentStep > 0 && (React.createElement(Button, { color: "blue", onClick: () => {
setCurrentStep((prev) => prev - 1);
onChange(_currentStep - 1);
} }, "Geri")),
children && children,
_currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", 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);
}
const key = `${window.location.pathname}::${name}`;
sessionStorage.setItem(key, String(_currentStep + 1));
} }, "\u0130leri")))))));
};
export default Steps;