@drivy/cobalt/components/Modal/MultiStepModal.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import { useRef, useState } from 'react';
import Modal from './index.js';

const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHeight = true, ...modalProps }) => {
    const bodyScrollContentRef = useRef(null);
    const [currentStep, setCurrentStep] = useState(0);
    const handleNextStep = () => {
        setCurrentStep(currentStep >= steps.length - 1 ? currentStep : currentStep + 1);
    };
    const handlePreviousStep = () => {
        setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1);
    };
    const onModalClosed = () => {
        onHidden === null || onHidden === void 0 ? void 0 : onHidden(currentStep);
        setCurrentStep(0);
    };
    const navigation = {
        nextStep: handleNextStep,
        previousStep: handlePreviousStep,
        closeModal: close,
    };
    const CurrentStepComponents = steps[currentStep];
    const stepProps = { data: stepData, navigation };
    const minimumScale = useMidSizeHeight
        ? "c-opacity-0 c-grid-rows-[0.5fr]"
        : "c-opacity-0 c-grid-rows-[0fr]";
    return (jsxs(Modal, { ...modalProps, title: jsx(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed, children: [jsx("div", { className: "c-w-full c-overflow-hidden", children: jsx("div", { className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out", ref: bodyScrollContentRef, style: {
                        width: `${steps.length * 100}%`,
                        transform: `translateX(-${(100 / steps.length) * currentStep}%)`,
                    }, children: steps.map((StepComponents, index) => {
                        return (jsx("div", { className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
                                "c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
                                [minimumScale]: index !== currentStep,
                            }), style: { width: `${100 / steps.length}%` }, children: jsx("div", { className: "c-overflow-hidden", children: jsx(StepComponents.content, { ...stepProps }) }) }, `step-${index}-${steps[index].title.toString()}`));
                    }) }) }), CurrentStepComponents.footer && (jsx(Modal.Footer, { children: jsx(CurrentStepComponents.footer, { ...stepProps }) }))] }));
};

export { MultiStepModal as default };
//# sourceMappingURL=MultiStepModal.js.map