drf-react-by-schema 0.9.0 → 0.10.1

package/dist/api.d.ts

@@ -63,6 +63,7 @@ export interface GetGenericModelListProps {
     columnFields: string[];
     hiddenFields?: string[];
     creatableFields?: string[];
+    disabledFields?: string[];
     isInBatches?: boolean;
     loadedSchema?: SchemaType | boolean;
     loadedModelOptions?: modelOptionsType | boolean;
@@ -82,7 +83,7 @@ interface SumRowsItem {
     suffix?: string;
     isCount?: boolean;
 }
-export declare const getGenericModelList: ({ model, serverEndPoint, id, relatedModel, relatedModelId, columnFields, hiddenFields, creatableFields, isInBatches, loadedSchema, loadedModelOptions, page, filter, queryParams, sort, sumRows, }: GetGenericModelListProps) => Promise<false | DataSchemaColumnsType>;
+export declare const getGenericModelList: ({ model, serverEndPoint, id, relatedModel, relatedModelId, columnFields, hiddenFields, creatableFields, disabledFields, isInBatches, loadedSchema, loadedModelOptions, page, filter, queryParams, sort, sumRows, }: GetGenericModelListProps) => Promise<false | DataSchemaColumnsType>;
 export declare const getGenericModel: ({ model, serverEndPoint, id, relatedModel, relatedModelId, }: {
     model: string;
     serverEndPoint: serverEndPointType | null;

package/dist/api.js

@@ -402,7 +402,7 @@ const addExistingRelatedModel = ({ model, serverEndPoint, id, data, }) => __awai
     return response;
 });
 exports.addExistingRelatedModel = addExistingRelatedModel;
-const getDataGridColumns = (schema, columnFields = [], hiddenFields = [], creatableFields = []) => {
+const getDataGridColumns = (schema, columnFields = [], hiddenFields = [], creatableFields = [], disabledFields = []) => {
     if (!schema) {
         return false;
     }
@@ -418,6 +418,7 @@ const getDataGridColumns = (schema, columnFields = [], hiddenFields = [], creata
             headerName: schema[field].label,
             hide: hiddenFields.includes(field),
             creatable: creatableFields.includes(field) || schema[field].creatable,
+            disabled: disabledFields.includes(field),
             width: 100,
         };
         return column;
@@ -565,7 +566,7 @@ const signUp = (data, serverEndPoint) => __awaiter(void 0, void 0, void 0, funct
     }
 });
 exports.signUp = signUp;
-const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, queryParams = [], sort, sumRows, }) => __awaiter(void 0, void 0, void 0, function* () {
+const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], disabledFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, queryParams = [], sort, sumRows, }) => __awaiter(void 0, void 0, void 0, function* () {
     let path = `${model}/${id}`;
     let schemaPath = `${model}/`;
     let schema = loadedSchema;
@@ -623,7 +624,7 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
         }
         schema = options.schema;
         modelOptions = options.modelOptions;
-        columns = getDataGridColumns(schema, columnFields, hiddenFields, creatableFields);
+        columns = getDataGridColumns(schema, columnFields, hiddenFields, creatableFields, disabledFields);
         if (!columns) {
             return false;
         }

package/dist/components/DataGridBySchemaEditable.js

@@ -168,6 +168,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             }
             column.editable =
                 isEditable &&
