forked from cemaden-educacao/WPD-MobileApp
75 lines
1.8 KiB
75 lines
1.8 KiB
import React from "react";
|
|
import { StyleSheet, View, Text, TouchableHighlight, TouchableNativeFeedback } from "react-native";
|
|
import colors from "../config/colors";
|
|
import { scaleDimsFromWidth } from "../config/dimensions";
|
|
import { Shadow } from "react-native-shadow-2";
|
|
|
|
export default function SvgLabeledButton({
|
|
SvgImage,
|
|
label,
|
|
onPress,
|
|
style = {},
|
|
width = 95,
|
|
height = 95,
|
|
isToggle = false,
|
|
normalBgcolor = colors.white,
|
|
toggledBgColor = colors.toggle,
|
|
}) {
|
|
const dims = scaleDimsFromWidth(width, height, 16);
|
|
return (
|
|
<Shadow
|
|
viewStyle={[{ width: 130, height: 130 }, style]}
|
|
offset={[0, 3]}
|
|
distance={3}
|
|
radius={4}
|
|
startColor="rgba(0, 0, 0, 0.15)"
|
|
paintInside={true}
|
|
>
|
|
<TouchableNativeFeedback onPress={onPress}>
|
|
<View style={styles.container}>
|
|
<View
|
|
style={[
|
|
styles.innerContainer,
|
|
{
|
|
backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
|
|
borderColor: isToggle ? toggledBgColor : normalBgcolor,
|
|
},
|
|
]}
|
|
>
|
|
<SvgImage {...dims} />
|
|
|
|
<Text style={styles.label}>{label}</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableNativeFeedback>
|
|
</Shadow>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
overflow: "hidden",
|
|
borderColor: colors.primary,
|
|
backgroundColor: colors.primary,
|
|
borderWidth: 6,
|
|
borderRadius: 6,
|
|
width: 130,
|
|
height: 130,
|
|
},
|
|
innerContainer: {
|
|
overflow: "hidden",
|
|
flex: 1,
|
|
borderWidth: 6,
|
|
borderRadius: 6,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
label: {
|
|
paddingTop: 5,
|
|
textAlign: "center",
|
|
color: colors.primary,
|
|
backgroundColor: "transparent",
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
},
|
|
});
|