@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
148 lines (147 loc) • 5.52 kB
JavaScript
"use client";
import Icon from "../../Icon/Icon.mjs";
import { extraHeaderVariants, extraVariants, integratedVariants, rootVariants, styles, toneVariants } from "./style.mjs";
import { memo, useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { AlertTriangle, CheckCircle, ChevronRight, Info, X, XCircle } from "lucide-react";
//#region src/base-ui/Alert/Alert.tsx
const typeIcons = {
error: XCircle,
info: Info,
secondary: AlertTriangle,
success: CheckCircle,
warning: AlertTriangle
};
const Alert = memo(({ action, afterClose, banner = false, className, classNames, closable = false, closeIcon, closeText, colorfulText = false, description, extra, extraDefaultExpand = false, extraIsolate = false, glass = false, icon, iconProps, message, onClose, ref, role = "alert", rootClassName, showIcon = true, style, styles: customStyles, text, title, type = "info", variant = "soft", ...rest }) => {
const [closed, setClosed] = useState(false);
const [extraExpanded, setExtraExpanded] = useState(extraDefaultExpand);
const resolvedTitle = title ?? message;
const hasDescription = description !== void 0 && description !== null;
const integratedExtra = Boolean(extra && !extraIsolate);
const closeConfig = typeof closable === "object" ? closable : {};
const isClosable = Boolean(closable);
const { afterClose: configuredAfterClose, closeIcon: configuredCloseIcon, className: closeClassName, disabled: closeDisabled, onClose: configuredOnClose, style: closeStyle, ...closeButtonProps } = closeConfig;
const afterCloseRef = useRef(configuredAfterClose ?? afterClose);
afterCloseRef.current = configuredAfterClose ?? afterClose;
useEffect(() => {
if (closed) afterCloseRef.current?.();
}, [closed]);
if (closed) return null;
const handleClose = (event) => {
(configuredOnClose ?? onClose)?.(event);
setClosed(true);
};
const root = /* @__PURE__ */ jsxs("div", {
...rest,
"data-alert-type": type,
"data-alert-variant": variant,
ref,
role,
className: cx(toneVariants({ type }), rootVariants({
banner,
colorfulText,
glass: integratedExtra ? false : glass,
hasDescription,
hasExtra: integratedExtra,
variant
}), classNames?.root, classNames?.alert, rootClassName, className),
style: {
...style,
...customStyles?.root,
...customStyles?.alert
},
children: [
showIcon && /* @__PURE__ */ jsx("span", {
"aria-hidden": "true",
className: cx(styles.icon, classNames?.icon),
style: customStyles?.icon,
children: /* @__PURE__ */ jsx(Icon, {
icon: icon ?? typeIcons[type],
size: hasDescription ? 20 : 18,
...iconProps
})
}),
/* @__PURE__ */ jsxs("div", {
className: cx(styles.content, classNames?.section, classNames?.content),
style: {
...customStyles?.section,
...customStyles?.content
},
children: [resolvedTitle !== void 0 && resolvedTitle !== null && /* @__PURE__ */ jsx("div", {
style: customStyles?.title,
className: cx(styles.title, hasDescription && styles.titleDetailed, classNames?.title),
children: resolvedTitle
}), hasDescription && /* @__PURE__ */ jsx("div", {
className: cx(styles.description, classNames?.description),
style: customStyles?.description,
children: description
})]
}),
action && /* @__PURE__ */ jsx("div", {
className: cx(styles.action, styles.wrappedAction, classNames?.action),
style: customStyles?.action,
children: action
}),
isClosable && /* @__PURE__ */ jsx("button", {
...closeButtonProps,
"aria-label": closeButtonProps["aria-label"] ?? "Close alert",
className: cx(styles.close, classNames?.close, closeClassName),
disabled: closeDisabled,
style: {
...customStyles?.close,
...closeStyle
},
type: "button",
onClick: handleClose,
children: configuredCloseIcon ?? closeIcon ?? closeText ?? /* @__PURE__ */ jsx(X, { size: 14 })
})
]
});
if (!extra) return root;
if (extraIsolate) return /* @__PURE__ */ jsxs("div", {
className: cx(styles.container, toneVariants({ type }), classNames?.container),
style: {
gap: 8,
...customStyles?.container
},
children: [root, extra]
});
return /* @__PURE__ */ jsxs("div", {
style: customStyles?.container,
className: cx(styles.container, toneVariants({ type }), integratedVariants({
banner,
glass,
variant
}), classNames?.container),
children: [root, /* @__PURE__ */ jsx("div", {
className: cx(extraVariants({
banner,
variant
}), classNames?.extra),
style: customStyles?.extra,
children: /* @__PURE__ */ jsxs("details", {
open: extraExpanded,
onToggle: (event) => setExtraExpanded(event.currentTarget.open),
children: [/* @__PURE__ */ jsxs("summary", {
className: cx(extraHeaderVariants({ variant }), classNames?.extraHeader),
style: customStyles?.extraHeader,
children: [/* @__PURE__ */ jsx(ChevronRight, {
"aria-hidden": "true",
className: cx(styles.extraIndicator, classNames?.extraIndicator),
size: 14,
style: customStyles?.extraIndicator
}), /* @__PURE__ */ jsx("span", { children: text?.detail ?? "Show Details" })]
}), /* @__PURE__ */ jsx("div", {
className: cx(styles.extraContent, classNames?.extraContent),
style: customStyles?.extraContent,
children: extra
})]
})
})]
});
});
Alert.displayName = "BaseAlert";
//#endregion
export { Alert as default };
//# sourceMappingURL=Alert.mjs.map