drf-react-by-schema 0.28.8 → 0.28.9

package/dist/components/forms/Form.js

@@ -0,0 +1,264 @@
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 axios_1 = __importDefault(require("axios"));
+const react_hook_form_1 = require("react-hook-form");
+const yup_1 = require("@hookform/resolvers/yup");
+const _types_1 = require("../../@types");
+const APIWrapperContext_1 = require("../../context/APIWrapperContext");
+const utils_1 = require("../../utils");
+const FormBySchema_1 = __importDefault(require("./FormBySchema"));
+const FormActions_1 = __importDefault(require("./FormActions"));
+const PrivateContext_1 = require("../../context/PrivateContext");
+const useDeepMemo_1 = require("../../hooks/useDeepMemo");
+const utils_2 = require("../DataGridBySchemaEditable/utils");
+const FormWatcher_1 = __importDefault(require("./FormWatcher"));
+function Form({ model, objId, defaults, objTitleField, onSave, onDelete, onCancel, navigate, exit: customExit, saveAndContinue, editPath, exitPath, title, labelSave, labelSaveAndContinue, labelSaveAndCreateNew, labelCancel, labelRemove, multiline, fieldKey, labelKey, optionsAC, setOptionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, options, isSemaphoric, label, decimalScale, fieldsLayout, customFieldFormLayouts, fieldsProps, hiddenFields, isolatedGetAutoComplete, relatedEditable, autoFocusField, elevation, CustomFormActions, extraValidators, sxRow, sxRowMultiple, sxSection, sxSectionTitle, watchValues, onWatchChange, reloadStateStamp, }) {
+    const loadingRef = (0, react_1.useRef)(false);
+    const { setFormTools } = (0, PrivateContext_1.usePrivateContext)();
+    const { pageForm, loadSinglePageData, onSubmit, formTools, resetPageForm } = (0, APIWrapperContext_1.useAPIWrapper)();
+    const formToolsRef = (0, react_1.useRef)(formTools);
+    const onSaveRef = (0, react_1.useRef)(onSave);
+    const customExitRef = (0, react_1.useRef)(customExit);
+    const methods = (0, react_hook_form_1.useForm)({
+        mode: 'onBlur',
+        // yupResolver infers against untyped base `Item`; reassert to generic `Item<T>`.
+        resolver: (pageForm === null || pageForm === void 0 ? void 0 : pageForm.validationSchema)
+            ? (0, yup_1.yupResolver)(pageForm.validationSchema)
+            : undefined,
+    });
+    const { control, handleSubmit, reset, getValues, setValue, setError, formState: { errors, isDirty }, register, watch, } = methods;
+    const stableDefaults = (0, useDeepMemo_1.useDeepMemo)(defaults);
+    const stableExtraValidators = (0, useDeepMemo_1.useDeepMemo)(extraValidators);
+    const FinalFormActions = CustomFormActions || FormActions_1.default;
+    const conditionalVisible = (0, react_1.useMemo)(() => {
+        return (0, utils_1.buildConditionalVisibleBySchema)(pageForm === null || pageForm === void 0 ? void 0 : pageForm.schema);
+    }, [pageForm === null || pageForm === void 0 ? void 0 : pageForm.schema]);
+    const watchedValues = watch(conditionalVisible.map((item) => item.source));
+    const loadData = (0, react_1.useCallback)((newId) => __awaiter(this, void 0, void 0, function* () {
+        loadingRef.current = true;
+        const values = yield loadSinglePageData({
+            model,
+            objId: newId,
+            defaults: stableDefaults,
+            objTitleField,
+            extraValidators: stableExtraValidators,
+        });
+        if (values && !axios_1.default.isAxiosError(values)) {
+            reset(values);
+        }
+        loadingRef.current = false;
+    }), [loadSinglePageData, model, stableDefaults, objTitleField, stableExtraValidators, reset]);
+    const genericNavigate = (0, react_1.useCallback)((path) => {
+        if (navigate) {
+            if (typeof path === 'string') {
+                navigate(path);
+                return;
+            }
+            navigate(path);
+            return;
+        }
+        if (typeof path === 'string') {
+            window.location.href = path;
+            return;
+        }
+        window.history.back();
+    }, [navigate]);
+    const exit = (0, react_1.useCallback)((id) => {
+        if (customExitRef.current) {
+            customExitRef.current(id);
+            return;
+        }
+        if (exitPath) {
+            genericNavigate((0, utils_2.buildExitPath)(exitPath, id));
+            return;
+        }
+        // const parentPath = window.location.pathname.replace(/\/[^\/]+\/?$/, '/');
+        // genericNavigate(parentPath);
+        genericNavigate(-1);
+    }, [exitPath, genericNavigate]);
+    const localOnSubmit = (0, react_1.useCallback)((data, event) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        const currentId = objId || (0, utils_1.getTmpId)();
+        const response = yield onSubmit(model, currentId, data, event);
+        if (axios_1.default.isAxiosError(response)) {
+            // Map DRF field validation errors (e.g. raised in a serializer's
+            // `validate()`) onto the corresponding form fields so they are shown
+            // underlined with the message right below them, just like yup errors.
+            const fieldErrors = (0, utils_1.getFieldErrorsFromResponse)((_a = response.response) === null || _a === void 0 ? void 0 : _a.data, (_b = pageForm === null || pageForm === void 0 ? void 0 : pageForm.schema) !== null && _b !== void 0 ? _b : undefined);
+            const entries = Object.entries(fieldErrors);
+            if (entries.length > 0) {
+                entries.forEach(([field, { type, message }]) => {
+                    setError(field, { type, message });
+                });
+            }
+            return;
+        }
+        const newId = response;
+        const buttonType = (event === null || event === void 0 ? void 0 : event.nativeEvent.submitter.name) || _types_1.FormSaveActions.EXIT_ON_SAVE;
+        switch (buttonType) {
+            case _types_1.FormSaveActions.SAVE_AND_CREATE_NEW:
+                loadData(undefined);
+                break;
+            case _types_1.FormSaveActions.SAVE_AND_CONTINUE:
+                reset(Object.assign(Object.assign({}, data), { id: newId }));
+                break;
+            case _types_1.FormSaveActions.EXIT_ON_SAVE:
+            default:
+                resetPageForm();
+                break;
+        }
+        // In case the user wants to do something else after saving
+        if (onSaveRef.current) {
+            onSaveRef.current(currentId, newId, buttonType);
+        }
+        const goToEdit = (id = 'novo') => {
+            const populatedEditPath = editPath
+                ? (0, utils_2.buildEditPath)(editPath, id)
+                : `${window.location.pathname.replace(/\/[^\/]+\/?$/, '/')}${id}`;
+            genericNavigate(populatedEditPath);
+        };
+        switch (buttonType) {
+            case _types_1.FormSaveActions.SAVE_AND_CREATE_NEW:
+                goToEdit();
+                break;
+            case _types_1.FormSaveActions.SAVE_AND_CONTINUE:
+                goToEdit(newId);
+                break;
+            case _types_1.FormSaveActions.EXIT_ON_SAVE:
+            default:
+                exit(newId);
+                break;
+        }
+    }), [
+        loadData,
+        model,
+        objId,
+        onSubmit,
+        pageForm,
+        reset,
+        resetPageForm,
+        exit,
+        editPath,
+        genericNavigate,
+        setError,
+    ]);
+    const updateFormTools = (0, react_1.useCallback)(() => {
+        const currentFormTools = formToolsRef.current;
+        if (!currentFormTools ||
+            currentFormTools.errors !== errors ||
+            currentFormTools.isDirty !== isDirty ||
+            currentFormTools.reset !== reset ||
+            currentFormTools.getValues !== getValues ||
+            currentFormTools.setValue !== setValue) {
+            setFormTools({
+                errors,
+                reset,
+                getValues,
+                setValue,
+                isDirty,
+            });
+        }
+    }, [errors, getValues, isDirty, reset, setFormTools, setValue]);
+    (0, react_1.useEffect)(() => {
+        loadData(objId);
+    }, [objId, loadData, reloadStateStamp]);
+    // Why was I using this useEffect???
+    // useEffect(() => {
+    //   if (!loadingRef.current && !pageForm?.model) {
+    //     loadData(objId);
+    //   }
+    // }, [objId, pageForm?.model, pageForm?.id, loadData]);
+    (0, react_1.useEffect)(() => {
+        updateFormTools();
+    }, [updateFormTools]);
+    (0, react_1.useEffect)(() => {
+        if (errors && Object.keys(errors).length > 0) {
+            console.log({ errors });
+        }
+    }, [errors]);
+    (0, react_1.useEffect)(() => {
+        const handleBeforeUnload = (event) => {
+            if (isDirty) {
+                event.preventDefault();
+                event.returnValue = '';
+                return '';
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [isDirty]);
+    (0, react_1.useEffect)(() => {
+        formToolsRef.current = formTools;
+    }, [formTools]);
+    (0, react_1.useEffect)(() => {
+        onSaveRef.current = onSave;
+    }, [onSave]);
+    (0, react_1.useEffect)(() => {
+        customExitRef.current = customExit;
+    }, [customExit]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            resetPageForm();
+        };
+    }, [resetPageForm]);
+    if (!(pageForm === null || pageForm === void 0 ? void 0 : pageForm.schema) || (pageForm === null || pageForm === void 0 ? void 0 : pageForm.model) !== model) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    return (react_1.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
+        react_1.default.createElement("form", { onSubmit: handleSubmit(localOnSubmit) },
+            react_1.default.createElement(FinalFormActions, { formDisabled: !isDirty, model: model, objId: objId, saveAndContinue: saveAndContinue, onCancel: onCancel, onDelete: onDelete, exit: exit, title: title, labelSave: labelSave, labelSaveAndContinue: labelSaveAndContinue, labelSaveAndCreateNew: labelSaveAndCreateNew, labelCancel: labelCancel, labelRemove: labelRemove }),
+            react_1.default.createElement(FormBySchema_1.default, { fieldsLayout: fieldsLayout, hiddenFields: hiddenFields, control: control, register: register, errors: errors, schema: pageForm.schema, getValues: getValues, setValue: setValue, multiline: multiline, fieldKey: fieldKey, labelKey: labelKey, optionsAC: optionsAC, setOptionsAC: setOptionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale, customFieldFormLayouts: customFieldFormLayouts, fieldsProps: fieldsProps, isolatedGetAutoComplete: isolatedGetAutoComplete, relatedEditable: relatedEditable, autoFocusField: autoFocusField, elevation: elevation, sxRow: sxRow, sxRowMultiple: sxRowMultiple, sxSection: sxSection, sxSectionTitle: sxSectionTitle, conditionalVisible: conditionalVisible, watchedValues: watchedValues }),
+            watchValues && onWatchChange && (react_1.default.createElement(FormWatcher_1.default, { 
+                // FormWatcher only uses useWatch; align control to Control<GenericValue>.
+                control: control, watch: watchValues, onChange: onWatchChange })),
+            react_1.default.createElement(FinalFormActions, { bottom: true, formDisabled: !isDirty, model: model, objId: objId, saveAndContinue: saveAndContinue, onCancel: onCancel, onDelete: onDelete, exit: exit, title: title, labelSave: labelSave, labelSaveAndContinue: labelSaveAndContinue, labelSaveAndCreateNew: labelSaveAndCreateNew, labelCancel: labelCancel, labelRemove: labelRemove }))));
+}
+exports.default = Form;

