From 25e49055101756ead3ce520861ca6209130a027a Mon Sep 17 00:00:00 2001 From: alduzy Date: Thu, 11 Jul 2024 12:26:13 +0200 Subject: [PATCH] fix: removed deprecated test --- apps/src/tests/Test898.tsx | 350 ------------------------------------- apps/src/tests/index.ts | 1 - 2 files changed, 351 deletions(-) delete mode 100644 apps/src/tests/Test898.tsx diff --git a/apps/src/tests/Test898.tsx b/apps/src/tests/Test898.tsx deleted file mode 100644 index f3faae63d1..0000000000 --- a/apps/src/tests/Test898.tsx +++ /dev/null @@ -1,350 +0,0 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -import React, { useState, useEffect, RefObject } from 'react'; -import Animated, { - useSharedValue, - useAnimatedStyle, - useAnimatedGestureHandler, - interpolate, - Extrapolate, - withTiming, - Easing, - useAnimatedRef, - measure, - runOnJS, -} from 'react-native-reanimated'; -import { Dimensions, StyleSheet, View, Image, Platform } from 'react-native'; -import { - ScrollView, - PanGestureHandler, - TapGestureHandler, - TapGestureHandlerGestureEvent, -} from 'react-native-gesture-handler'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { NavigationContainer } from '@react-navigation/native'; -import { - SafeAreaProvider, - useSafeAreaInsets, -} from 'react-native-safe-area-context'; - -const AnimatedImage = Animated.createAnimatedComponent(Image); - -const dimensions = Dimensions.get('window'); -const GUTTER_WIDTH = 3; -const NUMBER_OF_IMAGES = 4; -const IMAGE_SIZE = - (dimensions.width - GUTTER_WIDTH * (NUMBER_OF_IMAGES - 1)) / NUMBER_OF_IMAGES; - -type ExampleImage = { - uri: string; - width: number; - height: number; -}; -type ActiveExampleImageProperties = { - x: Animated.SharedValue; - y: Animated.SharedValue; - width: Animated.SharedValue; - height: Animated.SharedValue; - imageOpacity: Animated.SharedValue; -}; -type ActiveExampleImage = ActiveExampleImageProperties & { - // @ts-ignore: FIXME AnimatedImage type - animatedRef: RefObject; - item: ExampleImage; -}; - -type onItemPressFn = ( - animatedRef: RefObject, - item: ExampleImage, - svs: ActiveExampleImageProperties, -) => void; -function ImageList({ - images, - onItemPress, -}: { - images: ExampleImage[]; - onItemPress: onItemPressFn; -}) { - return ( - - {images.map((item, i) => ( - - ))} - - ); -} - -type ListItemProps = { - item: ExampleImage; - index: number; - onPress: onItemPressFn; -}; -function ListItem({ item, index, onPress }: ListItemProps) { - // @ts-ignore: FIXME(TS) correct type for createAnimatedComponent - const ref = useAnimatedRef(); - const opacity = useSharedValue(1); - const statusBarInset = useSafeAreaInsets().top; // inset of the status bar - const headerHeight = statusBarInset + 44; - - const containerStyle = { - marginRight: (index + 1) % 4 === 0 ? 0 : GUTTER_WIDTH, - marginBottom: GUTTER_WIDTH, - }; - - const styles = useAnimatedStyle(() => { - return { - width: IMAGE_SIZE, - height: IMAGE_SIZE, - opacity: opacity.value, - }; - }); - - const width = useSharedValue(0); - const height = useSharedValue(0); - const x = useSharedValue(0); - const y = useSharedValue(0); - - function handlePress() { - onPress(ref, item, { imageOpacity: opacity, width, height, x, y }); - } - - const handler = useAnimatedGestureHandler({ - onFinish: (_evt, _ctx, isCanceledOrFailed) => { - if (isCanceledOrFailed) { - return; - } - - // measure the image - // width/height and position to animate from it to the full screen one - const measurements = measure(ref); - - width.value = measurements.width; - height.value = measurements.height; - x.value = measurements.pageX; - y.value = measurements.pageY - headerHeight; - - runOnJS(handlePress)(); - }, - }); - - return ( - - - - - - ); -} - -const timingConfig = { - duration: 240, - easing: Easing.bezier(0.33, 0.01, 0, 1), -}; - -function ImageTransition({ - activeImage, - onClose, -}: { - activeImage: ActiveExampleImage; - onClose: () => void; -}) { - const { item, x, y, width, height, imageOpacity } = activeImage; - const { uri } = item; - - const targetWidth = dimensions.width; - const scaleFactor = item.width / targetWidth; - const targetHeight = item.height / scaleFactor; - - const statusBarInset = useSafeAreaInsets().top; // inset of the status bar - const headerHeight = statusBarInset + 44; - - const animationProgress = useSharedValue(0); - - const backdropOpacity = useSharedValue(0); - const scale = useSharedValue(1); - - const targetX = useSharedValue(0); - const targetY = useSharedValue( - (dimensions.height - targetHeight) / 2 - headerHeight, - ); - - const translateX = useSharedValue(0); - const translateY = useSharedValue(0); - - const onPan = useAnimatedGestureHandler({ - onActive: event => { - translateX.value = event.translationX; - translateY.value = event.translationY; - - scale.value = interpolate( - translateY.value, - [-200, 0, 200], - [0.65, 1, 0.65], - Extrapolate.CLAMP, - ); - - backdropOpacity.value = interpolate( - translateY.value, - [-100, 0, 100], - [0, 1, 0], - Extrapolate.CLAMP, - ); - }, - - onEnd: (_event, _ctx) => { - if (Math.abs(translateY.value) > 40) { - targetX.value = translateX.value - targetX.value * -1; - targetY.value = translateY.value - targetY.value * -1; - - translateX.value = 0; - translateY.value = 0; - - animationProgress.value = withTiming(0, timingConfig, () => { - imageOpacity.value = withTiming( - 1, - { - duration: 16, - }, - () => { - runOnJS(onClose)(); - }, - ); - }); - - backdropOpacity.value = withTiming(0, timingConfig); - } else { - backdropOpacity.value = withTiming(1, timingConfig); - translateX.value = withTiming(0, timingConfig); - translateY.value = withTiming(0, timingConfig); - } - - scale.value = withTiming(1, timingConfig); - }, - }); - - const imageStyles = useAnimatedStyle(() => { - const interpolateProgress = (range: [number, number]) => - interpolate(animationProgress.value, [0, 1], range, Extrapolate.CLAMP); - - const top = - translateY.value + interpolateProgress([y.value, targetY.value]); - const left = - translateX.value + interpolateProgress([x.value, targetX.value]); - - return { - position: 'absolute', - top, - left, - width: interpolateProgress([width.value, targetWidth]), - height: interpolateProgress([height.value, targetHeight]), - transform: [ - { - scale: scale.value, - }, - ], - }; - }); - - const backdropStyles = useAnimatedStyle(() => { - return { - opacity: backdropOpacity.value, - }; - }); - - useEffect(() => { - // fixes flickering - requestAnimationFrame(() => { - imageOpacity.value = 0; - }); - - animationProgress.value = withTiming(1, timingConfig); - backdropOpacity.value = withTiming(1, timingConfig); - }, []); - - return ( - - - - - - - - - - ); -} - -const images: ExampleImage[] = Array.from({ length: 30 }, (_, index) => { - return { - uri: `https://picsum.photos/id/${index + 10}/400/400`, - width: dimensions.width, - height: 400, - }; -}); - -function LightboxExample(): React.ReactElement { - const [activeImage, setActiveImage] = useState( - null, - ); - - function onItemPress( - // @ts-ignore: FIXME AnimatedImage type - animatedRef: RefObject, - item: ExampleImage, - svs: ActiveExampleImageProperties, - ) { - setActiveImage({ - animatedRef, - item, - ...svs, - }); - } - - function onClose() { - setActiveImage(null); - } - - const statusBarInset = useSafeAreaInsets().top; // inset of the status bar - const headerHeight = statusBarInset + 44; - const height = - Platform.OS === 'web' ? dimensions.height - headerHeight : undefined; - - return ( - - - - {activeImage && ( - - )} - - ); -} - -const styles = StyleSheet.create({ - container: { - paddingTop: 0, - }, - - scrollContainer: { - flexDirection: 'row', - flexWrap: 'wrap', - }, - - backdrop: { - ...StyleSheet.absoluteFillObject, - backgroundColor: 'black', - }, -}); - -const Stack = createNativeStackNavigator(); - -export default function App() { - return ( - - - - - - - - ); -} diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts index 36d3f12ca9..e0b13ffa17 100644 --- a/apps/src/tests/index.ts +++ b/apps/src/tests/index.ts @@ -45,7 +45,6 @@ export { default as Test861 } from './Test861'; export { default as Test865 } from './Test865'; export { default as Test881 } from './Test881'; export { default as Test887 } from './Test887'; -export { default as Test898 } from './Test898'; export { default as Test913 } from './Test913'; export { default as Test999 } from './Test999'; export { default as Test1017 } from './Test1017';