@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.1-alpha.0

package/lib/cjs/shared/Lightbox/Lightbox.js

@@ -1,1601 +1,29 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/unbound-method */
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const react_photo_view_1 = require("react-photo-view");
 const material_1 = require("@mui/material");
-const react_intl_1 = require("react-intl");
-const classnames_1 = __importDefault(require("classnames"));
-const react_2 = require("@emotion/react");
-const utils_1 = require("@selfcommunity/utils");
-const Lightbox_1 = require("../../constants/Lightbox");
-const messages = (0, react_intl_1.defineMessages)({
-    image: {
-        id: 'ui.lightbox.image',
-        defaultMessage: 'ui.lightbox.image'
-    },
-    contentLabel: {
-        id: 'ui.lightbox.contentLabel',
-        defaultMessage: 'ui.lightbox.contentLabel'
-    },
-    closeLabel: {
-        id: 'ui.lightbox.closeLabel',
-        defaultMessage: 'ui.lightbox.closeLabel'
-    },
-    zoomInLabel: {
-        id: 'ui.lightbox.zoomInLabel',
-        defaultMessage: 'ui.lightbox.zoomInLabel'
-    },
-    zoomOutLabel: {
-        id: 'ui.lightbox.zoomOutLabel',
-        defaultMessage: 'ui.lightbox.zoomOutLabel'
-    },
-    nextLabel: {
-        id: 'ui.lightbox.nextLabel',
-        defaultMessage: 'ui.lightbox.nextLabel'
-    },
-    prevLabel: {
-        id: 'ui.lightbox.prevLabel',
-        defaultMessage: 'ui.lightbox.prevLabel'
-    },
-    imageLoadErrorMessage: {
-        id: 'ui.lightbox.imageLoadErrorMessage',
-        defaultMessage: 'ui.lightbox.imageLoadErrorMessage'
-    }
-});
 const PREFIX = 'SCLightbox';
 const classes = {
-    root: `${PREFIX}-root`,
-    rilOuter: `${PREFIX}-ril-outer`,
-    rilOuterClosing: `${PREFIX}-ril-outer-closing`,
-    rilInner: `${PREFIX}-ril-inner`,
-    rilImage: `${PREFIX}-ril-image`,
-    rilImagePrev: `${PREFIX}-ril-image-prev`,
-    rilImageNext: `${PREFIX}-ril-image-next`,
-    rilImageDiscourager: `${PREFIX}-ril-image-discourager`,
-    rilNavButtons: `${PREFIX}-ril-nav-buttons`,
-    rilNavButtonPrev: `${PREFIX}-ril-nav-button-prev`,
-    rilNavButtonNext: `${PREFIX}-ril-nav-button-next`,
-    rilDownloadBlocker: `${PREFIX}-ril-download-blocker`,
-    rilCaption: `${PREFIX}-ril-caption`,
-    rilToolbar: `${PREFIX}-ril-toolbar`,
-    rilCaptionContent: `${PREFIX}-ril-caption-content`,
-    rilToolbarSide: `${PREFIX}-ril-toolbar-side`,
-    rilToolbarLeftSide: `${PREFIX}-ril-toolbar-left-side`,
-    rilToolbarRightSide: `${PREFIX}-ril-toolbar-right-side`,
-    rilToolbarItem: `${PREFIX}-ril-toolbar-item`,
-    rilToolbarItemChild: `${PREFIX}-ril-toolbar-item-child`,
-    rilBuiltinButton: `${PREFIX}-ril-builtin-button`,
-    rilBuiltinButtonDisabled: `${PREFIX}-ril-builtin-button-disabled`,
-    rilCloseButton: `${PREFIX}-ril-close-button`,
-    rilZoomInButton: `${PREFIX}-ril-zoom-in-button`,
-    rilZoomOutButton: `${PREFIX}-ril-zoom-out-button`,
-    rilOuterAnimating: `${PREFIX}-ril-outer-animating`,
-    rilLoadingCircle: `${PREFIX}-ril-loading-circle`,
-    rilLoadingCirclePoint: `${PREFIX}-ril-loading-circle-point`,
-    rilLoadingContainer: `${PREFIX}-ril-loading-container`,
-    rilErrorContainer: `${PREFIX}-ril-error-container`,
-    rilLoadingContainerIcon: `${PREFIX}-ril-loading-container-icon`
+    root: `${PREFIX}-root`
 };
