@selfcommunity/react-ui/lib/esm/shared/Lightbox/Lightbox.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { styled } from '@mui/material/styles';
import { useCallback } from 'react';
import BaseLightbox from './BaseLightbox';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-lightbox-root`
};
const Root = styled(BaseLightbox, {
    name: PREFIX,
    slot: 'LightboxRoot'
})(() => ({}));
export default function Lightbox(props) {
    // PROPS
    const { medias = [], index = 0, toolbarButtons, onClose, onIndexChange } = props, rest = __rest(props, ["medias", "index", "toolbarButtons", "onClose", "onIndexChange"]);
    const mediaToDataTypeMap = useCallback((media, index) => {
        return { src: media.image, width: media.image_width, height: media.image_height, key: index };
    }, []);
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarButtons: toolbarButtons })));
}