@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
52 lines (51 loc) • 2.08 kB
JavaScript
import { HvTypography } from "../Typography/Typography.js";
import { useClasses } from "./EmptyState.styles.js";
import { theme } from "@hitachivantara/uikit-styles";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//#region src/EmptyState/EmptyState.tsx
/**
* Empty states communicate that there’s no information, data or values to display in a given context.
*/
var HvEmptyState = forwardRef(function HvEmptyState(props, ref) {
const { action, icon, title, message, classes: classesProp, className, ...others } = useDefaultProps("HvEmptyState", props);
const { classes, cx, css } = useClasses(classesProp);
const muiTheme = useTheme$1();
const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
const messageOnly = !!(message && !(title || action));
const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, {
component: "div",
variant,
className: style,
children: node
});
return /* @__PURE__ */ jsx("div", {
ref,
className: cx(classes.root, className),
...others,
children: /* @__PURE__ */ jsxs("div", {
className: cx(classes.container, onlyXs && css({
flexDirection: "column",
alignItems: "center",
textAlign: "center"
}), { [classes.containerMessageOnly]: messageOnly }, onlyXs && messageOnly && css({ flexDirection: "row" })),
children: [/* @__PURE__ */ jsx("div", {
className: classes.iconContainer,
children: icon
}), /* @__PURE__ */ jsxs("div", {
className: cx(classes.textContainer, upSm && css({ marginLeft: theme.space.xs })),
children: [
renderNode("title4", title, classes.titleContainer),
renderNode("body", message, classes.messageContainer),
renderNode("body", action, classes.actionContainer)
]
})]
})
});
});
//#endregion
export { HvEmptyState };