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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useCallback, useContext, useRef } from 'react';
import classnames from 'classnames';
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";
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 innerRef = useRef(null);
  const onAnimationEnd = useCallback(state => {
    if (mountedRef.current && state === 'opened') {
      var _innerRef$current$foc, _innerRef$current;
      (_innerRef$current$foc = (_innerRef$current = innerRef.current).focus) === null || _innerRef$current$foc === void 0 || _innerRef$current$foc.call(_innerRef$current);
    }
  }, [mountedRef]);
  const currentContentRef = useRef();
  if (content) {
    currentContentRef.current = content;
  }
  const onCancelHandler = useCallback(() => {
    if (id) {
      setContent(id, undefined);
    }
    onCancel === null || onCancel === void 0 || 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 = React.createElement(Section, _extends({
      variant: "info",
      innerSpace: {
        top: 'large',
        bottom: 'xx-large'
      }
    }, restProps), React.createElement(Flex.Stack, {
      gap: "large"
    }, React.createElement(MainHeading, null, title !== null && title !== void 0 ? title : tr.title), React.createElement(P, null, description !== null && description !== void 0 ? description : tr.description), React.createElement(Button, {
      href: buttonClickHandler ? undefined : buttonHref !== null && buttonHref !== void 0 ? buttonHref : '/',
      on_click: buttonClickHandler
    }, buttonText !== null && buttonText !== void 0 ? buttonText : tr.buttonText)));
  } else if (currentContentRef.current === 'error') {
    const tr = translations.InfoOverlayError;
    const {
      title,
      description,
      cancelButton,
      retryButton
    } = error || {};
    statusContent = React.createElement(Section, _extends({
      variant: "transparent",
      innerSpace: {
        top: 'large',
        bottom: 'xx-large'
      }
    }, restProps), React.createElement(Flex.Stack, {
      gap: "large"
    }, React.createElement(MainHeading, null, title !== null && title !== void 0 ? title : tr.title), React.createElement(HeightAnimation, null, React.createElement(P, null, formState === 'pending' ? tr.retryingText : description !== null && description !== void 0 ? description : tr.description)), React.createElement(Flex.Horizontal, null, React.createElement(Button, {
      variant: "secondary",
      onClick: onCancelHandler
    }, cancelButton !== null && cancelButton !== void 0 ? cancelButton : tr.cancelButton), React.createElement(SubmitButton, null, retryButton !== null && retryButton !== void 0 ? retryButton : tr.retryButton))));
  }
  return React.createElement("div", {
    className: classnames("dnb-forms-info-overlay dnb-no-focus", className, status && `dnb-forms-info-overlay--${status}`),
    tabIndex: -1,
    ref: innerRef
  }, React.createElement(Visibility, {
    visible: statusContentIsVisible,
    onAnimationEnd: onAnimationEnd,
    animate: true
  }, statusContent), React.createElement(HeightAnimation, {
    open: childrenAreVisible,
    onAnimationEnd: onAnimationEnd,
    animate: true,
    keepInDOM: true
  }, children));
}
InfoOverlay.setContent = setContent;
InfoOverlay._supportsSpacingProps = true;
export default InfoOverlay;
//# sourceMappingURL=InfoOverlay.js.map