@dnb/eufemia/es/components/step-indicator/StepIndicatorContext.js

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
import Context from "../../shared/Context.js";
import { stepIndicatorDefaultProps } from "./StepIndicatorProps.js";
import { extendPropsWithContext } from "../../shared/component-helper.js";
const filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(item => {
  return !['class', 'className'].includes(item);
}).concat(['internalId', 'mainTitle', 'stepsLabel', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes']);
const StepIndicatorContext = React.createContext(null);
export default StepIndicatorContext;
export function StepIndicatorProvider(props) {
  const data = useMemo(() => {
    if (typeof props.data === 'string') {
      return props.data[0] === '[' ? JSON.parse(props.data) : [];
    }
    return props.data || [];
  }, [props]);
  const [openState, setOpenState] = useState(props.expandedInitially);
  const openHandler = useCallback(() => {
    setOpenState(true);
  }, []);
  const closeHandler = useCallback(() => {
    setOpenState(false);
  }, []);
  const getActiveStepFromProps = useCallback(() => {
    if (typeof data[0] === 'string') {
      return props.current_step;
    }
    const dataWithItems = data;
    const itemWithCurrentStep = dataWithItems.find(item => item.is_current);
    return itemWithCurrentStep ? dataWithItems.indexOf(itemWithCurrentStep) : props.current_step;
  }, [data, props.current_step]);
  const countSteps = data.length;
  const activeStepRef = useRef(getActiveStepFromProps());
  const [, forceUpdate] = useReducer(() => ({}), {});
  const setActiveStep = useCallback(step => {
    activeStepRef.current = step;
    forceUpdate();
  }, []);
  const listOfReachedSteps = useRef([activeStepRef.current].filter(Boolean)).current;
  const context = useContext(Context);
  const updateStepTitle = useCallback(title => {
    return title?.replace('%step', String((activeStepRef.current || 0) + 1)).replace('%count', String(data?.length || 1));
  }, [data?.length]);
  const makeContextValue = useCallback(() => {
    const globalContext = extendPropsWithContext(props, stepIndicatorDefaultProps, {
      skeleton: context?.skeleton
    }, context.getTranslation(context).StepIndicator, context.StepIndicator);
    const value = extendSafe({
      filterAttributes
    }, globalContext, {
      defaultProps: stepIndicatorDefaultProps,
      props
    }, {
      activeStep: activeStepRef.current,
      openState,
      listOfReachedSteps,
      data,
      countSteps,
      stepsLabel: updateStepTitle(globalContext.step_title)
    }, {
      setActiveStep,
      openHandler,
      closeHandler
    });
    return value;
  }, [closeHandler, context, countSteps, data, listOfReachedSteps, openHandler, openState, props, setActiveStep, updateStepTitle]);
  const contextValue = makeContextValue();
  useEffect(() => {
    const currentStepFromProps = getActiveStepFromProps();
    if (currentStepFromProps !== activeStepRef.current) {
      setActiveStep(currentStepFromProps);
    }
  }, [props.current_step, data, getActiveStepFromProps, setActiveStep]);
  const activeStep = activeStepRef.current;
  useEffect(() => {
    if (!listOfReachedSteps.includes(activeStep)) {
      listOfReachedSteps.push(activeStep);
    }
  }, [activeStep, listOfReachedSteps]);
  if (typeof window !== 'undefined' && window['IS_TEST']) {
    contextValue['no_animation'] = true;
  }
  const contextValueKeys = Object.keys(contextValue);
  contextValueKeys.forEach(key => {
    if (key.startsWith('_')) {
      delete contextValue[key];
    }
  });
  return React.createElement(StepIndicatorContext.Provider, {
    value: contextValue
  }, props.children);
}
function extendSafe(...objects) {
  const obj = {};
  objects.forEach(itm => {
    if (itm.defaultProps && itm.props) {
      itm = Object.entries(itm.props).reduce((acc, [k, v]) => {
        if (itm.defaultProps[k] !== v) {
          acc[k] = v;
        }
        return acc;
      }, {});
    }
    Object.entries(itm).forEach(([k, v]) => {
      if (!obj[k] || obj[k] && v) {
        obj[k] = v;
      }
    });
  });
  return obj;
}
//# sourceMappingURL=StepIndicatorContext.js.map