Rajarshee Chatterjee
65 lines
1.4 KiB
JavaScript
65 lines
1.4 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>
|
|
);
|