Commit 1511188a authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Se agrgó la función de on press a cada tile del carrusel

parent 6de99bf4

mobile/src/components/caroussel/caroussel.tsx

+22 −7
Original line number Diff line number Diff line 
import { View, Animated, Text, Dimensions, Image } from "react-native";

import { View, Animated, Text, Dimensions, Image, NativeSyntheticEvent, NativeScrollEvent } from "react-native";

import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";

import { useRef } from "react";

import { StateDataSource } from "../../domain/datasources/state_datasource";

import { CarousselTile } from "./caroussel_tile";

import { router } from "expo-router";



interface CarousselProps {

  data: PlaceInfoEntity[];

  onPress?: (id: number) => void;

  onIndexChange?: (index: number) => void;

}



const ITEM_WIDTH = Dimensions.get("window").width * 0.7;

const BLANK_ITEM_WIDTH = Dimensions.get("window").width * 0.15;



export const Caroussel = ({ data }: CarousselProps) => {

export const Caroussel = ({ data, onPress, onIndexChange }: CarousselProps) => {

  const scrollX = useRef(new Animated.Value(0)).current;

  const finalData = [

    {
@@ -24,6 +27,14 @@ export const Caroussel = ({ data }: CarousselProps) => { 
      name: "empty-right",

    },

  ];



  scrollX.addListener(({ value }) => {

    const index = Math.round(value / ITEM_WIDTH);

    if (index < 0 || index >= data.length) {

      return;

    }

    onIndexChange && onIndexChange(index);

  });

  return (

    <Animated.FlatList

      data={finalData}
@@ -35,15 +46,13 @@ export const Caroussel = ({ data }: CarousselProps) => { 


      bounces={false}

      snapToInterval={ITEM_WIDTH}

      onScroll={Animated.event(

        [{ nativeEvent: { contentOffset: { x: scrollX } } }],

        { useNativeDriver: true }

      )}

      onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {

        useNativeDriver: true,

      })}

      renderItem={({ item, index }) => {

        if (item.id === -1 || item.id === -2) {

          return <View style={{ width: BLANK_ITEM_WIDTH }} />;

        }

        console.log(item);

        const inputRange = [

          (index - 2) * ITEM_WIDTH,

          (index - 1) * ITEM_WIDTH,
@@ -69,6 +78,12 @@ export const Caroussel = ({ data }: CarousselProps) => { 
            scale={scale}

            translateY={translateY}

            item={item}

            onPress={() => {

              if (item.id !== -1 && item.id !== -2) {

                onPress && onPress(item.id);

              }

            }

            }

          />

        );

      }}

mobile/src/components/caroussel/caroussel_tile.tsx

+53 −47
Original line number Diff line number Diff line 
import { memo } from "react";

import { Animated, Dimensions, Image, Text, TouchableOpacity } from "react-native";

import {

  Animated,

  Dimensions,

  Image,

  Pressable,

  Text,

  TouchableOpacity,

} from "react-native";

import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";

import { Link } from "expo-router";
@@ -15,13 +22,10 @@ const ITEM_WIDTH = Dimensions.get("window").width * 0.7; 
const BLANK_ITEM_WIDTH = Dimensions.get("window").width * 0.15;

const ITEM_HEIGHT = Dimensions.get("window").height * 0.7;



export const CarousselTile = memo(({ translateY, scale, opacity, item }: CarousselTileProps) => {

  console.log('render');

export const CarousselTile = memo(

  ({ translateY, scale, opacity, item, onPress }: CarousselTileProps) => {

    return (

        <Link href={{

          pathname: "/(modal)/[id]",

          params: { id: item.id },

        }}>

      <Pressable onPress={onPress}>

        <Animated.View

          style={{

            width: ITEM_WIDTH,
@@ -42,7 +46,8 @@ export const CarousselTile = memo(({ translateY, scale, opacity, item }: Carouss 
              alignItems: "center",

              justifyContent: "center",

              elevation: 10,

                borderWidth: 3,

              borderWidth: 7,

              borderColor: "white",

            }}

          >

            <Animated.Image
@@ -66,6 +71,7 @@ export const CarousselTile = memo(({ translateY, scale, opacity, item }: Carouss 
            </Text>

          </Animated.View>

        </Animated.View>

        </Link>

      </Pressable>

    );

  }

);
 
});