package/dist/components/forms/FormActions.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Id, TField } from '../../@types';
+export type FormActionsProps = {
+    formDisabled?: boolean;
+    model: string;
+    objId?: Id;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement>;
+    onDelete?: (removedId: Id) => void;
+    exit: (id?: Id) => void;
+    bottom?: boolean;
+    saveAndContinue?: boolean;
+    title?: string;
+    labelSave?: string;
+    labelSaveAndContinue?: string;
+    labelSaveAndCreateNew?: string;
+    labelCancel?: string;
+    labelRemove?: string;
+};
+export default function FormActions<T extends TField = void>({ formDisabled, model, objId, onCancel, onDelete, exit, bottom, saveAndContinue, title, labelSave, labelSaveAndContinue, labelSaveAndCreateNew, labelCancel, labelRemove, }: FormActionsProps): React.JSX.Element;
+//# sourceMappingURL=FormActions.d.ts.map

package/dist/components/forms/FormActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAmB,EAAE,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAI3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,EAAE,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,KAAK,IAAI,CAAC;IACnC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,EAAE,EAC3D,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,eAAe,EACf,KAAK,EACL,SAAS,EACT,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,WAAW,GACZ,EAAE,gBAAgB,qBAiHlB"}

package/dist/components/forms/FormActions.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormActions;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const styles_1 = require("@mui/material/styles");
+const styles_2 = require("../../styles");
+const utils_1 = require("../../utils");
+const _types_1 = require("../../@types");
+const APIWrapperContext_1 = require("../../context/APIWrapperContext");
+const texts_1 = require("../../styles/texts");
+function FormActions({ formDisabled, model, objId, onCancel, onDelete, exit, bottom, saveAndContinue, title, labelSave, labelSaveAndContinue, labelSaveAndCreateNew, labelCancel, labelRemove, }) {
+    const { onDeleteModel, isMobile } = (0, APIWrapperContext_1.useAPIWrapper)();
+    const texts = (0, texts_1.getThemeTexts)((0, styles_1.useTheme)());
+    const formTexts = texts.forms;
+    if (isMobile && !bottom) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    const finalSx = Object.assign(Object.assign({}, styles_2.Layout.flexRowGrow), (bottom && !(0, utils_1.isTmpId)(objId)
+        ? {
+            mb: 5,
+            pb: 2,
+            borderBottom: 'solid 1px #aaa',
+        }
+        : {}));
+    const handleDelete = () => {
+        if (objId && !(0, utils_1.isTmpId)(objId)) {
+            onDeleteModel(model, objId);
+            if (onDelete) {
+                onDelete(objId);
+            }
+            exit(objId);
+        }
+    };
+    const handleCancel = (event) => {
+        if (onCancel) {
+            onCancel(event);
+        }
+        exit(objId);
+    };
+    return (react_1.default.createElement(Box_1.default, { sx: finalSx },
+        bottom ? (react_1.default.createElement(Button_1.default, { variant: "contained", type: "button", color: "error", size: "small", disabled: (0, utils_1.isTmpId)(objId) || !onDeleteModel, onClick: handleDelete }, labelRemove || formTexts.remove)) : title ? (react_1.default.createElement(Typography_1.default, { variant: "h5" }, title)) : (react_1.default.createElement(Box_1.default, null)),
+        isMobile ? (react_1.default.createElement(Box_1.default, { sx: styles_2.Layout.flexRow },
+            react_1.default.createElement(Button_1.default, { variant: "contained", name: _types_1.FormSaveActions.EXIT_ON_SAVE, type: "submit", color: "primary", size: "small", sx: { ml: 1 }, disabled: formDisabled }, labelSave || formTexts.save))) : (react_1.default.createElement(Box_1.default, { sx: styles_2.Layout.flexRow },
+            react_1.default.createElement(Button_1.default, { variant: "contained", color: "primary", size: "small", sx: { ml: 1 }, onClick: handleCancel }, labelCancel || formTexts.cancel),
+            !isMobile && saveAndContinue && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Button_1.default, { variant: "contained", name: _types_1.FormSaveActions.SAVE_AND_CREATE_NEW, type: "submit", color: "secondary", size: "small", sx: { ml: 1 }, disabled: formDisabled }, labelSaveAndCreateNew || formTexts.saveAndCreateNew),
+                react_1.default.createElement(Button_1.default, { variant: "contained", name: _types_1.FormSaveActions.SAVE_AND_CONTINUE, type: "submit", color: "secondary", size: "small", sx: { ml: 1 }, disabled: formDisabled }, labelSaveAndContinue || formTexts.saveAndContinue))),
+            react_1.default.createElement(Button_1.default, { variant: "contained", name: _types_1.FormSaveActions.EXIT_ON_SAVE, type: "submit", color: "primary", size: "small", sx: { ml: 1 }, disabled: formDisabled }, labelSave || formTexts.save)))));
+}

