drf-react-by-schema 0.20.3 → 0.20.4

package/dist/components/details/DetailBySchema.js

@@ -133,7 +133,7 @@ function DetailBySchema({ values, schema, columns, loading, editLink, editLabel,
             setPreparedColumns(null);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [fieldsLayoutInitial]);
     if (!fieldsLayout || loading || !formattedValues) {
         return (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
             react_1.default.createElement(CardContent_1.default, null,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
-import { CommonFieldProps, FieldBySchemaProps, FormFieldLayout, Item, OptionsAC } from '../../@types';
+import { CommonFieldProps, ExtraSxCommonFieldProps, FieldBySchemaProps, FormFieldLayout, Item, OptionsAC } from '../../@types';
 interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
     fieldsLayout?: FormFieldLayout[];
     customFieldFormLayouts?: Record<string, FormFieldLayout[]>;
@@ -12,7 +12,8 @@ interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
     fieldsProps?: Record<string, CommonFieldProps>;
     relatedEditable?: boolean;
     autoFocusField?: string;
+    elevation?: number;
 }
-export default function FormBySchema({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, setOptionsAC, forceReload, optionsModel, getOptionLabel, renderOption, onEditModel: customOnEditModel, options, isSemaphoric, label, decimalScale, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, fieldsProps, hiddenFields, isolatedGetAutoComplete, relatedEditable, autoFocusField, }: FormBySchemaProps): React.JSX.Element;
+export default function FormBySchema({ schema, control, errors, register, multiline, setValue, getValues, fieldKey, labelKey, index, optionsAC, setOptionsAC, optionsModel, getOptionLabel, renderOption, onEditModel: customOnEditModel, options, isSemaphoric, label, decimalScale, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, fieldsProps, hiddenFields, isolatedGetAutoComplete, relatedEditable, autoFocusField, elevation, sxRow, sxRowMultiple, sxSection, sxSectionTitle, }: FormBySchemaProps & 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

@@ -1 +1 @@
-{"version":3,"file":"FormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASlD,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,IAAI,EACJ,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,UAAU,iBAAkB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAClE,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAiB,EACjB,KAAK,EACL,SAAS,EACT,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,YAAgB,EAEhB,YAAY,EAAE,mBAAmB,EACjC,sBAAsB,EAEtB,WAAW,EACX,YAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,cAAc,GACf,EAAE,iBAAiB,qBAwQnB"}
+{"version":3,"file":"FormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASlD,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,eAAe,EACf,IAAI,EACJ,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,UAAU,iBAAkB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAClE,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAiB,EACjB,KAAK,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,YAAgB,EAEhB,YAAY,EAAE,mBAAmB,EACjC,sBAAsB,EAEtB,WAAW,EACX,YAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,cAAc,EACd,SAAS,EAKT,KAAK,EACL,aAAa,EACb,SAAS,EACT,cAAc,GAKf,EAAE,iBAAiB,GAClB,IAAI,CACF,uBAAuB,EACrB,IAAI,GACJ,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,qBAAqB,CACxB,qBA2QF"}

package/dist/components/forms/FormBySchema.js

@@ -55,7 +55,16 @@ 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: customOnEditModel, options, isSemaphoric = false, label, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, fieldsProps, hiddenFields = [], isolatedGetAutoComplete, relatedEditable, autoFocusField, }) {
+function FormBySchema({ schema, control, errors, register, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, setOptionsAC, optionsModel, getOptionLabel, renderOption, onEditModel: customOnEditModel, options, isSemaphoric = false, label, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, customFieldFormLayouts, fieldsProps, hiddenFields = [], isolatedGetAutoComplete, relatedEditable, autoFocusField, elevation, 
+// sx,
+// sxField,
+// sxLabel,
+sxRow, sxRowMultiple, sxSection, sxSectionTitle,
+// sxValue,
+// sxValueList,
+// sxValueListItem,
+// sxValueListItemText,
+ }) {
     const { getAutoComplete: defaulGetAutoComplete, onEditModel: defaultOnEditModel, optionsAC: externalOptionsAC, } = (0, APIWrapperContext_1.useAPIWrapper)();
     const getAutoComplete = isolatedGetAutoComplete || defaulGetAutoComplete;
     const onEditModel = relatedEditable === false ? undefined : customOnEditModel || defaultOnEditModel;
@@ -157,7 +166,7 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
     if (fieldsLayout.length === 0 ||
         (setOptionsAC && !optionsAC) ||
         (!setOptionsAC && !localOptionsAC)) {
-        return (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
+        return (react_1.default.createElement(Card_1.default, { sx: Object.assign(Object.assign({}, styles_1.Layout.formCard), { sxSection }), 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)))));
@@ -166,8 +175,8 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
         register &&
             hiddenFields.map((hiddenField) => (react_1.default.createElement("input", Object.assign({ hidden: true }, register(hiddenField), { value: getValues ? getValues(hiddenField) : null, key: hiddenField })))),
         fieldsLayout.map((section, sectionIndex) => {
-            return (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard, key: `section_${sectionIndex}` },
-                section.title && react_1.default.createElement(CardHeader_1.default, { title: section.title }),
+            return (react_1.default.createElement(Card_1.default, { sx: Object.assign(Object.assign({}, styles_1.Layout.formCard), { sxSection }), 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) => {
@@ -175,13 +184,13 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
                             const field = row;
                             const fieldProps = fieldsProps && field in fieldsProps ? fieldsProps[field] : {};
                             fieldProps.sx = 'sx' in fieldProps ? fieldProps.sx : defaultSx;
-                            return (react_1.default.createElement(react_1.default.Fragment, { key: field },
+                            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, 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: styles_1.Layout.inLineForm, key: `row_${rowIndex}` },
+                            return (react_1.default.createElement(Box_1.default, { sx: Object.assign(Object.assign({}, styles_1.Layout.inLineForm), { sxRowMultiple }), 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;

package/dist/utils.js

@@ -137,7 +137,7 @@ const populateValues = ({ data, schema }) => {
     return values;
 };
 exports.populateValues = populateValues;
-const getYupValidator = (type) => {
+const getYupValidator = (type, required) => {
     let yupFunc;
     try {
         switch (type) {
@@ -191,7 +191,7 @@ const getYupValidator = (type) => {
     catch (e) {
         yupFunc = Yup.string();
     }
-    return yupFunc.nullable();
+    return required ? yupFunc : yupFunc.transform((v) => (v === '' ? null : v)).nullable();
 };
 function buildGenericYupValidationSchema({ data, schema, many = false, skipFields = [], extraValidators, }) {
     const yupValidator = {};
@@ -228,8 +228,8 @@ function buildGenericYupValidationSchema({ data, schema, many = false, skipField
         yupValidator[key] =
             extraValidators && key in extraValidators
                 ? extraValidators[key]
-                : getYupValidator(field.type);
-        if (field.model_required) {
+                : getYupValidator(field.type, field.required || field.model_required);
+        if (field.required || field.model_required) {
             yupValidator[key] = yupValidator[key].required('Este campo é obrigatório');
         }
         if (field.max_length && field.type === 'string') {

package/package.json

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