glass-app-manager/target/.yalc/@informatica/droplets-core/src/components/messageBox/MessageBox.js

Informatica's Glass Framework CLI for bootstrapping

// @flow

import * as React from "react";
import Dialog from "../dialog/Dialog";
import IconButton from "../button/IconButton";
import classNames from "classnames";

type Props = {
    /**
     * The title of the dialog. Usually something
     * generic like "Error" or "Warning".
     */
    title: string,

    /**
     * Toggle the initial dialog closed state.
     */
    closed?: boolean,

    /**
     * Callback to execute when the message box is closed.
     */
    onClose: () => void,

    /**
     * The type of message box.
     */
    type: "error" | "warning" | "success" | "info",

    /**
     * Children to render.
     */
    children: React.Node | (() => React.Node),
};

type Context = { type: string };

const MessageBoxContext = React.createContext<Context>({});

function MessageBox({ title, children, closed, onClose, ...rest }: Props) {
    return (
        <MessageBoxContext.Provider value={rest}>
            <Dialog
                {...rest}
                closed={closed}
                onClose={onClose}
                className="message-box"
                draggable={false}
                resizable={false}>
                <Dialog.Header title={title} />
                {children}
            </Dialog>
        </MessageBoxContext.Provider>
    );
}

const MessageBoxTitle = ({ children, className, ...rest }) => {
    const { type } = React.useContext(MessageBoxContext);

    return (
        <div className={classNames(className, "message-box__title")} {...rest}>
            <i className={`message-box__icon message-box__icon--${type}`} />
            <div className="message-box__title__text">{children}</div>
        </div>
    );
};

const MessageBoxDetails = ({ children, label, collapsed = true }) => {
    const [hideDetails, toggleDetails] = React.useState(collapsed);
    const handleDetailsToggle = React.useCallback(() => toggleDetails(!hideDetails), [hideDetails, toggleDetails]);

    return (
        <>
            {typeof label === "function" ? (
                <span className="message-box__details__button">{label(hideDetails)}</span>
            ) : (
                <IconButton className="message-box__details__button" onClick={handleDetailsToggle}>
                    <i
                        className={classNames(
                            "message-box__details__icon",
                            hideDetails ? null : "message-box__details__icon--expanded"
                        )}
                    />{" "}
                    {label}
                </IconButton>
            )}
            {hideDetails ? null : <div className="message-box__details">{children}</div>}
        </>
    );
};

MessageBox.Title = MessageBoxTitle;
MessageBox.Content = ({ children }) => <Dialog.Content>{() => children}</Dialog.Content>;
MessageBox.Footer = Dialog.Footer;
MessageBox.Details = MessageBoxDetails;

export default MessageBox;