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

DNB Eufemia Design System UI Library

"use client";

import "core-js/modules/web.dom-collections.iterator.js";
import React, { useCallback, useContext, useReducer } from 'react';
import WizardContext from '../Context';
import StepIndicator from '../../../../components/StepIndicator';
import { useTranslation } from '../../hooks';
export function DisplaySteps(_ref) {
  var _getStepIndicatorStat;
  let {
    mode,
    noAnimation,
    handleChange,
    expandedInitially,
    outset
  } = _ref;
  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'
      };
    }
    if (hasInvalidStepsState(undefined, ['unknown'])) {
      return {
        status: 'Unknown state',
        status_state: 'warn'
      };
    }
    return {};
  }, [hasErrorInOtherStepRef, hasInvalidStepsState, translations.Step.stepHasError]);
  const {
    status,
    status_state
  } = (_getStepIndicatorStat = getStepIndicatorStatus()) !== null && _getStepIndicatorStat !== void 0 ? _getStepIndicatorStat : {};
  return React.createElement("aside", {
    className: "dnb-forms-wizard-layout__indicator"
  }, React.createElement(StepIndicator, {
    bottom: true,
    current_step: activeIndexRef.current,
    data: Array.from(stepsRef.current.values()).map(_ref2 => {
      let {
        stringifiedTitle,
        title,
        inactive,
        status,
        statusState
      } = _ref2;
      return {
        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