@awsui/components-react/wizard/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { getBaseProps } from '../internal/base-component';
import { fireNonCancelableEvent } from '../internal/events';
import { warnOnce } from '../internal/logging';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import { useControllable } from '../internal/hooks/use-controllable';
import Box from '../box';
import WizardForm from './wizard-form';
import WizardNavigation from './wizard-navigation';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var scrollToTop = function (ref) {
    var _a;
    var overflowRegex = /(auto|scroll)/;
    var parent = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
    while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {
        parent = parent.parentElement;
    }
    if (parent) {
        parent.scrollTop = 0;
    }
    else {
        window.scrollTo(window.pageXOffset, 0);
    }
};
var Wizard = function (_a) {
    var steps = _a.steps, controlledActiveStepIndex = _a.activeStepIndex, i18nStrings = _a.i18nStrings, _b = _a.isLoadingNextStep, isLoadingNextStep = _b === void 0 ? false : _b, onCancel = _a.onCancel, onSubmit = _a.onSubmit, onNavigate = _a.onNavigate, rest = __rest(_a, ["steps", "activeStepIndex", "i18nStrings", "isLoadingNextStep", "onCancel", "onSubmit", "onNavigate"]);
    useTelemetry('Wizard');
    var baseProps = getBaseProps(rest);
    var _c = useContainerBreakpoints(['xs']), breakpoint = _c[0], ref = _c[1];
    var smallContainer = breakpoint === 'default';
    var _d = useControllable(controlledActiveStepIndex, onNavigate, 0, {
        componentName: 'Wizard',
        controlledProp: 'activeStepIndex',
        changeHandler: 'onNavigate'
    }), activeStepIndex = _d[0], setActiveStepIndex = _d[1];
    if (activeStepIndex && activeStepIndex >= steps.length) {
        warnOnce('Wizard', "You have set `activeStepIndex` to " + activeStepIndex + " but you have provided only " + steps.length + " steps. Its value is ignored and the component uses " + (steps.length - 1) + " instead.");
    }
    var actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;
    var farthestStepIndex = useRef(actualActiveStepIndex);
    farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
    var internalRef = useRef(null);
    useEffect(function () {
        scrollToTop(internalRef);
    }, [actualActiveStepIndex]);
    var navigationEvent = function (requestedStepIndex, reason) {
        setActiveStepIndex(requestedStepIndex);
        fireNonCancelableEvent(onNavigate, { requestedStepIndex: requestedStepIndex, reason: reason });
    };
    var isLastStep = actualActiveStepIndex >= steps.length - 1;
    return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: ref }),
        React.createElement("div", { className: clsx(styles.wizard), ref: internalRef },
            React.createElement(WizardNavigation, { steps: steps, activeStepIndex: actualActiveStepIndex, i18nStrings: i18nStrings, farthestStepIndex: farthestStepIndex.current, onStepClick: function (stepIndex) { return navigationEvent(stepIndex, 'step'); }, hidden: smallContainer }),
            React.createElement("div", { className: clsx(styles.form) },
                React.createElement(Box, { variant: "p", fontWeight: "bold", color: "text-body-secondary", display: smallContainer ? 'block' : 'none', className: clsx(styles['collapsed-steps']) }, i18nStrings.collapsedStepsLabel(actualActiveStepIndex + 1, steps.length)),
                React.createElement(WizardForm, { steps: steps, i18nStrings: i18nStrings, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, onCancelClick: function () { return fireNonCancelableEvent(onCancel); }, onPreviousClick: function () { return navigationEvent(actualActiveStepIndex - 1, 'previous'); }, onPrimaryClick: isLastStep
                        ? function () { return fireNonCancelableEvent(onSubmit); }
                        : function () { return navigationEvent(actualActiveStepIndex + 1, 'next'); } })))));
};
export default Wizard;