Utils/Feedback/AlertBadge/Alerts/OutdatedData.js

import React from "react";
import PropTypes from "prop-types";
import AlertBadge from "../AlertBadge";
import AlertCircle from "mdi-material-ui/AlertCircle";

function DefaultMessage() {
    return (
        <React.Fragment>
            <header style={{textAlign: "left"}}>
                Results in this tab are outdated.
            </header>
            <footer style={{textAlign: "left"}}>
                Please recalculate to refresh results.
            </footer>
        </React.Fragment>
    );
}

function Messages(props) {
    const { messages } = props;
    const style = {
        marginTop: 0,
        marginBottom: "0.5em",
        textAlign: "left"
    };

    return (
        <React.Fragment>
            {messages.map((message, index) => (
                <p key={index} style={index === messages.length - 1 ? { ...style, marginBottom: 0 } : style}>
                    {message}
                </p>
            ))}
        </React.Fragment>
    );
}

Messages.propTypes = {
    messages: PropTypes.arrayOf(PropTypes.string)
};

/**
 * <h3>Overview</h3>
 * Used to signal that results shown in a particular tab are outdated.
 *
 * @constructor
 * @category Utils
 * @subcategory Feedback
 * @param {Object} props - Any other props will be forwarded to the {@link AlertBadge} element.
 * @param {string[]} props.messages - Optional messages displayed in alert.
 * @returns {React.ReactElement}
 */
function OutdatedData(props) {
    const { messages, ...other } = props;

    return (
        <AlertBadge
            icon={<AlertCircle style={{height: "0.75em", width: "0.75em"}} />}
            title={
                <React.Fragment>
                    {Array.isArray(messages) && messages.length > 0 ?
                        <Messages messages={messages} />
                        :
                        <DefaultMessage />
                    }
                </React.Fragment>

            }
            severity={"error"}
            {...other}
        />
    );
}

OutdatedData.propTypes = {
    anchorOrigin: PropTypes.shape({
        horizontal: PropTypes.oneOf(["left", "right"]),
        vertical: PropTypes.oneOf(["bottom", "top"])
    }),
    badgeContent: PropTypes.node,
    children: PropTypes.node,
    classes: PropTypes.object,
    color: PropTypes.oneOf(["default", "error", "primary", "secondary"]),
    component: PropTypes.elementType,
    invisible: PropTypes.bool,
    max: PropTypes.number,
    messages: PropTypes.arrayOf(PropTypes.string),
    overlap: PropTypes.oneOf(["circle", "rectangle"]),
    severity: PropTypes.oneOf(["error", "info", "success", "warning"]),
    showZero: PropTypes.bool,
    TooltipProps: PropTypes.object,
    variant: PropTypes.oneOf(["dot", "standard"])
};

export default OutdatedData;