drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
112 lines (111 loc) • 5.52 kB
JavaScript
"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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__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 material_1 = require("@mui/material");
const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
const APIWrapperContext_1 = require("../context/APIWrapperContext");
const Expand_1 = __importDefault(require("@mui/icons-material/Expand"));
const Image = ({ src, alt, sx = {} }) => {
const { isMobile } = (0, APIWrapperContext_1.useAPIWrapper)();
const { theme } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
const [open, setOpen] = (0, react_1.useState)(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
// Styled component for the image container
const ImageContainer = (0, material_1.styled)(material_1.Box)(() => ({
position: 'relative',
display: 'inline-block',
'&:hover .expand-button': {
opacity: 1,
},
}));
// Styled component for the expand button
const ExpandButton = (0, material_1.styled)(material_1.IconButton)(({ theme }) => (Object.assign({ position: 'absolute', bottom: theme.spacing(1), right: theme.spacing(1), backgroundColor: theme.palette.background.paper, opacity: 0.7, transition: 'opacity 0.3s', '&:hover': {
backgroundColor: theme.palette.background.paper,
opacity: 1,
} }, (isMobile && {
opacity: 1,
backgroundColor: theme.palette.background.paper + '!important',
}))));
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ImageContainer, { onClick: handleOpen, sx: sx },
react_1.default.createElement("img", { src: src, alt: alt, style: {
width: '100%',
height: 'auto',
display: 'block',
cursor: 'pointer',
borderRadius: theme.shape.borderRadius,
} }),
react_1.default.createElement(ExpandButton, { className: "expand-button", "aria-label": "Expandir imagem", size: "small", onClick: (e) => {
e.stopPropagation();
handleOpen();
} },
react_1.default.createElement(Expand_1.default, { fontSize: isMobile ? 'medium' : 'small' }))),
react_1.default.createElement(material_1.Modal, { open: open, onClose: handleClose, sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
p: isMobile ? 1 : 2,
} },
react_1.default.createElement(material_1.Box, { sx: {
position: 'relative',
maxWidth: isMobile ? '100%' : '90vw',
maxHeight: isMobile ? '100%' : '90vh',
outline: 'none',
} },
react_1.default.createElement("img", { src: src, alt: alt, style: {
maxWidth: '100%',
maxHeight: isMobile ? 'calc(100vh - 32px)' : 'calc(90vh - 32px)',
display: 'block',
borderRadius: theme.shape.borderRadius,
} }),
react_1.default.createElement(material_1.IconButton, { "aria-label": "Fechar", onClick: handleClose, sx: {
position: 'absolute',
top: theme.spacing(1),
right: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
opacity: 0.7,
'&:hover': {
backgroundColor: theme.palette.background.paper,
opacity: 1,
},
}, size: isMobile ? 'medium' : 'small' },
react_1.default.createElement(Expand_1.default, { sx: { transform: 'rotate(45deg)' } }))))));
};
exports.default = Image;