@dnb/eufemia/extensions/forms/Wizard/Container/DisplaySteps.js

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useContext, useReducer } from 'react';
import WizardContext from "../Context/index.js";
import StepIndicator from "../../../../components/StepIndicator.js";
import { useTranslation } from "../../hooks/index.js";
export function DisplaySteps({
  mode,
  noAnimation,
  handleChange,
  expandedInitially,
  outset
}) {
  var _getStepIndicatorStat;
  const [, forceUpdate] = useReducer(() => ({}), {});
  const {
    activeIndexRef,
    stepsRef,
    updateTitlesRef,
    hasErrorInOtherStepRef,
    hasInvalidStepsState
  } = useContext(WizardContext) || {};
  updateTitlesRef.current = () => {
    forceUpdate();
  };
  const translations = useTranslation();
  const getStepIndicatorStatus = useCallback(() => {
    if (!hasErrorInOtherStepRef.current) {
      return;
    }
    if (hasInvalidStepsState(undefined, ['error'])) {
      return {
        status: translations.Step.stepHasError,
        status_state: 'error'
      };
    }
    return {};
  }, [hasErrorInOtherStepRef, hasInvalidStepsState, translations.Step.stepHasError]);
  const {
    status,
    status_state
  } = (_getStepIndicatorStat = getStepIndicatorStatus()) !== null && _getStepIndicatorStat !== void 0 ? _getStepIndicatorStat : {};
  return React.createElement("div", {
    className: "dnb-forms-wizard-layout__indicator"
  }, React.createElement(StepIndicator, {
    bottom: true,
    current_step: activeIndexRef.current,
    data: Array.from(stepsRef.current.values()).map(({
      stringifiedTitle,
      title,
      inactive,
      status,
      statusState
    }) => ({
      title: stringifiedTitle || title,
      inactive,
      status,
      status_state: statusState
    })),
    mode: mode,
    no_animation: noAnimation,
    expandedInitially: expandedInitially,
    on_change: handleChange,
    outset: outset,
    status: status,
    status_state: status_state
  }));
}
//# sourceMappingURL=DisplaySteps.js.map