drf-react-by-schema 0.15.5 → 0.16.0

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SxProps } from '@mui/material';
-import { GenericValue, OptionsAC } from '../../utils';
+import { FormFieldLayout, GenericValue, OptionsAC } from '../../utils';
 import { GridEnrichedBySchemaColDef } from '../../utils';
 import { OnEditModelType } from '../../context/APIWrapperContext';
 interface SelectEditInputCellProps {
@@ -13,7 +13,8 @@ interface SelectEditInputCellProps {
     isIndexField: boolean;
     multiple?: boolean;
     onEditModel?: (x: OnEditModelType) => void;
+    fieldsLayout?: FormFieldLayout[];
     sx?: SxProps;
 }
-export declare function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple, onEditModel, sx, }: SelectEditInputCellProps): JSX.Element;
+export declare function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple, onEditModel, fieldsLayout, sx, }: SelectEditInputCellProps): JSX.Element;
 export {};

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js

@@ -44,7 +44,7 @@ const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
 const Autocomplete_1 = __importStar(require("@mui/material/Autocomplete"));
 const utils_1 = require("../../utils");
 const filter = (0, Autocomplete_1.createFilterOptions)();
-function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple = false, onEditModel, sx = {}, }) {
+function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple = false, onEditModel, fieldsLayout, sx = {}, }) {
     // TODO: allow edit option label, as in formautocomplete!
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
     const handleChange = (newValue) => __awaiter(this, void 0, void 0, function* () {
@@ -123,6 +123,7 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
                                 model: field,
                                 id: value[valueKey],
                                 labelKey,
+                                fieldsLayout,
                             });
                         } },
                         react_1.default.createElement(Edit_1.default, null))),

package/dist/components/DataGridBySchemaEditable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GridRowId, GridRenderCellParams } from '@mui/x-data-grid';
 import { SxProps } from '@mui/material';
-import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel, ActionType, OnSelectActions, OptionsAC } from '../utils';
+import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel, ActionType, OnSelectActions, OptionsAC, FormFieldLayout } from '../utils';
 import { OnEditModelType } from '../context/APIWrapperContext';
 interface DataGridBySchemaEditableProps {
     schema: SchemaType;
@@ -24,6 +24,7 @@ interface DataGridBySchemaEditableProps {
     modelParentId?: Id;
     modelParent?: string;
     customColumnOperations?: (p: GridEnrichedBySchemaColDef) => GridEnrichedBySchemaColDef | Promise<GridEnrichedBySchemaColDef>;
+    customFieldFormLayouts?: Record<string, FormFieldLayout[]>;
     customLinkDestination?: (p: GridRenderCellParams) => string;
     LinkComponent?: any;
     onProcessRow?: (p: Item) => void;

package/dist/components/DataGridBySchemaEditable.js

@@ -63,7 +63,7 @@ const BooleanInputCell_1 = require("./DataGridBySchemaEditable/BooleanInputCell"
 const FooterToolbar_1 = require("./DataGridBySchemaEditable/FooterToolbar");
 const ConfirmDialog_1 = require("./DataGridBySchemaEditable/ConfirmDialog");
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
-const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCount = 0, columns, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], optionsAC: optionsACExternal, }, ref) => {
+const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCount = 0, columns, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customFieldFormLayouts, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], optionsAC: optionsACExternal, }, ref) => {
     const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const apiContext = (0, APIWrapperContext_1.useAPIWrapper)();
     const initialSnackBar = {
@@ -87,6 +87,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
     const processingRow = (0, react_1.useRef)(null);
     const idToRemove = (0, react_1.useRef)(null);
     const visibleRows = (0, react_1.useRef)('');
+    if (!onEditModel) {
+        onEditModel = apiContext.onEditModel;
+    }
     const updateOptionsAC = () => __awaiter(void 0, void 0, void 0, function* () {
         optionsAC.current = {};
         for (const col of columns) {
@@ -258,7 +261,10 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
                         column.sortComparator = (v1, v2, param1, param2) => {
                             return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2);
                         };
-                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC.current, isIndexField: isIndexField, onEditModel: onEditModel })));
+                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC.current, isIndexField: isIndexField, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts &&
+                                col.field in customFieldFormLayouts
+                                ? customFieldFormLayouts[col.field]
+                                : undefined })));
                         break;
                     }
                     column.valueGetter = (params) => {
@@ -653,7 +659,6 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
             newRow: editedRow,
             schema,
         });
