fastapi-rtk
Version:
A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.
116 lines (115 loc) • 4.36 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { JsonFormsWithCustomizer } from "fastapi-rtk/.bundled-jsonforms";
import { DEBOUNCE_LOADING_DELAY, VIEW_MODE } from "fastapi-rtk/constants";
import { deepMerge } from "fastapi-rtk/utils";
import { useProps, Stack } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useDebouncedState } from "@mantine/hooks";
import { yupResolver } from "../../../.external/esm/mantine-form-yup-resolver@2.0.0_@mantine_form@8.3.1_yup@1.7.0/mantine-form-yup-resolver/dist/esm/index.mjs";
import { useMemo, useCallback, useEffect } from "react";
import { useApi } from "../hooks/api/useApi.mjs";
import { useForms } from "../hooks/api/useForms.mjs";
import { useInfo } from "../hooks/auth/useInfo.mjs";
import "../Wrappers/Provider/Contexts/LangContext.mjs";
import { CommonModal } from "../Modals/CommonModal.mjs";
import { normalProps } from "../Modals/normalProps.mjs";
import { overlayProps } from "../Modals/overlayProps.mjs";
import { FormField } from "../Tables/DataGrid/FormField/FormField.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 AddDialog({
jsonForms: __jsonForms,
onSuccess,
onError,
translations,
hideWarnings,
jsonFormsProps,
...props
}) {
var _a;
const { info, refetch, refetchInfo, addEntry } = useApi();
const { t } = useTranslation();
const { opened, setOpened, state, getState, setState, reset, view, setView } = useForms("add");
const [loading, setLoading] = useDebouncedState(false, DEBOUNCE_LOADING_DELAY);
const { jsonForms: _jsonForms } = useProps("AddDialog", {}, {});
const jsonForms = useMemo(() => deepMerge(_jsonForms, __jsonForms), [_jsonForms, __jsonForms]);
const mergedTranslations = useMemo(
() => (info == null ? void 0 : info.add_translations) ?? translations ? deepMerge(info.add_translations, translations) : void 0,
[info == null ? void 0 : info.add_translations, translations]
);
const onSubmit = useCallback(
(e) => {
e == null ? void 0 : e.preventDefault();
setLoading(true);
addEntry(getState().data).then((res) => {
onSuccess == null ? void 0 : onSuccess(res);
if (res) {
refetch();
refetchInfo();
}
}).catch(onError).finally(() => {
setLoading(false);
setOpened(false);
});
},
[addEntry, getState, onError, onSuccess, refetch, refetchInfo, setLoading, setOpened]
);
const { fab } = useInfo();
const form = useForm({ initialValues: info.add.defaultValues, validate: yupResolver(info.add.schema) });
const onSubmitFunc = fab ? form.onSubmit((values, e) => {
setState({ data: values });
onSubmit(e);
}) : onSubmit;
useEffect(() => {
if (JSON.stringify(state.data) !== JSON.stringify(form.getValues())) {
form.setValues(state.data);
}
}, [state.data]);
return /* @__PURE__ */ jsx(
CommonModal,
{
view,
setView,
onSubmit: onSubmitFunc,
actionButtons: { withResetButton: false },
buttonText: t("Add"),
buttonLoading: loading,
opened,
onClose: () => setOpened(false),
onExitTransitionEnd: reset,
...view === VIEW_MODE.OVERLAY ? overlayProps : {},
...view === VIEW_MODE.NORMAL ? normalProps : {},
...props,
title: props.title ?? (info == null ? void 0 : info.add_title),
children: fab ? (
//* Backward compatibility to fab-react-toolkit
/* @__PURE__ */ jsx(Stack, { gap: "xs", children: (_a = info.add.columns) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ jsx(
FormField,
{
form,
name: item.name,
label: item.label,
description: item.description,
schema: item,
withAsterisk: item.required
},
index
)) })
) : /* @__PURE__ */ jsx(
JsonFormsWithCustomizer,
{
schema: info.add_schema,
uischema: info.add_uischema,
data: state.data,
onChange: setState,
customizer: jsonForms,
translations: mergedTranslations,
hideWarnings,
...jsonFormsProps
}
)
}
);
}
export {
AddDialog
};