@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
102 lines (101 loc) • 4.75 kB
JavaScript
"use client";
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_EmptyState_context = require("./EmptyState.context.cjs");
const require_EmptyState_module = require("./EmptyState.module.cjs");
const require_EmptyStateActions = require("./EmptyStateActions/EmptyStateActions.cjs");
const require_EmptyStateDescription = require("./EmptyStateDescription/EmptyStateDescription.cjs");
const require_EmptyStateIndicator = require("./EmptyStateIndicator/EmptyStateIndicator.cjs");
const require_EmptyStateTitle = require("./EmptyStateTitle/EmptyStateTitle.cjs");
let react = require("react");
let react_jsx_runtime = require("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) => {
react.Children.forEach(nodes, (child) => {
if ((0, react.isValidElement)(child) && child.type === react.Fragment) collect(child.props.children);
else flat.push(child);
});
};
collect(children);
return react.Children.toArray(flat);
}
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { size, variant, color }) => {
const colors = variant ? theme.variantColorResolver({
color: color || theme.primaryColor,
theme,
variant
}) : null;
return { root: {
"--empty-state-indicator-size": require_get_size.getSize(size, "empty-state-indicator-size"),
"--empty-state-gap": require_get_size.getSize(size, "empty-state-gap"),
"--empty-state-title-fz": require_get_size.getSize(size, "empty-state-title-fz"),
"--empty-state-description-fz": require_get_size.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 = require_factory.factory((_props) => {
const props = require_use_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 = require_use_styles.useStyles({
name: "EmptyState",
classes: require_EmptyState_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const bodyChildren = [];
let childrenIndicator = null;
flattenChildren(children).forEach((child) => {
if ((0, react.isValidElement)(child) && (child.type === require_EmptyStateIndicator.EmptyStateIndicator || child.type?.displayName === "@mantine/core/EmptyStateIndicator")) childrenIndicator = child;
else bodyChildren.push(child);
});
const indicator = icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmptyStateIndicator.EmptyStateIndicator, { children: icon }) : childrenIndicator;
const hasBody = title != null || description != null || bodyChildren.length > 0;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmptyState_context.EmptyStateProvider, {
value: {
getStyles,
withIndicatorBackground: withIndicatorBackground || !!variant
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
...getStyles("root", { variant }),
variant,
mod: [{ align }, mod],
...others,
children: [indicator, hasBody && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...getStyles("body"),
children: [
title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmptyStateTitle.EmptyStateTitle, { children: title }),
description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmptyStateDescription.EmptyStateDescription, { children: description }),
bodyChildren
]
})]
})
});
});
EmptyState.classes = require_EmptyState_module.default;
EmptyState.varsResolver = varsResolver;
EmptyState.displayName = "@mantine/core/EmptyState";
EmptyState.Indicator = require_EmptyStateIndicator.EmptyStateIndicator;
EmptyState.Title = require_EmptyStateTitle.EmptyStateTitle;
EmptyState.Description = require_EmptyStateDescription.EmptyStateDescription;
EmptyState.Actions = require_EmptyStateActions.EmptyStateActions;
//#endregion
exports.EmptyState = EmptyState;
//# sourceMappingURL=EmptyState.cjs.map