package/dist/components/forms/FormBySchema.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AxiosError } from 'axios';
+import { UseFormRegister } from 'react-hook-form';
+import { AutocompleteItem, ConditionalVisible, CustomFormFieldLayouts, ExtraSxCommonFieldProps, FieldBySchemaProps, FieldsProps, FormFieldLayout, GenericValue, Item, OptionsAC, FieldKey, FieldList, TField } from '../../@types';
+type FormBySchemaProps<T extends TField = void> = Omit<FieldBySchemaProps<T>, 'name'> & {
+    fieldsLayout?: FormFieldLayout<T>[];
+    customFieldFormLayouts?: CustomFormFieldLayouts<T>;
+    hiddenFields?: FieldList<T>;
+    register?: UseFormRegister<Item<T>>;
+    setOptionsAC?: (x: OptionsAC<T>) => void;
+    isolatedGetAutoComplete?: (model: string) => Promise<AutocompleteItem[] | AxiosError>;
+    fieldsProps?: FieldsProps<T>;
+    relatedEditable?: boolean;
+    autoFocusField?: FieldKey<T>;
+    elevation?: number;
+    conditionalVisible?: ConditionalVisible[];
+    watchedValues?: GenericValue[];
+};
+export default function FormBySchema<T extends TField = void>({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, setOptionsAC, optionsModel, getOptionLabel, renderOption, onEditModel: customOnEditModel, options, isSemaphoric, label, decimalScale, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, conditionalVisible, watchedValues, fieldsProps, hiddenFields, isolatedGetAutoComplete, relatedEditable, autoFocusField, elevation, sxRow, sxRowMultiple, sxSection, sxSectionTitle, }: FormBySchemaProps<T> & Omit<ExtraSxCommonFieldProps, 'sx' | 'sxField' | 'sxLabel' | 'sxValue' | 'sxValueList' | 'sxValueListItem' | 'sxValueListItemText'>): React.JSX.Element;
+export {};
+//# sourceMappingURL=FormBySchema.d.ts.map

