123 lines
2.6 KiB
TypeScript
123 lines
2.6 KiB
TypeScript
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { displayTextStyle } from '../styles/typography';
|
|
|
|
type MenuButtonTone = 'default' | 'toolkit';
|
|
|
|
type MenuButtonProps = Readonly<{
|
|
disabled?: boolean;
|
|
icon?: string;
|
|
label: string;
|
|
onPress: () => void;
|
|
testID?: string;
|
|
tone?: MenuButtonTone;
|
|
}>;
|
|
|
|
export function MenuButton({
|
|
disabled = false,
|
|
icon,
|
|
label,
|
|
onPress,
|
|
testID,
|
|
tone = 'default',
|
|
}: MenuButtonProps) {
|
|
const isToolkit = tone === 'toolkit';
|
|
const pressedStyle = isToolkit
|
|
? styles.toolkitButtonPressed
|
|
: styles.buttonPressed;
|
|
|
|
return (
|
|
<Pressable
|
|
accessibilityState={{ disabled }}
|
|
accessibilityRole="button"
|
|
disabled={disabled}
|
|
onPress={onPress}
|
|
style={({ pressed }) => [
|
|
styles.button,
|
|
isToolkit ? styles.toolkitButton : null,
|
|
disabled ? styles.buttonDisabled : null,
|
|
pressed ? pressedStyle : null,
|
|
]}
|
|
testID={testID}>
|
|
<View style={styles.content}>
|
|
{icon == null ? null : (
|
|
<Text
|
|
style={[
|
|
styles.icon,
|
|
isToolkit ? styles.toolkitText : null,
|
|
disabled ? styles.textDisabled : null,
|
|
]}
|
|
testID={testID == null ? undefined : `${testID}-icon`}>
|
|
{icon}
|
|
</Text>
|
|
)}
|
|
<Text
|
|
style={[
|
|
styles.label,
|
|
isToolkit ? styles.toolkitText : null,
|
|
disabled ? styles.textDisabled : null,
|
|
]}>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
alignItems: 'center',
|
|
backgroundColor: '#24272b',
|
|
borderColor: '#4d4432',
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
minHeight: 42,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 9,
|
|
width: '100%',
|
|
},
|
|
buttonPressed: {
|
|
backgroundColor: '#33302a',
|
|
},
|
|
buttonDisabled: {
|
|
backgroundColor: '#1a1c1f',
|
|
borderColor: '#2b2d30',
|
|
opacity: 0.55,
|
|
},
|
|
content: {
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
justifyContent: 'center',
|
|
},
|
|
icon: {
|
|
color: '#d6b25e',
|
|
fontSize: 13,
|
|
fontWeight: '800',
|
|
letterSpacing: 0,
|
|
lineHeight: 16,
|
|
textAlign: 'center',
|
|
},
|
|
label: {
|
|
...displayTextStyle,
|
|
color: '#f6f1e7',
|
|
fontSize: 14,
|
|
letterSpacing: 0,
|
|
textAlign: 'center',
|
|
},
|
|
toolkitButton: {
|
|
backgroundColor: '#3a2918',
|
|
borderColor: '#d6b25e',
|
|
},
|
|
toolkitButtonPressed: {
|
|
backgroundColor: '#4a351f',
|
|
},
|
|
toolkitText: {
|
|
color: '#f5d98d',
|
|
},
|
|
textDisabled: {
|
|
color: '#80796c',
|
|
},
|
|
});
|