drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
74 lines (73 loc) • 6.08 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 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"));
const Button_1 = __importDefault(require("@mui/material/Button"));
const Download_1 = __importDefault(require("@mui/icons-material/Download"));
const DRFReactBySchemaContext_1 = require("../../context/DRFReactBySchemaContext");
const styles_1 = require("../../styles");
const Image_1 = __importDefault(require("../Image"));
function DetailFieldBySchema({ fieldKey, fieldSchema, value, sxField, sxLabel, sxValue, sxValueList, sxValueListItem, sxValueListItemText, }) {
const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
if (!fieldSchema) {
console.error(`DetailFieldBySchema: could not find schema for field ${fieldKey}`);
return null;
}
if (!value) {
return react_1.default.createElement(Box_1.default, { sx: sxField }, "-");
}
switch (fieldSchema.type) {
case 'nested object':
case 'field':
const multiple = fieldSchema.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 }, value.title),
value.value.length > 0 ? (react_1.default.createElement(List_1.default, { sx: sxValueList }, value.valueStr.split(', ').map((singleValue, index) => (react_1.default.createElement(ListItem_1.default, { key: `${value.title}_${index}`, sx: sxValueListItem },
react_1.default.createElement(ListItemText_1.default, { sx: sxValueListItemText }, singleValue)))))) : (react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, "-"))));
}
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.valueStr)));
case 'choice':
case 'list':
const multipleChoice = fieldSchema.type === 'list' || fieldSchema.many ? true : false;
if (multipleChoice) {
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
value.value.length > 0 ? (react_1.default.createElement(List_1.default, { sx: sxValueList }, value.valueStr.split(', ').map((singleValue, index) => (react_1.default.createElement(ListItem_1.default, { key: `${value.title}_${index}`, sx: sxValueListItem },
react_1.default.createElement(ListItemText_1.default, { sx: sxValueListItemText }, singleValue)))))) : (react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, "-"))));
}
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.valueStr)));
case 'email':
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue },
react_1.default.createElement("a", { href: `mailto: ${value.valueStr}` }, value.valueStr))));
case 'file upload':
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.valueStr)));
case 'image upload':
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
value.value ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Image_1.default, { sx: styles_1.Layout.detailFieldImg, src: `${serverEndPoint === null || serverEndPoint === void 0 ? void 0 : serverEndPoint.url}${value.value.url}`, alt: value.valueStr }),
react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue },
react_1.default.createElement(Button_1.default, { href: `${serverEndPoint === null || serverEndPoint === void 0 ? void 0 : serverEndPoint.url}${value.value.url}`, target: "_blank", variant: "contained", startIcon: react_1.default.createElement(Download_1.default, null) }, value.valueStr)))) : (react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, "-"))));
default:
return (react_1.default.createElement(Box_1.default, { sx: sxField },
react_1.default.createElement(Typography_1.default, { variant: "h5", sx: sxLabel }, value.title),
react_1.default.createElement(Typography_1.default, { variant: "body2", sx: sxValue }, value.valueStr)));
}
}