@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
52 lines (51 loc) • 1.56 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useMantineTheme, Modal } from "@mantine/core";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { Heading } from "../heading/Heading.js";
import { Text } from "../text/Text.js";
import { useDialogState } from "../../state/components/dialog/useDialogState.js";
import { useComponentId } from "../../state/components/useId.js";
const Dialog = ({
defaultOpened,
id: propId,
...props
}) => {
const id = useComponentId(propId);
const {
opened,
close
} = useDialogState(id, {
initialState: {
opened: props.opened ?? defaultOpened
}
});
return /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: Dialog.displayName, children: /* @__PURE__ */ jsx(DialogComponent, { opened, onClose: close, ...props }) });
};
Dialog.displayName = "Dialog";
const DialogComponent = ({
padding = "lg",
size = "md",
radius = "lg",
title,
children,
trapFocus = true,
...props
}) => {
const theme = useMantineTheme();
let t = title;
if (typeof t === "string") {
t = /* @__PURE__ */ jsx(Heading, { level: 5, style: {
margin: 0
}, children: t });
}
let body = children;
if (typeof body === "string") {
body = /* @__PURE__ */ jsx(Text, { children: body });
}
return /* @__PURE__ */ jsx(Modal, { padding, size, radius, title: t, overlayOpacity: 0.75, overlayColor: theme.colors.gray[5], trapFocus, ...props, children: body });
};
export {
Dialog,
DialogComponent
};
//# sourceMappingURL=Dialog.js.map