@selfcommunity/react-ui/lib/esm/shared/Lightbox/BaseLightbox.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 { CircularProgress } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useCallback, useState } from 'react';
import { PhotoSlider } from 'react-photo-view';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-root`
};
const Root = styled(PhotoSlider, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
const BaseLightbox = (props) => {
    const { images = [], index, onClose, visible = true, afterClose, onIndexChange, toolbarRender, toolbarButtons } = props, rest = __rest(props, ["images", "index", "onClose", "visible", "afterClose", "onIndexChange", "toolbarRender", "toolbarButtons"]);
    // STATE
    const [currentImageIndex, setCurrentImageIndex] = useState(index || 0);
    const handleIndexChange = useCallback((index) => {
        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
        setCurrentImageIndex(index);
    }, [onIndexChange, setCurrentImageIndex]);
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender
            ? toolbarRender
            : () => {
                return toolbarButtons;
            } })));
};
export default BaseLightbox;