drf-react-by-schema 0.14.6 → 0.15.1

package/dist/components/details/DetailBySchema.d.ts

@@ -1,30 +1,3 @@
-import React from 'react';
-import { SxProps } from '@mui/material';
-import { Item, SchemaType } from '../../utils';
-import { OptionsACType } from '../../context/APIWrapperContext';
-interface FieldLayout {
-    title?: string;
-    rows?: (string | string[])[];
-    CustomElement?: React.ReactNode;
-}
-interface DetailBySchemaProps {
-    values: Item;
-    schema: SchemaType;
-    editLink?: string;
-    editLabel?: string;
-    labelKey?: string;
-    optionsAC?: OptionsACType;
-    setOptionsAC?: (x: OptionsACType) => void;
-    decimalScale?: number;
-    fieldsLayout?: FieldLayout[];
-    sxRow?: SxProps;
-    sxRowMultiple?: SxProps;
-    sxField?: SxProps;
-    sxLabel?: SxProps;
-    sxValue?: SxProps;
-    sxValueList?: SxProps;
-    sxValueListItem?: SxProps;
-    sxValueListItemText?: SxProps;
-}
-export default function DetailBySchema({ values, schema, editLink, editLabel, labelKey, optionsAC, setOptionsAC, decimalScale, fieldsLayout: fieldsLayoutInitial, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailBySchemaProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import { DetailBySchemaProps } from '../../utils';
+export default function DetailBySchema({ values, schema, editLink, editLabel, labelKey, decimalScale, fieldsLayout: fieldsLayoutInitial, fieldsProps, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailBySchemaProps): JSX.Element;

package/dist/components/details/DetailBySchema.js

@@ -36,11 +36,8 @@ const material_1 = require("@mui/material");
 const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const DetailFieldBySchema_1 = __importDefault(require("./DetailFieldBySchema"));
 const styles_1 = require("../../styles");
-const APIWrapperContext_1 = require("../../context/APIWrapperContext");
-function DetailBySchema({ values, schema, editLink, editLabel, labelKey = 'label', optionsAC, setOptionsAC, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
-    const { getAutoComplete } = (0, APIWrapperContext_1.useAPIWrapper)();
+function DetailBySchema({ values, schema, editLink, editLabel, labelKey = 'label', decimalScale = 2, fieldsLayout: fieldsLayoutInitial, fieldsProps, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
     const [fieldsLayout, setFieldsLayout] = (0, react_1.useState)([]);
-    const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)(undefined);
     const getColumns = () => {
         if (fieldsLayoutInitial && fieldsLayoutInitial.length > 0) {
             return fieldsLayoutInitial;
@@ -66,20 +63,35 @@ function DetailBySchema({ values, schema, editLink, editLabel, labelKey = 'label
     }
     return (react_1.default.createElement(react_1.default.Fragment, null, 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 }),
+            section.title && (react_1.default.createElement(CardHeader_1.default, { title: section.title, action: sectionIndex === 0 && editLink ? (react_1.default.createElement(Stack_1.default, { direction: "row", justifyContent: "flex-end" },
+                    react_1.default.createElement(material_1.Button, { href: editLink, variant: "contained" }, editLabel))) : (react_1.default.createElement(react_1.default.Fragment, null)) })),
             react_1.default.createElement(CardContent_1.default, null,
-                editLink &&
-                    react_1.default.createElement(Stack_1.default, { direction: "row", justifyContent: "flex-end" },
-                        react_1.default.createElement(material_1.Button, { href: editLink, variant: "contained" }, editLabel)),
                 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') {
                         const field = row;
+                        const fieldProps = fieldsProps && fieldsProps.hasOwnProperty(field)
+                            ? fieldsProps[field]
+                            : {};
                         return (react_1.default.createElement(Box_1.default, { key: field, sx: sxRow },
-                            react_1.default.createElement(DetailFieldBySchema_1.default, { name: field, value: values[field], schema: schema, labelKey: labelKey, decimalScale: decimalScale, sxField: sxField, sxLabel: sxLabel, sxValue: sxValue, sxValueList: sxValueList, sxValueListItem: sxValueListItem, sxValueListItemText: sxValueListItemText })));
+                            react_1.default.createElement(DetailFieldBySchema_1.default, Object.assign({ name: field, value: values[field], schema: schema, labelKey: labelKey, decimalScale: decimalScale, sxField: sxField, sxLabel: sxLabel, sxValue: sxValue, sxValueList: sxValueList, sxValueListItem: sxValueListItem, sxValueListItemText: sxValueListItemText }, fieldProps))));
                     }
-                    return (react_1.default.createElement(Box_1.default, { key: `row_${rowIndex}`, sx: sxRowMultiple }, row.map((field, i, j) => (react_1.default.createElement(react_1.default.Fragment, { key: field },
-                        react_1.default.createElement(DetailFieldBySchema_1.default, { name: field, value: values[field], schema: schema, labelKey: labelKey, decimalScale: decimalScale, sxField: sxField, sxLabel: sxLabel, sxValue: sxValue, sxValueList: sxValueList, sxValueListItem: sxValueListItem, sxValueListItemText: sxValueListItemText }))))));
+                    if (Array.isArray(row)) {
+                        return (react_1.default.createElement(Box_1.default, { key: `row_${rowIndex}`, sx: sxRowMultiple }, row.map((field, i) => {
+                            const key = typeof field === 'string'
+                                ? field
+                                : field.key;
+                            const fieldProps = fieldsProps &&
+                                fieldsProps.hasOwnProperty(key)
+                                ? fieldsProps[key]
+                                : {};
+                            return (react_1.default.createElement(react_1.default.Fragment, { key: `field_${rowIndex}_${i}` }, typeof field === 'string' ? (react_1.default.createElement(DetailFieldBySchema_1.default, Object.assign({ name: field, value: values[field], schema: schema, labelKey: labelKey, decimalScale: decimalScale, sxField: sxField, sxLabel: sxLabel, sxValue: sxValue, sxValueList: sxValueList, sxValueListItem: sxValueListItem, sxValueListItemText: sxValueListItemText }, fieldProps))) : (react_1.default.createElement(field.CustomElement, Object.assign({ sxField: sxField, sxLabel: sxLabel, sxValue: sxValue, sxValueList: sxValueList, sxValueListItem: sxValueListItem, sxValueListItemText: sxValueListItemText }, fieldProps)))));
+                        })));
+                    }
+                    const fieldProps = fieldsProps && fieldsProps.hasOwnProperty(row.key)
+                        ? fieldsProps[row.key]
+                        : {};
+                    return (react_1.default.createElement(row.CustomElement, Object.assign({ sxField: sxField, sxLabel: sxLabel, sxValue: sxValue, sxValueList: sxValueList, sxValueListItem: sxValueListItem, sxValueListItemText: sxValueListItemText }, fieldProps)));
                 }))))));
     })));
 }

