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