@activecollab/components/dist/esm/components/Wizard/Wizard.js

ActiveCollab Components

import React, { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
import { WizardContextProvider } from "./context";
import { Step } from "./Step";
import { Dialog } from "../Dialog";
export const Wizard = /*#__PURE__*/forwardRef((_ref, ref) => {
  let title = _ref.title,
    open = _ref.open,
    onClose = _ref.onClose,
    _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
    disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
    children = _ref.children,
    dialogClassName = _ref.dialogClassName;
  const childrenCollection = useMemo(() => React.Children.toArray(children), [children]);
  const _useState = useState(0),
    activeStep = _useState[0],
    setActiveStep = _useState[1];
  const _useState2 = useState(false),
    changingStepInProgress = _useState2[0],
    setChangingStepInProgress = _useState2[1];
  useEffect(() => {
    if (open) {
      setActiveStep(0);
    }
  }, [open]);
  const goNext = useCallback(() => {
    const index = childrenCollection.findIndex((step, index) => {
      var _stepEl$props;
      const stepEl = step;
      return !(stepEl != null && (_stepEl$props = stepEl.props) != null && _stepEl$props.skip) && index > activeStep;
    });
    setActiveStep(index);
  }, [activeStep, childrenCollection]);
  const goPrevious = useCallback(() => {
    let index = 0;
    for (let i = childrenCollection.length - 1; i >= 0; i--) {
      var _step$props;
      const step = childrenCollection[i];
      if (!(step != null && (_step$props = step.props) != null && _step$props.skip) && i < activeStep) {
        index = i;
        break;
      }
    }
    setActiveStep(index);
  }, [activeStep, childrenCollection]);
  const renderActiveStep = useMemo(() => {
    const element = childrenCollection[activeStep];
    if ((element == null ? void 0 : element.type) === Step) {
      return /*#__PURE__*/React.cloneElement(element, {
        index: activeStep,
        isLast: childrenCollection.length - 1 === activeStep,
        title,
        onNextButtonClick: goNext,
        onPreviousButtonClick: goPrevious,
        onClose,
        changingStepInProgress: changingStepInProgress
      });
    }
    return null;
  }, [activeStep, changingStepInProgress, childrenCollection, goNext, goPrevious, onClose, title]);
  return /*#__PURE__*/React.createElement(WizardContextProvider, {
    value: {
      activeStep,
      setActiveStep,
      goNext,
      goPrevious,
      close: onClose,
      setChangingStepInProgress
    }
  }, /*#__PURE__*/React.createElement(Dialog, {
    ref: ref,
    open: open,
    onClose: onClose,
    disableCloseOnEsc: disableCloseOnEsc,
    className: dialogClassName
  }, renderActiveStep));
});
Wizard.displayName = "Wizard";
//# sourceMappingURL=Wizard.js.map