@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
130 lines (129 loc) • 4.42 kB
JavaScript
import { HvIcon } from "../icons.js";
import { HvButton } from "../Button/Button.js";
import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
import { HvStatusIcon } from "../StatusIcon/StatusIcon.js";
import { iconVariant } from "./iconVariant.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import SnackbarContent from "@mui/material/SnackbarContent";
//#region src/utils/Callout.tsx
var { useClasses } = createClasses("HvCallout", {
root: {
position: "relative",
boxShadow: "none",
flexWrap: "nowrap",
borderRadius: theme.radii.round,
alignItems: "center",
"&[data-size='large']": { padding: theme.space.sm },
"&[data-size='regular']": { padding: theme.space.xs },
"&[data-size='micro']": { padding: 0 }
},
success: { backgroundColor: theme.colors.positiveDimmed },
warning: { backgroundColor: theme.colors.warningDimmed },
error: { backgroundColor: theme.colors.negativeDimmed },
info: { backgroundColor: theme.colors.infoDimmed },
accent: { backgroundColor: theme.colors.accentDimmed },
default: { backgroundColor: theme.colors.infoDimmed },
message: {
display: "flex",
alignItems: "center",
padding: 0,
color: theme.colors.textDark,
width: "100%"
},
messageContent: {
textWrap: "balance",
overflow: "hidden",
wordBreak: "break-word"
},
messageIcon: {},
messageTitle: {
display: "block",
fontWeight: theme.fontWeights.semibold
},
action: { marginRight: 0 },
actionContent: {
display: "flex",
flexDirection: "column",
height: "100%",
justifyContent: "space-between",
gap: theme.space.xs,
alignItems: "flex-start"
},
actionCustom: { flex: "0 0 auto" },
actionClose: { alignSelf: "flex-end" }
});
var getIconSize = (size) => {
switch (size) {
case "large": return "md";
case "toast": return "xs";
default: return "sm";
}
};
/**
* `HvCallout` is the internal content handler for the snackbars and banners. Might be promoted to a component.
* @private @internal
*/
var HvCallout = forwardRef(function HvCallout(props, ref) {
const { id, classes: classesProp, className, title, showClose, showIcon, customIcon, variant = "default", onClose, actions, onAction, actionsPosition: actionsPositionProp = "auto", children, actionProps, size = "regular", ...others } = useDefaultProps("HvCallout", props);
const { classes, cx } = useClasses(classesProp, false);
const { activeTheme } = useTheme();
const icon = customIcon || showIcon && iconVariant(variant);
const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
const actionsContent = /* @__PURE__ */ jsx(HvActionsGeneric, {
id,
className: classes.actionCustom,
variant: activeTheme?.snackbar.actionButtonVariant,
actions,
onAction,
style: { marginTop: actionsPosition === "bottom-right" ? "auto" : void 0 }
});
const showCustomActions = actions && actionsPosition === "bottom-right";
return /* @__PURE__ */ jsx(SnackbarContent, {
ref,
id,
classes: {
root: cx(classes.root, classes[variant], className),
message: classes.message,
action: classes.action
},
"data-size": size,
message: /* @__PURE__ */ jsxs(Fragment$1, { children: [
icon && /* @__PURE__ */ jsx(HvStatusIcon, {
size: getIconSize(size),
className: classes.messageIcon,
variant: variant === "default" ? "info" : variant,
customIcon
}),
/* @__PURE__ */ jsxs("div", {
className: classes.messageContent,
children: [title && /* @__PURE__ */ jsx("b", {
className: classes.messageTitle,
children: title
}), children]
}),
/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
actions && actionsPosition === "inline" && actionsContent
] }),
action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", {
className: classes.actionContent,
children: [showClose && /* @__PURE__ */ jsx(HvButton, {
icon: true,
className: classes.actionClose,
variant: "semantic",
"aria-label": "Close",
onClick: (evt) => onClose?.(evt, "clickaway"),
...actionProps,
children: /* @__PURE__ */ jsx(HvIcon, {
size: "xs",
name: "Close"
})
}), showCustomActions && actionsContent]
}),
...others
});
});
//#endregion
export { HvCallout };