|
|
@@ -0,0 +1,311 @@
|
|
|
+import Svg, { Path, Rect } from 'react-native-svg';
|
|
|
+import * as React from 'react';
|
|
|
+import {
|
|
|
+ View,
|
|
|
+ Text,
|
|
|
+ useWindowDimensions,
|
|
|
+ StyleSheet,
|
|
|
+ Image,
|
|
|
+ ImageSourcePropType,
|
|
|
+ Pressable,
|
|
|
+ ViewStyle
|
|
|
+} from 'react-native';
|
|
|
+import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
|
|
|
+import { FlashList } from '@shopify/flash-list';
|
|
|
+import { SafeAreaView } from 'react-native-safe-area-context';
|
|
|
+import NormalInput from '../global/normal_input';
|
|
|
+
|
|
|
+export interface TabItem {
|
|
|
+ imgURL: ImageSourcePropType;
|
|
|
+ date: string;
|
|
|
+ time: string;
|
|
|
+ chargeStationName: string;
|
|
|
+ chargeStationAddress: string;
|
|
|
+ distance: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface TabViewComponentProps {
|
|
|
+ titles: string[];
|
|
|
+ tabItems: TabItem[];
|
|
|
+}
|
|
|
+
|
|
|
+const CheckMarkLogoSvg = () => (
|
|
|
+ <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
|
+ <Rect width="20" height="20" rx="10" fill="#02677D" />
|
|
|
+ <Path
|
|
|
+ d="M7.95837 15L3.20837 10.25L4.39587 9.06251L7.95837 12.625L15.6042 4.97917L16.7917 6.16667L7.95837 15Z"
|
|
|
+ fill="white"
|
|
|
+ />
|
|
|
+ </Svg>
|
|
|
+);
|
|
|
+
|
|
|
+const dummyTabItems: TabItem[] = [
|
|
|
+ {
|
|
|
+ imgURL: require('../../assets/dummyStationPicture.png'),
|
|
|
+ date: '今天',
|
|
|
+ time: '16:30',
|
|
|
+ chargeStationName: '上環街市充電站',
|
|
|
+ chargeStationAddress: '香港上環皇后大道中345號',
|
|
|
+ distance: '400米'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgURL: require('../../assets/dummyStationPicture2.png'),
|
|
|
+ date: '3月15',
|
|
|
+ time: '17:45',
|
|
|
+ chargeStationName: '中環IFC充電站',
|
|
|
+ chargeStationAddress: '香港中環皇后大道中999號',
|
|
|
+ distance: '680米'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgURL: require('../../assets/dummyStationPicture2.png'),
|
|
|
+ date: '4月20',
|
|
|
+ time: '12:30',
|
|
|
+ chargeStationName: '中環IFC充電站',
|
|
|
+ chargeStationAddress: '香港中環皇后大道中999號',
|
|
|
+ distance: '680米'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgURL: require('../../assets/dummyStationPicture.png'),
|
|
|
+ date: '今天',
|
|
|
+ time: '16:30',
|
|
|
+ chargeStationName: '上環街市充電站',
|
|
|
+ chargeStationAddress: '香港上環皇后大道中345號',
|
|
|
+ distance: '400米'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgURL: require('../../assets/dummyStationPicture.png'),
|
|
|
+ date: '今天',
|
|
|
+ time: '16:30',
|
|
|
+ chargeStationName: '上環街市充電站',
|
|
|
+ chargeStationAddress: '香港上環皇后大道中345號',
|
|
|
+ distance: '400米'
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+const LocationTabComponent: React.FC<TabViewComponentProps> = ({
|
|
|
+ titles,
|
|
|
+ tabItems
|
|
|
+}) => {
|
|
|
+ const layout = useWindowDimensions();
|
|
|
+
|
|
|
+ //tab 1
|
|
|
+ const FirstRoute = () => (
|
|
|
+ <View style={{ flex: 1, backgroundColor: 'white' }}>
|
|
|
+ <FlashList
|
|
|
+ data={tabItems}
|
|
|
+ renderItem={({ item }) => {
|
|
|
+ return (
|
|
|
+ <View style={styles.container}>
|
|
|
+ <Image style={styles.image} source={item.imgURL} />
|
|
|
+ <View style={styles.textContainer}>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#222222'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.chargeStationName}
|
|
|
+ </Text>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#888888'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.chargeStationAddress}
|
|
|
+ </Text>
|
|
|
+ <View className=" flex-row space-x-2 items-center">
|
|
|
+ <CheckMarkLogoSvg />
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#222222'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ Walk-in
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#888888',
|
|
|
+ marginTop: 20,
|
|
|
+ marginLeft: 10
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.distance}
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ estimatedItemSize={10}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+
|
|
|
+ //tab 2
|
|
|
+ const SecondRoute = () => (
|
|
|
+ <View style={{ flex: 1, backgroundColor: 'white' }}>
|
|
|
+ <FlashList
|
|
|
+ data={tabItems}
|
|
|
+ renderItem={({ item }) => {
|
|
|
+ return (
|
|
|
+ <View style={styles.container}>
|
|
|
+ <Image style={styles.image} source={item.imgURL} />
|
|
|
+ <View style={styles.textContainer}>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#222222'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.chargeStationName}
|
|
|
+ </Text>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#888888'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.chargeStationAddress}
|
|
|
+ </Text>
|
|
|
+ <View className=" flex-row space-x-2 items-center">
|
|
|
+ <CheckMarkLogoSvg />
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#222222'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ Walk-in
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#888888',
|
|
|
+ marginTop: 20,
|
|
|
+ marginLeft: 10
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.distance}
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ estimatedItemSize={10}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+
|
|
|
+ const renderScene = SceneMap({
|
|
|
+ firstRoute: FirstRoute,
|
|
|
+ secondRoute: SecondRoute
|
|
|
+ });
|
|
|
+ const [routes] = React.useState([
|
|
|
+ { key: 'firstRoute', title: titles[0] },
|
|
|
+ { key: 'secondRoute', title: titles[1] }
|
|
|
+ ]);
|
|
|
+ const [index, setIndex] = React.useState(0);
|
|
|
+
|
|
|
+ const renderTabBar = (props: any) => (
|
|
|
+ <TabBar
|
|
|
+ {...props}
|
|
|
+ renderLabel={({ route, focused }) => (
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ color: focused ? '#025c72' : '#888888',
|
|
|
+ fontWeight: focused ? '900' : 'thin',
|
|
|
+ fontSize: 20
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {route.title}
|
|
|
+ </Text>
|
|
|
+ )}
|
|
|
+ indicatorStyle={{
|
|
|
+ backgroundColor: '#025c72'
|
|
|
+ }}
|
|
|
+ style={{
|
|
|
+ backgroundColor: 'white',
|
|
|
+
|
|
|
+ borderColor: '#DBE4E8',
|
|
|
+ elevation: 0,
|
|
|
+ marginHorizontal: 15,
|
|
|
+ borderBottomWidth: 0.5
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ <TabView
|
|
|
+ navigationState={{ index, routes }}
|
|
|
+ renderScene={renderScene}
|
|
|
+ onIndexChange={setIndex}
|
|
|
+ initialLayout={{ width: layout.width }}
|
|
|
+ renderTabBar={renderTabBar}
|
|
|
+ />
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ container: { flexDirection: 'row' },
|
|
|
+ image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
|
|
|
+ textContainer: { flexDirection: 'column', gap: 8, marginTop: 22 }
|
|
|
+});
|
|
|
+
|
|
|
+// ***************************************************************
|
|
|
+
|
|
|
+const ReservationLocationPage = () => {
|
|
|
+ const CrossLogoSvg = () => (
|
|
|
+ <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
|
+ <Path
|
|
|
+ d="M2.33333 23.3333L0 21L9.33333 11.6667L0 2.33333L2.33333 0L11.6667 9.33333L21 0L23.3333 2.33333L14 11.6667L23.3333 21L21 23.3333L11.6667 14L2.33333 23.3333Z"
|
|
|
+ fill="#222222"
|
|
|
+ />
|
|
|
+ </Svg>
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ <SafeAreaView className="flex-1 bg-white">
|
|
|
+ <View className="flex-1 mx-[5%]">
|
|
|
+ <View className="basis-1/3 flex-column">
|
|
|
+ <View className="flex-2 justify-center ">
|
|
|
+ <View className="pt-6 ">
|
|
|
+ <Pressable onPress={() => console.log('abc')}>
|
|
|
+ <CrossLogoSvg />
|
|
|
+ </Pressable>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="flex-1 justify-center ">
|
|
|
+ <Text className="text-[50px] font-normal">
|
|
|
+ 預約地點
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ <View className="flex-1 justify-center mb-6 ">
|
|
|
+ <NormalInput
|
|
|
+ placeholder="搜尋所有充電站或地區.."
|
|
|
+ onChangeText={() => console.log('abc')}
|
|
|
+ extendedStyle={{ padding: 24 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="basis-2/3 ">
|
|
|
+ <LocationTabComponent
|
|
|
+ titles={['附近的充電站', '所有的充電站']}
|
|
|
+ tabItems={dummyTabItems}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </SafeAreaView>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default ReservationLocationPage;
|
Ian Fung