-        console.log(response);
         setDataGridLoading(false);
         if (response !== false) {
             updateOptionsAC();

package/dist/components/GenericModelList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GridFilterModel, GridRenderCellParams } from '@mui/x-data-grid';
-import { GridEnrichedBySchemaColDef, ActionType, Item, OnSelectActions, OptionsAC } from '../utils';
+import { GridEnrichedBySchemaColDef, ActionType, Item, OnSelectActions, OptionsAC, FormFieldLayout } from '../utils';
 import { SumRowsType } from '../api';
 interface GenericModelListProps {
     model: string;
@@ -15,6 +15,7 @@ interface GenericModelListProps {
     addExistingModel?: string;
     onProcessRow?: (p: Item) => void;
     customColumnOperations?: (column: GridEnrichedBySchemaColDef) => GridEnrichedBySchemaColDef | Promise<GridEnrichedBySchemaColDef>;
+    customFieldFormLayouts?: Record<string, FormFieldLayout[]>;
     customLinkDestination?: (p: GridRenderCellParams) => string;
     isEditable?: boolean;
     hasBulkSelect?: boolean;
@@ -34,5 +35,5 @@ interface GenericModelListProps {
     optionsAC?: OptionsAC;
     disableScreenLoading?: boolean;
 }
-declare const GenericModelList: ({ model, columnFields, hiddenFields, creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, customColumnOperations, customLinkDestination, isEditable, hasBulkSelect, onSelectActions, sumRows, isAutoHeight, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, disableScreenLoading, }: GenericModelListProps) => React.JSX.Element;
+declare const GenericModelList: ({ model, columnFields, hiddenFields, creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect, onSelectActions, sumRows, isAutoHeight, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, disableScreenLoading, }: GenericModelListProps) => React.JSX.Element;
 export default GenericModelList;

package/dist/components/GenericModelList.js

@@ -50,7 +50,7 @@ const utils_1 = require("../utils");
 const api_1 = require("../api");
 const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
-const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, customColumnOperations, customLinkDestination, isEditable, hasBulkSelect = false, onSelectActions, sumRows, isAutoHeight = true, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, disableScreenLoading, }) => {
+const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect = false, onSelectActions, sumRows, isAutoHeight = true, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, disableScreenLoading, }) => {
     const { serverEndPoint, isInBatches, firstBatchLength } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const { onEditModel } = (0, APIWrapperContext_1.useAPIWrapper)();
     const [data, setData] = (0, react_1.useState)(false);
@@ -151,7 +151,7 @@ const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFie
                 react_1.default.createElement(LinkComponent, { to: `novo` },
                     react_1.default.createElement(Button_1.default, { variant: "contained", size: "medium", sx: { alignSelf: 'stretch' }, startIcon: react_1.default.createElement(AddCircleOutline_1.default, null) }, "Adicionar")))))),
         react_1.default.createElement(Box_1.default, { sx: tableAutoHeight ? {} : styles_1.Layout.dataGridWithTabs },
-            react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema || {}, model: model, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, customLinkDestination: customLinkDestination, actions: actions, optionsAC: optionsAC, onProcessRow: onProcessRow, onDataChange: (newData) => {
+            react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema || {}, model: model, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, customFieldFormLayouts: customFieldFormLayouts, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, customLinkDestination: customLinkDestination, actions: actions, optionsAC: optionsAC, onProcessRow: onProcessRow, onDataChange: (newData) => {
                     setData(Object.assign(Object.assign({}, data), { data: newData }));
                 }, LinkComponent: LinkComponent, paginationModel: paginationMode === 'server' ? paginationModel : undefined, setPaginationModel: paginationMode === 'server' ? setPaginationModel : undefined, rowCount: paginationMode === 'client'
                     ? undefined

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnyObjectSchema } from 'yup';
-import { Item, SchemaType } from '../../utils';
+import { FormFieldLayout, Item, SchemaType } from '../../utils';
 import { DialogType } from '../../context/APIWrapperContext';
 interface DialogFormBySchemaProps {
     schema: SchemaType;
@@ -9,6 +9,7 @@ interface DialogFormBySchemaProps {
     onEditModelSave: (p: Item) => Promise<boolean>;
     setDialog: (x: Partial<DialogType>) => void;
     getAutoComplete: (model: string) => Promise<false | Item[]>;
+    fieldsLayout?: FormFieldLayout[];
 }
-export default function DialogFormBySchema({ schema, validationSchema, initialValues, onEditModelSave, setDialog, getAutoComplete, }: DialogFormBySchemaProps): React.JSX.Element;
+export default function DialogFormBySchema({ schema, validationSchema, initialValues, onEditModelSave, setDialog, getAutoComplete, fieldsLayout, }: DialogFormBySchemaProps): React.JSX.Element;
 export {};

package/dist/components/forms/DialogFormBySchema.js

@@ -33,7 +33,7 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
 const Button_1 = __importDefault(require("@mui/material/Button"));
 const styles_1 = require("../../styles");
 const FormBySchema_1 = __importDefault(require("./FormBySchema"));
-function DialogFormBySchema({ schema, validationSchema, initialValues, onEditModelSave, setDialog, getAutoComplete, }) {
+function DialogFormBySchema({ schema, validationSchema, initialValues, onEditModelSave, setDialog, getAutoComplete, fieldsLayout, }) {
     const { control, handleSubmit, reset, getValues, setValue, formState: { errors, isDirty }, } = (0, react_hook_form_1.useForm)({
         mode: 'onBlur',
         resolver: (0, yup_1.yupResolver)(validationSchema),
@@ -46,7 +46,7 @@ function DialogFormBySchema({ schema, validationSchema, initialValues, onEditMod
     }
     return (react_1.default.createElement(react_1.default.Fragment, null, initialValues && control && (react_1.default.createElement("form", { onSubmit: handleSubmit(onEditModelSave) },
         react_1.default.createElement(Box_1.default, null,
-            react_1.default.createElement(FormBySchema_1.default, { control: control, errors: errors, schema: schema, getValues: getValues, setValue: setValue, isolatedGetAutoComplete: getAutoComplete })),
+            react_1.default.createElement(FormBySchema_1.default, { control: control, errors: errors, schema: schema, getValues: getValues, setValue: setValue, isolatedGetAutoComplete: getAutoComplete, fieldsLayout: fieldsLayout })),
         react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.flexRow },
             react_1.default.createElement(Button_1.default, { variant: "contained", color: "primary", size: "small", sx: { ml: 1 }, onClick: () => {
                     setDialog({

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FieldBySchemaProps } from '../../utils';
-export default function FieldBySchema({ name, schema, control, errors, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, sx, options, isSemaphoric, label, onValueChange, decimalScale, ...other }: FieldBySchemaProps): React.JSX.Element;
+export default function FieldBySchema({ name, schema, control, errors, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, fieldsLayout, sx, options, isSemaphoric, label, onValueChange, decimalScale, ...other }: FieldBySchemaProps): React.JSX.Element;

package/dist/components/forms/FieldBySchema.js

@@ -23,12 +23,12 @@ const BooleanFieldBySchema_1 = __importDefault(require("./inputs/BooleanFieldByS
 const FloatFieldBySchema_1 = __importDefault(require("./inputs/FloatFieldBySchema"));
 const TextFieldBySchema_1 = __importDefault(require("./inputs/TextFieldBySchema"));
 function FieldBySchema(_a) {
-    var { name, schema, control, errors, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, sx, options, isSemaphoric = false, label, onValueChange, decimalScale = 2 } = _a, other = __rest(_a, ["name", "schema", "control", "errors", "multiline", "setValue", "getValues", "fieldKey", "labelKey", "index", "optionsAC", "optionsModel", "getOptionLabel", "renderOption", "onEditModel", "sx", "options", "isSemaphoric", "label", "onValueChange", "decimalScale"]);
+    var { name, schema, control, errors, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, fieldsLayout, sx, options, isSemaphoric = false, label, onValueChange, decimalScale = 2 } = _a, other = __rest(_a, ["name", "schema", "control", "errors", "multiline", "setValue", "getValues", "fieldKey", "labelKey", "index", "optionsAC", "optionsModel", "getOptionLabel", "renderOption", "onEditModel", "fieldsLayout", "sx", "options", "isSemaphoric", "label", "onValueChange", "decimalScale"]);
     switch (schema[name].type) {
         case 'date':
-            return (react_1.default.createElement(DesktopDatePickerBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, sx: sx }, other)));
+            return (react_1.default.createElement(DesktopDatePickerBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange }, other)));
         case 'datetime':
-            return (react_1.default.createElement(DesktopDateTimePickerBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, sx: sx }, other)));
+            return (react_1.default.createElement(DesktopDateTimePickerBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange }, other)));
         // case 'field':
         //     return (
         //         <AutocompleteFieldBySchema
@@ -45,9 +45,9 @@ function FieldBySchema(_a) {
         case 'field':
             const relatedEditable = schema[name].related_editable;
             const multiple = schema[name].many || false;
-            return (react_1.default.createElement(EditableAutocompleteFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index, optionsAC: optionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: relatedEditable ? onEditModel : undefined, multiple: multiple, sx: sx }, other)));
+            return (react_1.default.createElement(EditableAutocompleteFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index, optionsAC: optionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: relatedEditable ? onEditModel : undefined, fieldsLayout: fieldsLayout, multiple: multiple, sx: sx, onValueChange: onValueChange }, other)));
         case 'choice':
-            return (react_1.default.createElement(AutocompleteFieldBySchema_1.default, { index: index, name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, optionIdKey: "value", optionLabelKey: "display_name", options: options, isSemaphoric: isSemaphoric, label: label, sx: sx }));
+            return (react_1.default.createElement(AutocompleteFieldBySchema_1.default, { index: index, name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, optionIdKey: "value", optionLabelKey: "display_name", options: options, isSemaphoric: isSemaphoric, label: label, sx: sx, onValueChange: onValueChange }));
         case 'boolean':
             return (react_1.default.createElement(BooleanFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange }, other)));
         case 'decimal':
@@ -59,7 +59,7 @@ function FieldBySchema(_a) {
         default:
             const localMultiline = schema[name].model_multiline === true || multiline;
             const minRows = localMultiline ? 3 : 0;
-            return (react_1.default.createElement(TextFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: localMultiline, minRows: minRows, fieldKey: fieldKey, index: index, sx: sx, isPassword: schema[name].type === 'password' }, other)));
+            return (react_1.default.createElement(TextFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: localMultiline, minRows: minRows, fieldKey: fieldKey, index: index, sx: sx, isPassword: schema[name].type === 'password', onValueChange: onValueChange }, other)));
     }
 }
 exports.default = FieldBySchema;

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