-const closeWindow = (0, react_2.keyframes) `
-  0% {
-    opacity: 1
-  }
-  100% {
-    opacity: 0;
-  }`;
-const pointFade = (0, react_2.keyframes) `
-  0%, 19.999%,
-  100% { {
-    opacity: 1
-  }
-  20% {
-    opacity: 0;
-  }`;
-const Root = (0, styles_1.styled)(material_1.Modal, {
+const Root = (0, styles_1.styled)(react_photo_view_1.PhotoSlider, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(() => ({
-    zIndex: 1000,
-    backgroundColor: 'transparent',
-    [`& .${classes.rilOuter}`]: {
-        backgroundColor: 'rgba(0, 0, 0, 0.85)',
-        outline: 'none',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 1000,
-        width: '100%',
-        height: '100vh',
-        msContentZooming: 'none',
-        msUserSelect: 'none',
-        msTouchSelect: 'none',
-        touchAction: 'none'
-    },
-    [`& .${classes.rilOuterClosing}`]: {
-        opacity: 0
-    },
-    [`& .${classes.rilInner}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-    },
-    [`& .${classes.rilImage}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        margin: 'auto',
-        maxWidth: 'none',
-        msContentZooming: 'none',
-        msUserSelect: 'none',
-        msTouchSelect: 'none',
-        touchAction: 'none'
-    },
-    [`& .${classes.rilImagePrev}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        margin: 'auto',
-        maxWidth: 'none',
-        msContentZooming: 'none',
-        msUserSelect: 'none',
-        msTouchSelect: 'none',
-        touchAction: 'none'
-    },
-    [`& .${classes.rilImageNext}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        margin: 'auto',
-        maxWidth: 'none',
-        msContentZooming: 'none',
-        msUserSelect: 'none',
-        msTouchSelect: 'none',
-        touchAction: 'none'
-    },
-    [`& .${classes.rilImageDiscourager}`]: {
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        backgroundSize: 'contain'
-    },
-    [`& .${classes.rilNavButtons}`]: {
-        border: 'none',
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        width: 20,
-        height: 34,
-        padding: '40px 30px',
-        margin: 'auto',
-        cursor: 'pointer',
-        opacity: 0.7,
-        '&:hover': {
-            opacity: 1
-        },
-        '&:active': {
-            opacity: 1
-        }
-    },
-    [`& .${classes.rilNavButtonPrev}`]: {
-        left: 0,
-        background: 'rgba(0, 0, 0, 0.2)',
-        borderRadius: 0,
-        color: '#FFF',
-        '& span': {
-            fontSize: 39
-        }
-    },
-    [`& .${classes.rilNavButtonNext}`]: {
-        right: 0,
-        background: 'rgba(0, 0, 0, 0.2)',
-        borderRadius: 0,
-        color: '#FFF',
-        '& span': {
-            fontSize: 39
-        }
-    },
-    [`& .${classes.rilDownloadBlocker}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundImage: "url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');",
-        backgroundSize: 'cover'
-    },
-    [`& .${classes.rilCaption}`]: {
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        display: 'flex',
-        justifyContent: 'space-between',
-        bottom: 0,
-        maxHeight: 150,
-        overflow: 'auto'
-    },
-    [`& .${classes.rilToolbar}`]: {
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        display: 'flex',
-        justifyContent: 'space-between',
-        height: 50
-    },
-    [`& .${classes.rilCaptionContent}`]: {
-        padding: '10px 20px',
-        color: '#fff'
-    },
-    [`& .${classes.rilToolbarSide}`]: {
-        height: 50,
-        margin: 0
-    },
-    [`& .${classes.rilToolbarLeftSide}`]: {
-        paddingLeft: 20,
-        paddingRight: 0,
-        flex: '0 1 auto',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    [`& .${classes.rilToolbarRightSide}`]: {
-        paddingLeft: 0,
-        paddingRight: 20,
-        flex: '0 0 auto'
-    },
-    [`& .${classes.rilToolbarItem}`]: {
-        display: 'inline-block',
-        lineHeight: '50px',
-        padding: 0,
-        color: '#fff',
-        fontSize: '120%',
-        maxWidth: '100%',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    [`& .${classes.rilToolbarItemChild}`]: {
-        verticalAlign: 'middle'
-    },
-    [`& .${classes.rilBuiltinButton}`]: {
-        width: 40,
-        height: 35,
-        cursor: 'pointer',
-        border: 'none',
-        opacity: 0.7,
-        '&:hover': {
-            opacity: 1
-        },
-        '&:active': {
-            outline: 'none'
-        }
-    },
-    [`& .${classes.rilBuiltinButtonDisabled}`]: {
-        cursor: 'default',
-        opacity: 0.5,
-        '&:hover': {
-            opacity: 0.5
-        }
-    },
-    [`& .${classes.rilCloseButton}`]: {
-        background: 'rgba(0, 0, 0, 0.2)',
-        '& span': {
-            color: '#FFF',
-            fontSize: 32
-        }
-    },
-    [`& .${classes.rilZoomInButton}`]: {
-        background: 'rgba(0, 0, 0, 0.2)',
-        '& span': {
-            color: '#FFF',
-            fontSize: 32
-        }
-    },
-    [`& .${classes.rilZoomOutButton}`]: {
-        background: 'rgba(0, 0, 0, 0.2)',
-        '& span': {
-            color: '#FFF',
-            fontSize: 32
-        }
-    },
-    [`& .${classes.rilOuterAnimating}`]: {
-        animationName: `${closeWindow}`
-    },
-    [`& .${classes.rilLoadingCircle}`]: {
-        width: 60,
-        height: 60,
-        position: 'relative'
-    },
-    [`& .${classes.rilLoadingCirclePoint}`]: {
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        '&:before': {
-            content: '""',
-            display: 'block',
-            margin: '0 auto',
-            width: '11%',
-            height: '30%',
-            backgroundColor: '#fff',
-            borderRadius: '30%',
-            animation: `${pointFade} 800ms infinite ease-in-out both`
-        },
-        '&:nth-of-type(1)': {
-            transform: 'rotate(0deg)',
-            '&:before': {
-                animationDelay: '-800ms'
-            }
-        },
-        '&:nth-of-type(7)': {
-            transform: 'rotate(180deg)',
-            '&:before': {
-                animationDelay: '-800ms'
-            }
-        },
-        '&:nth-of-type(2)': {
-            transform: 'rotate(30deg)',
-            '&:before': {
-                animationDelay: '-666ms'
-            }
-        },
-        '&:nth-of-type(8)': {
-            transform: 'rotate(210deg)',
-            '&:before': {
-                animationDelay: '-666ms'
-            }
-        },
-        '&:nth-of-type(3)': {
-            transform: 'rotate(60deg)',
-            '&:before': {
-                animationDelay: '-533ms'
-            }
-        },
-        '&:nth-of-type(9)': {
-            transform: 'rotate(240deg)',
-            '&:before': {
-                animationDelay: '-533ms'
-            }
-        },
-        '&:nth-of-type(4)': {
-            transform: 'rotate(90deg)',
-            '&:before': {
-                animationDelay: '-400ms'
-            }
-        },
-        '&:nth-of-type(10)': {
-            transform: 'rotate(270deg)',
-            '&:before': {
-                animationDelay: '-400ms'
-            }
-        },
-        '&:nth-of-type(5)': {
-            transform: 'rotate(120deg)',
-            '&:before': {
-                animationDelay: '-266ms'
-            }
-        },
-        '&:nth-of-type(11)': {
-            transform: 'rotate(300deg)',
-            '&:before': {
-                animationDelay: '-266ms'
-            }
-        },
-        '&:nth-of-type(6)': {
-            transform: 'rotate(150deg)',
-            '&:before': {
-                animationDelay: '-133ms'
-            }
-        },
-        '&:nth-of-type(12)': {
-            transform: 'rotate(330deg)',
-            '&:before': {
-                animationDelay: '-133ms'
-            }
-        },
-        '&:nth-of-type(13)': {
-            transform: 'rotate(360deg)',
-            '&:before': {
-                animationDelay: '0ms'
-            }
-        }
-    },
-    [`& .${classes.rilLoadingContainer}`]: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-    },
-    [`& .${classes.rilImagePrev}`]: {
-        [`& .${classes.rilLoadingContainer}`]: {
-            display: 'none'
-        }
-    },
-    [`& .${classes.rilImageNext}`]: {
-        [`& .${classes.rilLoadingContainer}`]: {
-            display: 'none'
-        },
-        [`& .${classes.rilErrorContainer}`]: {
-            display: 'none'
-        }
-    },
-    [`& .${classes.rilImageNext}`]: {
-        [`& .${classes.rilLoadingContainer}`]: {
-            display: 'none'
-        },
-        [`& .${classes.rilErrorContainer}`]: {
-            display: 'none'
-        }
-    },
-    [`& .${classes.rilErrorContainer}`]: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: '#fff'
-    },
-    [`& .${classes.rilLoadingContainerIcon}`]: {
-        color: '#fff',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translateX(-50%) translateY(-50%)'
-    }
-}));
-class ReactImageLightbox extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        // Refs
-        this.outerEl = react_1.default.createRef();
-        this.zoomInBtn = react_1.default.createRef();
-        this.zoomOutBtn = react_1.default.createRef();
-        this.caption = react_1.default.createRef();
-        // Timeouts - always clear it before umount
-        this.timeouts = [];
-        // Current action
-        this.currentAction = Lightbox_1.ACTION_NONE;
-        // Events source
-        this.eventsSource = Lightbox_1.SOURCE_ANY;
-        // Empty pointers list
-        this.pointerList = [];
-        // Prevent inner close
-        this.preventInnerClose = false;
-        this.preventInnerCloseTimeout = null;
-        // Used to disable animation when changing props.mainSrc|nextSrc|prevSrc
-        this.keyPressed = false;
-        // Used to store load state / dimensions of images
-        this.imageCache = {};
-        // Time the last keydown event was called (used in keyboard action rate limiting)
-        this.lastKeyDownTime = 0;
-        // Used for debouncing window resize event
-        this.resizeTimeout = null;
-        // Used to determine when actions are triggered by the scroll wheel
-        this.wheelActionTimeout = null;
-        this.resetScrollTimeout = null;
-        this.scrollX = 0;
-        this.scrollY = 0;
-        // Used in panning zoomed images
-        this.moveStartX = 0;
-        this.moveStartY = 0;
-        this.moveStartOffsetX = 0;
-        this.moveStartOffsetY = 0;
-        // Used to swipe
-        this.swipeStartX = 0;
-        this.swipeStartY = 0;
-        this.swipeEndX = 0;
-        this.swipeEndY = 0;
-        // Used to pinch
-        this.pinchTouchList = null;
-        this.pinchDistance = 0;
-        // Used to differentiate between images with identical src
-        this.keyCounter = 0;
-        // Used to detect a move when all src's remain unchanged (four or more of the same image in a row)
-        this.moveRequested = false;
-        this.state = {
-            //-----------------------------
-            // Animation
-            //-----------------------------
-            // Lightbox is closing
-            // When Lightbox is mounted, if animation is enabled it will open with the reverse of the closing animation
-            isClosing: !props.animationDisabled,
-            // Component parts should animate (e.g., when images are moving, or image is being zoomed)
-            shouldAnimate: false,
-            //-----------------------------
-            // Zoom settings
-            //-----------------------------
-            // Zoom level of image
-            zoomLevel: Lightbox_1.MIN_ZOOM_LEVEL,
-            //-----------------------------
-            // Image position settings
-            //-----------------------------
-            // Horizontal offset from center
-            offsetX: 0,
-            // Vertical offset from center
-            offsetY: 0,
-            // image load error for srcType
-            loadErrorStatus: {}
-        };
-        this.closeIfClickInner = this.closeIfClickInner.bind(this);
-        this.handleImageDoubleClick = this.handleImageDoubleClick.bind(this);
-        this.handleImageMouseWheel = this.handleImageMouseWheel.bind(this);
-        this.handleKeyInput = this.handleKeyInput.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleOuterMousewheel = this.handleOuterMousewheel.bind(this);
-        this.handleTouchStart = this.handleTouchStart.bind(this);
-        this.handleTouchMove = this.handleTouchMove.bind(this);
-        this.handleTouchEnd = this.handleTouchEnd.bind(this);
-        this.handlePointerEvent = this.handlePointerEvent.bind(this);
-        this.handleCaptionMousewheel = this.handleCaptionMousewheel.bind(this);
-        this.handleWindowResize = this.handleWindowResize.bind(this);
-        this.handleZoomInButtonClick = this.handleZoomInButtonClick.bind(this);
-        this.handleZoomOutButtonClick = this.handleZoomOutButtonClick.bind(this);
-        this.requestClose = this.requestClose.bind(this);
-        this.requestMoveNext = this.requestMoveNext.bind(this);
-        this.requestMovePrev = this.requestMovePrev.bind(this);
-        this.getBestImageForType = this.getBestImageForType.bind(this);
-        this.getMaxOffsets = this.getMaxOffsets.bind(this);
-        this.getLightboxRect = this.getLightboxRect.bind(this);
-        this.changeZoom = this.changeZoom.bind(this);
-    }
-    static isTargetMatchImage(target) {
-        if (target && target.className && Array.isArray(target.className)) {
-            return target.className.includes('ril-image-current');
-        }
-        return false;
-    }
-    static parseMouseEvent(mouseEvent) {
-        return {
-            id: 'mouse',
-            source: Lightbox_1.SOURCE_MOUSE,
-            x: parseInt(mouseEvent.clientX, 10),
-            y: parseInt(mouseEvent.clientY, 10)
-        };
-    }
-    static parseTouchPointer(touchPointer) {
-        return {
-            id: touchPointer.identifier,
-            source: Lightbox_1.SOURCE_TOUCH,
-            x: parseInt(touchPointer.clientX, 10),
-            y: parseInt(touchPointer.clientY, 10)
-        };
-    }
-    static parsePointerEvent(pointerEvent) {
-        return {
-            id: pointerEvent.pointerId,
-            source: Lightbox_1.SOURCE_POINTER,
-            x: parseInt(pointerEvent.clientX, 10),
-            y: parseInt(pointerEvent.clientY, 10)
-        };
-    }
-    // Request to transition to the previous image
-    static getTransform({ x = 0, y = 0, zoom = 1, width, targetWidth }) {
-        let nextX = x;
-        const windowWidth = (0, utils_1.getWindowWidth)();
-        if (width > windowWidth) {
-            nextX += (windowWidth - width) / 2;
-        }
-        const scaleFactor = zoom * (targetWidth / width);
-        return {
-            transform: `translate3d(${nextX}px,${y}px,0) scale3d(${scaleFactor},${scaleFactor},1)`
-        };
-    }
-    componentDidMount() {
-        if (!this.props.animationDisabled) {
-            // Make opening animation play
-            this.setState({ isClosing: false });
-        }
-        // Prevents cross-origin errors when using a cross-origin iframe
-        this['windowContext'] = (0, utils_1.getHighestSafeWindowContext)();
-        this['listeners'] = {
-            resize: this.handleWindowResize,
-            mouseup: this.handleMouseUp,
-            touchend: this.handleTouchEnd,
-            touchcancel: this.handleTouchEnd,
-            pointerdown: this.handlePointerEvent,
-            pointermove: this.handlePointerEvent,
-            pointerup: this.handlePointerEvent,
-            pointercancel: this.handlePointerEvent
-        };
-        Object.keys(this['listeners']).forEach((type) => {
-            this['windowContext'].addEventListener(type, function (e) {
-                this['listeners'][type](e);
-            }.bind(this));
-        });
-        this.loadAllImages();
-    }
-    shouldComponentUpdate(nextProps) {
-        this.getSrcTypes().forEach((srcType) => {
-            if (this.props[srcType.name] !== nextProps[srcType.name]) {
-                this.moveRequested = false;
-            }
-        });
-        // Wait for move...
-        return !this.moveRequested;
-    }
-    componentDidUpdate(prevProps) {
-        let sourcesChanged = false;
-        const prevSrcDict = {};
-        const nextSrcDict = {};
-        this.getSrcTypes().forEach((srcType) => {
-            if (prevProps[srcType.name] !== this.props[srcType.name]) {
-                sourcesChanged = true;
-                prevSrcDict[prevProps[srcType.name]] = true;
-                nextSrcDict[this.props[srcType.name]] = true;
-            }
-        });
-        if (sourcesChanged || this.moveRequested) {
-            // Reset the loaded state for images not rendered next
-            Object.keys(prevSrcDict).forEach((prevSrc) => {
-                if (!(prevSrc in nextSrcDict) && prevSrc in this.imageCache) {
-                    this.imageCache[prevSrc].loaded = false;
-                }
-            });
-            this.moveRequested = false;
-            // Load any new images
-            this.loadAllImages(this.props);
-        }
-    }
-    componentWillUnmount() {
-        this['didUnmount'] = true;
-        Object.keys(this['listeners']).forEach((type) => {
-            this['windowContext'].removeEventListener(type, this['listeners'][type]);
-        });
-        this.timeouts.forEach((tid) => clearTimeout(tid));
-    }
-    setTimeout(func, time) {
-        const id = setTimeout(() => {
-            this.timeouts = this.timeouts.filter((tid) => tid !== id);
-            func();
-        }, time);
-        this.timeouts.push(id);
-        return id;
-    }
-    setPreventInnerClose() {
-        if (this.preventInnerCloseTimeout) {
-            this.clearTimeout(this.preventInnerCloseTimeout);
-        }
-        this.preventInnerClose = true;
-        this.preventInnerCloseTimeout = this.setTimeout(() => {
-            this.preventInnerClose = false;
-            this.preventInnerCloseTimeout = null;
-        }, 100);
-    }
-    // Get info for the best suited image to display with the given srcType
-    getBestImageForType(srcType) {
-        let imageSrc = this.props[srcType];
-        let fitSizes = {};
-        if (this.isImageLoaded(imageSrc)) {
-            // Use full-size image if available
-            fitSizes = this.getFitSizes(this.imageCache[imageSrc].width, this.imageCache[imageSrc].height, null);
-        }
-        else if (this.isImageLoaded(this.props[`${srcType}Thumbnail`])) {
-            // Fall back to using thumbnail if the image has not been loaded
-            imageSrc = this.props[`${srcType}Thumbnail`];
-            fitSizes = this.getFitSizes(this.imageCache[imageSrc].width, this.imageCache[imageSrc].height, true);
-        }
-        else {
-            return null;
-        }
-        return {
-            src: imageSrc,
-            height: this.imageCache[imageSrc].height,
-            width: this.imageCache[imageSrc].width,
-            targetHeight: fitSizes.height,
-            targetWidth: fitSizes.width
-        };
-    }
-    // Get sizing for when an image is larger than the window
-    getFitSizes(width, height, stretch) {
-        const boxSize = this.getLightboxRect();
-        let maxHeight = boxSize.height - this.props.imagePadding * 2;
-        let maxWidth = boxSize.width - this.props.imagePadding * 2;
-        if (!stretch) {
-            maxHeight = Math.min(maxHeight, height);
-            maxWidth = Math.min(maxWidth, width);
-        }
-        const maxRatio = maxWidth / maxHeight;
-        const srcRatio = width / height;
-        if (maxRatio > srcRatio) {
-            // height is the constraining dimension of the photo
-            return {
-                width: (width * maxHeight) / height,
-                height: maxHeight
-            };
-        }
-        return {
-            width: maxWidth,
-            height: (height * maxWidth) / width
-        };
-    }
-    getMaxOffsets(zoomLevel) {
-        if (!zoomLevel) {
-            zoomLevel = this.state.zoomLevel;
-        }
-        const currentImageInfo = this.getBestImageForType('mainSrc');
-        if (currentImageInfo === null) {
-            return { maxX: 0, minX: 0, maxY: 0, minY: 0 };
-        }
-        const boxSize = this.getLightboxRect();
-        const zoomMultiplier = this.getZoomMultiplier(zoomLevel);
-        let maxX = 0;
-        if (zoomMultiplier * currentImageInfo.width - boxSize.width < 0) {
-            // if there is still blank space in the X dimension, don't limit except to the opposite edge
-            maxX = (boxSize.width - zoomMultiplier * currentImageInfo.width) / 2;
-        }
-        else {
-            maxX = (zoomMultiplier * currentImageInfo.width - boxSize.width) / 2;
-        }
-        let maxY = 0;
-        if (zoomMultiplier * currentImageInfo.height - boxSize.height < 0) {
-            // if there is still blank space in the Y dimension, don't limit except to the opposite edge
-            maxY = (boxSize.height - zoomMultiplier * currentImageInfo.height) / 2;
-        }
-        else {
-            maxY = (zoomMultiplier * currentImageInfo.height - boxSize.height) / 2;
-        }
-        return {
-            maxX,
-            maxY,
-            minX: -1 * maxX,
-            minY: -1 * maxY
-        };
-    }
-    // Get image src types
-    getSrcTypes() {
-        return [
-            {
-                name: 'mainSrc',
-                keyEnding: `i${this.keyCounter}`
-            },
-            {
-                name: 'mainSrcThumbnail',
-                keyEnding: `t${this.keyCounter}`
-            },
-            {
-                name: 'nextSrc',
-                keyEnding: `i${this.keyCounter + 1}`
-            },
-            {
-                name: 'nextSrcThumbnail',
-                keyEnding: `t${this.keyCounter + 1}`
-            },
-            {
-                name: 'prevSrc',
-                keyEnding: `i${this.keyCounter - 1}`
-            },
-            {
-                name: 'prevSrcThumbnail',
-                keyEnding: `t${this.keyCounter - 1}`
-            }
-        ];
-    }
-    /**
-     * Get sizing when the image is scaled
-     */
-    getZoomMultiplier(zoomLevel = this.state.zoomLevel) {
-        return Math.pow(Lightbox_1.ZOOM_RATIO, zoomLevel);
-    }
-    /**
-     * Get the size of the lightbox in pixels
-     */
-    getLightboxRect() {
-        if (this.outerEl.current) {
-            return this.outerEl.current.getBoundingClientRect();
-        }
-        return {
-            width: (0, utils_1.getWindowWidth)(),
-            height: (0, utils_1.getWindowHeight)(),
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        };
-    }
-    clearTimeout(id) {
-        this.timeouts = this.timeouts.filter((tid) => tid !== id);
-        clearTimeout(id);
-    }
-    // Change zoom level
-    changeZoom(zoomLevel, clientX, clientY) {
-        // Ignore if zoom disabled
-        if (!this.props.enableZoom) {
-            return;
-        }
-        // Constrain zoom level to the set bounds
-        const nextZoomLevel = Math.max(Lightbox_1.MIN_ZOOM_LEVEL, Math.min(Lightbox_1.MAX_ZOOM_LEVEL, zoomLevel));
-        // Ignore requests that don't change the zoom level
-        if (nextZoomLevel === this.state.zoomLevel) {
-            return;
-        }
-        if (nextZoomLevel === Lightbox_1.MIN_ZOOM_LEVEL) {
-            // Snap back to center if zoomed all the way out
-            this.setState({
-                zoomLevel: nextZoomLevel,
-                offsetX: 0,
-                offsetY: 0
-            });
-            return;
-        }
-        const imageBaseSize = this.getBestImageForType('mainSrc');
-        if (imageBaseSize === null) {
-            return;
-        }
-        const currentZoomMultiplier = this.getZoomMultiplier();
-        const nextZoomMultiplier = this.getZoomMultiplier(nextZoomLevel);
-        // Default to the center of the image to zoom when no mouse position specified
-        const boxRect = this.getLightboxRect();
-        const pointerX = clientX ? clientX - boxRect.left : boxRect.width / 2;
-        const pointerY = clientY ? clientY - boxRect.top : boxRect.height / 2;
-        const currentImageOffsetX = (boxRect.width - imageBaseSize.width * currentZoomMultiplier) / 2;
-        const currentImageOffsetY = (boxRect.height - imageBaseSize.height * currentZoomMultiplier) / 2;
-        const currentImageRealOffsetX = currentImageOffsetX - this.state.offsetX;
-        const currentImageRealOffsetY = currentImageOffsetY - this.state.offsetY;
-        const currentPointerXRelativeToImage = (pointerX - currentImageRealOffsetX) / currentZoomMultiplier;
-        const currentPointerYRelativeToImage = (pointerY - currentImageRealOffsetY) / currentZoomMultiplier;
-        const nextImageRealOffsetX = pointerX - currentPointerXRelativeToImage * nextZoomMultiplier;
-        const nextImageRealOffsetY = pointerY - currentPointerYRelativeToImage * nextZoomMultiplier;
-        const nextImageOffsetX = (boxRect.width - imageBaseSize.width * nextZoomMultiplier) / 2;
-        const nextImageOffsetY = (boxRect.height - imageBaseSize.height * nextZoomMultiplier) / 2;
-        let nextOffsetX = nextImageOffsetX - nextImageRealOffsetX;
-        let nextOffsetY = nextImageOffsetY - nextImageRealOffsetY;
-        // When zooming out, limit the offset so things don't get left askew
-        if (this.currentAction !== Lightbox_1.ACTION_PINCH) {
-            const maxOffsets = this.getMaxOffsets(null);
-            if (this.state['zoomLevel'] > nextZoomLevel) {
-                nextOffsetX = Math.max(maxOffsets.minX, Math.min(maxOffsets.maxX, nextOffsetX));
-                nextOffsetY = Math.max(maxOffsets.minY, Math.min(maxOffsets.maxY, nextOffsetY));
-            }
-        }
-        this.setState({
-            zoomLevel: nextZoomLevel,
-            offsetX: nextOffsetX,
-            offsetY: nextOffsetY
-        });
-    }
-    closeIfClickInner(event) {
-        if (!this.preventInnerClose && event.target.className.search(/\bril-inner\b/) > -1) {
-            this.requestClose(event);
-        }
-    }
-    /**
-     * Handle user keyboard actions
-     */
-    handleKeyInput(event) {
-        event.stopPropagation();
-        // Ignore key input during animations
-        if (this.isAnimating()) {
-            return;
-        }
-        // Allow slightly faster navigation through the images when user presses keys repeatedly
-        if (event.type === 'keyup') {
-            this.lastKeyDownTime -= this.props.keyRepeatKeyupBonus;
-            return;
-        }
-        const keyCode = event.which || event.keyCode;
-        // Ignore key presses that happen too close to each other (when rapid fire key pressing or holding down the key)
-        // But allow it if it's a lightbox closing action
-        const currentTime = new Date();
-        if (currentTime.getTime() - this.lastKeyDownTime < this.props.keyRepeatLimit && keyCode !== Lightbox_1.KEYS.ESC) {
-            return;
-        }
-        this.lastKeyDownTime = currentTime.getTime();
-        switch (keyCode) {
-            // ESC key closes the lightbox
-            case Lightbox_1.KEYS.ESC:
-                event.preventDefault();
-                this.requestClose(event);
-                break;
-            // Left arrow key moves to previous image
-            case Lightbox_1.KEYS.LEFT_ARROW:
-                if (!this.props.prevSrc) {
-                    return;
-                }
-                event.preventDefault();
-                this.keyPressed = true;
-                this.requestMovePrev(event);
-                break;
-            // Right arrow key moves to next image
-            case Lightbox_1.KEYS.RIGHT_ARROW:
-                if (!this.props.nextSrc) {
-                    return;
-                }
-                event.preventDefault();
-                this.keyPressed = true;
-                this.requestMoveNext(event);
-                break;
-            default:
-        }
-    }
-    /**
-     * Handle a mouse wheel event over the lightbox container
-     */
-    handleOuterMousewheel(event) {
-        // Prevent scrolling of the background
-        event.stopPropagation();
-        const xThreshold = Lightbox_1.WHEEL_MOVE_X_THRESHOLD;
-        let actionDelay = 0;
-        const imageMoveDelay = 500;
-        this.clearTimeout(this.resetScrollTimeout);
-        this.resetScrollTimeout = this.setTimeout(() => {
-            this.scrollX = 0;
-            this.scrollY = 0;
-        }, 300);
-        // Prevent rapid-fire zoom behavior
-        if (this.wheelActionTimeout !== null || this.isAnimating()) {
-            return;
-        }
-        if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
-            // handle horizontal scrolls with image moves
-            this.scrollY = 0;
-            this.scrollX += event.deltaX;
-            const bigLeapX = xThreshold / 2;
-            // If the scroll amount has accumulated sufficiently, or a large leap was taken
-            if (this.scrollX >= xThreshold || event.deltaX >= bigLeapX) {
-                // Scroll right moves to next
-                this.requestMoveNext(event);
-                actionDelay = imageMoveDelay;
-                this.scrollX = 0;
-            }
-            else if (this.scrollX <= -1 * xThreshold || event.deltaX <= -1 * bigLeapX) {
-                // Scroll left moves to previous
-                this.requestMovePrev(event);
-                actionDelay = imageMoveDelay;
-                this.scrollX = 0;
-            }
-        }
-        // Allow successive actions after the set delay
-        if (actionDelay !== 0) {
-            this.wheelActionTimeout = this.setTimeout(() => {
-                this.wheelActionTimeout = null;
-            }, actionDelay);
-        }
-    }
-    handleImageMouseWheel(event) {
-        const yThreshold = Lightbox_1.WHEEL_MOVE_Y_THRESHOLD;
-        if (Math.abs(event.deltaY) >= Math.abs(event.deltaX)) {
-            event.stopPropagation();
-            // If the vertical scroll amount was large enough, perform a zoom
-            if (Math.abs(event.deltaY) < yThreshold) {
-                return;
-            }
-            this.scrollX = 0;
-            this.scrollY += event.deltaY;
-            this.changeZoom(this.state.zoomLevel - event.deltaY, event.clientX, event.clientY);
-        }
-    }
+})(() => ({}));
+const ReactImageLightbox = (props) => {
+    const { images = [], index, onClose, visible = true, afterClose, onIndexChange, toolbarRender, toolbarButtons = [] } = props, rest = tslib_1.__rest(props, ["images", "index", "onClose", "visible", "afterClose", "onIndexChange", "toolbarRender", "toolbarButtons"]);
+    // STATE
+    const [currentImages] = (0, react_1.useState)(images || []);
+    const [currentImageIndex, setCurrentImageIndex] = (0, react_1.useState)(index || 0);
     /**
-     * Handle a double click on the current image
+     * Renders root object
      */
-    handleImageDoubleClick(event) {
-        if (this.state.zoomLevel > Lightbox_1.MIN_ZOOM_LEVEL) {
-            // A double click when zoomed in zooms all the way out
-            this.changeZoom(Lightbox_1.MIN_ZOOM_LEVEL, event.clientX, event.clientY);
-        }
-        else {
-            // A double click when zoomed all the way out zooms in
-            this.changeZoom(this.state.zoomLevel + Lightbox_1.ZOOM_BUTTON_INCREMENT_SIZE, event.clientX, event.clientY);
-        }
-    }
-    shouldHandleEvent(source) {
-        if (this.eventsSource === source) {
-            return true;
-        }
-        if (this.eventsSource === Lightbox_1.SOURCE_ANY) {
-            this.eventsSource = source;
-            return true;
-        }
-        switch (source) {
-            case Lightbox_1.SOURCE_MOUSE:
-                return false;
-            case Lightbox_1.SOURCE_TOUCH:
-                this.eventsSource = Lightbox_1.SOURCE_TOUCH;
-                this.filterPointersBySource();
-                return true;
-            case Lightbox_1.SOURCE_POINTER:
-                if (this.eventsSource === Lightbox_1.SOURCE_MOUSE) {
-                    this.eventsSource = Lightbox_1.SOURCE_POINTER;
-                    this.filterPointersBySource();
-                    return true;
-                }
-                return false;
-            default:
-                return false;
-        }
-    }
-    addPointer(pointer) {
-        this.pointerList.push(pointer);
-    }
-    removePointer(pointer) {
-        this.pointerList = this.pointerList.filter(({ id }) => id !== pointer.id);
-    }
-    filterPointersBySource() {
-        this.pointerList = this.pointerList.filter(({ source }) => source === this.eventsSource);
-    }
-    handleMouseDown(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_MOUSE) && ReactImageLightbox.isTargetMatchImage(event.target)) {
-            this.addPointer(ReactImageLightbox.parseMouseEvent(event));
-            this.multiPointerStart(event);
-        }
-    }
-    handleMouseMove(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_MOUSE)) {
-            this.multiPointerMove(event, [ReactImageLightbox.parseMouseEvent(event)]);
-        }
-    }
-    handleMouseUp(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_MOUSE)) {
-            this.removePointer(ReactImageLightbox.parseMouseEvent(event));
-            this.multiPointerEnd(event);
-        }
-    }
-    handlePointerEvent(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_POINTER)) {
-            switch (event.type) {
-                case 'pointerdown':
-                    if (ReactImageLightbox.isTargetMatchImage(event.target)) {
-                        this.addPointer(ReactImageLightbox.parsePointerEvent(event));
-                        this.multiPointerStart(event);
-                    }
-                    break;
-                case 'pointermove':
-                    this.multiPointerMove(event, [ReactImageLightbox.parsePointerEvent(event)]);
-                    break;
-                case 'pointerup':
-                case 'pointercancel':
-                    this.removePointer(ReactImageLightbox.parsePointerEvent(event));
-                    this.multiPointerEnd(event);
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-    handleTouchStart(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_TOUCH) && ReactImageLightbox.isTargetMatchImage(event.target)) {
-            [].forEach.call(event.changedTouches, (eventTouch) => this.addPointer(ReactImageLightbox.parseTouchPointer(eventTouch)));
-            this.multiPointerStart(event);
-        }
-    }
-    handleTouchMove(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_TOUCH)) {
-            this.multiPointerMove(event, [].map.call(event.changedTouches, (eventTouch) => ReactImageLightbox.parseTouchPointer(eventTouch)));
-        }
-    }
-    handleTouchEnd(event) {
-        if (this.shouldHandleEvent(Lightbox_1.SOURCE_TOUCH)) {
-            [].map.call(event.changedTouches, (touch) => this.removePointer(ReactImageLightbox.parseTouchPointer(touch)));
-            this.multiPointerEnd(event);
-        }
-    }
-    decideMoveOrSwipe(pointer) {
-        if (this.state.zoomLevel <= Lightbox_1.MIN_ZOOM_LEVEL) {
-            this.handleSwipeStart(pointer);
-        }
-        else {
-            this.handleMoveStart(pointer);
-        }
-    }
-    multiPointerStart(event) {
-        this.handleEnd(event);
-        switch (this.pointerList.length) {
-            case 1: {
-                event.preventDefault();
-                this.decideMoveOrSwipe(this.pointerList[0]);
-                break;
-            }
-            case 2: {
-                event.preventDefault();
-                this.handlePinchStart(this.pointerList);
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    multiPointerMove(event, pointerList) {
-        switch (this.currentAction) {
-            case Lightbox_1.ACTION_MOVE: {
-                event.preventDefault();
-                this.handleMove(pointerList[0]);
-                break;
-            }
-            case Lightbox_1.ACTION_SWIPE: {
-                event.preventDefault();
-                this.handleSwipe(pointerList[0]);
-                break;
-            }
-            case Lightbox_1.ACTION_PINCH: {
-                event.preventDefault();
-                this.handlePinch(pointerList);
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    multiPointerEnd(event) {
-        if (this.currentAction !== Lightbox_1.ACTION_NONE) {
-            this.setPreventInnerClose();
-            this.handleEnd(event);
-        }
-        switch (this.pointerList.length) {
-            case 0: {
-                this.eventsSource = Lightbox_1.SOURCE_ANY;
-                break;
-            }
-            case 1: {
-                event.preventDefault();
-                this.decideMoveOrSwipe(this.pointerList[0]);
-                break;
-            }
-            case 2: {
-                event.preventDefault();
-                this.handlePinchStart(this.pointerList);
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    handleEnd(event) {
-        switch (this.currentAction) {
-            case Lightbox_1.ACTION_MOVE:
-                this.handleMoveEnd(event);
-                break;
-            case Lightbox_1.ACTION_SWIPE:
-                this.handleSwipeEnd(event);
-                break;
-            case Lightbox_1.ACTION_PINCH:
-                this.handlePinchEnd(event);
-                break;
-            default:
-                break;
-        }
-    }
-    // Handle move start over the lightbox container
-    // This happens:
-    // - On a mouseDown event
-    // - On a touchstart event
-    handleMoveStart({ x: clientX, y: clientY }) {
-        if (!this.props.enableZoom) {
-            return;
-        }
-        this.currentAction = Lightbox_1.ACTION_MOVE;
-        this.moveStartX = clientX;
-        this.moveStartY = clientY;
-        this.moveStartOffsetX = this.state.offsetX;
-        this.moveStartOffsetY = this.state.offsetY;
-    }
-    // Handle dragging over the lightbox container
-    // This happens:
-    // - After a mouseDown and before a mouseUp event
-    // - After a touchstart and before a touchend event
-    handleMove({ x: clientX, y: clientY }) {
-        const newOffsetX = this.moveStartX - clientX + this.moveStartOffsetX;
-        const newOffsetY = this.moveStartY - clientY + this.moveStartOffsetY;
-        if (this.state.offsetX !== newOffsetX || this.state.offsetY !== newOffsetY) {
-            this.setState({
-                offsetX: newOffsetX,
-                offsetY: newOffsetY
-            });
-        }
-    }
-    handleMoveEnd(event) {
-        this.currentAction = Lightbox_1.ACTION_NONE;
-        this.moveStartX = 0;
-        this.moveStartY = 0;
-        this.moveStartOffsetX = 0;
-        this.moveStartOffsetY = 0;
-        // Snap image back into frame if outside max offset range
-        const maxOffsets = this.getMaxOffsets(null);
-        const nextOffsetX = Math.max(maxOffsets.minX, Math.min(maxOffsets.maxX, this.state.offsetX));
-        const nextOffsetY = Math.max(maxOffsets.minY, Math.min(maxOffsets.maxY, this.state.offsetY));
-        if (nextOffsetX !== this.state.offsetX || nextOffsetY !== this.state.offsetY) {
-            this.setState({
-                offsetX: nextOffsetX,
-                offsetY: nextOffsetY,
-                shouldAnimate: true
-            });
-            this.setTimeout(() => {
-                this.setState({ shouldAnimate: false });
-            }, this.props.animationDuration);
-        }
-    }
-    handleSwipeStart({ x: clientX, y: clientY }) {
-        this.currentAction = Lightbox_1.ACTION_SWIPE;
-        this.swipeStartX = clientX;
-        this.swipeStartY = clientY;
-        this.swipeEndX = clientX;
-        this.swipeEndY = clientY;
-    }
-    handleSwipe({ x: clientX, y: clientY }) {
-        this.swipeEndX = clientX;
-        this.swipeEndY = clientY;
-    }
-    handleSwipeEnd(event) {
-        const xDiff = this.swipeEndX - this.swipeStartX;
-        const xDiffAbs = Math.abs(xDiff);
-        const yDiffAbs = Math.abs(this.swipeEndY - this.swipeStartY);
-        this.currentAction = Lightbox_1.ACTION_NONE;
-        this.swipeStartX = 0;
-        this.swipeStartY = 0;
-        this.swipeEndX = 0;
-        this.swipeEndY = 0;
-        if (!event || this.isAnimating() || xDiffAbs < yDiffAbs * 1.5) {
-            return;
-        }
-        if (xDiffAbs < Lightbox_1.MIN_SWIPE_DISTANCE) {
-            const boxRect = this.getLightboxRect();
-            if (xDiffAbs < boxRect.width / 4) {
-                return;
-            }
-        }
-        if (xDiff > 0 && this.props.prevSrc) {
-            event.preventDefault();
-            this.requestMovePrev(null);
-        }
-        else if (xDiff < 0 && this.props.nextSrc) {
-            event.preventDefault();
-            this.requestMoveNext(null);
-        }
-    }
-    calculatePinchDistance([a, b] = this.pinchTouchList) {
-        return Math.sqrt(Math.pow((a.x - b.x), 2) + Math.pow((a.y - b.y), 2));
-    }
-    calculatePinchCenter([a, b] = this.pinchTouchList) {
-        return {
-            x: a.x - (a.x - b.x) / 2,
-            y: a.y - (a.y - b.y) / 2
-        };
-    }
-    handlePinchStart(pointerList) {
-        if (!this.props.enableZoom) {
-            return;
-        }
-        this.currentAction = Lightbox_1.ACTION_PINCH;
-        this.pinchTouchList = pointerList.map(({ id, x, y }) => ({ id, x, y }));
-        this.pinchDistance = this.calculatePinchDistance();
-    }
-    handlePinch(pointerList) {
-        this.pinchTouchList = this.pinchTouchList.map((oldPointer) => {
-            for (let i = 0; i < pointerList.length; i += 1) {
-                if (pointerList[i].id === oldPointer.id) {
-                    return pointerList[i];
-                }
-            }
-            return oldPointer;
-        });
-        const newDistance = this.calculatePinchDistance();
-        const zoomLevel = this.state.zoomLevel + newDistance - this.pinchDistance;
-        this.pinchDistance = newDistance;
-        const { x: clientX, y: clientY } = this.calculatePinchCenter(this.pinchTouchList);
-        this.changeZoom(zoomLevel, clientX, clientY);
-    }
-    handlePinchEnd(event) {
-        this.currentAction = Lightbox_1.ACTION_NONE;
-        this.pinchTouchList = null;
-        this.pinchDistance = 0;
-    }
-    // Handle the window resize event
-    handleWindowResize() {
-        this.clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = this.setTimeout(this.forceUpdate.bind(this), 100);
-    }
-    handleZoomInButtonClick() {
-        const nextZoomLevel = this.state.zoomLevel + Lightbox_1.ZOOM_BUTTON_INCREMENT_SIZE;
-        this.changeZoom(nextZoomLevel, null, null);
-        if (nextZoomLevel === Lightbox_1.MAX_ZOOM_LEVEL) {
-            this.zoomOutBtn.current.focus();
-        }
-    }
-    handleZoomOutButtonClick() {
-        const nextZoomLevel = this.state.zoomLevel - Lightbox_1.ZOOM_BUTTON_INCREMENT_SIZE;
-        this.changeZoom(nextZoomLevel, null, null);
-        if (nextZoomLevel === Lightbox_1.MIN_ZOOM_LEVEL) {
-            this.zoomInBtn.current.focus();
-        }
-    }
-    handleCaptionMousewheel(event) {
-        event.stopPropagation();
-        if (!this.caption.current) {
-            return;
-        }
-        const { height } = this.caption.current.getBoundingClientRect();
-        const { scrollHeight, scrollTop } = this.caption.current;
-        if ((event.deltaY > 0 && height + scrollTop >= scrollHeight) || (event.deltaY < 0 && scrollTop <= 0)) {
-            event.preventDefault();
-        }
-    }
-    // Detach key and mouse input events
-    isAnimating() {
-        return this.state.shouldAnimate || this.state.isClosing;
-    }
-    // Check if image is loaded
-    isImageLoaded(imageSrc) {
-        return imageSrc && imageSrc in this.imageCache && this.imageCache[imageSrc].loaded;
-    }
-    // Load image from src and call callback with image width and height on load
-    loadImage(srcType, imageSrc, done) {
-        // Return the image info if it is already cached
-        if (this.isImageLoaded(imageSrc)) {
-            this.setTimeout(() => {
-                done();
-            }, 1);
-            return;
-        }
-        const inMemoryImage = new global.Image();
-        if (this.props.imageCrossOrigin) {
-            inMemoryImage.crossOrigin = this.props.imageCrossOrigin;
-        }
-        inMemoryImage.onerror = (errorEvent) => {
-            this.props.onImageLoadError && this.props.onImageLoadError(imageSrc, srcType, errorEvent);
-            // failed to load so set the state loadErrorStatus
-            this.setState((prevState) => ({
-                loadErrorStatus: Object.assign(Object.assign({}, prevState.loadErrorStatus), { [srcType]: true })
-            }));
-            done(errorEvent);
-        };
-        inMemoryImage.onload = () => {
-            this.props.onImageLoad && this.props.onImageLoad(imageSrc, srcType, inMemoryImage);
-            this.imageCache[imageSrc] = {
-                loaded: true,
-                width: inMemoryImage.width,
-                height: inMemoryImage.height
-            };
-            done();
-        };
-        inMemoryImage.src = imageSrc;
-    }
-    // Load all images and their thumbnails
-    loadAllImages(props = this.props) {
-        const generateLoadDoneCallback = (srcType, imageSrc) => (err) => {
-            // Give up showing image on error
-            if (err) {
-                return;
-            }
-            // Don't rerender if the src is not the same as when the load started
-            // or if the component has unmounted
-            if (this.props[srcType] !== imageSrc || this['didUnmount']) {
-                return;
-            }
-            // Force rerender with the new image
-            this.forceUpdate();
-        };
-        // Load the images
-        this.getSrcTypes().forEach((srcType) => {
-            const type = srcType.name;
-            // there is no error when we try to load it initially
-            if (props[type] && this.state.loadErrorStatus[type]) {
-                this.setState((prevState) => ({
-                    loadErrorStatus: Object.assign(Object.assign({}, prevState.loadErrorStatus), { [type]: false })
-                }));
-            }
-            // Load unloaded images
-            if (props[type] && !this.isImageLoaded(props[type])) {
-                this.loadImage(type, props[type], generateLoadDoneCallback(type, props[type]));
-            }
-        });
-    }
-    // Request that the lightbox be closed
-    requestClose(event) {
-        // Call the parent close request
-        const closeLightbox = () => this.props.onCloseRequest(event);
-        if (this.props.animationDisabled || (event.type === 'keydown' && !this.props.animationOnKeyInput)) {
-            // No animation
-            closeLightbox();
-            return;
-        }
-        // With animation
-        // Start closing animation
-        this.setState({ isClosing: true });
-        // Perform the actual closing at the end of the animation
-        this.setTimeout(closeLightbox, this.props.animationDuration);
-    }
-    requestMove(direction, event) {
-        // Reset the zoom level on image move
-        const nextState = {
-            zoomLevel: Lightbox_1.MIN_ZOOM_LEVEL,
-            offsetX: 0,
-            offsetY: 0
-        };
-        // Enable animated states
-        if (!this.props.animationDisabled && (!this.keyPressed || this.props.animationOnKeyInput)) {
-            nextState['shouldAnimate'] = true;
-            this.setTimeout(() => this.setState({ shouldAnimate: false }), this.props.animationDuration);
-        }
-        this.keyPressed = false;
-        this.moveRequested = true;
-        if (direction === 'prev') {
-            this.keyCounter -= 1;
-            this.setState(nextState);
-            this.props.onMovePrevRequest(event);
-        }
-        else {
-            this.keyCounter += 1;
-            this.setState(nextState);
-            this.props.onMoveNextRequest(event);
-        }
-    }
-    // Request to transition to the next image
-    requestMoveNext(event) {
-        this.requestMove('next', event);
-    }
-    // Request to transition to the previous image
-    requestMovePrev(event) {
-        this.requestMove('prev', event);
-    }
-    render() {
-        const { animationDisabled, animationDuration, clickOutsideToClose, discourageDownloads, enableZoom, imageTitle, nextSrc, prevSrc, toolbarButtons, reactModalStyle, onAfterOpen, imageCrossOrigin, reactModalProps, loader } = this.props;
-        const { zoomLevel, offsetX, offsetY, isClosing, loadErrorStatus } = this.state;
-        const boxSize = this.getLightboxRect();
-        let transitionStyle = {};
-        // Transition settings for sliding animations
-        if (!animationDisabled && this.isAnimating()) {
-            transitionStyle = Object.assign(Object.assign({}, transitionStyle), { transition: `transform ${animationDuration}ms` });
-        }
-        // Key endings to differentiate between images with the same src
-        const keyEndings = {};
-        this.getSrcTypes().forEach(({ name, keyEnding }) => {
-            keyEndings[name] = keyEnding;
-        });
-        // Images to be displayed
-        const images = [];
-        const addImage = (srcType, imageClass, transforms) => {
-            // Ignore types that have no source defined for their full size image
-            if (!this.props[srcType]) {
-                return;
-            }
-            const bestImageInfo = this.getBestImageForType(srcType);
-            const imageStyle = Object.assign(Object.assign({}, transitionStyle), ReactImageLightbox.getTransform(Object.assign(Object.assign({}, transforms), bestImageInfo)));
-            if (zoomLevel > Lightbox_1.MIN_ZOOM_LEVEL) {
-                imageStyle['cursor'] = 'move';
-            }
-            // support IE 9 and 11
-            const hasTrueValue = (object) => Object.keys(object).some((key) => object[key]);
-            // when error on one of the loads then push custom error stuff
-            if (bestImageInfo === null && hasTrueValue(loadErrorStatus)) {
-                images.push(react_1.default.createElement("div", { className: (0, classnames_1.default)(`${imageClass}`, classes.rilImage, 'ril-errored'), style: imageStyle, key: this.props[srcType] + keyEndings[srcType] },
-                    react_1.default.createElement("div", { className: classes.rilErrorContainer }, this.props.imageLoadErrorMessage || this.props.intl.formatMessage(messages.imageLoadErrorMessage))));
-                return;
-            }
-            if (bestImageInfo === null) {
-                const loadingIcon = loader !== undefined ? (loader) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(`ril-loading-circle`, classes.rilLoadingCircle, classes.rilLoadingContainerIcon) }, [...new Array(12)].map((_, index) => (react_1.default.createElement("div", { key: index, className: (0, classnames_1.default)('ril-loading-circle-point', classes.rilLoadingCirclePoint) })))));
-                // Fall back to loading icon if the thumbnail has not been loaded
-                images.push(react_1.default.createElement("div", { className: (0, classnames_1.default)(`${imageClass}`, 'ril-not-loaded', classes.rilImage), style: imageStyle, key: this.props[srcType] + keyEndings[srcType] },
-                    react_1.default.createElement("div", { className: classes.rilLoadingContainer }, loadingIcon)));
-                return;
-            }
-            const imageSrc = bestImageInfo.src;
-            if (discourageDownloads) {
-                imageStyle['backgroundImage'] = `url('${imageSrc}')`;
-                images.push(react_1.default.createElement("div", { className: (0, classnames_1.default)(`${imageClass}`, classes.rilImage, classes.rilImageDiscourager), onDoubleClick: this.handleImageDoubleClick, onWheel: this.handleImageMouseWheel, style: imageStyle, key: imageSrc + keyEndings[srcType] },
-                    react_1.default.createElement("div", { className: (0, classnames_1.default)('ril-download-blocker', classes.rilDownloadBlocker) },
-                        react_1.default.createElement(Icon_1.default, null, "download"))));
-            }
-            else {
-                images.push(react_1.default.createElement("img", { 
-                    /*{...(imageCrossOrigin ? {crossOrigin: imageCrossOrigin} : {})}*/
-                    className: (0, classnames_1.default)(`${imageClass}`, classes.rilImage), onDoubleClick: this.handleImageDoubleClick, onWheel: this.handleImageMouseWheel, onDragStart: (e) => e.preventDefault(), style: imageStyle, src: imageSrc, key: imageSrc + keyEndings[srcType], alt: typeof imageTitle === 'string' ? imageTitle : this.props.intl.formatMessage(messages.image), draggable: false }));
-            }
-        };
-        const zoomMultiplier = this.getZoomMultiplier();
-        // Next Image (displayed on the right)
-        addImage('nextSrc', (0, classnames_1.default)('ril-image-next', classes.rilImageNext), {
-            x: boxSize.width
-        });
-        addImage('mainSrc', 'ril-image-current', {
-            x: -1 * offsetX,
-            y: -1 * offsetY,
-            zoom: zoomMultiplier
-        });
-        // Previous Image (displayed on the left)
-        addImage('prevSrc', (0, classnames_1.default)('ril-image-prev', classes.rilImagePrev), {
-            x: -1 * boxSize.width
-        });
-        return (react_1.default.createElement(Root, Object.assign({ id: this.props.id, open: true, className: (0, classnames_1.default)(classes.root, this.props.className), onClose: clickOutsideToClose ? this.requestClose : undefined, container: typeof global.window !== 'undefined' ? global.window.document.body : undefined }, reactModalProps),
-            react_1.default.createElement("div", { 
-                // Floating modal with closing animations
-                className: (0, classnames_1.default)('ril-outer', classes.rilOuter, classes.rilOuterAnimating, {
-                    [`${this.props.wrapperClassName}`]: Boolean(this.props.wrapperClassName),
-                    ['ril-closing']: isClosing,
-                    [classes.rilOuterClosing]: isClosing
-                }), style: {
-                    transition: `opacity ${animationDuration}ms`,
-                    animationDuration: `${animationDuration}ms`,
-                    animationDirection: isClosing ? 'normal' : 'reverse'
-                }, ref: this.outerEl, onWheel: this.handleOuterMousewheel, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, tabIndex: -1, onKeyDown: this.handleKeyInput, onKeyUp: this.handleKeyInput },
-                react_1.default.createElement("div", { 
-                    // Image holder
-                    className: (0, classnames_1.default)('ril-inner', classes.rilInner), onClick: clickOutsideToClose ? this.closeIfClickInner : undefined }, images),
-                prevSrc && (react_1.default.createElement(material_1.IconButton // Move to previous image button
-                , { type: "button", className: (0, classnames_1.default)('ril-prev-button', classes.rilNavButtons, classes.rilNavButtonPrev), key: "prev", "aria-label": this.props.prevLabel || this.props.intl.formatMessage(messages.prevLabel), title: this.props.prevLabel || this.props.intl.formatMessage(messages.prevLabel), onClick: !this.isAnimating() ? this.requestMovePrev : undefined },
-                    react_1.default.createElement(Icon_1.default, { fontSize: 'large' }, "chevron_left"))),
-                nextSrc && (react_1.default.createElement(material_1.IconButton, { className: (0, classnames_1.default)('ril-next-button', classes.rilNavButtons, classes.rilNavButtonNext), key: "next", "aria-label": this.props.nextLabel || this.props.intl.formatMessage(messages.nextLabel), title: this.props.nextLabel || this.props.intl.formatMessage(messages.nextLabel), onClick: !this.isAnimating() ? this.requestMoveNext : undefined },
-                    react_1.default.createElement(Icon_1.default, { fontSize: 'large' }, "chevron_right"))),
-                react_1.default.createElement("div", { className: (0, classnames_1.default)('ril-ril-toolbar', classes.rilToolbar) },
-                    react_1.default.createElement("ul", { className: (0, classnames_1.default)('ril-toolbar-left', classes.rilToolbarSide, classes.rilToolbarLeftSide) },
-                        react_1.default.createElement("li", { className: (0, classnames_1.default)('ril-toolbar__item', classes.rilToolbarItem) },
-                            react_1.default.createElement("span", { className: (0, classnames_1.default)('ril-toolbar__item__child', classes.rilToolbarItemChild) }, imageTitle))),
-                    react_1.default.createElement("ul", { className: (0, classnames_1.default)('ril-toolbar-right', classes.rilToolbarSide, classes.rilToolbarRightSide) },
-                        toolbarButtons &&
-                            toolbarButtons.map((button, i) => (react_1.default.createElement("li", { key: `button_${i + 1}`, className: (0, classnames_1.default)('ril-toolbar', classes.rilToolbarItem) }, button))),
-                        enableZoom && (react_1.default.createElement("li", { className: (0, classnames_1.default)('ril-toolbar__item', classes.rilToolbarItem) },
-                            react_1.default.createElement(material_1.IconButton, { key: "zoom-in", "aria-label": this.props.zoomInLabel || this.props.intl.formatMessage(messages.zoomInLabel), title: this.props.zoomInLabel || this.props.intl.formatMessage(messages.zoomInLabel), className: (0, classnames_1.default)('ril-zoom-in', classes.rilToolbarItemChild, classes.rilBuiltinButton, classes.rilZoomInButton, {
-                                    [classes.rilBuiltinButtonDisabled]: zoomLevel === Lightbox_1.MAX_ZOOM_LEVEL
-                                }), ref: this.zoomInBtn, disabled: this.isAnimating() || zoomLevel === Lightbox_1.MAX_ZOOM_LEVEL, onClick: !this.isAnimating() && zoomLevel !== Lightbox_1.MAX_ZOOM_LEVEL ? this.handleZoomInButtonClick : undefined },
-                                react_1.default.createElement(Icon_1.default, { fontSize: 'medium' }, "zoom_in")))),
-                        enableZoom && (react_1.default.createElement("li", { className: (0, classnames_1.default)('ril-toolbar__item', classes.rilToolbarItem) },
-                            react_1.default.createElement(material_1.IconButton, { key: "zoom-out", "aria-label": this.props.zoomOutLabel || this.props.intl.formatMessage(messages.zoomOutLabel), title: this.props.zoomOutLabel || this.props.intl.formatMessage(messages.zoomOutLabel), className: (0, classnames_1.default)('ril-zoom-out', classes.rilToolbarItemChild, classes.rilBuiltinButton, classes.rilZoomOutButton, {
-                                    [classes.rilBuiltinButtonDisabled]: zoomLevel === Lightbox_1.MIN_ZOOM_LEVEL
-                                }), ref: this.zoomOutBtn, disabled: this.isAnimating() || zoomLevel === Lightbox_1.MIN_ZOOM_LEVEL, onClick: !this.isAnimating() && zoomLevel !== Lightbox_1.MIN_ZOOM_LEVEL ? this.handleZoomOutButtonClick : undefined },
-                                react_1.default.createElement(Icon_1.default, { fontSize: 'medium' }, "zoom_out")))),
-                        react_1.default.createElement("li", { className: (0, classnames_1.default)('ril-toolbar__item', classes.rilToolbarItem) },
-                            react_1.default.createElement(material_1.IconButton, { key: "close", "aria-label": this.props.closeLabel || this.props.intl.formatMessage(messages.closeLabel), title: this.props.closeLabel || this.props.intl.formatMessage(messages.closeLabel), className: (0, classnames_1.default)('ril-close', classes.rilToolbarItemChild, classes.rilBuiltinButton, classes.rilCloseButton), onClick: !this.isAnimating() ? this.requestClose : undefined },
-                                react_1.default.createElement(Icon_1.default, { fontSize: 'large' }, "close"))))),
-                this.props.imageCaption && (react_1.default.createElement("div", { onWheel: this.handleCaptionMousewheel, onMouseDown: (event) => event.stopPropagation(), className: (0, classnames_1.default)('ril-caption', classes.rilCaption), ref: this.caption },
-                    react_1.default.createElement("div", { className: "ril-caption-content ril__captionContent" }, this.props.imageCaption))))));
-    }
-}
-ReactImageLightbox.defaultProps = {
-    id: 'lightbox',
-    className: {},
-    imageTitle: null,
-    imageCaption: null,
-    toolbarButtons: null,
-    reactModalProps: {},
-    animationDisabled: false,
-    animationDuration: 300,
-    animationOnKeyInput: false,
-    clickOutsideToClose: true,
-    closeLabel: null,
-    discourageDownloads: false,
-    enableZoom: true,
-    imagePadding: 10,
-    imageCrossOrigin: null,
-    keyRepeatKeyupBonus: 40,
-    keyRepeatLimit: 180,
-    mainSrcThumbnail: null,
-    nextLabel: null,
-    nextSrc: null,
-    nextSrcThumbnail: null,
-    onAfterOpen: () => undefined,
-    onImageLoadError: () => undefined,
-    onImageLoad: () => undefined,
-    onMoveNextRequest: () => undefined,
-    onMovePrevRequest: () => undefined,
-    prevLabel: null,
-    prevSrc: null,
-    prevSrcThumbnail: null,
-    reactModalStyle: {},
-    wrapperClassName: '',
-    zoomInLabel: null,
-    zoomOutLabel: null,
-    imageLoadErrorMessage: null,
-    loader: undefined
+    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: react_1.default.createElement(material_1.CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
+            return react_1.default.createElement(react_1.default.Fragment, null, toolbarButtons);
+        } })));
 };
-const ReactImageLightboxIntl = (0, react_intl_1.injectIntl)(ReactImageLightbox);
-exports.default = ReactImageLightboxIntl;
-//# sourceMappingURL=Lightbox.js.map
+exports.default = ReactImageLightbox;