drf-react-by-schema 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import { SxProps } from '@mui/material';
3
+ import { Item, SchemaType } from '../../utils';
4
+ import { OptionsACType } from '../../context/APIWrapperContext';
5
+ interface FieldLayout {
6
+ title?: string;
7
+ rows?: (string | string[])[];
8
+ CustomElement?: React.ReactNode;
9
+ }
10
+ interface DetailBySchemaProps {
11
+ values: Item;
12
+ schema: SchemaType;
13
+ labelKey?: string;
14
+ optionsAC?: OptionsACType;
15
+ setOptionsAC?: (x: OptionsACType) => void;
16
+ decimalScale?: number;
17
+ fieldsLayout?: FieldLayout[];
18
+ sxRow?: SxProps;
19
+ sxRowMultiple?: SxProps;
20
+ sxField?: SxProps;
21
+ sxLabel?: SxProps;
22
+ sxValue?: SxProps;
23
+ sxValueList?: SxProps;
24
+ sxValueListItem?: SxProps;
25
+ sxValueListItemText?: SxProps;
26
+ }
27
+ export default function DetailBySchema({ values, schema, labelKey, optionsAC, setOptionsAC, decimalScale, fieldsLayout: fieldsLayoutInitial, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailBySchemaProps): JSX.Element;
28
+ export {};
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ const react_1 = __importStar(require("react"));
30
+ const Box_1 = __importDefault(require("@mui/material/Box"));
31
+ const Card_1 = __importDefault(require("@mui/material/Card"));
32
+ const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
33
+ const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
34
+ const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
35
+ const DetailFieldBySchema_1 = __importDefault(require("./DetailFieldBySchema"));
36
+ const styles_1 = require("../../styles");
37
+ const APIWrapperContext_1 = require("../../context/APIWrapperContext");
38
+ function DetailBySchema({ values, schema, labelKey = 'label', optionsAC, setOptionsAC, decimalScale = 2, fieldsLayout: fieldsLayoutInitial, sxRow, sxRowMultiple, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
39
+ const { getAutoComplete } = (0, APIWrapperContext_1.useAPIWrapper)();
40
+ const [fieldsLayout, setFieldsLayout] = (0, react_1.useState)([]);
41
+ const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)(undefined);
42
+ const getColumns = () => {
43
+ if (fieldsLayoutInitial && fieldsLayoutInitial.length > 0) {
44
+ return fieldsLayoutInitial;
45
+ }
46
+ const rows = [];
47
+ for (const [key, field] of Object.entries(schema)) {
48
+ if (['field', 'nested object'].includes(field.type)) {
49
+ rows.push(key);
50
+ continue;
51
+ }
52
+ }
53
+ return [{ rows }];
54
+ };
55
+ (0, react_1.useEffect)(() => {
56
+ const newFieldsLayout = getColumns();
57
+ setFieldsLayout(newFieldsLayout);
58
+ }, []);
59
+ if (fieldsLayout.length === 0) {
60
+ return (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
61
+ react_1.default.createElement(CardContent_1.default, null,
62
+ react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.loadingBoxWhite },
63
+ react_1.default.createElement(CircularProgress_1.default, null)))));
64
+ }
65
+ return (react_1.default.createElement(react_1.default.Fragment, null, fieldsLayout.map((section, sectionIndex) => {
66
+ return (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard, key: `section_${sectionIndex}` },
67
+ section.title && react_1.default.createElement(CardHeader_1.default, { title: section.title }),
68
+ react_1.default.createElement(CardContent_1.default, null,
69
+ section.CustomElement && react_1.default.createElement(react_1.default.Fragment, null, section.CustomElement),
70
+ section.rows && (react_1.default.createElement(react_1.default.Fragment, null, section.rows.map((row, rowIndex) => {
71
+ if (typeof row === 'string') {
72
+ const field = row;
73
+ return (react_1.default.createElement(Box_1.default, { key: field, sx: sxRow },
74
+ 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 })));
75
+ }
76
+ 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 },
77
+ 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 }))))));
78
+ }))))));
79
+ })));
80
+ }
81
+ exports.default = DetailBySchema;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { DetailFieldBySchemaProps } from '../../utils';
3
+ export default function DetailFieldBySchema({ name, value, schema, labelKey, decimalScale, optionIdKey, optionLabelKey, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }: DetailFieldBySchemaProps): JSX.Element;
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const moment_1 = __importDefault(require("moment"));
8
+ const Typography_1 = __importDefault(require("@mui/material/Typography"));
9
+ const Box_1 = __importDefault(require("@mui/material/Box"));
10
+ const List_1 = __importDefault(require("@mui/material/List"));
11
+ const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
12
+ const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
13
+ function DetailFieldBySchema({ name, value, schema, labelKey = 'label', decimalScale = 2, optionIdKey = 'value', optionLabelKey = 'display_name', sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
14
+ if (!value) {
15
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
16
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
17
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, "-")));
18
+ }
19
+ switch (schema[name].type) {
20
+ case 'date':
21
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
22
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
23
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, (0, moment_1.default)(value).format('DD/MM/YYYY'))));
24
+ case 'datetime':
25
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
26
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
27
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm'))));
28
+ case 'nested object':
29
+ case 'field':
30
+ const multiple = schema[name].many || false;
31
+ if (multiple) {
32
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
33
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
34
+ react_1.default.createElement(List_1.default, { sx: sxValueList }, value.map((singleValue) => (react_1.default.createElement(ListItem_1.default, { key: singleValue.id, sx: sxValueListItem },
35
+ react_1.default.createElement(ListItemText_1.default, { sx: sxValueListItemText }, singleValue[labelKey])))))));
36
+ }
37
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
38
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
39
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value[labelKey])));
40
+ case 'choice':
41
+ const multipleChoice = schema[name].many || false;
42
+ if (multipleChoice) {
43
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
44
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
45
+ react_1.default.createElement(List_1.default, { sx: sxValueList }, value.map((singleValue) => (react_1.default.createElement(ListItem_1.default, { key: singleValue[optionIdKey], sx: sxValueListItem },
46
+ react_1.default.createElement(ListItemText_1.default, { sx: sxValueListItemText }, singleValue[optionLabelKey])))))));
47
+ }
48
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
49
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
50
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.display_name)));
51
+ case 'boolean':
52
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
53
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
54
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value ? 'Sim' : 'Não')));
55
+ case 'decimal':
56
+ case 'float':
57
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
58
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
59
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.toLocaleString())));
60
+ case 'number':
61
+ case 'integer':
62
+ case 'password':
63
+ default:
64
+ return (react_1.default.createElement(Box_1.default, { sx: sxField },
65
+ react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, schema[name].label),
66
+ react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value)));
67
+ }
68
+ }
69
+ exports.default = DetailFieldBySchema;
@@ -45,7 +45,7 @@ function FieldBySchema(_a) {
45
45
  case 'field':
46
46
  const relatedEditable = schema[name].related_editable;
47
47
  const multiple = schema[name].many || false;
48
- 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)));
48
+ 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)));
49
49
  case 'choice':