@@ -3,6 +3,7 @@ import { UseFormRegister } from 'react-hook-form';
 import { CommonFieldProps, FieldBySchemaProps, FormFieldLayout, Item, OptionsAC } from '../../utils';
 interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
     fieldsLayout?: FormFieldLayout[];
+    customFieldFormLayouts?: Record<string, FormFieldLayout[]>;
     hiddenFields?: string[];
     register?: UseFormRegister<Item>;
     setOptionsAC?: (x: OptionsAC) => void;
@@ -10,5 +11,5 @@ interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
     isolatedGetAutoComplete?: (model: string) => Promise<false | Item[]>;
     fieldsProps?: Record<string, CommonFieldProps>;
 }
-export default function FormBySchema({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel, options, isSemaphoric, label, decimalScale, fieldsLayout: fieldsLayoutInitial, fieldsProps, hiddenFields, isolatedGetAutoComplete, }: FormBySchemaProps): React.JSX.Element;
+export default function FormBySchema({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel, options, isSemaphoric, label, decimalScale, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, fieldsProps, hiddenFields, isolatedGetAutoComplete, }: FormBySchemaProps): React.JSX.Element;
 export {};

package/dist/components/forms/FormBySchema.js

@@ -44,8 +44,11 @@ const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgre
 const FieldBySchema_1 = __importDefault(require("./FieldBySchema"));
 const styles_1 = require("../../styles");
 const APIWrapperContext_1 = require("../../context/APIWrapperContext");
