drf-react-by-schema 0.14.5 → 0.15.0

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

@@ -1,12 +1,30 @@
 import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
+import { SxProps } from '@mui/material';
 import { FieldBySchemaProps, Item } from '../../utils';
 import { OptionsACType } from '../../context/APIWrapperContext';
+interface CustomElementProps {
+    onValueChange?: (x: any) => void;
+    sx?: SxProps;
+    disabled?: boolean;
+    optionsACModels?: string[];
+    value?: any;
+}
+interface CustomField {
+    key: string;
+    CustomElement: (x: CustomElementProps) => JSX.Element;
+}
 interface FieldLayout {
     title?: string;
-    rows?: (string | string[])[];
+    rows?: (string | (string | CustomField)[] | CustomField)[];
     CustomElement?: React.ReactNode;
 }
+interface FieldProps {
+    sx?: SxProps;
+    onValueChange?: (x: any) => void;
+    disabled?: boolean;
+    value?: any;
+}
 interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
     fieldsLayout?: FieldLayout[];
     hiddenFields?: string[];
@@ -14,6 +32,7 @@ interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
     setOptionsAC?: (x: OptionsACType) => void;
     forceReload?: boolean;
     isolatedGetAutoComplete?: (model: string) => Promise<false | Item[]>;
+    fieldsProps?: Record<string, FieldProps>;
 }
-export default function FormBySchema({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel, sx, options, isSemaphoric, label, onValueChange, decimalScale, fieldsLayout: fieldsLayoutInitial, hiddenFields, isolatedGetAutoComplete, ...props }: FormBySchemaProps): 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, fieldsProps, hiddenFields, isolatedGetAutoComplete, }: FormBySchemaProps): JSX.Element;
 export {};

package/dist/components/forms/FormBySchema.js

@@ -31,17 +31,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -55,11 +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(_a) {
-    var { schema, control, errors, register, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel, sx = { mr: 0 }, options, isSemaphoric = false, label, onValueChange, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, hiddenFields = [], isolatedGetAutoComplete } = _a, props = __rest(_a, ["schema", "control", "errors", "register", "multiline", "setValue", "getValues", "fieldKey", "labelKey", "index", "optionsAC", "setOptionsAC", "forceReload", "optionsModel", "getOptionLabel", "renderOption", "onEditModel", "sx", "options", "isSemaphoric", "label", "onValueChange", "decimalScale", "fieldsLayout", "hiddenFields", "isolatedGetAutoComplete"]);
+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)();
     const [fieldsLayout, setFieldsLayout] = (0, react_1.useState)([]);
     const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)(undefined);
+    const defaultSx = { mr: 0 };
     const getColumns = () => {
         const optionsACModels = [];
         if (fieldsLayoutInitial && fieldsLayoutInitial.length > 0) {
@@ -76,11 +65,18 @@ function FormBySchema(_a) {
                         }
                         continue;
                     }
-                    for (const field of row) {
-                        if (['field', 'nested object'].includes(schema[field].type) &&
-                            !optionsACModels.includes(field)) {
-                            optionsACModels.push(field);
+                    if (Array.isArray(row)) {
+                        for (const field of row) {
+                            if (typeof field === 'string' &&
+                                ['field', 'nested object'].includes(schema[field].type) &&
+                                !optionsACModels.includes(field)) {
+                                optionsACModels.push(field);
+                            }
                         }
+                        continue;
+                    }
+                    if (optionsACModels.includes(row.key)) {
+                        optionsACModels.push(row.key);
                     }
                 }
             }
@@ -150,14 +146,43 @@ function FormBySchema(_a) {
                     section.rows && (react_1.default.createElement(react_1.default.Fragment, null, section.rows.map((row, rowIndex) => {
                         if (typeof row === 'string') {
                             const field = row;
+                            const fieldsPropsObj = fieldsProps && fieldsProps.hasOwnProperty(field)
+                                ? fieldsProps[field]
+                                : {};
+                            fieldsPropsObj.sx = fieldsPropsObj.hasOwnProperty('sx')
+                                ? fieldsPropsObj.sx
+                                : defaultSx;
                             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, sx: sx, options: options, isSemaphoric: isSemaphoric, label: label, onValueChange: onValueChange, decimalScale: decimalScale }, props))));
+                                        : localOptionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale }, fieldsPropsObj))));
+                        }
+                        if (Array.isArray(row)) {
+                            return (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.inLineForm, key: `row_${rowIndex}` },
+                                react_1.default.createElement(react_1.default.Fragment, null, row.map((field, i, j) => {
+                                    const mr = i + 1 === j.length ? 0 : 2;
+                                    const key = typeof field === 'string'
+                                        ? field
+                                        : field.key;
+                                    const fieldsPropsObj = fieldsProps &&
+                                        fieldsProps.hasOwnProperty(key)
+                                        ? fieldsProps[key]
+                                        : {};
+                                    fieldsPropsObj.sx =
+                                        fieldsPropsObj.hasOwnProperty('sx')
+                                            ? Object.assign(Object.assign({}, fieldsPropsObj.sx), { mr }) : {
+                                            mr,
+                                        };
+                                    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, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale }, fieldsPropsObj))) : (react_1.default.createElement(field.CustomElement, Object.assign({}, fieldsPropsObj)))));
+                                }))));
                         }
