@dnb/eufemia/es/shared/Provider.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import Context, { prepareContext } from "./Context.js";
import { LOCALE } from "./defaults.js";
import { prepareFormElementContext } from "./helpers/filterValidProps.js";
import { mergeTranslations } from "./Translation.js";
import { warn } from "./component-helper.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function Provider(localProps) {
  const nestedContext = useContext(Context);
  const [localContext, setLocalContext] = useState(null);
  const updateCurrent = useCallback(props => {
    setLocalContext({
      __context__: props
    });
  }, []);
  const setCurrentLocale = useCallback(locale => {
    setLocalContext({
      __context__: {
        locale
      }
    });
  }, []);
  const update = useCallback(props => {
    nestedContext.update?.(props);
    setLocalContext({
      __context__: props
    });
  }, [nestedContext]);
  const setLocale = useCallback(locale => {
    update({
      locale
    });
  }, [update]);
  const {
    translationsLoader,
    translations: propTranslations
  } = localProps;
  const propTranslationsRef = useRef(propTranslations);
  propTranslationsRef.current = propTranslations;
  const translationsLoaderRef = useRef(translationsLoader);
  translationsLoaderRef.current = translationsLoader;
  const effectiveLocale = localContext?.__context__?.locale || localProps.locale || nestedContext.locale || LOCALE;
  useEffect(() => {
    const loader = translationsLoaderRef.current;
    if (!loader) {
      return undefined;
    }
    let cancelled = false;
    loader(effectiveLocale).then(loaded => {
      if (!cancelled && loaded) {
        const base = propTranslationsRef.current || {};
        const merged = mergeTranslations(base, loaded);
        setLocalContext(prev => ({
          __context__: {
            ...prev?.__context__,
            translations: merged
          }
        }));
      }
    }).catch(error => {
      if (!cancelled) {
        warn('Provider: translationsLoader failed:', error);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [effectiveLocale]);
  const value = useMemo(() => {
    const {
      children,
      ...rest
    } = localProps;
    const preparedContext = {
      ...prepareContext(mergeContextWithProps(nestedContext, {
        ...localContext,
        ...rest
      }))
    };
    preparedContext.update = update;
    preparedContext.setLocale = setLocale;
    preparedContext.updateCurrent = updateCurrent;
    preparedContext.setCurrentLocale = setCurrentLocale;
    nestedContext.updateTranslation(preparedContext.locale, preparedContext.translations);
    return preparedContext;
  }, [localProps, nestedContext, localContext, update, setLocale, updateCurrent, setCurrentLocale]);
  return _jsx(Context, {
    value: value,
    children: localProps.children
  });
}
function mergeContextWithProps(nestedContext, localProps) {
  const {
    value,
    ...rest
  } = localProps;
  const props = {
    ...value,
    ...rest
  };
  const mergedContext = {
    ...nestedContext,
    ...props
  };
  const nestedTranslations = nestedContext?.translations;
  const localTranslations = props.translations;
  if (nestedTranslations && localTranslations) {
    const mergedTranslations = mergeTranslations(nestedTranslations, localTranslations);
    mergedContext.translations = mergedTranslations;
  }
  if (nestedContext?.formElement && props.formElement) {
    mergedContext.formElement = {
      ...nestedContext.formElement,
      ...props.formElement
    };
    mergedContext.formElement = prepareFormElementContext(mergedContext.formElement);
  }
  return mergedContext;
}
//# sourceMappingURL=Provider.js.map