Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {choose} from '#/lib/functions'import {colors} from '#/lib/styles'import {useTheme} from '#/lib/ThemeContext'import {TypographyVariant} from '#/lib/ThemeContext'import {Text} from '../text/Text'import {Button, ButtonType} from './Button'
export function ToggleButton({ testID, type = 'default-light', label, isSelected, style, labelType, onPress,}: { testID?: string type?: ButtonType label: string isSelected: boolean style?: StyleProp<ViewStyle> labelType?: TypographyVariant onPress?: () => void}) { const theme = useTheme() const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, { primary: { borderColor: theme.palette.primary.text, }, secondary: { borderColor: theme.palette.secondary.text, }, inverted: { borderColor: theme.palette.inverted.text, }, 'primary-outline': { borderColor: theme.palette.primary.border, }, 'secondary-outline': { borderColor: theme.palette.secondary.border, }, 'primary-light': { borderColor: theme.palette.primary.border, }, 'secondary-light': { borderColor: theme.palette.secondary.border, }, default: { borderColor: theme.palette.default.border, }, 'default-light': { borderColor: theme.palette.default.border, }, }) const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>( type, { primary: { backgroundColor: theme.palette.primary.text, opacity: isSelected ? 1 : 0.33, }, secondary: { backgroundColor: theme.palette.secondary.text, opacity: isSelected ? 1 : 0.33, }, inverted: { backgroundColor: theme.palette.inverted.text, opacity: isSelected ? 1 : 0.33, }, 'primary-outline': { backgroundColor: theme.palette.primary.background, opacity: isSelected ? 1 : 0.5, }, 'secondary-outline': { backgroundColor: theme.palette.secondary.background, opacity: isSelected ? 1 : 0.5, }, 'primary-light': { backgroundColor: theme.palette.primary.background, opacity: isSelected ? 1 : 0.5, }, 'secondary-light': { backgroundColor: theme.palette.secondary.background, opacity: isSelected ? 1 : 0.5, }, default: { backgroundColor: isSelected ? theme.palette.primary.background : colors.gray3, }, 'default-light': { backgroundColor: isSelected ? theme.palette.primary.background : colors.gray3, }, }, ) const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, { primary: { color: theme.palette.primary.text, fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, }, secondary: { color: theme.palette.secondary.text, fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, }, inverted: { color: theme.palette.inverted.text, fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined, }, 'primary-outline': { color: theme.palette.primary.textInverted, fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, }, 'secondary-outline': { color: theme.palette.secondary.textInverted, fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, }, 'primary-light': { color: theme.palette.primary.textInverted, fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, }, 'secondary-light': { color: theme.palette.secondary.textInverted, fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, }, default: { color: theme.palette.default.text, fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, }, 'default-light': { color: theme.palette.default.text, fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, }, }) return ( <Button testID={testID} type={type} onPress={onPress} style={style}> <View style={styles.outer}> <View style={[circleStyle, styles.circle]}> <View style={[ circleFillStyle, styles.circleFill, isSelected ? styles.circleFillSelected : undefined, ]} /> </View> {label === '' ? null : ( <Text type={labelType || 'button'} style={[labelStyle, styles.label]}> {label} </Text> )} </View> </Button> )}
const styles = StyleSheet.create({ outer: { flexDirection: 'row', alignItems: 'center', gap: 10, }, circle: { width: 42, height: 26, borderRadius: 15, padding: 3, borderWidth: 2, }, circleFill: { width: 16, height: 16, borderRadius: 10, }, circleFillSelected: { marginLeft: 16, }, label: { flex: 1, },})