diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/lib/storage.ts | 52 | ||||
-rw-r--r-- | src/lib/type-assertions.ts | 3 | ||||
-rw-r--r-- | src/screens/StarterPack/Wizard/StepFinished.tsx | 0 | ||||
-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 | ||||
-rw-r--r-- | src/view/com/util/layouts/Breakpoints.tsx | 11 | ||||
-rw-r--r-- | src/view/com/util/layouts/Breakpoints.web.tsx | 20 | ||||
-rw-r--r-- | src/view/com/util/layouts/withBreakpoints.tsx | 21 | ||||
-rw-r--r-- | src/view/screens/Debug.tsx | 30 |
10 files changed, 1 insertions, 421 deletions
diff --git a/src/lib/storage.ts b/src/lib/storage.ts deleted file mode 100644 index dc5fb620f..000000000 --- a/src/lib/storage.ts +++ /dev/null @@ -1,52 +0,0 @@ -import AsyncStorage from '@react-native-async-storage/async-storage' - -export async function loadString(key: string): Promise<string | null> { - try { - return await AsyncStorage.getItem(key) - } catch { - // not sure why this would fail... even reading the RN docs I'm unclear - return null - } -} - -export async function saveString(key: string, value: string): Promise<boolean> { - try { - await AsyncStorage.setItem(key, value) - return true - } catch { - return false - } -} - -export async function load(key: string): Promise<any | null> { - try { - const str = await AsyncStorage.getItem(key) - if (typeof str !== 'string') { - return null - } - return JSON.parse(str) - } catch { - return null - } -} - -export async function save(key: string, value: any): Promise<boolean> { - try { - await AsyncStorage.setItem(key, JSON.stringify(value)) - return true - } catch { - return false - } -} - -export async function remove(key: string): Promise<void> { - try { - await AsyncStorage.removeItem(key) - } catch {} -} - -export async function clear(): Promise<void> { - try { - await AsyncStorage.clear() - } catch {} -} diff --git a/src/lib/type-assertions.ts b/src/lib/type-assertions.ts deleted file mode 100644 index 6b5db5124..000000000 --- a/src/lib/type-assertions.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const getKeys = Object.keys as <T extends object>( - obj: T, -) => Array<keyof T> diff --git a/src/screens/StarterPack/Wizard/StepFinished.tsx b/src/screens/StarterPack/Wizard/StepFinished.tsx deleted file mode 100644 index e69de29bb..000000000 --- a/src/screens/StarterPack/Wizard/StepFinished.tsx +++ /dev/null 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, - }, -}) diff --git a/src/view/com/util/layouts/Breakpoints.tsx b/src/view/com/util/layouts/Breakpoints.tsx deleted file mode 100644 index 45dc23615..000000000 --- a/src/view/com/util/layouts/Breakpoints.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -export const Desktop = ({}: React.PropsWithChildren<{}>) => null -export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null -export const Tablet = ({}: React.PropsWithChildren<{}>) => null -export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => ( - <>{children}</> -) -export const Mobile = ({children}: React.PropsWithChildren<{}>) => ( - <>{children}</> -) diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx deleted file mode 100644 index 5106e3e1f..000000000 --- a/src/view/com/util/layouts/Breakpoints.web.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import MediaQuery from 'react-responsive' - -export const Desktop = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery minWidth={1300}>{children}</MediaQuery> -) -export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery minWidth={800}>{children}</MediaQuery> -) -export const Tablet = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery minWidth={800} maxWidth={1300 - 1}> - {children} - </MediaQuery> -) -export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery maxWidth={1300 - 1}>{children}</MediaQuery> -) -export const Mobile = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery maxWidth={800 - 1}>{children}</MediaQuery> -) diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx deleted file mode 100644 index 71971c604..000000000 --- a/src/view/com/util/layouts/withBreakpoints.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {isNative} from '#/platform/detection' - -export const withBreakpoints = <P extends object>( - Mobile: React.ComponentType<P>, - Tablet: React.ComponentType<P>, - Desktop: React.ComponentType<P>, -): React.FC<P> => - function WithBreakpoints(props: P) { - const {isMobile, isTabletOrMobile} = useWebMediaQueries() - - if (isMobile || isNative) { - return <Mobile {...props} /> - } - if (isTabletOrMobile) { - return <Tablet {...props} /> - } - return <Desktop {...props} /> - } diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index 60dc089dd..1a236f8bc 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -10,12 +10,11 @@ import {PaletteColorName, ThemeProvider} from '#/lib/ThemeContext' import {EmptyState} from '#/view/com/util/EmptyState' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' -import {Button, ButtonType} from '#/view/com/util/forms/Button' +import {Button} from '#/view/com/util/forms/Button' import { DropdownButton, DropdownItem, } from '#/view/com/util/forms/DropdownButton' -import {RadioGroup} from '#/view/com/util/forms/RadioGroup' import {ToggleButton} from '#/view/com/util/forms/ToggleButton' import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' import {Text} from '#/view/com/util/text/Text' @@ -139,8 +138,6 @@ function ControlsView() { <DropdownButtonsView /> <Heading label="Toggle Buttons" /> <ToggleButtonsView /> - <Heading label="Radio Buttons" /> - <RadioButtonsView /> <View style={s.footerSpacer} /> </ScrollView> ) @@ -503,28 +500,3 @@ function ToggleButtonsView() { </View> ) } - -const RADIO_BUTTON_ITEMS = [ - {key: 'default-light', label: 'Default Light'}, - {key: 'primary', label: 'Primary'}, - {key: 'secondary', label: 'Secondary'}, - {key: 'inverted', label: 'Inverted'}, - {key: 'primary-outline', label: 'Primary Outline'}, - {key: 'secondary-outline', label: 'Secondary Outline'}, - {key: 'primary-light', label: 'Primary Light'}, - {key: 'secondary-light', label: 'Secondary Light'}, -] -function RadioButtonsView() { - const defaultPal = usePalette('default') - const [rgType, setRgType] = React.useState<ButtonType>('default-light') - return ( - <View style={[defaultPal.view]}> - <RadioGroup - type={rgType} - items={RADIO_BUTTON_ITEMS} - initialSelection="default-light" - onSelect={v => setRgType(v as ButtonType)} - /> - </View> - ) -} |