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

Opinionated design system for Drivy's projects.

import React, { useRef, useState } from 'react';
import cx from 'classnames';
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 (React.createElement(Modal, { ...modalProps, title: React.createElement(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed },
        React.createElement("div", { className: "c-w-full c-overflow-hidden" },
            React.createElement("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}%)`,
                } }, steps.map((StepComponents, index) => {
                return (React.createElement("div", { key: "modal_step_" + index, 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}%` } },
                    React.createElement("div", { className: "c-overflow-hidden" },
                        React.createElement(StepComponents.content, { ...stepProps }))));
            }))),
        CurrentStepComponents.footer && (React.createElement(Modal.Footer, null,
            React.createElement(CurrentStepComponents.footer, { ...stepProps })))));
};

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