@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
142 lines (141 loc) • 10.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const styles_1 = require("@mui/material/styles");
const react_core_1 = require("@selfcommunity/react-core");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Media_1 = require("../../../constants/Media");
const react_1 = tslib_1.__importStar(require("react"));
const react_intersection_observer_1 = require("react-intersection-observer");
const Lightbox_1 = require("../../Lightbox");
const constants_1 = require("./constants");
const filter_1 = tslib_1.__importDefault(require("./filter"));
const classes = {
displayRoot: `${constants_1.PREFIX}-display-root`,
background: `${constants_1.PREFIX}-background`,
backgroundPortrait: `${constants_1.PREFIX}-background-portrait`,
heightOne: `${constants_1.PREFIX}-height-one`,
heightHalfOne: `${constants_1.PREFIX}-height-half-one`,
heightTwo: `${constants_1.PREFIX}-height-two`,
heightThree: `${constants_1.PREFIX}-height-three`,
cover: `${constants_1.PREFIX}-cover`,
coverText: `${constants_1.PREFIX}-cover-text`,
slide: `${constants_1.PREFIX}-slide`,
border: `${constants_1.PREFIX}-border`,
gallery: `${constants_1.PREFIX}-gallery`,
title: `${constants_1.PREFIX}-title`,
iconFile: `${constants_1.PREFIX}-icon-file`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'DisplayRoot'
})(({}) => ({}));
exports.default = (props) => {
// PROPS
const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
// STATE
const [preview, setPreview] = (0, react_1.useState)(-1);
const [toolbarButtons, setToolbarButtons] = (0, react_1.useState)(undefined);
const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
// MEMO
const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [medias]);
// HANDLERS
const handleClose = () => {
setPreview(-1);
setToolbarButtons(undefined);
};
// UTILS
const getImageUrl = (image, original = false) => {
if (typeof image === 'object') {
const _image = image.image_thumbnail ? image.image_thumbnail.url : image.image ? image.image : '/static/frontend_v2/images/image.svg';
return original && image.image ? image.image : _image;
}
return image;
};
const openPreviewImage = (0, react_1.useCallback)((index) => {
if (gallery === false) {
// Prevent gallery
return;
}
setPreview(index);
onMediaClick(_medias[index]);
}, [_medias]);
// RENDERING
const renderTitle = (o) => {
if (!o) {
return null;
}
let startAdornment = null;
if (o.type) {
switch (o.type) {
case 'doc':
startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
break;
default:
startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
break;
}
}
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
};
const renderOne = () => {
const overlay = _medias.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
const isGif = _medias[0].image_mimetype ? _medias[0].image_mimetype.includes('image/gif') : false;
const isLandscape = _medias[0].image_height < _medias[0].image_width;
return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
root: (0, classnames_1.default)(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: _medias.length > 1 }))
}, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(_medias[0])] })) })));
};
const renderTwo = () => {
const overlay = _medias.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
const conditionalRender = [3, 4].includes(_medias.length) || (_medias.length > +maxVisible && [3, 4].includes(+maxVisible));
return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` } }, { children: [overlay, renderTitle(_medias[1])] }))] })));
};
const renderThree = () => {
const conditionalRender = _medias.length == 4 || (_medias.length > +maxVisible && +maxVisible == 4);
const overlay = !maxVisible || maxVisible > 5 || (_medias.length > maxVisible && [4, 5].includes(+maxVisible))
? renderCountOverlay(true)
: renderOverlay(conditionalRender ? 3 : 4);
return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` } }, { children: [overlay, renderTitle(_medias[3])] }))] })));
};
const renderOverlay = (id) => {
if (!gallery) {
return null;
}
return [
(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(classes.cover, classes.slide) }, `cover-${id}`),
(0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "zoom_out_map" }) }), `cover-text-${id}`)
];
};
const renderCountOverlay = (more) => {
const extra = _medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
return [
more && (0, jsx_runtime_1.jsx)("div", { className: classes.cover }, "count"),
more && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["+", extra] }) }), "count-sub"))
];
};
const handleIndexChange = (0, react_1.useCallback)((index) => {
if (_medias[index].type === Media_1.MEDIA_TYPE_DOCUMENT) {
setToolbarButtons((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) })));
}
else {
setToolbarButtons(undefined);
}
}, [_medias, setToolbarButtons]);
(0, react_1.useEffect)(() => {
if (preview !== -1) {
handleIndexChange(preview);
}
}, [preview]);
const imagesToShow = [..._medias];
if (maxVisible && _medias.length > maxVisible) {
imagesToShow.length = maxVisible;
}
if (_medias.length === 0) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && ((0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] })));
};