Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫
Something went wrong. Try again.
3.2 kB · 152 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153import {useMemo} from 'react'import { type AccessibilityProps, type TextStyle, View, type ViewStyle,} from 'react-native'
import {atoms as a, native, useTheme} from '#/alf'import * as Toggle from '#/components/forms/Toggle'import {Text} from '#/components/Typography'
type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> & AccessibilityProps & { children: React.ReactElement<any> testID?: string }
export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & { multiple?: boolean}
/** * @deprecated - use SegmentedControl */export function Group({children, multiple, ...props}: GroupProps) { const t = useTheme() return ( <Toggle.Group type={multiple ? 'checkbox' : 'radio'} {...props}> <View style={[ a.w_full, a.flex_row, a.rounded_sm, a.overflow_hidden, t.atoms.border_contrast_low, {borderWidth: 1}, ]}> {children} </View> </Toggle.Group> )}
/** * @deprecated - use SegmentedControl */export function Button({children, ...props}: ItemProps) { return ( <Toggle.Item {...props} style={[a.flex_grow, a.flex_1]}> <ButtonInner>{children}</ButtonInner> </Toggle.Item> )}
function ButtonInner({children}: React.PropsWithChildren<{}>) { const t = useTheme() const state = Toggle.useItemContext()
const {baseStyles, hoverStyles, activeStyles} = useMemo(() => { const base: ViewStyle[] = [] const hover: ViewStyle[] = [] const active: ViewStyle[] = []
hover.push( t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25, )
if (state.selected) { active.push({ backgroundColor: t.palette.contrast_800, }) hover.push({ backgroundColor: t.palette.contrast_800, })
if (state.disabled) { active.push({ backgroundColor: t.palette.contrast_500, }) } }
if (state.disabled) { base.push({ backgroundColor: t.palette.contrast_100, }) }
return { baseStyles: base, hoverStyles: hover, activeStyles: active, } }, [t, state])
return ( <View style={[ { borderLeftWidth: 1, marginLeft: -1, }, a.flex_grow, a.py_md, native({ paddingBottom: 10, }), a.px_md, t.atoms.bg, t.atoms.border_contrast_low, baseStyles, activeStyles, (state.hovered || state.pressed) && hoverStyles, ]}> {children} </View> )}
/** * @deprecated - use SegmentedControl */export function ButtonText({children}: {children: React.ReactNode}) { const t = useTheme() const state = Toggle.useItemContext()
const textStyles = useMemo(() => { const text: TextStyle[] = [] if (state.selected) { text.push(t.atoms.text_inverted) } if (state.disabled) { text.push({ opacity: 0.5, }) } return text }, [t, state])
return ( <Text style={[ a.text_center, a.font_semi_bold, t.atoms.text_contrast_medium, textStyles, ]}> {children} </Text> )}