Reza_ashrafi
3 years ago
parent
b8e2ed1a27
commit
bb8cf28c52
14 changed files with 290 additions and 187 deletions
@ -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