+                    !col.disabled &&
                     (!schema[col.field].read_only ||
                         ['field', 'nested object'].includes(schema[col.field].type));
             if (['field', 'nested object'].includes(schema[col.field].type)) {
@@ -184,7 +185,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     column.filterOperators = (0, utils_2.quantityOnlyOperators)({
                         type: 'date',
                     });
-                    if (isEditable) {
+                    if (isEditable && !col.disabled) {
                         column.renderEditCell = (params) => (react_1.default.createElement(GridDateInput_1.GridDateInput, Object.assign({}, params, { column: column, dateViews: schema[col.field].date_views })));
                         break;
                     }
@@ -199,7 +200,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     break;
                 case 'nested object':
                     column.minWidth = 150;
-                    if (isEditable) {
+                    if (isEditable && !col.disabled) {
                         column.valueFormatter = (params) => {
                             return !params.value ? '' : params.value.label;
                         };
@@ -216,7 +217,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     break;
                 case 'field':
                     column.orderable = false;
-                    if (isEditable) {
+                    if (isEditable && !col.disabled) {
                         column.minWidth = 300;
                         column.valueFormatter = (params) => {
                             return !params.value || !Array.isArray(params.value)
@@ -234,7 +235,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     };
                     break;
                 case 'choice':
-                    if (isEditable) {
+                    if (isEditable && !col.disabled) {
                         column.minWidth = 150;
                         column.valueFormatter = (params) => {
                             return !params.value ? '' : params.value.display_name;
@@ -251,7 +252,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     };
                     break;
                 case 'boolean':
-                    if (isEditable) {
+                    if (isEditable && !col.disabled) {
                         column.valueFormatter = (params) => {
                             return params.value ? 'Sim' : 'Não';
                         };
@@ -277,7 +278,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                                 maximumFractionDigits: decimalScale,
                             });
                     };
-                    if (isEditable) {
+                    if (isEditable && !col.disabled) {
                         column.renderEditCell = (params) => (react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, { decimalPlaces: decimalScale, isCurrency: isCurrency, prefix: prefix, suffix: suffix, column: column })));
                     }
                     column.filterOperators = (0, utils_2.quantityOnlyOperators)({
@@ -314,6 +315,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                         return (react_1.default.createElement(LinkComponent, { to: `${indexFieldBasePath}${targetId}`, state: stateToLink }, params.formattedValue));
                     };
                     if (isEditable &&
+                        !col.disabled &&
                         optionsAC.current &&
                         col.field in optionsAC.current &&
                         addExistingModel) {
@@ -339,7 +341,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     const formattedValue = new stringMask(column.patternFormat, {}).apply(params.value);
                     return formattedValue;
                 };
-                if (isEditable) {
+                if (isEditable && !col.disabled) {
                     column.renderEditCell = (params) => (react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat })));
                 }
             }

package/dist/components/GenericModelList.d.ts

@@ -7,6 +7,7 @@ interface GenericModelListProps {
     columnFields: string[];
     hiddenFields?: string[];
     creatableFields?: string[];
+    disabledFields?: string[];
     minWidthFields?: Record<string, number>;
     indexField: string;
     indexFieldBasePath: string;
@@ -25,5 +26,5 @@ interface GenericModelListProps {
     defaultFilter?: GridFilterModel;
     queryParams?: string[];
 }
-declare const GenericModelList: ({ model, columnFields, hiddenFields, creatableFields, minWidthFields, indexField, indexFieldBasePath, addExistingModel, onProcessRow, customColumnOperations, customLinkDestination, isEditable, hasBulkSelect, sumRows, isAutoHeight, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, }: GenericModelListProps) => JSX.Element;
+declare const GenericModelList: ({ model, columnFields, hiddenFields, creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, addExistingModel, onProcessRow, customColumnOperations, customLinkDestination, isEditable, hasBulkSelect, sumRows, isAutoHeight, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, }: GenericModelListProps) => JSX.Element;
 export default GenericModelList;

package/dist/components/GenericModelList.js

@@ -48,7 +48,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, minWidthFields, indexField, indexFieldBasePath, addExistingModel, onProcessRow, customColumnOperations, customLinkDestination, isEditable, hasBulkSelect = false, sumRows, isAutoHeight = true, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, }) => {
+const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, addExistingModel, onProcessRow, customColumnOperations, customLinkDestination, isEditable, hasBulkSelect = false, sumRows, isAutoHeight = true, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, }) => {
     const { serverEndPoint, isInBatches, firstBatchLength } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const { onEditModel, handleLoading } = (0, APIWrapperContext_1.useAPIWrapper)();
     const [data, setData] = (0, react_1.useState)(false);
@@ -76,6 +76,7 @@ const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFie
                     columnFields,
                     hiddenFields,
                     creatableFields,
+                    disabledFields,
                     isInBatches,
                     queryParams,
                 };
@@ -106,6 +107,7 @@ const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFie
                     columnFields,
                     hiddenFields,
                     creatableFields,
+                    disabledFields,
                     page,
                     filter,
                     queryParams,

package/dist/components/GenericRelatedModelList.d.ts

@@ -9,6 +9,7 @@ interface GenericRelatedModelListProps {
     columnFields: string[];
     hiddenFields: string[];
     creatableFields: string[];
+    disabledFields: string[];
     usuaria?: Item | null;
     minWidthFields?: Record<string, number>;
     indexField?: string;
@@ -27,5 +28,5 @@ interface GenericRelatedModelListProps {
     defaultFilter?: GridFilterModel;
     queryParams?: string[];
 }
-export default function GenericRelatedModelList({ model, id, relatedModel, columnFields, hiddenFields, creatableFields, usuaria, minWidthFields, indexField, indexFieldBasePath, addExistingModel, label, onProcessRow, customColumnOperations, isEditable, hasBulkSelect, sumRows, isAutoHeight, isInBatches, noCardWrapper, paginationMode, defaultFilter, queryParams, }: GenericRelatedModelListProps): JSX.Element;
+export default function GenericRelatedModelList({ model, id, relatedModel, columnFields, hiddenFields, creatableFields, disabledFields, usuaria, minWidthFields, indexField, indexFieldBasePath, addExistingModel, label, onProcessRow, customColumnOperations, isEditable, hasBulkSelect, sumRows, isAutoHeight, isInBatches, noCardWrapper, paginationMode, defaultFilter, queryParams, }: GenericRelatedModelListProps): JSX.Element;
 export {};

package/dist/components/GenericRelatedModelList.js

@@ -56,7 +56,7 @@ const ContentTable = ({ data, relatedModel, model, id, indexField, indexFieldBas
                     ? data.rowCount
                     : 0 }))),
     react_1.default.createElement(DataTotals_1.default, { data: data.data, sumRows: sumRows, visibleRows: visibleRows })));
