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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["id", "content", "success", "error", "onCancel", "className", "children"];
import React, { useCallback, useContext, useRef } from 'react';
import classnames from 'classnames';
import Visibility from '../Visibility';
import DataContext from '../../DataContext/Context';
import { useSharedState } from '../../../../shared/helpers/useSharedState';
import useMounted from '../../../../shared/helpers/useMounted';
import setContent from './setContent';
import { Button, Flex, HeightAnimation, Section } from '../../../../components';
import { P } from '../../../../elements';
import { useTranslation } from '../../hooks';
import MainHeading from '../MainHeading';
import SubmitButton from '../SubmitButton';
function InfoOverlay(props) {
  const {
    id: idProp,
    formState
  } = useContext(DataContext);
  const {
      id = idProp,
      content: contentProp,
      success,
      error,
      onCancel,
      className,
      children
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  const {
    data
  } = useSharedState(id);
  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 ? 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 ? 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(Visibility, {
    visible: childrenAreVisible,
    onAnimationEnd: onAnimationEnd,
    animate: true,
    keepInDOM: true
  }, children));
}
InfoOverlay.setContent = setContent;
InfoOverlay._supportsSpacingProps = true;
export default InfoOverlay;
//# sourceMappingURL=InfoOverlay.js.map