50
50
  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 }));
51
51
  case 'boolean':
package/dist/index.d.ts CHANGED
@@ -19,4 +19,6 @@ import DesktopDateTimePickerBySchema from './components/forms/inputs/DesktopDate
19
19
  import EditableAutocompleteFieldBySchema from './components/forms/inputs/EditableAutocompleteFieldBySchema';
20
20
  import AutocompleteFieldBySchema from './components/forms/inputs/AutocompleteFieldBySchema';
21
21
  import FloatFieldBySchema from './components/forms/inputs/FloatFieldBySchema';
22
- 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, };
22
+ import DetailBySchema from './components/details/DetailBySchema';
23
+ import DetailFieldBySchema from './components/details/DetailFieldBySchema';
24
+ 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 CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- 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;
6
+ 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;
7
7
  // Methods:
8
8
  const api_1 = require("./api");
9
9
  Object.defineProperty(exports, "updateData", { enumerable: true, get: function () { return api_1.updateData; } });
@@ -73,3 +73,8 @@ const AutocompleteFieldBySchema_1 = __importDefault(require("./components/forms/
73
73
  exports.AutocompleteFieldBySchema = AutocompleteFieldBySchema_1.default;
74
74
  const FloatFieldBySchema_1 = __importDefault(require("./components/forms/inputs/FloatFieldBySchema"));
75
75
  exports.FloatFieldBySchema = FloatFieldBySchema_1.default;
76
+ // DetailComponents
77
+ const DetailBySchema_1 = __importDefault(require("./components/details/DetailBySchema"));
78
+ exports.DetailBySchema = DetailBySchema_1.default;
79
+ const DetailFieldBySchema_1 = __importDefault(require("./components/details/DetailFieldBySchema"));
80
+ exports.DetailFieldBySchema = DetailFieldBySchema_1.default;
@@ -10,14 +10,14 @@ exports.content = {
10
10
  pr: 3,
11
11
  pl: 3,
12
12
  pt: 2,
13
- pb: 0
13
+ pb: 0,
14
14
  };
15
15
  exports.main = Object.assign(Object.assign({}, exports.content), { ml: 4 });
16
16
  exports.flexRow = {
17
17
  display: 'flex',
18
18
  flexDirection: 'row',
19
19
  justifyContent: 'space-between',
20
- alignItems: 'center'
20
+ alignItems: 'center',
21
21
  };
22
22
  exports.topBar = Object.assign(Object.assign({}, exports.flexRow), { width: '100%', pl: 3, pr: 6 });
23
23
  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
29
29
  exports.topBarOverList = Object.assign(Object.assign({}, exports.flexRowGrow), { mb: 2 });
30
30
  exports.dataGrid = {
31
31
  height: 'calc(100vh - 180px)',
32
- mt: 2
32
+ mt: 2,
33
33
  };
34
34
  exports.dataGridWithTabs = Object.assign(Object.assign({}, exports.dataGrid), { mt: 0 });
35
35
  exports.dataGridFixedHeight = Object.assign(Object.assign({}, exports.dataGrid), { height: 400 });
36
36
  exports.fullWidthButton = {
37
37
  mt: 3,
38
- width: '100%'
38
+ width: '100%',
39
39
  };
40
40
  exports.formCard = {
41
41
  width: '100%',
42
42
  backgroundColor: theme_1.default.palette.formCard.main,
43
43
  mt: 2,
44
- mb: 2
44
+ mb: 2,
45
45
  };
46
46
  exports.formCardContent = {
47
47
  maxHeight: 350,
48
- overflow: 'scroll'
48
+ overflow: 'scroll',
49
49
  };
50
50
  exports.metabaseAppEmbed = {
51
- height: 1700
51
+ height: 1700,
52
52
  };
53
53
  exports.geoPicker = {
54
54
  height: 350,
55
55
  width: '100%',
56
- mt: 0
56
+ mt: 0,
57
57
  };
package/dist/utils.d.ts CHANGED
@@ -108,6 +108,21 @@ export interface FieldBySchemaProps {
108
108
  optionIdKey?: string;
109
109
  optionLabelKey?: string;
110
110
  }
111
+ export interface DetailFieldBySchemaProps {
112
+ name: string;
113
+ schema: SchemaType;
114
+ value: any;
115
+ labelKey?: string;
116
+ decimalScale?: number;
117
+ optionIdKey?: string;
118
+ optionLabelKey?: string;
119
+ sxField?: SxProps;
120
+ sxLabel?: SxProps;
121
+ sxValue?: SxProps;
122
+ sxValueList?: SxProps;
123
+ sxValueListItem?: SxProps;
124
+ sxValueListItemText?: SxProps;
125
+ }
111
126
  export declare const emptyByType: any;
112
127
  export declare const getChoiceByValue: (value: number | string, choices: Choice[] | undefined) => string | null | undefined;
113
128
  export declare const populateValues: ({ data, schema }: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drf-react-by-schema",
3
- "version": "0.9.0",
3
+ "version": "0.10.0",
4
4
  "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",