Reza_ashrafi
3 years ago
parent
b8e2ed1a27
commit
bb8cf28c52
14 changed files with 290 additions and 187 deletions
@ -1,30 +1,40 @@ |
||||
import React, {Component} from 'react'; |
||||
import { SafeAreaView, StyleSheet, View} from 'react-native'; |
||||
// import Mapir from 'mapir-react-native-sdk'
|
||||
import React, { Component } from "react"; |
||||
import { SafeAreaView, StyleSheet, View } from "react-native"; |
||||
// import Mapir from "mapir-react-native-sdk";
|
||||
|
||||
const X_API_KEY = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw"; |
||||
const X_API_KEY = |
||||
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw"; |
||||
|
||||
export default function MapSelector() { |
||||
onRegionDidChange = (e) => { |
||||
}; |
||||
onRegionDidChange = (e) => {}; |
||||
return ( |
||||
<View style={styles.container}> |
||||
{/* <Mapir |
||||
apiKey={X_API_KEY} |
||||
onRegionDidChange={(e) => onRegionDidChange(e)} |
||||
style={styles.container} |
||||
/> */} |
||||
{/* <Mapir.Camera |
||||
zoomLevel={13} |
||||
centerCoordinate={[51.422548, 35.732573]} |
||||
/> |
||||
</Mapir> */} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
width: 300, |
||||
height: 300, |
||||
}} |
||||
> |
||||
{/* <Mapir |
||||
apiKey={X_API_KEY} |
||||
onRegionDidChange={(e) => onRegionDidChange(e)} |
||||
style={{ |
||||
flex: 1, |
||||
}} |
||||
styleURL={Mapir?.StyleURL?.Street} |
||||
> |
||||
<Mapir.Camera |
||||
zoomLevel={13} |
||||
followUserLocation |
||||
centerCoordinate={[51.422548, 35.732573]} |
||||
/> |
||||
</Mapir> */} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
width : '100%', height: 300 |
||||
width: "100%", |
||||
height: 300, |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
@ -1,108 +0,0 @@ |
||||
import { View, Text, Image, TouchableOpacity, Platform, Dimensions } from "react-native"; |
||||
import RBSheet from "react-native-raw-bottom-sheet"; |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
//components
|
||||
import Ticket from '../../components/BottomSheetComponents/Ticket'; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../constants/fontSize"; |
||||
|
||||
const ios = Platform.OS === "ios"; |
||||
const {height, width} = Dimensions.get("window"); |
||||
|
||||
const Box = ({ info, mobile }) => { |
||||
const refRBSheet = React.useRef(); |
||||
|
||||
return ( |
||||
<> |
||||
<TouchableOpacity |
||||
style={[ |
||||
tw( |
||||
`flex flex-row-reverse rounded-md mt-4 ${ |
||||
mobile ? "py-3 px-3" : "py-5 px-5" |
||||
}` |
||||
), |
||||
{ |
||||
backgroundColor: info.bg, |
||||
borderColor: info.borderColor, |
||||
borderWidth: 1, |
||||
}, |
||||
]} |
||||
onPress={() => refRBSheet.current.open()} |
||||
> |
||||
<Image |
||||
source={info.icon} |
||||
style={{ width: mobile ? 40 : 55, height: mobile ? 40 : 55 }} |
||||
/> |
||||
<View style={tw("flex flex-1 mr-3")}> |
||||
<Text |
||||
style={{ |
||||
fontFamily: "bold", |
||||
fontSize: mobile ? fontSize.lg : fontSize.xl3, |
||||
color: info.title.color, |
||||
textAlign: ios ? "right" : "auto", |
||||
}} |
||||
> |
||||
{info.title.text} |
||||
</Text> |
||||
<Text |
||||
style={[ |
||||
tw("mt-1"), |
||||
{ |
||||
fontFamily: "light", |
||||
fontSize: mobile ? fontSize.tiny : fontSize.lg, |
||||
color: info.description.color, |
||||
textAlign: ios ? "right" : "auto", |
||||
}, |
||||
]} |
||||
> |
||||
{info.description.text} |
||||
</Text> |
||||
<Text |
||||
style={[ |
||||
tw("self-start mt-2.5"), |
||||
{ |
||||
fontFamily: "demi", |
||||
fontSize: mobile ? fontSize.sm : fontSize.lg, |
||||
color: info?.link?.color, |
||||
}, |
||||
]} |
||||
> |
||||
{info?.link?.title} |
||||
</Text> |
||||
</View> |
||||
</TouchableOpacity> |
||||
<RBSheet |
||||
ref={refRBSheet} |
||||
closeOnDragDown={true} |
||||
dragFromTopOnly={true} |
||||
closeOnPressMask={true} |
||||
height={height / 4 * 3} |
||||
customStyles={{ |
||||
wrapper: { |
||||
backgroundColor: "#00000077", |
||||
}, |
||||
container: { |
||||
padding: 0, |
||||
borderTopLeftRadius: 30, |
||||
borderTopRightRadius: 30, |
||||
}, |
||||
draggableIcon: { |
||||
backgroundColor: "#000", |
||||
}, |
||||
}} |
||||
> |
||||
<Ticket /> |
||||
</RBSheet> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
mobile: state.publicApi.mobile, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(Box); |
||||
@ -0,0 +1,89 @@ |
||||
import { |
||||
View, |
||||
Text, |
||||
Image, |
||||
TouchableOpacity, |
||||
Platform, |
||||
Dimensions, |
||||
} from "react-native"; |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { useNavigation } from "@react-navigation/native"; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
|
||||
const ios = Platform.OS === "ios"; |
||||
const { height, width } = Dimensions.get("window"); |
||||
|
||||
const Box = ({ info, mobile }) => { |
||||
const navigation = useNavigation(); |
||||
const refRBSheet = React.useRef(); |
||||
|
||||
return ( |
||||
<TouchableOpacity |
||||
style={[ |
||||
tw( |
||||
`flex flex-row-reverse rounded-md mt-4 ${ |
||||
mobile ? "py-3 px-3" : "py-5 px-5" |
||||
}` |
||||
), |
||||
{ |
||||
backgroundColor: info.bg, |
||||
borderColor: info.borderColor, |
||||
borderWidth: 1, |
||||
}, |
||||
]} |
||||
onPress={() => navigation.push("Tickets")} |
||||
> |
||||
<Image |
||||
source={info.icon} |
||||
style={{ width: mobile ? 40 : 55, height: mobile ? 40 : 55 }} |
||||
/> |
||||
<View style={tw("flex flex-1 mr-3")}> |
||||
<Text |
||||
style={{ |
||||
fontFamily: "bold", |
||||
fontSize: mobile ? fontSize.lg : fontSize.xl3, |
||||
color: info.title.color, |
||||
textAlign: ios ? "right" : "auto", |
||||
}} |
||||
> |
||||
{info.title.text} |
||||
</Text> |
||||
<Text |
||||
style={[ |
||||
tw("mt-1"), |
||||
{ |
||||
fontFamily: "light", |
||||
fontSize: mobile ? fontSize.tiny : fontSize.lg, |
||||
color: info.description.color, |
||||
textAlign: ios ? "right" : "auto", |
||||
}, |
||||
]} |
||||
> |
||||
{info.description.text} |
||||
</Text> |
||||
<Text |
||||
style={[ |
||||
tw("self-start mt-2.5"), |
||||
{ |
||||
fontFamily: "demi", |
||||
fontSize: mobile ? fontSize.sm : fontSize.lg, |
||||
color: info?.link?.color, |
||||
}, |
||||
]} |
||||
> |
||||
{info?.link?.title} |
||||
</Text> |
||||
</View> |
||||
</TouchableOpacity> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
mobile: state.publicApi.mobile, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(Box); |
||||
Loading…
Reference in new issue