-                        return (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.inLineForm, key: `row_${rowIndex}` },
-                            react_1.default.createElement(react_1.default.Fragment, null, row.map((field, i, j) => (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: optionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, sx: Object.assign(Object.assign({}, sx), { mr: i + 1 === j.length ? 0 : 2 }), options: options, isSemaphoric: isSemaphoric, label: label, onValueChange: onValueChange, decimalScale: decimalScale }, props))))))));
+                        const fieldsPropsObj = fieldsProps && fieldsProps.hasOwnProperty(row.key)
+                            ? fieldsProps[row.key]
+                            : {};
+                        fieldsPropsObj.sx = fieldsPropsObj.hasOwnProperty('sx')
+                            ? fieldsPropsObj.sx
+                            : defaultSx;
+                        return react_1.default.createElement(row.CustomElement, Object.assign({}, fieldsPropsObj));
                     }))))));
         })));
 }

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

@@ -29,6 +29,6 @@ function BooleanFieldBySchema(_a) {
                         onValueChange(e);
                     }
                     field.onChange(e);
-                } })), label: schema[model].label, required: schema[model].required, sx: sx })) }));
+                } })), label: schema[model].label, required: schema[model].required, sx: Object.assign({ width: '100%' }, sx) })) }));
 }
 exports.default = BooleanFieldBySchema;

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

@@ -51,17 +51,22 @@ 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"]);
     const { setDialog } = (0, APIWrapperContext_1.useAPIWrapper)();
+    const [options, setOptions] = (0, react_1.useState)(null);
     const model = name;
     const label = schema[model].label;
     if (!optionsModel) {
         optionsModel = model;
     }
-    const options = optionsAC && optionsAC[optionsModel] ? optionsAC[optionsModel] : [];
     if (fieldKey && index && index >= 0) {
         name = `${fieldKey}.${index}.${name}`;
     }
     (0, react_1.useEffect)(() => {
-        if (!getValues || !setValue || !options || options.length === 0) {
+        if (optionsAC && optionsModel && optionsAC[optionsModel]) {
+            setOptions(optionsAC[optionsModel]);
+        }
+    }, [optionsAC, optionsModel]);
+    (0, react_1.useEffect)(() => {
+        if (!getValues || !setValue || !options) {
             return;
         }
         const valuesInitial = getValues(model);
@@ -81,7 +86,7 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
         }
         const harmonizedValues = options.find((option) => option.id === valuesInitial.id);
         setValue(model, harmonizedValues);
-    }, [options]);
+    }, [options, setValue, getValues, model, multiple]);
     const { error, helperText } = fieldKey && index && index >= 0
         ? (0, utils_1.errorProps)({
             fieldKey,
@@ -95,6 +100,9 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                 ? errors[name].message
                 : schema[name].help_text || '',
         };
+    if (options === null) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
     if (!disabled && !schema[model].disabled && onEditModel && optionsModel) {
         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, autoHighlight: true, isOptionEqualToValue: (option, value) => option.id === value.id, fullWidth: true, multiple: multiple, sx: sx, onChange: (e, value) => {
                     let valueAr = value;
@@ -149,12 +157,15 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                                     }
                                 } },
                                 react_1.default.createElement(Edit_1.default, null))),
-                            params.InputProps.endAdornment)) }) }, other))), freeSolo: true, filterOptions: (options, params) => {
-                    const filtered = filter(options, params);
+                            params.InputProps.endAdornment)) }) }, other))), freeSolo: true, filterOptions: (filteredOptions, params) => {
+                    if (filteredOptions.length === 0) {
+                        return [];
+                    }
+                    const filtered = filter(filteredOptions, params);
                     const { inputValue } = params;
                     const inputValueSlug = (0, utils_1.slugify)(inputValue);
                     // Suggest the creation of a new value
-                    const isExisting = options.some((option) => inputValueSlug === (0, utils_1.slugify)(option.label));
+                    const isExisting = filteredOptions.some((option) => inputValueSlug === (0, utils_1.slugify)(option.label));
                     if (inputValue !== '' && !isExisting) {
                         filtered.push({
                             inputValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.14.5",
+  "version": "0.15.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",