Rajarshee Chatterjee
73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
|
|
|
export const ToggleButton = ({ icon, selected, theme, color, onPress }) => (
|
|
<View
|
|
style={{
|
|
borderRadius: 8,
|
|
overflow: "hidden",
|
|
marginHorizontal: 4,
|
|
}}
|
|
>
|
|
<Pressable
|
|
android_ripple={{ color: theme.rippleColor }}
|
|
style={{
|
|
padding: 10,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
onPress={onPress}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name={icon}
|
|
color={
|
|
selected
|
|
? theme.colorAccent
|
|
: color
|
|
? color
|
|
: theme.textColorPrimary
|
|
}
|
|
size={24}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
|
|
export const ToggleColorButton = ({
|
|
selected,
|
|
backgroundColor,
|
|
textColor,
|
|
onPress,
|
|
}) => (
|
|
<View
|
|
style={{
|
|
borderRadius: 50,
|
|
overflow: "hidden",
|
|
marginHorizontal: 6,
|
|
height: 44,
|
|
width: 44,
|
|
}}
|
|
>
|
|
<Pressable
|
|
android_ripple={{ color: textColor }}
|
|
style={{
|
|
flex: 1,
|
|
padding: 10,
|
|
backgroundColor: backgroundColor,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
onPress={onPress}
|
|
>
|
|
{selected && (
|
|
<MaterialCommunityIcons
|
|
name="check"
|
|
color={textColor}
|
|
size={24}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
);
|