@re-flex/ui/Stepper/index.js

Re-Flex ui library

import Text from "@re-flex/styled/Typography";
import { css } from "@re-flex/styles";
import React, { forwardRef, Fragment, useCallback, useImperativeHandle, useState, } from "react";
import Button from "../Button";
import { StepContentBase, StepContentItemBase, StepFooterBase, StepHeaderBase, StepHeaderBaseDivider, StepInner, StepWrapperBase, } from "./Styled";
const Stepper = forwardRef(({ direction, footer, contents, headers }, ref) => {
    const [step, setStep] = useState(0);
    const backward = useCallback(() => {
        setStep((s) => (s === 0 ? contents.length - 1 : s - 1));
    }, []);
    const forward = useCallback((to) => {
        setStep((s) => to !== undefined && (to < contents.length || to >= 0)
            ? to
            : s === contents.length - 1
                ? 0
                : s + 1);
    }, []);
    const reset = () => setStep(0);
    useImperativeHandle(ref, () => ({
        backward,
        forward,
        reset,
        currentIndex: step,
    }), [step]);
    return (React.createElement(StepWrapperBase, { direction: direction },
        React.createElement(StepHeaderBase, { sx: {
                padding: 1,
            }, direction: direction }, headers.map(({ icon, title, description, titleProps = {}, descriptionProps = {}, buttonProps, }, k) => (React.createElement(Fragment, null,
            k !== 0 && (React.createElement(StepHeaderBaseDivider, { direction: direction },
                React.createElement("span", null))),
            React.createElement(Button, { onClick: () => forward(k), sx: { padding: 8 }, color: step === k ? "primary" : "default", ...buttonProps },
                React.createElement("div", { className: css({ display: "flex", alignItems: "center" }) },
                    icon && icon(),
                    React.createElement("div", { className: css({ padding: "0 8px" }) },
                        React.createElement(Text, { variant: "subtitle1", ...titleProps }, title),
                        description && (React.createElement(Text, { variant: "caption", ...descriptionProps }, description))))))))),
        React.createElement(StepInner, { direction: direction },
            React.createElement(StepContentBase, { direction: direction, className: css({ transform: `translateX(-${step * 100}%)` }) }, contents.map((Comp, k) => (React.createElement(StepContentItemBase, { key: k },
                React.createElement(Comp, { backward: backward, currentIndex: step, forward: forward }))))),
            React.createElement(StepFooterBase, null, footer))));
});
export default Stepper;