-function GenericRelatedModelList({ model, id, relatedModel, columnFields, hiddenFields, creatableFields, usuaria = null, minWidthFields, indexField, indexFieldBasePath, addExistingModel, label, onProcessRow, customColumnOperations, isEditable = true, hasBulkSelect = false, sumRows, isAutoHeight = false, isInBatches = true, noCardWrapper = false, paginationMode = 'client', defaultFilter, queryParams, }) {
+function GenericRelatedModelList({ model, id, relatedModel, columnFields, hiddenFields, creatableFields, disabledFields, usuaria = null, minWidthFields, indexField, indexFieldBasePath, addExistingModel, label, onProcessRow, customColumnOperations, isEditable = true, hasBulkSelect = false, sumRows, isAutoHeight = false, isInBatches = true, noCardWrapper = false, paginationMode = 'client', defaultFilter, queryParams, }) {
     const [data, setData] = (0, react_1.useState)(false);
     const [visibleRows, setVisibleRows] = (0, react_1.useState)([]);
     const [hideFooterPagination, setHideFooterPagination] = (0, react_1.useState)(false);
@@ -83,6 +83,7 @@ function GenericRelatedModelList({ model, id, relatedModel, columnFields, hidden
                     indexFieldBasePath,
                     columnFields,
                     creatableFields,
+                    disabledFields,
                     hiddenFields,
                     usuaria,
                     isInBatches,
@@ -115,6 +116,8 @@ function GenericRelatedModelList({ model, id, relatedModel, columnFields, hidden
                     relatedModel,
                     columnFields,
                     hiddenFields,
+                    creatableFields,
+                    disabledFields,
                     page,
                     filter,
                     sort,

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

@@ -0,0 +1,28 @@
+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;
+    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, labelKey, optionsAC, setOptionsAC, decimalScale, fieldsLayout: fieldsLayoutInitial, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailBySchemaProps): JSX.Element;
+export {};

package/dist/components/details/DetailBySchema.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Card_1 = __importDefault(require("@mui/material/Card"));
+const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
+const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const DetailFieldBySchema_1 = __importDefault(require("./DetailFieldBySchema"));
+const styles_1 = require("../../styles");
+const APIWrapperContext_1 = require("../../context/APIWrapperContext");
+function DetailBySchema({ values, schema, labelKey = 'label', optionsAC, setOptionsAC, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
+    const { getAutoComplete } = (0, APIWrapperContext_1.useAPIWrapper)();
+    const [fieldsLayout, setFieldsLayout] = (0, react_1.useState)([]);
+    const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)(undefined);
+    const getColumns = () => {
+        if (fieldsLayoutInitial && fieldsLayoutInitial.length > 0) {
+            return fieldsLayoutInitial;
+        }
+        const rows = [];
+        for (const [key, field] of Object.entries(schema)) {
+            if (['field', 'nested object'].includes(field.type)) {
+                rows.push(key);
+                continue;
+            }
+        }
+        return [{ rows }];
+    };
+    (0, react_1.useEffect)(() => {
+        const newFieldsLayout = getColumns();
+        setFieldsLayout(newFieldsLayout);
+    }, []);
+    if (fieldsLayout.length === 0) {
+        return (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
+            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)))));
+    }
+    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 }),
+            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) => {
+                    if (typeof row === 'string') {
+                        const field = row;
+                        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 })));
+                    }
+                    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 }))))));
+                }))))));
+    })));
+}
+exports.default = DetailBySchema;

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

