fastapi-rtk
Version:
A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.
109 lines (108 loc) • 4.65 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { VIEW_MODE } from "fastapi-rtk/constants";
import { deepMerge, parseFromValuesOrFunc } from "fastapi-rtk/utils";
import { Icon } from "../../../.external/esm/@iconify_react@6.0.2_react@18.3.1/@iconify/react/dist/iconify.mjs";
import { Modal, Box, Group, Button, CloseButton } from "@mantine/core";
import { useInfo } from "../hooks/auth/useInfo.mjs";
import "../Wrappers/Provider/Contexts/LangContext.mjs";
import { useTranslation } from "../../../.external/esm/react-i18next@15.7.3_i18next@25.5.2_react-dom@18.3.1_react@18.3.1_typescript@5.9.2/react-i18next/dist/es/useTranslation.mjs";
function CommonModal({
children,
view,
setView,
onReset,
onSubmit,
boxProps,
resetButtonText,
buttonText,
buttonLoading,
withTitleOptions = true,
withButtons = true,
titleOptions,
actionButtons,
...props
}) {
const { fab } = useInfo();
const { t } = useTranslation();
return /* @__PURE__ */ jsx(
Modal,
{
size: "lg",
centered: true,
fullScreen: view === VIEW_MODE.FULL_SCREEN,
radius: view !== VIEW_MODE.NORMAL ? 0 : void 0,
transitionProps: view !== VIEW_MODE.NORMAL ? { transition: "fade", duration: 200 } : void 0,
...props,
title: /* @__PURE__ */ jsxs(Fragment, { children: [
props.title,
!fab && withTitleOptions && //* Backward compatibility to fab-react-toolkit
/* @__PURE__ */ jsxs(Group, { gap: "xs", pr: "xs", children: [
parseFromValuesOrFunc(titleOptions == null ? void 0 : titleOptions.left, { view, setView }),
!(titleOptions == null ? void 0 : titleOptions.hideOverlay) && /* @__PURE__ */ jsx(
CloseButton,
{
onClick: (e) => {
e == null ? void 0 : e.stopPropagation();
setView(view !== VIEW_MODE.OVERLAY ? VIEW_MODE.OVERLAY : VIEW_MODE.NORMAL);
},
title: view !== VIEW_MODE.OVERLAY ? t("Overlay") : t("Exit overlay"),
icon: /* @__PURE__ */ jsx(
Icon,
{
icon: view !== VIEW_MODE.OVERLAY ? "tabler:stack-forward" : "tabler:stack",
fontSize: "1.25rem"
}
),
...parseFromValuesOrFunc(titleOptions == null ? void 0 : titleOptions.overlayButtonProps, { view, setView })
}
),
!(titleOptions == null ? void 0 : titleOptions.hideFullScreen) && /* @__PURE__ */ jsx(
CloseButton,
{
onClick: (e) => {
e == null ? void 0 : e.stopPropagation();
setView(view !== VIEW_MODE.FULL_SCREEN ? VIEW_MODE.FULL_SCREEN : VIEW_MODE.NORMAL);
},
title: view !== VIEW_MODE.FULL_SCREEN ? t("Full screen") : t("Exit full screen"),
icon: /* @__PURE__ */ jsx(
Icon,
{
icon: view !== VIEW_MODE.FULL_SCREEN ? "tabler:maximize" : "tabler:minimize",
fontSize: "1.25rem"
}
),
...parseFromValuesOrFunc(titleOptions == null ? void 0 : titleOptions.fullScreenButtonProps, { view, setView })
}
),
parseFromValuesOrFunc(titleOptions == null ? void 0 : titleOptions.right, { view, setView })
] })
] }),
classNames: { content: "mrt-table-container" },
styles: deepMerge(props.styles, {
title: { width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }
}),
children: /* @__PURE__ */ jsxs(
Box,
{
component: "form",
pos: "relative",
display: "flex",
style: { flexDirection: "column", justifyContent: "space-between" },
onReset,
onSubmit,
...boxProps,
children: [
children,
withButtons && /* @__PURE__ */ jsxs(Group, { justify: "end", mt: "xl", ...actionButtons == null ? void 0 : actionButtons.groupProps, children: [
(actionButtons == null ? void 0 : actionButtons.withResetButton) !== false && /* @__PURE__ */ jsx(Button, { type: "reset", ...actionButtons == null ? void 0 : actionButtons.resetButtonProps, children: resetButtonText }),
(actionButtons == null ? void 0 : actionButtons.withSubmitButton) !== false && /* @__PURE__ */ jsx(Button, { type: "submit", loading: buttonLoading, ...actionButtons == null ? void 0 : actionButtons.submitButtonProps, children: buttonText })
] })
]
}
)
}
);
}
export {
CommonModal
};