diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Button.tsx | 73 | ||||
| -rw-r--r-- | src/components/GradientFill.tsx | 10 | ||||
| -rw-r--r-- | src/components/LinearGradientBackground.tsx | 6 | ||||
| -rw-r--r-- | src/components/StarterPack/QrCode.tsx | 1 |
4 files changed, 56 insertions, 34 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 3329dca05..871c17ed5 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -405,37 +405,47 @@ export const Button = React.forwardRef<View, ButtonProps>( } }, [t, variant, color, size, shape, disabled]) - const {gradientColors, gradientHoverColors, gradientLocations} = - React.useMemo(() => { - const colors: string[] = [] - const hoverColors: string[] = [] - const locations: number[] = [] - const gradient = { - primary: tokens.gradients.sky, - secondary: tokens.gradients.sky, - secondary_inverted: tokens.gradients.sky, - negative: tokens.gradients.sky, - gradient_primary: tokens.gradients.primary, - gradient_sky: tokens.gradients.sky, - gradient_midnight: tokens.gradients.midnight, - gradient_sunrise: tokens.gradients.sunrise, - gradient_sunset: tokens.gradients.sunset, - gradient_nordic: tokens.gradients.nordic, - gradient_bonfire: tokens.gradients.bonfire, - }[color || 'primary'] - - if (variant === 'gradient') { - colors.push(...gradient.values.map(([_, color]) => color)) - hoverColors.push(...gradient.values.map(_ => gradient.hover_value)) - locations.push(...gradient.values.map(([location, _]) => location)) + const gradientValues = React.useMemo(() => { + const gradient = { + primary: tokens.gradients.sky, + secondary: tokens.gradients.sky, + secondary_inverted: tokens.gradients.sky, + negative: tokens.gradients.sky, + gradient_primary: tokens.gradients.primary, + gradient_sky: tokens.gradients.sky, + gradient_midnight: tokens.gradients.midnight, + gradient_sunrise: tokens.gradients.sunrise, + gradient_sunset: tokens.gradients.sunset, + gradient_nordic: tokens.gradients.nordic, + gradient_bonfire: tokens.gradients.bonfire, + }[color || 'primary'] + + if (variant === 'gradient') { + if (gradient.values.length < 2) { + throw new Error( + 'Gradient buttons must have at least two colors in the gradient', + ) } return { - gradientColors: colors, - gradientHoverColors: hoverColors, - gradientLocations: locations, + colors: gradient.values.map(([_, color]) => color) as [ + string, + string, + ...string[], + ], + hoverColors: gradient.values.map(_ => gradient.hover_value) as [ + string, + string, + ...string[], + ], + locations: gradient.values.map(([location, _]) => location) as [ + number, + number, + ...number[], + ], } - }, [variant, color]) + } + }, [variant, color]) const context = React.useMemo<ButtonContext>( () => ({ @@ -458,6 +468,7 @@ export const Button = React.forwardRef<View, ButtonProps>( // @ts-ignore - this will always be a pressable ref={ref} aria-label={label} + aria-pressed={state.pressed} accessibilityLabel={label} disabled={disabled || false} accessibilityState={{ @@ -478,7 +489,7 @@ export const Button = React.forwardRef<View, ButtonProps>( onHoverOut={onHoverOut} onFocus={onFocus} onBlur={onBlur}> - {variant === 'gradient' && ( + {variant === 'gradient' && gradientValues && ( <View style={[ a.absolute, @@ -489,10 +500,10 @@ export const Button = React.forwardRef<View, ButtonProps>( <LinearGradient colors={ state.hovered || state.pressed - ? gradientHoverColors - : gradientColors + ? gradientValues.hoverColors + : gradientValues.colors } - locations={gradientLocations} + locations={gradientValues.locations} start={{x: 0, y: 0}} end={{x: 1, y: 1}} style={[a.absolute, a.inset_0]} diff --git a/src/components/GradientFill.tsx b/src/components/GradientFill.tsx index fa39577d4..3dff404d7 100644 --- a/src/components/GradientFill.tsx +++ b/src/components/GradientFill.tsx @@ -14,10 +14,16 @@ export function GradientFill({ | typeof tokens.gradients.summer | typeof tokens.gradients.nordic }) { + if (gradient.values.length < 2) { + throw new Error('Gradient must have at least 2 colors') + } + return ( <LinearGradient - colors={gradient.values.map(c => c[1])} - locations={gradient.values.map(c => c[0])} + colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]} + locations={ + gradient.values.map(c => c[0]) as [number, number, ...number[]] + } start={{x: 0, y: 0}} end={{x: 1, y: 1}} style={[a.absolute, a.inset_0]} diff --git a/src/components/LinearGradientBackground.tsx b/src/components/LinearGradientBackground.tsx index f516b19f5..724df43f3 100644 --- a/src/components/LinearGradientBackground.tsx +++ b/src/components/LinearGradientBackground.tsx @@ -13,7 +13,11 @@ export function LinearGradientBackground({ }) { const gradient = gradients.sky.values.map(([_, color]) => { return color - }) + }) as [string, string, ...string[]] + + if (gradient.length < 2) { + throw new Error('Gradient must have at least 2 colors') + } return ( <LinearGradient colors={gradient} style={style}> diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx index c6408109b..515a9059a 100644 --- a/src/components/StarterPack/QrCode.tsx +++ b/src/components/StarterPack/QrCode.tsx @@ -1,5 +1,6 @@ import React from 'react' import {View} from 'react-native' +// @ts-expect-error missing types import QRCode from 'react-native-qrcode-styled' import type ViewShot from 'react-native-view-shot' import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api' |