fastapi-rtk
Version:
A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.
51 lines (50 loc) • 2.21 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { VIEW_MODE } from "fastapi-rtk/constants";
import { convertId, getItemId, getValue } from "fastapi-rtk/utils";
import { Tabs, Grid, Text } from "@mantine/core";
import { Fragment } from "react";
import { useForms } from "../hooks/api/useForms.mjs";
import { CommonModal } from "../Modals/CommonModal.mjs";
import { normalProps } from "../Modals/normalProps.mjs";
import { overlayProps } from "../Modals/overlayProps.mjs";
function ViewDialog({ ...props }) {
const { opened, setOpened, item, reset, view, setView } = useForms("view");
return /* @__PURE__ */ jsx(
CommonModal,
{
view,
setView,
withButtons: false,
opened,
onClose: () => setOpened(false),
onExitTransitionEnd: reset,
...view === VIEW_MODE.OVERLAY ? overlayProps : {},
...view === VIEW_MODE.NORMAL ? normalProps : {},
...props,
title: props.title ?? `${item == null ? void 0 : item.show_title} (#${convertId(getItemId(item))})`,
children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "details", children: [
/* @__PURE__ */ jsx(Tabs.List, { children: /* @__PURE__ */ jsx(Tabs.Tab, { value: "details", children: "Details" }) }),
/* @__PURE__ */ jsx(Tabs.Panel, { value: "details", children: item && /* @__PURE__ */ jsx(
TabsDisplay,
{
columns: item.show_columns,
data: item.result,
label_columns: item.label_columns,
gridProps: { pt: "md" }
}
) })
] })
}
);
}
const TabsDisplay = ({ columns, data, label_columns, gridProps }) => {
return /* @__PURE__ */ jsx(Grid, { ...gridProps, children: columns.map((column) => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Grid.Col, { span: 3, children: /* @__PURE__ */ jsx(Text, { size: "md", children: label_columns[column] }) }),
/* @__PURE__ */ jsx(Grid.Col, { span: 1, children: /* @__PURE__ */ jsx(Text, { size: "xs", children: ":" }) }),
/* @__PURE__ */ jsx(Grid.Col, { span: 8, children: /* @__PURE__ */ jsx(Text, { size: "md", children: getValue(data, column) }) })
] }, column)) });
};
export {
TabsDisplay,
ViewDialog
};