Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.7 kB · 67 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import { Button, Text, useTheme, View, ViewProps, zero,} from "@streamplace/components";
const { gap, pt, w, bg, r, spacing, layout, colors } = zero;
export default function ButtonSelector({ text, values, selectedValue, setSelectedValue, disabledValues, style, ...props}: { text?: string; values: { label: string; value: string }[]; selectedValue: string; setSelectedValue: (value: any) => void; disabledValues?: string[];} & ViewProps) { let theme = useTheme(); return ( <View align="start" style={[gap.all[2], style as any]} {...props}> {text && ( <Text variant="body1" weight="semibold"> {text} </Text> )} <View direction="row" align="center" justify="around" style={[gap.all[1], w.percent[100], r.full]} > {values.map(({ label, value }) => { const isSelected = selectedValue === value; const isDisabled = disabledValues?.includes(value);
return ( <Button key={value} onPress={() => setSelectedValue(value)} variant={isSelected ? "outline" : "ghost"} size="pill" disabled={isDisabled} style={[ { flex: 1, maxHeight: 20 }, isSelected ? { backgroundColor: theme.theme.colors.primary } : { backgroundColor: theme.theme.colors.secondary }, isDisabled && { opacity: 0.5 }, ]} > {label} </Button> ); })} </View> </View> );}