Alice
596e744d41
* Fix button widths in the Settings on Web Had to set `box-sizing: content-box` because in certain translations the buttons would become multiline. Fixes #3060. * you know what. whatever. i didn't want to be able to change box-sizing anyways. i'm perfectly happy with this workaround. * ... * flex-grow: 1
76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native'
|
|
import {Text} from '../text/Text'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
|
|
interface SelectableBtnProps {
|
|
testID?: string
|
|
selected: boolean
|
|
label: string
|
|
left?: boolean
|
|
right?: boolean
|
|
onSelect: () => void
|
|
accessibilityHint?: string
|
|
style?: StyleProp<ViewStyle>
|
|
}
|
|
|
|
export function SelectableBtn({
|
|
testID,
|
|
selected,
|
|
label,
|
|
left,
|
|
right,
|
|
onSelect,
|
|
accessibilityHint,
|
|
style,
|
|
}: SelectableBtnProps) {
|
|
const pal = usePalette('default')
|
|
const palPrimary = usePalette('inverted')
|
|
const needsWidthStyles = !style || !('width' in style || 'flex' in style)
|
|
const {isMobile} = useWebMediaQueries()
|
|
return (
|
|
<Pressable
|
|
testID={testID}
|
|
style={[
|
|
styles.btn,
|
|
needsWidthStyles && {
|
|
flex: isMobile ? 1 : undefined,
|
|
width: !isMobile ? 100 : undefined,
|
|
},
|
|
left && styles.btnLeft,
|
|
right && styles.btnRight,
|
|
pal.border,
|
|
selected ? palPrimary.view : pal.view,
|
|
style,
|
|
]}
|
|
onPress={onSelect}
|
|
accessibilityRole="button"
|
|
accessibilityLabel={label}
|
|
accessibilityHint={accessibilityHint}>
|
|
<Text style={selected ? palPrimary.text : pal.text}>{label}</Text>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
btn: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
flexGrow: 1,
|
|
borderWidth: 1,
|
|
borderLeftWidth: 0,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 10,
|
|
},
|
|
btnLeft: {
|
|
borderTopLeftRadius: 8,
|
|
borderBottomLeftRadius: 8,
|
|
borderLeftWidth: 1,
|
|
},
|
|
btnRight: {
|
|
borderTopRightRadius: 8,
|
|
borderBottomRightRadius: 8,
|
|
},
|
|
})
|