drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
96 lines (95 loc) • 4.38 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_hook_form_1 = require("react-hook-form");
const yup_1 = require("@hookform/resolvers/yup");
const Box_1 = __importDefault(require("@mui/material/Box"));
const FormButtons_1 = __importDefault(require("../components/FormButtons"));
const APIWrapperContext_1 = require("./APIWrapperContext");
const utils_1 = require("../utils");
const DRFReactBySchemaContext_1 = require("./DRFReactBySchemaContext");
const FormContext_1 = require("./FormContext");
function Form({ model, id, objTitleField = 'name', optionsACModels = [], cancelBtn, cancelBtnLabel, deleteBtnLabel, saveAndCreateNewBtnLabel, saveAndContinueBtnLabel, saveBtnLabel, onSuccess, borderBottom, saveAndContinue, formButtonsSx, children, }) {
const apiContext = react_1.default.useContext(APIWrapperContext_1.APIWrapperContext);
const context = react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext);
if (!context.serverEndPoint || !apiContext) {
console.error('Error in drf-react-by-schema: There is no serverEndPoint configured!');
return react_1.default.createElement(react_1.default.Fragment, null);
}
const { loadSinglePageData, onSubmit, onEditModel, onDeleteModel, onEditRelatedModelSave, onDeleteRelatedModel, } = apiContext;
const pageForm = apiContext.pageFormState[0];
const optionsAC = apiContext.optionsACState[0];
const { control, handleSubmit, reset, getValues, setValue, formState: { errors, isDirty }, } = (0, react_hook_form_1.useForm)({
mode: 'onBlur',
resolver: (0, yup_1.yupResolver)(pageForm.validationSchema),
});
const loadAllData = () => {
loadSinglePageData({
model,
objTitleField,
objId: id,
optionsACModels,
}).then((values) => {
if (values && typeof values !== 'boolean') {
reset(values);
}
});
};
(0, react_1.useEffect)(() => {
loadAllData();
}, [id]);
const formButtonProps = {
model,
objId: id,
title: (0, utils_1.isTmpId)(id) ? 'Novo' : 'Editar',
formDisabled: !isDirty,
cancelBtn,
cancelBtnLabel,
deleteBtnLabel,
saveAndCreateNewBtnLabel,
saveAndContinueBtnLabel,
saveBtnLabel,
onSuccess,
borderBottom,
saveAndContinue,
sx: formButtonsSx,
};
// onSubmit={handleSubmit((data, event) => {
// onSubmit(
// model,
// id,
// data,
// event
// );
return (react_1.default.createElement(react_1.default.Fragment, null, pageForm.initialValues && pageForm.schema && control && (react_1.default.createElement(FormContext_1.FormContext.Provider, { value: null },
react_1.default.createElement(FormButtons_1.default, Object.assign({}, formButtonProps)),
react_1.default.createElement(Box_1.default, null, children),
react_1.default.createElement(FormButtons_1.default, Object.assign({}, formButtonProps, { bottom: true }))))));
}
exports.default = Form;