-
Anael Lacour authoredAnael Lacour authored
infoWindow.js 3.21 KiB
import { TouchableOpacity, Button, View, Text } from "react-native";
import useComponentVisible from '../../components/ComponentVisible'
export const goTo = (navigation, place) => navigation.navigate("vuDetails",{room : place});
export const InfoWindow = (props) => {
const { place, navigation } = props;
const { ref, isComponentVisible } = useComponentVisible(true);
//
// console.log(route.param.name)
const infoWindowStyle = {
position: 'relative',
bottom: 150,
width: 220,
backgroundColor: 'white',
boxShadow: '0 2px 7px 1px rgba(0, 0, 0, 0.3)',
padding: 10,
fontSize: 14,
zIndex: 100,
};
return (
isComponentVisible &&(
<View ref={ref}>
<TouchableOpacity>
<View style={{width: 200, height: 100, backgroundColor: "white"}}>
<Text style = {{fontSize: 16}}>
{place.name}
</Text>
<View style = {{fontSize: 14}}>
<Text style={{ fontSize: 14, color: 'grey' }}>
{place.types[0]}
</Text>
<View style={{ flexDirection: "row"}}>
<Text style = {{ color: 'orange' }}>
{String.fromCharCode(9733).repeat(Math.floor(place.rating))}
</Text>
<Text style = {{ color: 'lightgrey' }}>
{String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
</Text>
</View>
<Text style = {{ color: 'grey' }}>
{place.rating}
</Text>
<Text style={{ fontSize: 14, color: 'green' }}>
{place.loue.loue ? 'disponible' : 'occupé'}
</Text>
<Button onPress={() => goTo(navigation, place)} title={`voir`} />
</View>
</View>
</TouchableOpacity>
</View>
)
)
// return (
// <div ref={ref}>
// {isComponentVisible &&(
// <TouchableOpacity>
// <div style={infoWindowStyle}>
//
// <div style={{ fontSize: 16 }}>
// {place.name}
// </div>
// <div style={{ fontSize: 14 }}>
// <span style={{ color: 'grey' }}>
// {place.rating}
// {' '}
// </span>
// <span style={{ color: 'orange' }}>
// {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
// </span>
// <span style={{ color: 'lightgrey' }}>
// {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
// </span>
// </div>
// <div style={{ fontSize: 14, color: 'grey' }}>
// {place.types[0]}
// </div>
// <div style={{ fontSize: 14, color: 'grey' }}>
// {'$'.repeat(place.price_level)}
// </div>
// <div style={{ fontSize: 14, color: 'green' }}>
// {place.loue.loue ? 'disponible' : 'occupé'}
// </div>
// <Button onPress={goTo} title={`voir`} />
// </div>
// </TouchableOpacity>
// )}
// </div>
// );
};