@conduction/components/lib/components/notificationPopUp/NotificationPopUp.js

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as styles from "./NotificationPopUp.module.css";
import ReactDOM from "react-dom";
import clsx from "clsx";
import { Heading3, Link, Paragraph, Button } from "@utrecht/component-library-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
export const NotificationPopUp = ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, customContent, }) => {
    const [animationVisible, setAnimationVisible] = React.useState(true);
    const animationDuration = parseInt(styles.animationDuration, 10);
    const handleClick = (clickFunction) => {
        setAnimationVisible(!setAnimationVisible);
        clickFunction && clickFunction();
        setTimeout(() => {
            hide();
            setAnimationVisible(true);
        }, animationDuration);
    };
    const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), description && _jsx(Paragraph, { children: description }), customContent && customContent, _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { className: secondaryButton.layoutClassName, children: _jsxs(Link, { onClick: (e) => {
                                e.preventDefault(), handleClick(secondaryButton.handleClick);
                            }, className: styles.link, href: secondaryButton.href, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
    return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
};
export const NotificationPopUpController = () => {
    const [isVisible, setIsVisible] = React.useState(false);
    const show = () => setIsVisible(true);
    const hide = () => setIsVisible(false);
    return {
        isVisible,
        show,
        hide,
    };
};