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

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { useRef, useState } from "react";
import index_0 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?.(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 /*#__PURE__*/ jsxs(index_0, {
        ...modalProps,
        title: /*#__PURE__*/ jsx(CurrentStepComponents.title, {
            ...stepProps
        }),
        close: close,
        onHidden: onModalClosed,
        children: [
            /*#__PURE__*/ jsx("div", {
                className: "c-w-full c-overflow-hidden",
                children: /*#__PURE__*/ jsx("div", {
                    className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out",
                    ref: bodyScrollContentRef,
                    style: {
                        width: `${100 * steps.length}%`,
                        transform: `translateX(-${100 / steps.length * currentStep}%)`
                    },
                    children: steps.map((StepComponents, index)=>/*#__PURE__*/ jsx("div", {
                            className: classnames("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: /*#__PURE__*/ jsx("div", {
                                className: "c-overflow-hidden",
                                children: /*#__PURE__*/ jsx(StepComponents.content, {
                                    ...stepProps
                                })
                            })
                        }, `step-${index}-${steps[index].title.toString()}`))
                })
            }),
            CurrentStepComponents.footer && /*#__PURE__*/ jsx(index_0.Footer, {
                children: /*#__PURE__*/ jsx(CurrentStepComponents.footer, {
                    ...stepProps
                })
            })
        ]
    });
};
const Modal_MultiStepModal = MultiStepModal;
export default Modal_MultiStepModal;

//# sourceMappingURL=MultiStepModal.js.map