@mr_gain/react-native-image-modal
Version:
image full screen modal for react native
136 lines • 7.61 kB
JavaScript
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { Dimensions, Animated, Modal } from 'react-native';
import { Background, DisplayImageArea, Footer, Header, ImageArea } from './components';
var INITIAL_SCALE = 1;
var ImageDetail = forwardRef(function (_a, ref) {
var _b, _c;
var renderToHardwareTextureAndroid = _a.renderToHardwareTextureAndroid, _d = _a.isTranslucent, isTranslucent = _d === void 0 ? false : _d, isOpen = _a.isOpen, origin = _a.origin, source = _a.source, _e = _a.resizeMode, resizeMode = _e === void 0 ? 'contain' : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? '#000000' : _f, swipeToDismiss = _a.swipeToDismiss, _g = _a.hideCloseButton, hideCloseButton = _g === void 0 ? false : _g, imageStyle = _a.imageStyle, parentLayout = _a.parentLayout, animationDuration = _a.animationDuration, renderHeader = _a.renderHeader, renderFooter = _a.renderFooter, renderImageComponent = _a.renderImageComponent, onTap = _a.onTap, onDoubleTap = _a.onDoubleTap, onLongPress = _a.onLongPress, didOpen = _a.didOpen, onMove = _a.onMove, responderRelease = _a.responderRelease, willClose = _a.willClose, onClose = _a.onClose;
var _h = Dimensions.get('window'), windowWidth = _h.width, windowHeight = _h.height;
var originImagePosition = {
x: origin.x - ((_b = parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.x) !== null && _b !== void 0 ? _b : 0) / 2,
y: origin.y - ((_c = parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.y) !== null && _c !== void 0 ? _c : 0),
};
var originImageWidth = origin.width, originImageHeight = origin.height;
var animatedScale = new Animated.Value(INITIAL_SCALE);
var animatedPosition = new Animated.ValueXY({ x: 0, y: 0 });
var animatedFrame = new Animated.Value(0);
var animatedOpacity = new Animated.Value(0);
var animatedImagePosition = new Animated.ValueXY(originImagePosition);
var animatedImageWidth = new Animated.Value(originImageWidth);
var animatedImageHeight = new Animated.Value(originImageHeight);
var isAnimated = useRef(true);
var handleClose = function () {
isAnimated.current = true;
willClose === null || willClose === void 0 ? void 0 : willClose();
setTimeout(function () {
Animated.parallel([
Animated.timing(animatedFrame, {
toValue: 0,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedScale, {
toValue: INITIAL_SCALE,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedPosition, {
toValue: 0,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedOpacity, {
toValue: 0,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedImagePosition, {
toValue: originImagePosition,
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageWidth, {
toValue: originImageWidth,
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageHeight, {
toValue: originImageHeight,
useNativeDriver: false,
duration: animationDuration * 2,
}),
]).start(function () {
onClose();
isAnimated.current = false;
});
});
};
var handleOpen = function () {
isAnimated.current = true;
setTimeout(function () {
Animated.parallel([
Animated.timing(animatedFrame, {
toValue: 1,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedOpacity, {
toValue: 1,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedImagePosition, {
toValue: {
x: 0,
y: 0,
},
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageWidth, {
toValue: windowWidth,
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageHeight, {
toValue: windowHeight,
useNativeDriver: false,
duration: animationDuration * 2,
}),
]).start(function () {
isAnimated.current = false;
if (isOpen) {
didOpen === null || didOpen === void 0 ? void 0 : didOpen();
}
});
});
};
useEffect(function () {
handleOpen();
}, [
animatedOpacity,
animatedImagePosition,
animatedImageWidth,
animatedImageHeight,
animatedFrame,
]);
useImperativeHandle(ref, function () { return ({
close: handleClose,
}); });
return (<Modal hardwareAccelerated visible={isOpen} transparent statusBarTranslucent={isTranslucent} onRequestClose={handleClose} supportedOrientations={[
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right',
]}>
<Background animatedOpacity={animatedOpacity} backgroundColor={backgroundColor} renderToHardwareTextureAndroid={renderToHardwareTextureAndroid}/>
<DisplayImageArea animatedFrame={animatedFrame} parentLayout={parentLayout} isTranslucent={isTranslucent} renderToHardwareTextureAndroid={renderToHardwareTextureAndroid}>
<ImageArea renderToHardwareTextureAndroid={renderToHardwareTextureAndroid} isAnimated={isAnimated} animatedOpacity={animatedOpacity} animatedScale={animatedScale} animatedPosition={animatedPosition} animatedImagePosition={animatedImagePosition} animatedImageWidth={animatedImageWidth} animatedImageHeight={animatedImageHeight} windowWidth={windowWidth} windowHeight={windowHeight} swipeToDismiss={swipeToDismiss} source={source} resizeMode={resizeMode} imageStyle={imageStyle} animationDuration={animationDuration} renderImageComponent={renderImageComponent} onClose={handleClose} onMove={onMove} onTap={onTap} onDoubleTap={onDoubleTap} onLongPress={onLongPress} responderRelease={responderRelease}/>
</DisplayImageArea>
<Header isTranslucent={isTranslucent} hideCloseButton={hideCloseButton} renderToHardwareTextureAndroid={renderToHardwareTextureAndroid} animatedOpacity={animatedOpacity} renderHeader={renderHeader} onClose={handleClose}/>
<Footer renderToHardwareTextureAndroid={renderToHardwareTextureAndroid} animatedOpacity={animatedOpacity} renderFooter={renderFooter} onClose={handleClose}/>
</Modal>);
});
export { ImageDetail };
//# sourceMappingURL=index.js.map