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> // ); };