drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
75 lines (74 loc) • 5.69 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = DetailFieldBySchema;
const react_1 = __importDefault(require("react"));
const dayjs_1 = __importDefault(require("dayjs"));
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', 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, dayjs_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, dayjs_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 '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':
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)));
}
}