media-manager-next
Version:
Simple media manager to use it for uploading and managing resources (images, files, etc.). It uses MUI material design theme.
70 lines • 3.35 kB
JavaScript
;
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 material_1 = require("@mui/material");
const FilePresent_1 = __importDefault(require("@mui/icons-material/FilePresent"));
const skeletonSx = {
width: '100%',
height: 120,
flexGrow: 1,
objectFit: 'cover',
};
const nonImageBoxSx = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
};
const MediaModalContent = ({ data, drawerWidth, error, loading, selectedItemId, setSelectedItem, }) => {
const theme = (0, material_1.useTheme)();
const selectedItemSx = {
border: 2,
borderColor: theme.palette.primary.main,
borderRadius: 1,
};
return (react_1.default.createElement(material_1.Box, { component: "main", sx: {
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - ${drawerWidth}px)` },
} },
react_1.default.createElement(material_1.ImageList, { cols: 4 },
loading &&
(!Array.isArray(data) || data.length === 0) &&
[0, 1, 2, 3, 4].map((key) => (react_1.default.createElement(material_1.ImageListItem, { key: key },
react_1.default.createElement(material_1.Skeleton, { key: key, variant: "rectangular", sx: skeletonSx })))),
!error &&
Array.isArray(data) &&
data.length !== 0 &&
data.map((item) => (react_1.default.createElement(material_1.ImageListItem, { key: item.id, sx: selectedItemId === item.id ? selectedItemSx : undefined, onClick: () => setSelectedItem(item) },
item.type.startsWith('image/') && (react_1.default.createElement("img", { src: item.url, alt: item?.text?.title, loading: "lazy", style: { maxHeight: 150 } })),
!item.type.startsWith('image/') && (react_1.default.createElement(material_1.Box, { sx: nonImageBoxSx },
react_1.default.createElement(FilePresent_1.default, { fontSize: "large" })))))))));
};
exports.default = (0, react_1.memo)(MediaModalContent);
//# sourceMappingURL=MediaModalContent.js.map