@@ -0,0 +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;

package/dist/components/details/DetailFieldBySchema.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const moment_1 = __importDefault(require("moment"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+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, }) {
+    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),
+            react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, "-")));
+    }
+    switch (schema[name].type) {
+        case 'date':
+            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 }, (0, moment_1.default)(value).format('DD/MM/YYYY'))));
+        case 'datetime':
+            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 }, (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm'))));
+        case 'nested object':
+        case 'field':
+            const multiple = schema[name].many || false;
+            if (multiple) {
+                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(List_1.default, { sx: sxValueList }, value.map((singleValue) => (react_1.default.createElement(ListItem_1.default, { key: singleValue.id, sx: sxValueListItem },
+                        react_1.default.createElement(ListItemText_1.default, { sx: sxValueListItemText }, singleValue[labelKey])))))));
+            }
+            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[labelKey])));
+        case 'choice':
+            const multipleChoice = schema[name].many || false;
+            if (multipleChoice) {
+                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(List_1.default, { sx: sxValueList }, value.map((singleValue) => (react_1.default.createElement(ListItem_1.default, { key: singleValue[optionIdKey], sx: sxValueListItem },
+                        react_1.default.createElement(ListItemText_1.default, { sx: sxValueListItemText }, singleValue[optionLabelKey])))))));
+            }
+            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.display_name)));
+        case 'boolean':
+            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 ? 'Sim' : 'Não')));
+        case 'decimal':
+        case 'float':
+            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 'number':
+        case 'integer':
+        case 'password':
+        default:
+            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)));
+    }
+}
+exports.default = DetailFieldBySchema;

package/dist/components/forms/FieldBySchema.js

@@ -45,7 +45,7 @@ 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 : null, 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, multiple: multiple, sx: sx }, 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 }));
         case 'boolean':

package/dist/index.d.ts

@@ -19,4 +19,6 @@ import DesktopDateTimePickerBySchema from './components/forms/inputs/DesktopDate
 import EditableAutocompleteFieldBySchema from './components/forms/inputs/EditableAutocompleteFieldBySchema';
 import AutocompleteFieldBySchema from './components/forms/inputs/AutocompleteFieldBySchema';
 import FloatFieldBySchema from './components/forms/inputs/FloatFieldBySchema';
