@re-flex/ui/Alert/index.js

Re-Flex ui library

import { parseColor, useThemingCss } from "@re-flex/styles";
import clsx from "clsx";
import { darken, lighten, toHex } from "color2k";
import React, { useMemo } from "react";
import Stack from "../Stack";
import { SysIconsError, SysIconsInformation, SysIconsSuccess, SysIconsWarning, } from "../SystemIcons";
import Text from "../Typography";
const getIcon = (priorty) => {
    switch (priorty) {
        case "error":
            return React.createElement(SysIconsError, null);
        case "warning":
            return React.createElement(SysIconsWarning, null);
        case "success":
            return React.createElement(SysIconsSuccess, null);
        case "info":
            return React.createElement(SysIconsInformation, null);
        default:
            return null;
            break;
    }
};
const Alert = ({ children, title, icon, action, stackProps = {}, priorty = "default", variant = "standart", }) => {
    const sxCss = useThemingCss();
    const alertProps = useMemo(() => {
        const initialClasses = sxCss({
            py: 1,
            px: 2,
            my: 1,
            borderRadius: 0.5,
            userSelect: "none",
            svg: {
                fontSize: "calc(100% + .5rem)",
            },
            ".alert-content": {
                flexGrow: "1",
            },
        });
        let props = stackProps;
        let classes = [
            props?.className,
            initialClasses,
            sxCss({ alignItems: !!title ? "flex-start" : "center" }),
        ];
        let colorRules = {};
        let priortyColor = String(priorty);
        switch (variant) {
            case "standart":
                if (priorty === "default")
                    priortyColor = "background.paper";
                let { primaryColor } = parseColor(priortyColor);
                colorRules.bgColor = toHex(darken(primaryColor, 0.38));
                colorRules.color = toHex(lighten(colorRules.bgColor, 0.8));
                colorRules.svg = {
                    color: primaryColor,
                };
                break;
            case "filled":
                if (priorty === "default")
                    priortyColor = "background.paper";
                colorRules.bgColor = priortyColor;
                if (priorty !== "default")
                    colorRules.color = `${priortyColor}.contrastText`;
                break;
            case "outlined":
                if (priorty === "default")
                    priortyColor = "text.primary";
                colorRules.color = priortyColor;
                colorRules.border = "1px solid currentcolor";
                break;
        }
        classes.push(sxCss(colorRules));
        props.className = clsx(...classes);
        return props;
    }, [title, priorty, variant, stackProps]);
    icon = icon || getIcon(priorty);
    return (React.createElement(Stack, { direction: "row", spacing: 1.5, role: "alert", ...stackProps, ...alertProps },
        icon,
        React.createElement("div", { className: "alert-content", role: "group" },
            !!title && (React.createElement(Text, { component: "h5", variant: "subtitle1", className: sxCss({ mb: 0.5, fontWeight: "600" }) }, title)),
            React.createElement(Text, { component: "span", variant: "subtitle1", sx: { mb: 0 } }, children)),
        action));
};
export default Alert;