You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.8 KiB
78 lines
1.8 KiB
import React, { useEffect, useState } from "react";
|
|
import { StyleSheet, View, Text, TouchableOpacity, TouchableHighlight } 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: 125, height: 125}, style]}
|
|
offset={[0, 4]}
|
|
distance={4}
|
|
radius={4}
|
|
startColor="rgba(0, 0, 0, 0.25)"
|
|
paintInside={true}
|
|
>
|
|
<TouchableHighlight 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>
|
|
</TouchableHighlight>
|
|
</Shadow>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
overflow: "hidden",
|
|
borderColor: colors.primary,
|
|
backgroundColor: colors.primary,
|
|
borderWidth: 6,
|
|
borderRadius: 6,
|
|
width: 125,
|
|
height: 125,
|
|
},
|
|
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",
|
|
},
|
|
});
|