package/dist/components/forms/FormBySchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAiB,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAUjE,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,QAAQ,EAER,SAAS,EACT,MAAM,EACP,MAAM,cAAc,CAAC;AAQtB,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IAEtF,YAAY,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACzC,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,gBAAgB,EAAE,GAAG,UAAU,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,EAAE,EAC5D,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAgC,EAChC,KAAK,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EACP,YAAY,EACZ,KAAK,EACL,YAAgB,EAEhB,YAAY,EAAE,mBAAmB,EACjC,sBAAsB,EACtB,kBAAkB,EAClB,aAAa,EAEb,WAAW,EACX,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,cAAc,EACd,SAAS,EAKT,KAAK,EACL,aAAa,EACb,SAAS,EACT,cAAc,GAKf,EAAE,iBAAiB,CAAC,CAAC,CAAC,GACrB,IAAI,CACF,uBAAuB,EACrB,IAAI,GACJ,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,qBAAqB,CACxB,qBA8WF"}

package/dist/components/forms/FormBySchema.js

@@ -0,0 +1,280 @@
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormBySchema;
+const react_1 = __importStar(require("react"));
+const axios_1 = __importDefault(require("axios"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Card_1 = __importDefault(require("@mui/material/Card"));
+const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
+const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const styles_1 = require("../../styles");
+const APIWrapperContext_1 = require("../../context/APIWrapperContext");
+const utils_1 = require("../../utils");
+const FieldBySchema_1 = __importDefault(require("./FieldBySchema"));
+const api_1 = require("../../api");
+function FormBySchema({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, setOptionsAC, optionsModel, getOptionLabel, renderOption, onEditModel: customOnEditModel, options, isSemaphoric, label, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, conditionalVisible, watchedValues, fieldsProps, hiddenFields, isolatedGetAutoComplete, relatedEditable, autoFocusField, elevation, 
+// sx,
+// sxField,
+// sxLabel,
+sxRow, sxRowMultiple, sxSection, sxSectionTitle,
+// sxValue,
+// sxValueList,
+// sxValueListItem,
+// sxValueListItemText,
+ }) {
+    var _a;
+    const { getAutoComplete: defaulGetAutoComplete, onEditModel: defaultOnEditModel, isMobile, } = (0, APIWrapperContext_1.useAPIWrapper)();
+    const getAutoComplete = (0, react_1.useMemo)(() => isolatedGetAutoComplete || defaulGetAutoComplete, [defaulGetAutoComplete, isolatedGetAutoComplete]);
+    const onEditModel = (0, react_1.useMemo)(() => (relatedEditable === false ? undefined : customOnEditModel || defaultOnEditModel), [customOnEditModel, defaultOnEditModel, relatedEditable]);
+    const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)();
+    const defaultSx = { mr: 0 };
+    const { fieldsLayout, optionsACModels } = (0, react_1.useMemo)(() => {
+        if (!schema) {
+            return { fieldsLayout: undefined, optionsACModels: [] };
+        }
+        const newOptionsACModels = [];
+        if (fieldsLayoutInitial && fieldsLayoutInitial.length > 0) {
+            const mobileFieldsLayout = [];
+            for (const section of fieldsLayoutInitial) {
+                if (!section.rows) {
+                    continue;
+                }
+                const mobileSection = {
+                    title: section.title,
+                    rows: [],
+                };
+                for (const row of section.rows) {
+                    if (typeof row === 'string') {
+                        const field = row;
+                        const fieldSchema = schema[field];
+                        if (!fieldSchema) {
+                            console.log(`there is no schema for field ${field}!`);
+                            continue;
+                        }
+                        if (['field', 'nested object'].includes(fieldSchema.type) &&
+                            !newOptionsACModels.includes(field)) {
+                            newOptionsACModels.push(field);
+                        }
+                        if (isMobile) {
+                            mobileSection.rows.push(field);
+                        }
+                        continue;
+                    }
+                    if (Array.isArray(row)) {
+                        for (const field of row) {
+                            if (typeof field === 'string' && !(field in schema)) {
+                                console.log(`there is no schema for field ${field}!`);
+                                continue;
+                            }
+                            if (typeof field === 'string' &&
+                                ['field', 'nested object'].includes(schema[field].type) &&
+                                !newOptionsACModels.includes(field)) {
+                                newOptionsACModels.push(field);
+                            }
+                            if (isMobile && typeof field === 'string') {
+                                mobileSection.rows.push(field);
+                            }
+                        }
+                        continue;
+                    }
+                    if (newOptionsACModels.includes(row.key)) {
+                        newOptionsACModels.push(row.key);
+                    }
+                    if (isMobile) {
+                        mobileSection.rows.push(row.key);
+                    }
+                }
+                if (isMobile) {
+                    mobileFieldsLayout.push(mobileSection);
+                }
+            }
+            return {
+                fieldsLayout: isMobile ? mobileFieldsLayout : fieldsLayoutInitial,
+                optionsACModels: newOptionsACModels,
+            };
+        }
+        const rows = [];
+        for (const [key, field] of Object.entries(schema)) {
+            if (field && ['field', 'nested object'].includes(field.type)) {
+                rows.push(key);
+                if (!newOptionsACModels.includes(key)) {
+                    newOptionsACModels.push(key);
+                }
+                continue;
+            }
+            if (!(field === null || field === void 0 ? void 0 : field.read_only)) {
+                rows.push(key);
+            }
+        }
+        return { fieldsLayout: [{ rows }], optionsACModels: newOptionsACModels };
+    }, [schema, fieldsLayoutInitial, isMobile]);
+    (0, react_1.useEffect)(() => {
+        const populateOptionsACAsync = () => __awaiter(this, void 0, void 0, function* () {
+            const promises = [];
+            const fieldsToLoad = [];
+            optionsACModels.map((field) => {
+                if (!optionsAC || !(field in optionsAC)) {
+                    fieldsToLoad.push(field);
+                    promises.push(getAutoComplete(field));
+                }
+            });
+            const newOptionsAC = {};
+            const results = yield Promise.all(promises);
+            results.map((result, index) => {
+                if (!axios_1.default.isAxiosError(result)) {
+                    newOptionsAC[fieldsToLoad[index]] = result;
+                }
+            });
+            if (setOptionsAC) {
+                setOptionsAC(newOptionsAC);
+                return;
+            }
+            setLocalOptionsAC(newOptionsAC);
+        });
+        populateOptionsACAsync();
+    }, [optionsACModels, setOptionsAC]);
+    const preparedHiddenFields = (0, react_1.useMemo)(() => {
+        const values = {};
+        if (!getValues || !hiddenFields) {
+            return values;
+        }
+        for (const [key, value] of Object.entries(getValues())) {
+            if (hiddenFields.includes(key)) {
+                values[key] = value;
+            }
+        }
+        return (0, api_1.prepareDataBySchema)({ data: values, schema }).data;
+    }, [getValues, hiddenFields, schema]);
+    if (!fieldsLayout ||
+        fieldsLayout.length === 0 ||
+        (setOptionsAC && !optionsAC) ||
+        (!setOptionsAC && !localOptionsAC)) {
+        return (react_1.default.createElement(Card_1.default, { sx: sxSection ? Object.assign(Object.assign({}, styles_1.Layout.formCard), sxSection) : styles_1.Layout.formCard, elevation: elevation },
+            react_1.default.createElement(CardContent_1.default, null,
+                react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.loadingBoxWhite },
+                    react_1.default.createElement(CircularProgress_1.default, null)))));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        register &&
+            ((_a = Object.entries(preparedHiddenFields)) === null || _a === void 0 ? void 0 : _a.map(([hiddenField, preparedValue]) => {
+                return (react_1.default.createElement("input", Object.assign({ hidden: true }, register(hiddenField), { value: preparedValue, key: hiddenField })));
+            })),
+        fieldsLayout.map((section, sectionIndex) => {
+            return (react_1.default.createElement(Card_1.default, { sx: sxSection ? Object.assign(Object.assign({}, styles_1.Layout.formCard), sxSection) : styles_1.Layout.formCard, key: `section_${sectionIndex}`, elevation: elevation },
+                section.title && react_1.default.createElement(CardHeader_1.default, { title: section.title, sx: sxSectionTitle }),
+                react_1.default.createElement(CardContent_1.default, null,
+                    section.CustomElement && react_1.default.createElement(react_1.default.Fragment, null, section.CustomElement),
+                    section.rows && (react_1.default.createElement(react_1.default.Fragment, null, section.rows.map((row, rowIndex) => {
+                        if (typeof row === 'string') {
+                            if (hiddenFields === null || hiddenFields === void 0 ? void 0 : hiddenFields.includes(row)) {
+                                return null;
+                            }
+                            const field = row;
+                            const fieldProps = fieldsProps && field in fieldsProps
+                                ? fieldsProps[field]
+                                : {};
+                            if (fieldProps) {
+                                fieldProps.sx = 'sx' in fieldProps ? fieldProps.sx : defaultSx;
+                            }
+                            const isVisible = (0, utils_1.showConditionalVisibleField)(field, conditionalVisible, watchedValues);
+                            if (!isVisible) {
+                                return react_1.default.createElement(Box_1.default, { key: field, sx: sxRow });
+                            }
+                            return (react_1.default.createElement(Box_1.default, { key: field, sx: sxRow },
+                                react_1.default.createElement(FieldBySchema_1.default, Object.assign({ name: field, schema: schema, control: control, errors: errors, multiline: multiline, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index, 
+                                    // optionsAC={setOptionsAC ? optionsAC : localOptionsAC}
+                                    optionsAC: optionsAC && field in optionsAC
+                                        ? optionsAC
+                                        : localOptionsAC, 
+                                    // optionsAC: BaseOptionsAC | Partial<Record<FieldKey<T>, FieldOptionsAC>>
+                                    // optionsAC: BaseOptionsAC | Partial<Record<FieldKey<T>, FieldOptionsAC>> | undefined
+                                    optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts && field in customFieldFormLayouts
+                                        ? customFieldFormLayouts[field]
+                                        : undefined, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale, autoFocus: autoFocusField === field || (sectionIndex === 0 && rowIndex === 0) }, fieldProps))));
+                        }
+                        if (Array.isArray(row)) {
+                            return (react_1.default.createElement(Box_1.default, { sx: sxRowMultiple
+                                    ? Object.assign(Object.assign({}, styles_1.Layout.inLineForm), { sxRowMultiple })
+                                    : styles_1.Layout.inLineForm, key: `row_${rowIndex}` },
+                                react_1.default.createElement(react_1.default.Fragment, null, row.map((field, i, j) => {
+                                    if (typeof field === 'string' && (hiddenFields === null || hiddenFields === void 0 ? void 0 : hiddenFields.includes(field))) {
+                                        return null;
+                                    }
+                                    const mr = i + 1 === j.length ? 0 : 2;
+                                    const key = typeof field === 'string' ? field : field.key;
+                                    const fieldProps = fieldsProps && key in fieldsProps
+                                        ? fieldsProps[key]
+                                        : {};
+                                    if (fieldProps) {
+                                        fieldProps.sx =
+                                            'sx' in fieldProps
+                                                ? Object.assign(Object.assign({}, fieldProps.sx), { mr }) : {
+                                                mr,
+                                            };
+                                    }
+                                    const isVisible = (0, utils_1.showConditionalVisibleField)(key, conditionalVisible, watchedValues);
+                                    if (!isVisible) {
+                                        return (react_1.default.createElement(react_1.default.Fragment, { key: `field_${rowIndex}_${i}` }));
+                                    }
+                                    return (react_1.default.createElement(react_1.default.Fragment, { key: `field_${rowIndex}_${i}` }, typeof field === 'string' ? (react_1.default.createElement(FieldBySchema_1.default, Object.assign({ name: field, schema: schema, control: control, errors: errors, multiline: multiline, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index, optionsAC: optionsAC && field in optionsAC
+                                            ? optionsAC
+                                            : localOptionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale, autoFocus: autoFocusField === field ||
+                                            (sectionIndex === 0 && rowIndex === 0 && i === 0) }, fieldProps))) : (react_1.default.createElement(field.CustomElement, Object.assign({}, fieldProps)))));
+                                }))));
+                        }
+                        const fieldProps = fieldsProps && row.key in fieldsProps
+                            ? fieldsProps[row.key]
+                            : {};
+                        if (fieldProps) {
+                            fieldProps.sx = 'sx' in fieldProps ? fieldProps.sx : defaultSx;
+                        }
+                        return (react_1.default.createElement(row.CustomElement, Object.assign({ key: `customElement_row_${rowIndex}` }, fieldProps)));
+                    }))))));
+        })));
+}