mytrip.tsx
import React from 'react'
import { View, Text, TouchableOpacity, Image } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { ScrollView } from 'react-native-gesture-handler'
import { SearchBar } from '../../components'
import { styles } from './styles'
import TripComponent from './TripComponent'
const mytripScreen = () => {
const navigation = useNavigation()
const [trips, setTrips] = React.useState(MYTRIPS)
const searchTrips = (t: string) => {
const newData = MYTRIPS.filter(function (item) {
const itemData = item.title ? item.title.toUpperCase() : ''.toUpperCase()
const textData = t.toUpperCase()
return itemData.indexOf(textData) > -1
})
setTrips(newData)
}
return (
<View style={styles.mytripMainContainer}>
<View style={styles.mytripInnerContainer}>
<View style={styles.tripSearchContainer}>
<SearchBar type="trip" handleChange={(text: string) => searchTrips(text)} />
</View>
<ScrollView showsVerticalScrollIndicator={false} style={styles.tripScrollView}>
{trips.map((item) => {
return (
<TripComponent
id={item.id}
heading={item.heading}
title={item.title}
days={item.days}
dayfrom={item.dayfrom}
dayto={item.dayto}
price={item.price}
members={item.members}
type={item.type}
status={item.status}
handleChange={(id: string, title: string) => {
console.log('TRIP SELECTED : ', id + title)
}}
/>
)
})}
</ScrollView>
</View>
{/* <View style={styles.bottomBar}>
<TouchableOpacity onPress={() => alert('search')}>
<Image style={styles.imageStyle} source={require('../../assets/MyTrips/Search.png')} />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('hamburgerMenuScreen')}>
<Image style={styles.plusImageStyle} source={require('../../assets/MyTrips/Add.png')} />
</TouchableOpacity>
<TouchableOpacity onPress={() => alert('venue')}>
<Image style={styles.imageStyle} source={require('../../assets/MyTrips/Trips_select.png')} />
</TouchableOpacity>
</View> */}
</View>
)
}
export default mytripScreen
const MYTRIPS = [
{
id: 1,
heading: 'YOU CAN DO IT BETTER',
title: 'Hawai trip Jan 21',
days: 8,
dayfrom: null,
dayto: null,
price: 3210,
members: [
{ id: 1, name: 'A' },
{ id: 2, name: 'V' },
],
type: 'Lock your holidays',
status: 'Public',
},
{
id: 2,
heading: 'YOUR HOLIDAYS ARE ADVENTUROUS',
title: 'Summer Vacations',
days: null,
dayfrom: '02 Jul, 20',
dayto: '18 Jul, 20',
price: 4990,
members: [
{ id: 1, name: 'A' },
{ id: 2, name: 'V' },
{ id: 3, name: 'S' },
],
type: 'All set to fly',
status: 'Public',
},
{
id: 3,
heading: 'AWSOME IS A WORD FOR YOU!',
title: 'Winters2020',
days: null,
dayfrom: '12 Feb, 20',
dayto: '21 Feb, 20',
price: 2010,
members: [
{ id: 1, name: 'A' },
{ id: 2, name: 'V' },
{ id: 3, name: 'S' },
],
type: 'All set to fly',
status: 'Private',
},
]
TripComponent.tsx
import React from 'react'
import { View, Text, TouchableOpacity, TextInput } from 'react-native'
import { styles } from './styles'
const priceValue = (price: string) => {
return Number(parseFloat(price).toFixed(2)).toLocaleString('en', {
minimumFractionDigits: 2,
})
}
export default function TripComponent(props: any) {
const { id, heading, title, days, dayfrom, dayto, price, members, type, status } = props
const [value, onChangeText] = React.useState(title)
const [isEdit, onEditText] = React.useState(-1)
const onEdit = (index: number) => {
onEditText(index)
}
if(BUTTON_COLORS.length == id){
let i=0
BUTTON_COLORS.forEach(()=>{
BUTTON_COLORS.push(BUTTON_COLORS[i])
i+=1;
})
}
if(HEADING_COLORS.length == id){
let j=0
HEADING_COLORS.forEach(()=>{
HEADING_COLORS.push(HEADING_COLORS[j])
j+=1;
})
}
return ( <View key={id} style={styles.card}>
<View style={[{backgroundColor:HEADING_COLORS[id-1]},styles.cardTitleView]}>
<Text>{heading} </Text>
</View>
<View style={styles.carLeftView}>
<View style={styles.cardLeftViewInner}>
{isEdit === -1 ? (
<TouchableOpacity onPress={() => onEdit(0)}>
<Text style={styles.leftText1}>{title} </Text>
</TouchableOpacity>
) : (
<TextInput
style={styles.cardLeftViewTextInput}
onChangeText={(text) => onChangeText(text)}
// onBlur={() => alert('call')}
// onFocus={() => alert('call')}
onSubmitEditing={() => onEditText(-1)}
value={title}
/>
)}
<Text style={styles.leftText2}>${priceValue(price)}</Text>
<Text style={styles.leftText3}>{status}</Text>
<View style={styles.circleContainer}>
{members.length > 0 &&
status == 'Public' &&
members.map((i: any) => {
return (
<View style={styles.circleView}>
<Text>{i.name}</Text>
</View>
)
})}
</View>
</View>
<View style={styles.rightViewContainer}>
<View style={styles.rightTopView}>
{days != null ? (
<Text style={styles.rightDaysText}> {days} days</Text>
) : (
<View style={styles.rightDaysContainer}>
<View style={styles.rightDaysFrom}>
<View style={styles.rightDaysFromCircle} />
<Text style={styles.rightDaysFromText}>{dayfrom}</Text>
</View>
<View style={styles.rightDaysConnectingLine} />
<View style={styles.rightDaysFrom}>
<View style={styles.rightDaysToCircle} />
<Text style={styles.rightDaysToText}>{dayto}</Text>
</View>
</View>
)}
</View>
<TouchableOpacity style={[{backgroundColor: BUTTON_COLORS[id-1]},styles.button]} onPress={() => props.handleChange(id, value)}>
<Text style={styles.buttonText}>{type}</Text>
</TouchableOpacity>
</View>
</View>
</View>)
}
const BUTTON_COLORS = ["#00CFCC", "#274792", "lightgray"];
const HEADING_COLORS = ["#FFCA9F", "#67d1a0", "lightgray"];
Comments
Post a Comment