fastapi-rtk
Version:
A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.
141 lines (140 loc) • 5.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const _bundledJsonforms = require("fastapi-rtk/.bundled-jsonforms");
const constants = require("fastapi-rtk/constants");
const utils = require("fastapi-rtk/utils");
const core = require("@mantine/core");
const form = require("@mantine/form");
const hooks = require("@mantine/hooks");
const lodash = require("../_virtual/lodash.cjs");
const index = require("../../../.external/cjs/mantine-form-yup-resolver@2.0.0_@mantine_form@8.3.1_yup@1.7.0/mantine-form-yup-resolver/dist/esm/index.cjs");
const React = require("react");
const convertToFormInputs$1 = require("../ActionIcons/utils/convertToFormInputs.cjs");
const convertToFormInputs = require("../fab-react-toolkit-patch/utils/convertToFormInputs.cjs");
const useApi = require("../hooks/api/useApi.cjs");
const useForms = require("../hooks/api/useForms.cjs");
const useInfo = require("../hooks/auth/useInfo.cjs");
require("../Wrappers/Provider/Contexts/LangContext.cjs");
const CommonModal = require("../Modals/CommonModal.cjs");
const normalProps = require("../Modals/normalProps.cjs");
const overlayProps = require("../Modals/overlayProps.cjs");
const FormField = require("../Tables/DataGrid/FormField/FormField.cjs");
const useTranslation = require("../../../.external/cjs/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.cjs");
function EditDialog({
jsonForms: __jsonForms,
onSuccess,
onError,
translations,
hideWarnings,
jsonFormsProps,
...props
}) {
var _a;
const { info, refetch, refetchInfo, updateEntry } = useApi.useApi();
const { t } = useTranslation.useTranslation();
const { opened, setOpened, item, getItem, state, getState, setState, reset, view, setView } = useForms.useForms("edit");
const [loading, setLoading] = hooks.useDebouncedState(false, constants.DEBOUNCE_LOADING_DELAY);
const { jsonForms: _jsonForms } = core.useProps("EditDialog", {}, {});
const jsonForms = React.useMemo(
() => utils.deepMerge({ __: { setNull: true } }, _jsonForms, __jsonForms),
[_jsonForms, __jsonForms]
);
const mergedTranslations = React.useMemo(
() => (info == null ? void 0 : info.edit_translations) ?? translations ? utils.deepMerge(info.edit_translations, translations) : void 0,
[info == null ? void 0 : info.edit_translations, translations]
);
const { fab } = useInfo.useInfo();
const initialState = React.useMemo(
() => ({
...constants.initialState,
data: fab ? convertToFormInputs.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_schema)
}),
[fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
);
const initialStateRef = React.useRef(initialState);
React.useEffect(() => {
setState({ data: initialState.data });
initialStateRef.current = initialState;
}, [initialState, setState]);
const onSubmit = React.useCallback(
(e) => {
e == null ? void 0 : e.preventDefault();
setLoading(true);
const new_data = Object.entries(getState().data).reduce((acc, [key, value]) => {
if (lodash.lodashExports.isEqual(value, initialStateRef.current.data[key])) {
return acc;
}
acc[key] = value;
return acc;
}, {});
updateEntry(utils.getItemId(getItem()), new_data).then((res) => {
onSuccess == null ? void 0 : onSuccess(res);
if (res) {
refetch();
refetchInfo();
}
}).catch(onError).finally(() => {
setLoading(false);
setOpened(false);
});
},
[setLoading, getState, updateEntry, getItem, onError, onSuccess, refetch, refetchInfo, setOpened]
);
const form$1 = form.useForm({ initialValues: info.edit.defaultValues, validate: index.yupResolver(info.edit.schema) });
const onSubmitFunc = fab ? form$1.onSubmit((values, e) => {
setState({ data: values });
onSubmit(e);
}) : onSubmit;
React.useEffect(() => {
if (JSON.stringify(state.data) !== JSON.stringify(form$1.getValues())) {
form$1.setValues(state.data);
}
}, [state.data]);
return /* @__PURE__ */ jsxRuntime.jsx(
CommonModal.CommonModal,
{
view,
setView,
onSubmit: onSubmitFunc,
actionButtons: { withResetButton: false },
buttonText: t("Edit"),
buttonLoading: loading,
opened,
onClose: () => setOpened(false),
onExitTransitionEnd: reset,
...view === constants.VIEW_MODE.OVERLAY ? overlayProps.overlayProps : {},
...view === constants.VIEW_MODE.NORMAL ? normalProps.normalProps : {},
...props,
title: props.title ?? (info == null ? void 0 : info.edit_title),
children: fab ? (
//* Backward compatibility to fab-react-toolkit
/* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: "xs", children: (_a = info.edit.columns) == null ? void 0 : _a.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(
FormField.FormField,
{
form: form$1,
name: item2.name,
label: item2.label,
description: item2.description,
schema: item2,
withAsterisk: item2.required
},
index2
)) })
) : /* @__PURE__ */ jsxRuntime.jsx(
_bundledJsonforms.JsonFormsWithCustomizer,
{
schema: info.edit_schema,
uischema: info.edit_uischema,
data: state.data,
onChange: setState,
customizer: jsonForms,
translations: mergedTranslations,
hideWarnings,
...jsonFormsProps
}
)
}
);
}
exports.EditDialog = EditDialog;