drf-react-by-schema 0.15.0 → 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,38 +1,15 @@
-import React from 'react';
+/// <reference types="react" />
 import { UseFormRegister } from 'react-hook-form';
-import { SxProps } from '@mui/material';
-import { FieldBySchemaProps, Item } from '../../utils';
+import { CommonFieldProps, FieldBySchemaProps, FormFieldLayout, 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 | 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[];
+    fieldsLayout?: FormFieldLayout[];
     hiddenFields?: string[];
     register?: UseFormRegister<Item>;
     setOptionsAC?: (x: OptionsACType) => void;
     forceReload?: boolean;
     isolatedGetAutoComplete?: (model: string) => Promise<false | Item[]>;
-    fieldsProps?: Record<string, FieldProps>;
+    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): JSX.Element;
 export {};

package/dist/components/forms/FormBySchema.js

@@ -146,16 +146,16 @@ 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 fieldsPropsObj = fieldsProps && fieldsProps.hasOwnProperty(field)
+                            const fieldProps = fieldsProps && fieldsProps.hasOwnProperty(field)
                                 ? fieldsProps[field]
                                 : {};
-                            fieldsPropsObj.sx = fieldsPropsObj.hasOwnProperty('sx')
-                                ? fieldsPropsObj.sx
+                            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, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale }, fieldsPropsObj))));
+                                        : 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}` },
@@ -164,25 +164,25 @@ function FormBySchema({ schema, control, errors, register, multiline = false, se
                                     const key = typeof field === 'string'
                                         ? field
                                         : field.key;
-                                    const fieldsPropsObj = fieldsProps &&
+                                    const fieldProps = fieldsProps &&
                                         fieldsProps.hasOwnProperty(key)
                                         ? fieldsProps[key]
                                         : {};
-                                    fieldsPropsObj.sx =
-                                        fieldsPropsObj.hasOwnProperty('sx')
-                                            ? Object.assign(Object.assign({}, fieldsPropsObj.sx), { mr }) : {
+                                    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 }, fieldsPropsObj))) : (react_1.default.createElement(field.CustomElement, Object.assign({}, fieldsPropsObj)))));
+                                    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)))));
                                 }))));
                         }
-                        const fieldsPropsObj = fieldsProps && fieldsProps.hasOwnProperty(row.key)
+                        const fieldProps = fieldsProps && fieldsProps.hasOwnProperty(row.key)
                             ? fieldsProps[row.key]
                             : {};
-                        fieldsPropsObj.sx = fieldsPropsObj.hasOwnProperty('sx')
-                            ? fieldsPropsObj.sx
+                        fieldProps.sx = fieldProps.hasOwnProperty('sx')
+                            ? fieldProps.sx
                             : defaultSx;
-                        return react_1.default.createElement(row.CustomElement, Object.assign({}, fieldsPropsObj));
+                        return react_1.default.createElement(row.CustomElement, Object.assign({}, fieldProps));
                     }))))));
         })));
 }

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.15.0",
+  "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",