@dnb/eufemia/es/extensions/forms/Form/InfoOverlay/InfoOverlay.js

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useContext, useRef } from 'react';
import clsx from 'clsx';
import Visibility from "../Visibility/index.js";
import DataContext from "../../DataContext/Context.js";
import { useSharedState, createReferenceKey } from "../../../../shared/helpers/useSharedState.js";
import useMounted from "../../../../shared/helpers/useMounted.js";
import setContent from "./setContent.js";
import { Button, Flex, HeightAnimation, Section } from "../../../../components/index.js";
import { P } from "../../../../elements/index.js";
import { useTranslation } from "../../hooks/index.js";
import MainHeading from "../MainHeading/index.js";
import SubmitButton from "../SubmitButton/index.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function InfoOverlay(props) {
  const {
    id: idProp,
    formState
  } = useContext(DataContext);
  const {
    id = idProp,
    content: contentProp,
    success,
    error,
    onCancel,
    className,
    children,
    ...restProps
  } = props;
  const {
    data
  } = useSharedState(id ? createReferenceKey(id, 'info-overlay') : undefined);
  const {
    content = contentProp
  } = data || {};
  const translations = useTranslation();
  const mountedRef = useMounted();
  const overlayRef = useRef(null);
  const onAnimationEnd = useCallback(state => {
    if (mountedRef.current && state === 'opened') {
      overlayRef.current.focus?.();
    }
  }, [mountedRef]);
  const currentContentRef = useRef(undefined);
  if (content) {
    currentContentRef.current = content;
  }
  const onCancelHandler = useCallback(() => {
    if (id) {
      setContent(id, undefined);
    }
    onCancel?.();
  }, [id, onCancel]);
  const childrenAreVisible = typeof content !== 'undefined' ? !(content === content) : undefined;
  const statusContentIsVisible = typeof content !== 'undefined' ? content === content : false;
  const status = typeof content === 'string' && !content.includes(' ') ? content : undefined;
  let statusContent = content;
  if (currentContentRef.current === 'success') {
    const tr = translations.InfoOverlaySuccess;
    const {
      title,
      description,
      buttonText,
      buttonHref,
      buttonClickHandler
    } = success || {};
    statusContent = _jsx(Section, {
      variant: "information",
      innerSpace: {
        top: 'large',
        bottom: 'xx-large'
      },
      ...restProps,
      children: _jsxs(Flex.Stack, {
        gap: "large",
        children: [_jsx(MainHeading, {
          children: title !== null && title !== void 0 ? title : tr.title
        }), _jsx(P, {
          children: description !== null && description !== void 0 ? description : tr.description
        }), _jsx(Button, {
          href: buttonClickHandler ? undefined : buttonHref !== null && buttonHref !== void 0 ? buttonHref : '/',
          onClick: buttonClickHandler,
          children: buttonText !== null && buttonText !== void 0 ? buttonText : tr.buttonText
        })]
      })
    });
  } else if (currentContentRef.current === 'error') {
    const tr = translations.InfoOverlayError;
    const {
      title,
      description,
      cancelButton,
      retryButton
    } = error || {};
    statusContent = _jsx(Section, {
      variant: "transparent",
      innerSpace: {
        top: 'large',
        bottom: 'xx-large'
      },
      ...restProps,
      children: _jsxs(Flex.Stack, {
        gap: "large",
        children: [_jsx(MainHeading, {
          children: title !== null && title !== void 0 ? title : tr.title
        }), _jsx(HeightAnimation, {
          children: _jsx(P, {
            children: formState === 'pending' ? tr.retryingText : description !== null && description !== void 0 ? description : tr.description
          })
        }), _jsxs(Flex.Horizontal, {
          children: [_jsx(Button, {
            variant: "secondary",
            onClick: onCancelHandler,
            children: cancelButton !== null && cancelButton !== void 0 ? cancelButton : tr.cancelButton
          }), _jsx(SubmitButton, {
            children: retryButton !== null && retryButton !== void 0 ? retryButton : tr.retryButton
          })]
        })]
      })
    });
  }
  return _jsxs("div", {
    className: clsx("dnb-forms-info-overlay dnb-no-focus", className, status && `dnb-forms-info-overlay--${status}`),
    tabIndex: -1,
    ref: overlayRef,
    children: [_jsx(Visibility, {
      visible: statusContentIsVisible,
      onAnimationEnd: onAnimationEnd,
      animate: true,
      children: statusContent
    }), _jsx(HeightAnimation, {
      open: childrenAreVisible,
      onAnimationEnd: onAnimationEnd,
      animate: true,
      keepInDOM: true,
      children: children
    })]
  });
}
InfoOverlay.setContent = setContent;
withComponentMarkers(InfoOverlay, {
  _supportsSpacingProps: true
});
export default InfoOverlay;
//# sourceMappingURL=InfoOverlay.js.map