react-native-image-modal/dist/index.js

image full screen modal for react native

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createRef, forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Animated, View } from 'react-native';
import { ImageDetail, OriginImage } from './components';
import { useOriginImageLayout } from './hooks';
var VISIBLE_OPACITY = 1;
var INVISIBLE_OPACITY = 0;
var ImageModal = forwardRef(function (_a, ref) {
    var source = _a.source, style = _a.style, _b = _a.resizeMode, resizeMode = _b === void 0 ? 'contain' : _b, _c = _a.isRTL, isRTL = _c === void 0 ? false : _c, _d = _a.renderToHardwareTextureAndroid, renderToHardwareTextureAndroid = _d === void 0 ? true : _d, isTranslucent = _a.isTranslucent, _e = _a.swipeToDismiss, swipeToDismiss = _e === void 0 ? true : _e, _f = _a.imageBackgroundColor, imageBackgroundColor = _f === void 0 ? 'transparent' : _f, overlayBackgroundColor = _a.overlayBackgroundColor, hideCloseButton = _a.hideCloseButton, modalRef = _a.modalRef, _g = _a.disabled, disabled = _g === void 0 ? false : _g, modalImageStyle = _a.modalImageStyle, modalImageResizeMode = _a.modalImageResizeMode, parentLayout = _a.parentLayout, _h = _a.animationDuration, animationDuration = _h === void 0 ? 100 : _h, onLongPressOriginImage = _a.onLongPressOriginImage, renderHeader = _a.renderHeader, renderFooter = _a.renderFooter, renderImageComponent = _a.renderImageComponent, onTap = _a.onTap, onDoubleTap = _a.onDoubleTap, onLongPress = _a.onLongPress, onOpen = _a.onOpen, didOpen = _a.didOpen, onMove = _a.onMove, responderRelease = _a.responderRelease, willClose = _a.willClose, onClose = _a.onClose;
    var imageRef = createRef();
    var imageDetailRef = modalRef !== null && modalRef !== void 0 ? modalRef : createRef();
    var originImageOpacity = useRef(new Animated.Value(VISIBLE_OPACITY)).current;
    var _j = useState(false), isModalOpen = _j[0], setIsModalOpen = _j[1];
    var _k = useOriginImageLayout({
        imageRef: imageRef,
        isRTL: isRTL,
    }), originImageLayout = _k.originImageLayout, updateOriginImageLayout = _k.updateOriginImageLayout;
    var showModal = function () {
        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
        updateOriginImageLayout();
        setTimeout(function () {
            setIsModalOpen(true);
        });
    };
    var hideModal = function () {
        setTimeout(function () {
            setIsModalOpen(false);
            onClose === null || onClose === void 0 ? void 0 : onClose();
        });
    };
    var handleOpen = function () {
        showModal();
        Animated.timing(originImageOpacity, {
            toValue: INVISIBLE_OPACITY,
            duration: animationDuration,
            useNativeDriver: false,
        }).start();
    };
    var handleClose = function () {
        originImageOpacity.setValue(VISIBLE_OPACITY);
        hideModal();
    };
    useImperativeHandle(ref, function () { return ({
        isOpen: isModalOpen,
        open: handleOpen,
        close: function () {
            imageDetailRef.current.close();
        },
    }); });
    return (_jsxs(View, { ref: imageRef, style: [{ alignSelf: 'baseline', backgroundColor: imageBackgroundColor }], children: [_jsx(OriginImage, { source: source, resizeMode: resizeMode, imageOpacity: originImageOpacity, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, disabled: disabled, style: style, isModalOpen: isModalOpen, onDialogOpen: handleOpen, onLongPressOriginImage: onLongPressOriginImage, renderImageComponent: renderImageComponent }), isModalOpen && (_jsx(ImageDetail, { source: source, resizeMode: modalImageResizeMode !== null && modalImageResizeMode !== void 0 ? modalImageResizeMode : resizeMode, imageStyle: modalImageStyle, ref: modalRef !== null && modalRef !== void 0 ? modalRef : imageDetailRef, isOpen: isModalOpen, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, isTranslucent: isTranslucent, origin: originImageLayout, backgroundColor: overlayBackgroundColor, swipeToDismiss: swipeToDismiss, hideCloseButton: hideCloseButton, parentLayout: parentLayout, animationDuration: animationDuration, renderHeader: renderHeader, renderFooter: renderFooter, renderImageComponent: renderImageComponent, onTap: onTap, onDoubleTap: onDoubleTap, onLongPress: onLongPress, didOpen: didOpen, onMove: onMove, responderRelease: responderRelease, willClose: willClose, onClose: handleClose }))] }));
});
export default ImageModal;
//# sourceMappingURL=index.js.map