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

ActiveCollab Components

import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
import { MoveFocusInside } from "react-focus-lock";
import { ContentStep } from "./ContentStep";
import { ContentWizardContextProvider } from "./context/ContentWizardContext";
import { StyledContentWizardContainer, StyledStepWrapper } from "./Styles";
import { SlideLeftRightTransition, ResizeTransition } from "../Transitions";
export const ContentWizard = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    className,
    step: controlledStep,
    onStepChange
  } = _ref;
  const childrenCollection = useMemo(() => React.Children.toArray(children), [children]);
  const [internalStep, setInternalStep] = useState(0);
  const [enteredStep, setEnteredStep] = useState(0);
  const [height, setHeight] = useState("auto");
  const previousStepRef = useRef(0);

  // Use controlled step if provided, otherwise use internal state
  const activeStep = controlledStep !== undefined ? controlledStep : internalStep;

  // Calculate direction synchronously based on step change
  const isLeft = useMemo(() => {
    const prevStep = previousStepRef.current;
    const direction = activeStep > prevStep;
    previousStepRef.current = activeStep;
    return direction;
  }, [activeStep]);
  const setActiveStep = useCallback(newStep => {
    if (newStep === activeStep) return;
    if (controlledStep === undefined) {
      setInternalStep(newStep);
    }
    onStepChange == null || onStepChange(newStep);
  }, [activeStep, controlledStep, onStepChange]);
  const goNext = useCallback(() => {
    const nextIndex = Math.min(activeStep + 1, childrenCollection.length - 1);
    setActiveStep(nextIndex);
  }, [activeStep, childrenCollection.length, setActiveStep]);
  const goPrevious = useCallback(() => {
    const prevIndex = Math.max(activeStep - 1, 0);
    setActiveStep(prevIndex);
  }, [activeStep, setActiveStep]);
  const handleHeight = useCallback(element => {
    setHeight(element.offsetHeight + "px");
  }, []);
  const handleEntered = useCallback(stepIndex => {
    setEnteredStep(stepIndex);
  }, []);
  const renderSteps = useMemo(() => {
    return childrenCollection.map((child, index) => {
      const element = child;
      if ((element == null ? void 0 : element.type) === ContentStep) {
        const stepContent = /*#__PURE__*/React.cloneElement(element, {
          key: "step-" + index,
          index,
          isFirst: index === 0,
          isLast: index === childrenCollection.length - 1
        });
        return /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
          key: "transition-" + index,
          in: activeStep === index,
          direction: isLeft ? "left" : "right",
          onEnter: handleHeight,
          onEntered: () => handleEntered(index)
        }, /*#__PURE__*/React.createElement(MoveFocusInside, {
          disabled: enteredStep !== index
        }, /*#__PURE__*/React.createElement(StyledStepWrapper, null, stepContent)));
      }
      return null;
    });
  }, [activeStep, childrenCollection, isLeft, enteredStep, handleHeight, handleEntered]);
  return /*#__PURE__*/React.createElement(ContentWizardContextProvider, {
    value: {
      activeStep,
      setActiveStep,
      goNext,
      goPrevious,
      direction: isLeft ? "left" : "right",
      totalSteps: childrenCollection.length
    }
  }, /*#__PURE__*/React.createElement(ResizeTransition, {
    in: true,
    style: {
      height,
      width: "100%"
    }
  }, /*#__PURE__*/React.createElement(StyledContentWizardContainer, {
    ref: ref,
    className: className,
    $height: height
  }, renderSteps)));
});
ContentWizard.displayName = "ContentWizard";
//# sourceMappingURL=ContentWizard.js.map