package/dist/components/details/DetailFieldBySchema.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DetailFieldBySchemaProps } from '../../utils';
-export default function DetailFieldBySchema({ name, value, schema, labelKey, decimalScale, optionIdKey, optionLabelKey, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailFieldBySchemaProps): JSX.Element;
+export default function DetailFieldBySchema({ name, value, schema, labelKey, optionIdKey, optionLabelKey, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailFieldBySchemaProps): JSX.Element;

package/dist/components/details/DetailFieldBySchema.js

@@ -10,7 +10,7 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
 const List_1 = __importDefault(require("@mui/material/List"));
 const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
 const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
-function DetailFieldBySchema({ name, value, schema, labelKey = 'label', decimalScale = 2, optionIdKey = 'value', optionLabelKey = 'display_name', sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
+function DetailFieldBySchema({ name, value, schema, labelKey = 'label', optionIdKey = 'value', optionLabelKey = 'display_name', sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
     if (!value) {
         return (react_1.default.createElement(Box_1.default, { sx: sxField },
             react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
@@ -57,6 +57,11 @@ function DetailFieldBySchema({ name, value, schema, labelKey = 'label', decimalS
             return (react_1.default.createElement(Box_1.default, { sx: sxField },
                 react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
                 react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.toLocaleString())));
+        case 'email':
+            return (react_1.default.createElement(Box_1.default, { sx: sxField },
+                react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
+                react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue },
+                    react_1.default.createElement("a", { href: `mailto: ${value}` }, value))));
         case 'number':
         case 'integer':
         case 'password':

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

@@ -1,19 +1,15 @@
-import React from 'react';
+/// <reference types="react" />
 import { UseFormRegister } from 'react-hook-form';
-import { FieldBySchemaProps, Item } from '../../utils';
+import { CommonFieldProps, FieldBySchemaProps, FormFieldLayout, Item } from '../../utils';
 import { OptionsACType } from '../../context/APIWrapperContext';
-interface FieldLayout {
-    title?: string;
-    rows?: (string | string[])[];
-    CustomElement?: React.ReactNode;
-}
 interface FormBySchemaProps extends Omit<FieldBySchemaProps, 'name'> {
-    fieldsLayout?: FieldLayout[];
+    fieldsLayout?: FormFieldLayout[];
     hiddenFields?: string[];
     register?: UseFormRegister<Item>;
     setOptionsAC?: (x: OptionsACType) => void;
     forceReload?: boolean;
     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, 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 fieldProps = fieldsProps && fieldsProps.hasOwnProperty(field)
+                                ? fieldsProps[field]
+                                : {};
+                            fieldProps.sx = fieldProps.hasOwnProperty('sx')
+                                ? fieldProps.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 }, fieldProps))));
+                        }
+                        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 fieldProps = fieldsProps &&
+                                        fieldsProps.hasOwnProperty(key)
+                                        ? fieldsProps[key]
+                                        : {};
+                                    fieldProps.sx =
+                                        fieldProps.hasOwnProperty('sx')
+                                            ? Object.assign(Object.assign({}, fieldProps.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 }, fieldProps))) : (react_1.default.createElement(field.CustomElement, Object.assign({}, fieldProps)))));
+                                }))));
                         }
