diff options
Diffstat (limited to 'src/view/com/util/forms')
-rw-r--r-- | src/view/com/util/forms/RadioButton.tsx | 164 | ||||
-rw-r--r-- | src/view/com/util/forms/RadioGroup.tsx | 46 | ||||
-rw-r--r-- | src/view/com/util/forms/SelectableBtn.tsx | 75 |
3 files changed, 0 insertions, 285 deletions
diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx deleted file mode 100644 index 7cf0f2d73..000000000 --- a/src/view/com/util/forms/RadioButton.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' - -import {choose} from '#/lib/functions' -import {useTheme} from '#/lib/ThemeContext' -import {Text} from '../text/Text' -import {Button, ButtonType} from './Button' - -export function RadioButton({ - testID, - type = 'default-light', - label, - isSelected, - style, - onPress, -}: { - testID?: string - type?: ButtonType - label: string | JSX.Element - isSelected: boolean - style?: StyleProp<ViewStyle> - 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.borderDark, - }, - }) - const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>( - type, - { - primary: { - backgroundColor: theme.palette.primary.text, - }, - secondary: { - backgroundColor: theme.palette.secondary.text, - }, - inverted: { - backgroundColor: theme.palette.inverted.text, - }, - 'primary-outline': { - backgroundColor: theme.palette.primary.background, - }, - 'secondary-outline': { - backgroundColor: theme.palette.secondary.background, - }, - 'primary-light': { - backgroundColor: theme.palette.primary.background, - }, - 'secondary-light': { - backgroundColor: theme.palette.secondary.background, - }, - default: { - backgroundColor: theme.palette.primary.background, - }, - 'default-light': { - backgroundColor: theme.palette.primary.background, - }, - }, - ) - 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]}> - {isSelected ? ( - <View style={[circleFillStyle, styles.circleFill]} /> - ) : undefined} - </View> - {typeof label === 'string' ? ( - <Text type="button" style={[labelStyle, styles.label]}> - {label} - </Text> - ) : ( - <View style={styles.label}>{label}</View> - )} - </View> - </Button> - ) -} - -const styles = StyleSheet.create({ - outer: { - flexDirection: 'row', - alignItems: 'center', - }, - circle: { - width: 26, - height: 26, - borderRadius: 15, - padding: 4, - borderWidth: 1, - marginRight: 10, - }, - circleFill: { - width: 16, - height: 16, - borderRadius: 10, - }, - label: { - flex: 1, - }, -}) diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx deleted file mode 100644 index e2a26dc49..000000000 --- a/src/view/com/util/forms/RadioGroup.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import {useState} from 'react' -import {View} from 'react-native' - -import {s} from '#/lib/styles' -import {ButtonType} from './Button' -import {RadioButton} from './RadioButton' - -export interface RadioGroupItem { - label: string | JSX.Element - key: string -} - -export function RadioGroup({ - testID, - type, - items, - initialSelection = '', - onSelect, -}: { - testID?: string - type?: ButtonType - items: RadioGroupItem[] - initialSelection?: string - onSelect: (key: string) => void -}) { - const [selection, setSelection] = useState<string>(initialSelection) - const onSelectInner = (key: string) => { - setSelection(key) - onSelect(key) - } - return ( - <View> - {items.map((item, i) => ( - <RadioButton - key={item.key} - testID={testID ? `${testID}-${item.key}` : undefined} - style={i !== 0 ? s.mt2 : undefined} - type={type} - label={item.label} - isSelected={item.key === selection} - onPress={() => onSelectInner(item.key)} - /> - ))} - </View> - ) -} diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx deleted file mode 100644 index 76161b433..000000000 --- a/src/view/com/util/forms/SelectableBtn.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {Text} from '../text/Text' - -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, - }, -}) |