mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
40 lines (39 loc) • 2.17 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { Button, Group, Stack } from "@mantine/core";
import { FormBuilder } from "../form-builder/builder";
import { IconDeviceFloppy } from "@tabler/icons-react";
import { useCreateQuery } from "./querys";
import notify from "../../utils/notification";
const RenderCreateForm = (props) => {
const { fields, mapDefaultValue, feat, defaultValues, queryBuilder, rootConfig, disableOn, hiddenOn, navigator, requestParams, appMainPath } = props;
const memoFields = useMemo(() => fields, [fields]);
const memoCreateQuery = useMemo(() => queryBuilder?.create, [queryBuilder]);
const { mutateAsync: create, isPending } = useCreateQuery({
actionQuery: memoCreateQuery,
rootConfig,
requestParams,
});
return (_jsx(Stack, { align: "center", className: "w-full", children: _jsx(FormBuilder, { httpGet: requestParams.httpGet, getBaseUrl: requestParams.getBaseUrl, fields: memoFields, disabledFields: disableOn?.create, hiddenFields: hiddenOn?.create, isLoading: isPending, values: defaultValues, mapDefaultValue: mapDefaultValue, wrapperProps: {
className: "bg-[var(--card)] p-10 rounded-md h-full w-full relative",
mih: 200,
maw: 800,
p: "xl",
}, onSubmit: async (values) => await create(values)
.then((data) => {
notify({
type: "success",
message: data?.message ?? "Data Add succsfuly",
});
navigator(`${appMainPath}/${feat}/list`);
})
.catch((error) => {
const message = error?.data?.message ?? "Error on adding data";
notify({
type: "error",
message: message,
});
}), children: _jsx(Group, { justify: "end", children: _jsx(Button, { radius: "sm", size: "xs", w: 80, type: "submit", leftSection: _jsx(IconDeviceFloppy, { size: 14 }), loading: isPending, children: "Save" }) }) }) }));
};
export default RenderCreateForm;