-export { DRFReactBySchemaProvider, useAPIWrapper, useDRFReactBySchema, Form, FormBySchema, DialogFormBySchema, DataGridBySchemaEditable, GenericModelList, GenericRelatedModelList, DataTotals, DialogActions, FieldBySchema, TextFieldBySchema, BooleanFieldBySchema, DesktopDatePickerBySchema, DesktopDateTimePickerBySchema, EditableAutocompleteFieldBySchema, AutocompleteFieldBySchema, FloatFieldBySchema, updateData, partialUpdateData, createData, deleteData, createOrUpdateData, updateDataBySchema, addExistingRelatedModel, getAutoComplete, loginByPayload, setAuthToken, isLoggedIn, getGenericModelList, getGenericModel, emptyByType, getChoiceByValue, populateValues, buildGenericYupValidationSchema, errorProps, getTmpId, isTmpId, getPatternFormat, clearJWT, hasJWT, slugToCamelCase, };
+import DetailBySchema from './components/details/DetailBySchema';
+import DetailFieldBySchema from './components/details/DetailFieldBySchema';
+export { DRFReactBySchemaProvider, useAPIWrapper, useDRFReactBySchema, Form, FormBySchema, DialogFormBySchema, DataGridBySchemaEditable, GenericModelList, GenericRelatedModelList, DataTotals, DialogActions, FieldBySchema, TextFieldBySchema, BooleanFieldBySchema, DesktopDatePickerBySchema, DesktopDateTimePickerBySchema, EditableAutocompleteFieldBySchema, AutocompleteFieldBySchema, FloatFieldBySchema, DetailBySchema, DetailFieldBySchema, updateData, partialUpdateData, createData, deleteData, createOrUpdateData, updateDataBySchema, addExistingRelatedModel, getAutoComplete, loginByPayload, setAuthToken, isLoggedIn, getGenericModelList, getGenericModel, emptyByType, getChoiceByValue, populateValues, buildGenericYupValidationSchema, errorProps, getTmpId, isTmpId, getPatternFormat, clearJWT, hasJWT, slugToCamelCase, };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.slugToCamelCase = exports.hasJWT = exports.clearJWT = exports.getPatternFormat = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = exports.getGenericModel = exports.getGenericModelList = exports.isLoggedIn = exports.setAuthToken = exports.loginByPayload = exports.getAutoComplete = exports.addExistingRelatedModel = exports.updateDataBySchema = exports.createOrUpdateData = exports.deleteData = exports.createData = exports.partialUpdateData = exports.updateData = exports.FloatFieldBySchema = exports.AutocompleteFieldBySchema = exports.EditableAutocompleteFieldBySchema = exports.DesktopDateTimePickerBySchema = exports.DesktopDatePickerBySchema = exports.BooleanFieldBySchema = exports.TextFieldBySchema = exports.FieldBySchema = exports.DialogActions = exports.DataTotals = exports.GenericRelatedModelList = exports.GenericModelList = exports.DataGridBySchemaEditable = exports.DialogFormBySchema = exports.FormBySchema = exports.Form = exports.useDRFReactBySchema = exports.useAPIWrapper = exports.DRFReactBySchemaProvider = void 0;
+exports.slugToCamelCase = exports.hasJWT = exports.clearJWT = exports.getPatternFormat = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = exports.getGenericModel = exports.getGenericModelList = exports.isLoggedIn = exports.setAuthToken = exports.loginByPayload = exports.getAutoComplete = exports.addExistingRelatedModel = exports.updateDataBySchema = exports.createOrUpdateData = exports.deleteData = exports.createData = exports.partialUpdateData = exports.updateData = exports.DetailFieldBySchema = exports.DetailBySchema = exports.FloatFieldBySchema = exports.AutocompleteFieldBySchema = exports.EditableAutocompleteFieldBySchema = exports.DesktopDateTimePickerBySchema = exports.DesktopDatePickerBySchema = exports.BooleanFieldBySchema = exports.TextFieldBySchema = exports.FieldBySchema = exports.DialogActions = exports.DataTotals = exports.GenericRelatedModelList = exports.GenericModelList = exports.DataGridBySchemaEditable = exports.DialogFormBySchema = exports.FormBySchema = exports.Form = exports.useDRFReactBySchema = exports.useAPIWrapper = exports.DRFReactBySchemaProvider = void 0;
 // Methods:
 const api_1 = require("./api");
 Object.defineProperty(exports, "updateData", { enumerable: true, get: function () { return api_1.updateData; } });