-function FormBySchema({ schema, control, errors, register, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel, options, isSemaphoric = false, label, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, fieldsProps, hiddenFields = [], isolatedGetAutoComplete, }) {
-    const { getAutoComplete } = (0, APIWrapperContext_1.useAPIWrapper)();
+function FormBySchema({ schema, control, errors, register, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel, options, isSemaphoric = false, label, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, fieldsProps, hiddenFields = [], isolatedGetAutoComplete, }) {
+    const { getAutoComplete, onEditModel: defaultOnEditModel } = (0, APIWrapperContext_1.useAPIWrapper)();
+    if (!onEditModel) {
+        onEditModel = defaultOnEditModel;
+    }
     const [fieldsLayout, setFieldsLayout] = (0, react_1.useState)([]);
     const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)(undefined);
     const defaultSx = { mr: 0 };
@@ -98,17 +101,23 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
         return { newFieldsLayout: [{ rows }], optionsACModels };
     };
     const populateOptionsAC = (optionsACModels) => __awaiter(this, void 0, void 0, function* () {
+        const promises = [];
+        const fieldsToLoad = [];
+        optionsACModels.map((field) => {
+            if (!optionsAC || !(field in optionsAC)) {
+                fieldsToLoad.push(field);
+                promises.push(isolatedGetAutoComplete
+                    ? isolatedGetAutoComplete(field)
+                    : getAutoComplete(field));
+            }
+        });
         const newOptionsAC = {};
-        for (const model of optionsACModels) {
-            if (!optionsAC || !optionsAC[model]) {
-                const ret = isolatedGetAutoComplete
-                    ? yield isolatedGetAutoComplete(model)
-                    : yield getAutoComplete(model);
-                if (ret !== false) {
-                    newOptionsAC[model] = ret;
-                }
+        const results = yield Promise.all(promises);
+        results.map((result, index) => {
+            if (result !== false) {
+                newOptionsAC[fieldsToLoad[index]] = result;
             }
-        }
+        });
         if (setOptionsAC) {
             setOptionsAC(newOptionsAC);
             return;
@@ -146,7 +155,7 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
                     section.rows && (react_1.default.createElement(react_1.default.Fragment, null, section.rows.map((row, rowIndex) => {
                         if (typeof row === 'string') {
                             const field = row;
-                            const fieldProps = fieldsProps && fieldsProps.hasOwnProperty(field)
+                            const fieldProps = fieldsProps && field in fieldsProps
                                 ? fieldsProps[field]
                                 : {};
                             fieldProps.sx = fieldProps.hasOwnProperty('sx')
@@ -155,7 +164,10 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
                             return (react_1.default.createElement(react_1.default.Fragment, { key: field },
                                 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, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale }, fieldProps))));
+                                        : localOptionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts &&
+                                        field in customFieldFormLayouts
+                                        ? customFieldFormLayouts[field]
+                                        : undefined, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale }, fieldProps))));
                         }
                         if (Array.isArray(row)) {
                             return (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.inLineForm, key: `row_${rowIndex}` },

package/dist/components/forms/inputs/AutocompleteFieldBySchema.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FieldBySchemaProps } from '../../../utils';
-export default function AutocompleteFieldBySchema({ fieldKey, index, name, schema, control, errors, optionIdKey, optionLabelKey, options, isSemaphoric, sx, label, ...other }: FieldBySchemaProps): React.JSX.Element;
+export default function AutocompleteFieldBySchema({ fieldKey, index, name, schema, control, errors, optionIdKey, optionLabelKey, options, isSemaphoric, sx, onValueChange, ...other }: FieldBySchemaProps): React.JSX.Element;

