@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
102 lines (101 loc) • 4.05 kB
JavaScript
"use client";
import { getSize } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { EmptyStateProvider } from "./EmptyState.context.mjs";
import EmptyState_module_default from "./EmptyState.module.mjs";
import { EmptyStateActions } from "./EmptyStateActions/EmptyStateActions.mjs";
import { EmptyStateDescription } from "./EmptyStateDescription/EmptyStateDescription.mjs";
import { EmptyStateIndicator } from "./EmptyStateIndicator/EmptyStateIndicator.mjs";
import { EmptyStateTitle } from "./EmptyStateTitle/EmptyStateTitle.mjs";
import { Children, Fragment, isValidElement } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/EmptyState/EmptyState.tsx
const defaultProps = {
size: "md",
align: "center"
};
function flattenChildren(children) {
const flat = [];
const collect = (nodes) => {
Children.forEach(nodes, (child) => {
if (isValidElement(child) && child.type === Fragment) collect(child.props.children);
else flat.push(child);
});
};
collect(children);
return Children.toArray(flat);
}
const varsResolver = createVarsResolver((theme, { size, variant, color }) => {
const colors = variant ? theme.variantColorResolver({
color: color || theme.primaryColor,
theme,
variant
}) : null;
return { root: {
"--empty-state-indicator-size": getSize(size, "empty-state-indicator-size"),
"--empty-state-gap": getSize(size, "empty-state-gap"),
"--empty-state-title-fz": getSize(size, "empty-state-title-fz"),
"--empty-state-description-fz": getSize(size, "empty-state-description-fz"),
"--empty-state-indicator-bg": colors ? colors.background : void 0,
"--empty-state-indicator-color": colors ? colors.color : void 0
} };
});
const EmptyState = factory((_props) => {
const props = useProps("EmptyState", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, align, variant, color, title, description, icon, withIndicatorBackground, children, mod, attributes, ...others } = props;
const getStyles = useStyles({
name: "EmptyState",
classes: EmptyState_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const bodyChildren = [];
let childrenIndicator = null;
flattenChildren(children).forEach((child) => {
if (isValidElement(child) && (child.type === EmptyStateIndicator || child.type?.displayName === "@mantine/core/EmptyStateIndicator")) childrenIndicator = child;
else bodyChildren.push(child);
});
const indicator = icon ? /* @__PURE__ */ jsx(EmptyStateIndicator, { children: icon }) : childrenIndicator;
const hasBody = title != null || description != null || bodyChildren.length > 0;
return /* @__PURE__ */ jsx(EmptyStateProvider, {
value: {
getStyles,
withIndicatorBackground: withIndicatorBackground || !!variant
},
children: /* @__PURE__ */ jsxs(Box, {
...getStyles("root", { variant }),
variant,
mod: [{ align }, mod],
...others,
children: [indicator, hasBody && /* @__PURE__ */ jsxs("div", {
...getStyles("body"),
children: [
title && /* @__PURE__ */ jsx(EmptyStateTitle, { children: title }),
description && /* @__PURE__ */ jsx(EmptyStateDescription, { children: description }),
bodyChildren
]
})]
})
});
});
EmptyState.classes = EmptyState_module_default;
EmptyState.varsResolver = varsResolver;
EmptyState.displayName = "@mantine/core/EmptyState";
EmptyState.Indicator = EmptyStateIndicator;
EmptyState.Title = EmptyStateTitle;
EmptyState.Description = EmptyStateDescription;
EmptyState.Actions = EmptyStateActions;
//#endregion
export { EmptyState };
//# sourceMappingURL=EmptyState.mjs.map