@@ -73,3 +73,8 @@ const AutocompleteFieldBySchema_1 = __importDefault(require("./components/forms/
 exports.AutocompleteFieldBySchema = AutocompleteFieldBySchema_1.default;
 const FloatFieldBySchema_1 = __importDefault(require("./components/forms/inputs/FloatFieldBySchema"));
 exports.FloatFieldBySchema = FloatFieldBySchema_1.default;
+// DetailComponents
+const DetailBySchema_1 = __importDefault(require("./components/details/DetailBySchema"));
+exports.DetailBySchema = DetailBySchema_1.default;
+const DetailFieldBySchema_1 = __importDefault(require("./components/details/DetailFieldBySchema"));
+exports.DetailFieldBySchema = DetailFieldBySchema_1.default;

package/dist/styles/layout.js

@@ -10,14 +10,14 @@ exports.content = {
     pr: 3,
     pl: 3,
     pt: 2,
-    pb: 0
+    pb: 0,
 };
 exports.main = Object.assign(Object.assign({}, exports.content), { ml: 4 });
 exports.flexRow = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
 };
 exports.topBar = Object.assign(Object.assign({}, exports.flexRow), { width: '100%', pl: 3, pr: 6 });
 exports.loadingBox = Object.assign(Object.assign({}, exports.flexRow), { height: '100%', backgroundColor: '#ccc', justifyContent: 'center' });
@@ -29,29 +29,29 @@ exports.flexRowGrow = Object.assign(Object.assign({}, exports.flexRow), { flexGr
 exports.topBarOverList = Object.assign(Object.assign({}, exports.flexRowGrow), { mb: 2 });
 exports.dataGrid = {
     height: 'calc(100vh - 180px)',
-    mt: 2
+    mt: 2,
 };
 exports.dataGridWithTabs = Object.assign(Object.assign({}, exports.dataGrid), { mt: 0 });
 exports.dataGridFixedHeight = Object.assign(Object.assign({}, exports.dataGrid), { height: 400 });
 exports.fullWidthButton = {
     mt: 3,
-    width: '100%'
+    width: '100%',
 };
 exports.formCard = {
     width: '100%',
     backgroundColor: theme_1.default.palette.formCard.main,
     mt: 2,
-    mb: 2
+    mb: 2,
 };
 exports.formCardContent = {
     maxHeight: 350,
-    overflow: 'scroll'
+    overflow: 'scroll',
 };
 exports.metabaseAppEmbed = {
-    height: 1700
+    height: 1700,
 };
 exports.geoPicker = {
     height: 350,
     width: '100%',
-    mt: 0
+    mt: 0,
 };

package/dist/utils.d.ts

@@ -54,12 +54,14 @@ export interface Field {
 interface GridBySchemaColDef extends GridColDef {
     isIndexField?: boolean;
     creatable?: boolean;
+    disabled?: boolean;
     orderable?: boolean;
     patternFormat?: string;
 }
 interface GridActionsBySchemaColDef extends GridActionsColDef {
     isIndexField?: boolean;
     creatable?: boolean;
+    disabled?: boolean;
     orderable?: boolean;
     patternFormat?: string;
 }
@@ -108,6 +110,21 @@ export interface FieldBySchemaProps {
     optionIdKey?: string;
     optionLabelKey?: string;
 }
+export interface DetailFieldBySchemaProps {
+    name: string;
+    schema: SchemaType;
+    value: any;
+    labelKey?: string;
+    decimalScale?: number;
+    optionIdKey?: string;
+    optionLabelKey?: string;
+    sxField?: SxProps;
+    sxLabel?: SxProps;
+    sxValue?: SxProps;
+    sxValueList?: SxProps;
+    sxValueListItem?: SxProps;
+    sxValueListItemText?: SxProps;
+}
 export declare const emptyByType: any;
 export declare const getChoiceByValue: (value: number | string, choices: Choice[] | undefined) => string | null | undefined;
 export declare const populateValues: ({ data, schema }: {

package/package.json

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