package/dist/components/forms/inputs/AutocompleteFieldBySchema.js

@@ -55,7 +55,7 @@ const renderInput = (_a) => {
     return (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: label || schema[model].label, required: schema[model].required, margin: "normal", error: error, helperText: helperText, sx: sx })));
 };
 function AutocompleteFieldBySchema(_a) {
-    var { fieldKey, index, name, schema, control, errors, optionIdKey = 'id', optionLabelKey = 'label', options, isSemaphoric = false, sx = { mr: 2 }, label } = _a, other = __rest(_a, ["fieldKey", "index", "name", "schema", "control", "errors", "optionIdKey", "optionLabelKey", "options", "isSemaphoric", "sx", "label"]);
+    var { fieldKey, index, name, schema, control, errors, optionIdKey = 'id', optionLabelKey = 'label', options, isSemaphoric = false, sx = { mr: 2 }, onValueChange } = _a, other = __rest(_a, ["fieldKey", "index", "name", "schema", "control", "errors", "optionIdKey", "optionLabelKey", "options", "isSemaphoric", "sx", "onValueChange"]);
     const model = name;
     const { theme } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     if (!options) {
@@ -70,6 +70,9 @@ function AutocompleteFieldBySchema(_a) {
                 return option[optionLabelKey];
             }, onChange: (e, value) => {
                 field.onChange(value);
+                if (onValueChange) {
+                    onValueChange(e);
+                }
             }, fullWidth: true, renderInput: (params) => {
                 return renderInput(Object.assign(Object.assign({}, params), { control,
                     isSemaphoric,

package/dist/components/forms/inputs/EditableAutocompleteFieldBySchema.js

@@ -49,7 +49,7 @@ const DialogActions_1 = __importDefault(require("../../DialogActions"));
 const APIWrapperContext_1 = require("../../../context/APIWrapperContext");
 const filter = (0, Autocomplete_1.createFilterOptions)();
 const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) => {
-    var { control, schema, errors, setValue, getValues, fieldKey, labelKey = 'nome', index, name = 'name', optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, sx = { mr: 2 }, multiple = false, disabled = false } = _a, other = __rest(_a, ["control", "schema", "errors", "setValue", "getValues", "fieldKey", "labelKey", "index", "name", "optionsAC", "optionsModel", "getOptionLabel", "renderOption", "onEditModel", "sx", "multiple", "disabled"]);
+    var { control, schema, errors, setValue, getValues, fieldKey, labelKey = 'nome', index, name = 'name', optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, sx = { mr: 2 }, onValueChange, multiple = false, disabled = false, fieldsLayout } = _a, other = __rest(_a, ["control", "schema", "errors", "setValue", "getValues", "fieldKey", "labelKey", "index", "name", "optionsAC", "optionsModel", "getOptionLabel", "renderOption", "onEditModel", "sx", "onValueChange", "multiple", "disabled", "fieldsLayout"]);
     const { setDialog } = (0, APIWrapperContext_1.useAPIWrapper)();
     const [options, setOptions] = (0, react_1.useState)(null);
     const model = name;
@@ -132,6 +132,9 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                         }
                     }
                     field.onChange(multiple ? newValueAr : newValueAr[0]);
+                    if (onValueChange) {
+                        onValueChange(e);
+                    }
                 }, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: label, required: schema[model].required, margin: "normal", error: error, helperText: helperText, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                             !multiple && field.value && (react_1.default.createElement(IconButton_1.default, { size: "small", onClick: () => {
                                     if ((0, utils_1.isTmpId)(field.value.id)) {
@@ -153,6 +156,7 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                                             labelKey,
                                             setValue,
                                             getValues,
+                                            fieldsLayout,
                                         });
                                     }
                                 } },
@@ -209,6 +213,9 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
     }
     return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, render: ({ field }) => (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: name }, field, { id: name, options: options, disabled: schema[model].disabled === true || disabled === true, autoHighlight: true, isOptionEqualToValue: (option, value) => option.id === value.id, fullWidth: true, multiple: multiple, sx: sx, onChange: (e, value) => {
                 field.onChange(value);
+                if (onValueChange) {
+                    onValueChange(e);
+                }
             }, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: label, required: schema[model].required, margin: "normal", error: error, helperText: helperText }, other))), getOptionLabel: getOptionLabel, renderOption: renderOption }))) }));
 });
 EditableAutocompleteFieldBySchema.displayName = 'EditableAutocompleteFieldBySchema';