-                        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 fieldProps = fieldsProps && fieldsProps.hasOwnProperty(row.key)
+                            ? fieldsProps[row.key]
+                            : {};
+                        fieldProps.sx = fieldProps.hasOwnProperty('sx')
+                            ? fieldProps.sx
+                            : defaultSx;
+                        return react_1.default.createElement(row.CustomElement, Object.assign({}, fieldProps));
                     }))))));
         })));
 }

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/utils.d.ts

@@ -80,11 +80,8 @@ export interface ItemSchemaColumnsType {
     modelOptions: modelOptionsType;
     columns?: GridEnrichedBySchemaColDef[];
 }
-export interface FieldBySchemaProps {
-    name: string;
-    schema: SchemaType;
-    control: Control;
-    errors: Item;
+export interface CommonFieldProps {
+    value?: any;
     multiline?: boolean;
     setValue?: UseFormSetValue<FieldValues>;
     getValues?: UseFormGetValues<FieldValues>;
@@ -111,6 +108,12 @@ export interface FieldBySchemaProps {
     optionLabelKey?: string;
     disabled?: boolean;
 }
+export interface FieldBySchemaProps extends Omit<CommonFieldProps, 'value'> {
+    name: string;
+    schema: SchemaType;
+    control: Control;
+    errors: Item;
+}
 export interface DetailFieldBySchemaProps {
     name: string;
     schema: SchemaType;
@@ -172,4 +175,43 @@ export type OnSelectActions = {
     title: string;
     action: OnSelectActionTypes;
 };
+interface CustomFormField {
+    key: string;
+    CustomElement: (x: CommonFieldProps) => JSX.Element;
+}
+export interface FormFieldLayout {
+    title?: string;
+    rows?: (string | (string | CustomFormField)[] | CustomFormField)[];
+    CustomElement?: React.ReactNode;
+}
+export interface ExtraSxCommonFieldProps {
+    sxRow?: SxProps;
+    sxRowMultiple?: SxProps;
+    sxField?: SxProps;
+    sxLabel?: SxProps;
+    sxValue?: SxProps;
+    sxValueList?: SxProps;
+    sxValueListItem?: SxProps;
+    sxValueListItemText?: SxProps;
+}
+export type DetailCommonFieldProps = CommonFieldProps & ExtraSxCommonFieldProps;
+interface CustomDetailField {
+    key: string;
+    CustomElement: (x: DetailCommonFieldProps) => JSX.Element;
+}
+export interface DetailFieldLayout {
+    title?: string;
+    rows?: (string | (string | CustomDetailField)[] | CustomDetailField)[];
+    CustomElement?: React.ReactNode;
+}
+export interface DetailBySchemaProps extends ExtraSxCommonFieldProps {
+    values: Item;
+    schema: SchemaType;
+    editLink?: string;
+    editLabel?: string;
+    labelKey?: string;
+    decimalScale?: number;
+    fieldsLayout?: DetailFieldLayout[];
+    fieldsProps?: Record<string, DetailCommonFieldProps>;
+}
 export {};

package/package.json

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