Revize 6020775f
Přidáno uživatelem Fantič před více než 1 rok
| src/components/item/ZoomableImage.tsx | ||
|---|---|---|
| 1 | 1 |
import React, { useState, useEffect, useRef } from "react";
|
| 2 | 2 |
|
| 3 |
import { Flex, Image, Pressable, View } from "native-base"
|
|
| 3 |
import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay } from "native-base"
|
|
| 4 | 4 |
import { PinchGestureHandler, PanGestureHandler, State } from "react-native-gesture-handler";
|
| 5 | 5 |
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
|
| 6 | 6 |
import Svg, { SvgXml, Path } from "react-native-svg";
|
| 7 | 7 |
import { FullscreenIcon, ExitfullscreenIcon } from "../general/Icons";
|
| 8 |
import { Dimensions } from "react-native";
|
|
| 8 |
import { Button, Dimensions } from "react-native";
|
|
| 9 | 9 |
|
| 10 | 10 |
export const ZoomableImage = (props: { size: number, imageUri: string, fullScreen?: boolean }) => {
|
| 11 | 11 |
const DEFAULT_SCALE = 1 |
| ... | ... | |
| 91 | 91 |
}); |
| 92 | 92 |
|
| 93 | 93 |
|
| 94 |
console.log(viewSize) |
|
| 95 |
console.log(fullScreenMode) |
|
| 94 | 96 |
return ( |
| 95 |
<View |
|
| 96 |
// height={viewSize.height}
|
|
| 97 |
width={viewSize.width}
|
|
| 98 |
// @ts-ignore |
|
| 99 |
style={
|
|
| 100 |
fullScreenMode ? {
|
|
| 101 |
position: "absolute", |
|
| 102 |
top: -230, |
|
| 103 |
left: 0, |
|
| 104 |
zIndex: 1000, |
|
| 105 |
backgroundColor: "white", |
|
| 106 |
} |
|
| 107 |
: |
|
| 108 |
{
|
|
| 109 |
overflow: "hidden", |
|
| 110 |
} |
|
| 111 |
} |
|
| 112 |
borderColor={fullScreenMode ? "light.300" : undefined}
|
|
| 113 |
borderRadius={fullScreenMode ? 10 : 0}
|
|
| 114 |
borderWidth={fullScreenMode ? 0 : 1}
|
|
| 115 |
> |
|
| 116 |
{/* control panel */}
|
|
| 117 |
<Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
|
|
| 118 |
{
|
|
| 119 |
fullScreenMode && |
|
| 120 |
<Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
|
|
| 121 |
<FullscreenIcon color="white" /> |
|
| 122 |
</Pressable> |
|
| 123 |
} |
|
| 124 |
|
|
| 125 |
</Flex> |
|
| 126 |
|
|
| 127 |
<PinchGestureHandler |
|
| 128 |
ref={pinchRef}
|
|
| 129 |
// @ts-ignore |
|
| 130 |
onGestureEvent={onGestureEvent}
|
|
| 131 |
simultaneousHandlers={[panRef]}>
|
|
| 132 |
<Animated.View style={[{ flex: 1 }, animatedStyle]}>
|
|
| 133 |
<PanGestureHandler |
|
| 134 |
ref={panRef}
|
|
| 135 |
simultaneousHandlers={[pinchRef]}
|
|
| 136 |
onGestureEvent={onPanEvent}
|
|
| 137 |
onHandlerStateChange={(nativeEvent: any) => {
|
|
| 138 |
if (nativeEvent.state === State.END) {
|
|
| 139 |
console.log(nativeEvent) |
|
| 140 |
} |
|
| 141 |
}} |
|
| 97 |
<View> |
|
| 98 |
<Pressable onPress={() => setFullScreenMode(true)}>
|
|
| 99 |
<Image size={viewSize.width} source={{ uri: props.imageUri }} alt="image" resizeMode={"contain"} />
|
|
| 100 |
</Pressable> |
|
| 101 |
|
|
| 102 |
<Modal isOpen={fullScreenMode} onClose={() => setFullScreenMode(false)} size="full">
|
|
| 103 |
<Box |
|
| 104 |
flex={1}
|
|
| 105 |
justifyContent="center" |
|
| 106 |
alignItems="center" |
|
| 107 |
backgroundColor="transparent" // Make the background transparent |
|
| 108 |
> |
|
| 109 |
<Pressable |
|
| 110 |
position="absolute" |
|
| 111 |
bottom={20}
|
|
| 112 |
right={0}
|
|
| 113 |
padding={2}
|
|
| 114 |
zIndex={1000}
|
|
| 115 |
onPress={() => setFullScreenMode(false)}
|
|
| 142 | 116 |
> |
| 143 |
<Animated.View style={[{
|
|
| 144 |
flex: 1, |
|
| 145 |
}]}> |
|
| 146 |
<Pressable onPress={() => console.log("toggle fullscreen image")}>
|
|
| 147 |
<Image size={viewSize.width} source={{uri: props.imageUri}} resizeMode={"contain"} />
|
|
| 148 |
</Pressable> |
|
| 149 |
</Animated.View> |
|
| 150 |
</PanGestureHandler> |
|
| 151 |
</Animated.View> |
|
| 152 |
</PinchGestureHandler > |
|
| 153 |
</View > |
|
| 117 |
{/* Your close button (you can replace this with an icon) */}
|
|
| 118 |
<Box style={{width: 70, height: 30, backgroundColor:"white", borderRadius: 10}} alignItems={"center"} justifyContent="center">
|
|
| 119 |
<Text>Close</Text> |
|
| 120 |
</Box> |
|
| 121 |
</Pressable> |
|
| 122 |
<Image |
|
| 123 |
height={viewSize.height}
|
|
| 124 |
width={viewSize.width}
|
|
| 125 |
alt="image" |
|
| 126 |
source={{ uri: props.imageUri }}
|
|
| 127 |
resizeMode={"contain"}
|
|
| 128 |
/> |
|
| 129 |
</Box> |
|
| 130 |
</Modal> |
|
| 131 |
</View> |
|
| 132 |
// <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
|
|
| 133 |
// {
|
|
| 134 |
// fullScreenMode && |
|
| 135 |
// <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
|
|
| 136 |
// <FullscreenIcon color="white" /> |
|
| 137 |
// </Pressable> |
|
| 138 |
// } |
|
| 139 |
|
|
| 140 |
// </Flex> |
|
| 154 | 141 |
) |
| 155 | 142 |
|
| 156 | 143 |
} |
Také k dispozici: Unified diff
re #10917: ZoomableImage init