package/dist/components/forms/inputs/FloatFieldBySchema.js

@@ -49,7 +49,7 @@ function FloatFieldBySchema(_a) {
     return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, render: (_a) => {
             var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]);
             const moedaInputProps = Object.assign(Object.assign({}, field), { onChange: undefined });
-            return (react_1.default.createElement(react_number_format_1.NumericFormat, Object.assign({}, moedaInputProps, other, { label: label, required: schema[model].required, onValueChange: (values, sourceInfo) => {
+            return (react_1.default.createElement(react_number_format_1.NumericFormat, Object.assign({}, moedaInputProps, other, { label: label, required: schema[model].required, onValueChange: (values) => {
                     field.onChange(values.floatValue);
                     if (onValueChange) {
                         onValueChange(values.floatValue);

package/dist/components/forms/inputs/TextFieldBySchema.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FieldBySchemaProps } from '../../../utils';
-export default function TextFieldBySchema({ name, schema, control, errors, multiline, minRows, fieldKey, index, sx, isPassword, type, autocomplete, disabled, ...other }: FieldBySchemaProps): React.JSX.Element;
+export default function TextFieldBySchema({ name, schema, control, errors, multiline, minRows, fieldKey, index, sx, isPassword, type, autocomplete, disabled, onValueChange, ...other }: FieldBySchemaProps): React.JSX.Element;

package/dist/components/forms/inputs/TextFieldBySchema.js

@@ -19,7 +19,7 @@ const react_hook_form_1 = require("react-hook-form");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const utils_1 = require("../../../utils");
 function TextFieldBySchema(_a) {
-    var { name, schema, control, errors, multiline = false, minRows, fieldKey, index, sx = { mr: 2 }, isPassword = false, type, autocomplete, disabled } = _a, other = __rest(_a, ["name", "schema", "control", "errors", "multiline", "minRows", "fieldKey", "index", "sx", "isPassword", "type", "autocomplete", "disabled"]);
+    var { name, schema, control, errors, multiline = false, minRows, fieldKey, index, sx = { mr: 2 }, isPassword = false, type, autocomplete, disabled, onValueChange } = _a, other = __rest(_a, ["name", "schema", "control", "errors", "multiline", "minRows", "fieldKey", "index", "sx", "isPassword", "type", "autocomplete", "disabled", "onValueChange"]);
     const model = name;
     if (fieldKey && index && index >= 0) {
         name = `${fieldKey}.${index}.${name}`;
@@ -39,6 +39,11 @@ function TextFieldBySchema(_a) {
             error: errors && Boolean(errors[name]),
             helperText: errors && errors[name] ? errors[name].message : schema[name].help_text || '',
         };
-    return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => (react_1.default.createElement(TextField_1.default, Object.assign({}, field, other, { id: name, key: name, label: schema[model].label, required: schema[model].required, disabled: schema[model].disabled === true || disabled, margin: "normal", fullWidth: true, multiline: multiline, error: error, helperText: helperText, sx: sx, type: type, autoComplete: autocomplete, minRows: minRows }))) }));
+    return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => (react_1.default.createElement(TextField_1.default, Object.assign({}, field, other, { id: name, key: name, label: schema[model].label, required: schema[model].required, disabled: schema[model].disabled === true || disabled, onChange: (e) => {
+                field.onChange(e.target.value);
+                if (onValueChange) {
+                    onValueChange(e);
+                }
+            }, margin: "normal", fullWidth: true, multiline: multiline, error: error, helperText: helperText, sx: sx, type: type, autoComplete: autocomplete, minRows: minRows }))) }));
 }
 exports.default = TextFieldBySchema;

package/dist/context/APIWrapper.js

@@ -242,7 +242,7 @@ function APIWrapper({ handleLoading, setSnackBar, setDialog, children }) {
         });
         return response;
     });
-    const onEditModel = ({ fieldKey, index, model, id, labelKey, setValue, getValues, }) => {
+    const onEditModel = ({ fieldKey, index, model, id, labelKey, setValue, getValues, fieldsLayout, }) => {
         setDialog({
             open: true,
             loading: true,
@@ -266,7 +266,7 @@ function APIWrapper({ handleLoading, setSnackBar, setDialog, children }) {
                 open: true,
                 loading: false,
                 title: 'Editar',
-                Body: (react_1.default.createElement(DialogFormBySchema_1.default, { schema: result.schema, validationSchema: yupSchema, initialValues: values, setDialog: setDialog, getAutoComplete: localGetAutoComplete, onEditModelSave: onEditModelSave })),
+                Body: (react_1.default.createElement(DialogFormBySchema_1.default, { schema: result.schema, validationSchema: yupSchema, initialValues: values, setDialog: setDialog, getAutoComplete: localGetAutoComplete, onEditModelSave: onEditModelSave, fieldsLayout: fieldsLayout })),
                 Actions: react_1.default.createElement(react_1.default.Fragment, null),
             });
             editModel.current = {

package/dist/context/APIWrapperContext.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { FieldValues, SubmitHandler, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 import { AlertColor, AlertPropsColorOverrides } from '@mui/material/Alert';
 import { OverridableStringUnion } from '@mui/types';
-import { ItemSchemaColumnsType, Id, Item, SchemaType, DataSchemaColumnsType, OnSuccessEvent, OptionsAC, GenericValue, TargetApiParams } from '../utils';
+import { ItemSchemaColumnsType, Id, Item, SchemaType, DataSchemaColumnsType, OnSuccessEvent, OptionsAC, GenericValue, TargetApiParams, FormFieldLayout } from '../utils';
 import { GetGenericModelListProps } from '../api';
 import { serverEndPointType } from './DRFReactBySchemaContext';
 export interface LoadSinglePageDataProps {
@@ -30,6 +30,7 @@ export interface OnEditModelType {
     labelKey: string;
     setValue?: UseFormSetValue<FieldValues>;
     getValues?: UseFormGetValues<FieldValues>;
+    fieldsLayout?: FormFieldLayout[];
 }
 export interface OnEditRelatedModelType {
     model: string;
@@ -69,7 +70,7 @@ export interface APIWrapperContextType {
     usuaria: Item | null;
     updateUsuaria: () => void;
     onSubmit: DRFReactBySchemaSubmitHandler;
-    loadSinglePageData: (p: LoadSinglePageDataProps) => Promise<boolean | FieldValues>;
+    loadSinglePageData: (p: LoadSinglePageDataProps) => Promise<false | Item>;
     handleLoading: (p: boolean) => void;
     optionsACState: [OptionsAC | null, (x: Partial<OptionsAC>) => void];
     pageFormState: [PageFormType | null, (x: Partial<PageFormType>) => void];

package/dist/utils.d.ts

@@ -109,6 +109,7 @@ export interface CommonFieldProps {
     getOptionLabel?: (option: Item | string) => string;
     renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: Item, state: AutocompleteRenderOptionState) => React.ReactNode;
     onEditModel?: (x: OnEditModelType) => void;
+    fieldsLayout?: FormFieldLayout[];
     multiple?: boolean;
     sx?: SxProps;
     options?: Item[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.15.5",
+  "version": "0.16.0",
   "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",