acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Button context, icons

Browse Source
This commit is contained in:
Eric Bailey
2024-01-18 15:12:42 -06:00
parent 1514ffd6e9
commit d6925a00d7
4 changed files with 172 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+91 -86
View File
@@ -6,10 +6,14 @@ import {
TextProps,
ViewStyle,
AccessibilityProps,
View,
TextStyle,
StyleSheet,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {useTheme, atoms, tokens, web, native} from '#/alf'
import {useTheme, atoms as a, tokens, web, native} from '#/alf'
import {Props as SVGIconProps} from '#/components/icons/common'
export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
export type ButtonColor =
@@ -38,26 +42,33 @@ export type VariantProps = {
size?: ButtonSize
}
export type ButtonProps = Pick<PressableProps, 'disabled' | 'onPress'> &
AccessibilityProps &
VariantProps & {
children:
| ((props: {
state: {
pressed: boolean
hovered: boolean
focused: boolean
}
props: VariantProps & {
disabled?: boolean
}
}) => React.ReactNode)
| React.ReactNode
| string
label: string
}
export type ButtonProps = React.PropsWithChildren<
Pick<PressableProps, 'disabled' | 'onPress'> &
AccessibilityProps &
VariantProps & {
label: string
}
>
export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
const Context = React.createContext<
VariantProps & {
hovered: boolean
focused: boolean
pressed: boolean
disabled: boolean
}
>({
hovered: false,
focused: false,
pressed: false,
disabled: false,
})
export function useButtonContext() {
return React.useContext(Context)
}
export function Button({
children,
variant,
@@ -131,21 +142,21 @@ export function Button({
})
}
} else if (variant === 'outline') {
baseStyles.push(atoms.border, t.atoms.bg, {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(atoms.border, {
baseStyles.push(a.border, {
borderColor: tokens.color.blue_500,
})
hoverStyles.push(atoms.border, {
hoverStyles.push(a.border, {
backgroundColor: light
? t.palette.primary_100
: t.palette.primary_900,
})
} else {
baseStyles.push(atoms.border, {
baseStyles.push(a.border, {
borderColor: light ? tokens.color.blue_200 : tokens.color.blue_900,
})
}
@@ -180,17 +191,17 @@ export function Button({
})
}
} else if (variant === 'outline') {
baseStyles.push(atoms.border, t.atoms.bg, {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(atoms.border, {
baseStyles.push(a.border, {
borderColor: light ? tokens.color.gray_500 : tokens.color.gray_500,
})
hoverStyles.push(atoms.border, t.atoms.bg_contrast_50)
hoverStyles.push(a.border, t.atoms.bg_contrast_50)
} else {
baseStyles.push(atoms.border, {
baseStyles.push(a.border, {
borderColor: light ? tokens.color.gray_200 : tokens.color.gray_800,
})
}
@@ -219,19 +230,19 @@ export function Button({
})
}
} else if (variant === 'outline') {
baseStyles.push(atoms.border, t.atoms.bg, {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(atoms.border, {
baseStyles.push(a.border, {
borderColor: t.palette.negative_600,
})
hoverStyles.push(atoms.border, {
hoverStyles.push(a.border, {
backgroundColor: light ? t.palette.negative_50 : '#2D0614', // darker red
})
} else {
baseStyles.push(atoms.border, {
baseStyles.push(a.border, {
borderColor: light
? t.palette.negative_200
: t.palette.negative_900,
@@ -248,19 +259,9 @@ export function Button({
}
if (size === 'large') {
baseStyles.push(
{paddingVertical: 15},
atoms.px_2xl,
atoms.rounded_sm,
atoms.gap_sm,
)
baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_sm)
} else if (size === 'small') {
baseStyles.push(
{paddingVertical: 9},
atoms.px_md,
atoms.rounded_sm,
atoms.gap_xs,
)
baseStyles.push({paddingVertical: 9}, a.px_md, a.rounded_sm, a.gap_sm)
}
return {
@@ -305,15 +306,13 @@ export function Button({
}
}, [variant, color])
const childProps = React.useMemo(
const context = React.useMemo(
() => ({
state,
props: {
variant,
color,
size,
disabled: disabled || false,
},
...state,
variant,
color,
size,
disabled: disabled || false,
}),
[state, variant, color, size, disabled],
)
@@ -331,9 +330,9 @@ export function Button({
disabled: disabled || false,
}}
style={[
atoms.flex_row,
atoms.align_center,
atoms.overflow_hidden,
a.flex_row,
a.align_center,
a.overflow_hidden,
...baseStyles,
...(state.hovered || state.pressed ? hoverStyles : []),
...(state.focused ? focusStyles : []),
@@ -354,39 +353,25 @@ export function Button({
locations={gradientLocations}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[atoms.absolute, atoms.inset_0]}
style={[a.absolute, a.inset_0]}
/>
)}
{typeof children === 'string' ? (
<ButtonText
variant={variant}
color={color}
size={size}
disabled={disabled || false}>
{children}
</ButtonText>
) : typeof children === 'function' ? (
children(childProps)
) : (
children
)}
<Context.Provider value={context}>
{typeof children === 'string' ? (
<ButtonText>{children}</ButtonText>
) : (
children
)}
</Context.Provider>
</Pressable>
)
}
export function ButtonText({
children,
style,
variant,
color,
size,
disabled,
...rest
}: ButtonTextProps) {
export function useSharedButtonTextStyles() {
const t = useTheme()
const textStyles = React.useMemo(() => {
const baseStyles = []
const {color, variant, disabled, size} = useButtonContext()
return React.useMemo(() => {
const baseStyles: TextStyle[] = []
const light = t.name === 'light'
if (color === 'primary') {
@@ -473,26 +458,46 @@ export function ButtonText({
if (size === 'large') {
baseStyles.push(
atoms.text_md,
a.text_md,
web({paddingBottom: 1}),
native({marginTop: 2}),
)
} else {
baseStyles.push(
atoms.text_md,
a.text_md,
web({paddingBottom: 1}),
native({marginTop: 2}),
)
}
return baseStyles
return StyleSheet.flatten(baseStyles)
}, [t, variant, color, size, disabled])
}
export function ButtonText({children, style, ...rest}: ButtonTextProps) {
const textStyles = useSharedButtonTextStyles()
return (
<Text
{...rest}
style={[atoms.font_bold, atoms.text_center, ...textStyles, style]}>
<Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}>
{children}
</Text>
)
}
export function ButtonIcon({
icon: Comp,
}: {
icon: React.ComponentType<SVGIconProps>
}) {
const {size} = useButtonContext()
const textStyles = useSharedButtonTextStyles()
return (
<View style={[a.z_20]}>
<Comp
size={size === 'large' ? 'md' : 'sm'}
style={[{color: textStyles.color, pointerEvents: 'none'}]}
/>
</View>
)
}
src/components/Link.tsx
+41 -24
View File
@@ -14,8 +14,8 @@ import {
import {sanitizeUrl} from '@braintree/sanitize-url'
import {isWeb} from '#/platform/detection'
import {useTheme, web} from '#/alf'
import {Button, ButtonProps} from '#/components/Button'
import {useTheme, web, flatten} from '#/alf'
import {Button, ButtonProps, useButtonContext} from '#/components/Button'
import {AllNavigatorParams, NavigationProp} from '#/lib/routes/types'
import {
convertBskyAppUrlIfNeeded,
@@ -25,7 +25,10 @@ import {
import {useModalControls} from '#/state/modals'
import {router} from '#/routes'
export type LinkProps = Omit<ButtonProps, 'style' | 'onPress' | 'disabled'> & {
export type LinkProps = Omit<
ButtonProps,
'style' | 'onPress' | 'disabled' | 'label'
> & {
/**
* `TextStyle` to apply to the anchor element itself. Does not apply to any children.
*/
@@ -39,6 +42,7 @@ export type LinkProps = Omit<ButtonProps, 'style' | 'onPress' | 'disabled'> & {
* works for Links with children that are strings i.e. text links.
*/
warnOnMismatchingTextChild?: boolean
label?: ButtonProps['label']
} & Pick<Parameters<typeof useLinkProps<AllNavigatorParams>>[0], 'to'>
/**
@@ -52,12 +56,11 @@ export type LinkProps = Omit<ButtonProps, 'style' | 'onPress' | 'disabled'> & {
export function Link({
children,
to,
style,
action = 'push',
warnOnMismatchingTextChild,
style,
...rest
}: LinkProps) {
const t = useTheme()
const navigation = useNavigation<NavigationProp>()
const {href} = useLinkProps<AllNavigatorParams>({
to:
@@ -67,12 +70,12 @@ export function Link({
const {openModal, closeModal} = useModalControls()
const onPress = React.useCallback(
(e: GestureResponderEvent) => {
const label = typeof children === 'string' ? children : ''
const stringChildren = typeof children === 'string' ? children : ''
const requiresWarning = Boolean(
warnOnMismatchingTextChild &&
label &&
stringChildren &&
isExternal &&
linkRequiresWarning(href, label),
linkRequiresWarning(href, stringChildren),
)
if (requiresWarning) {
@@ -80,7 +83,7 @@ export function Link({
openModal({
name: 'link-warning',
text: label,
text: stringChildren,
href: href,
})
} else {
@@ -139,6 +142,7 @@ export function Link({
return (
<Button
label={href}
{...rest}
role="link"
accessibilityRole="link"
@@ -154,21 +158,34 @@ export function Link({
noUnderline: '1',
},
})}>
{typeof children === 'string'
? ({state}) => (
<Text
style={[
style,
{color: t.palette.primary_500},
state.hovered && {
textDecorationLine: 'underline',
textDecorationColor: t.palette.primary_500,
},
]}>
{children as string}
</Text>
)
: children}
{typeof children === 'string' ? (
<LinkText style={style}>{children}</LinkText>
) : (
children
)}
</Button>
)
}
function LinkText({
children,
style,
}: React.PropsWithChildren<{
style?: StyleProp<TextStyle>
}>) {
const t = useTheme()
const {hovered} = useButtonContext()
return (
<Text
style={[
{color: t.palette.primary_500},
hovered && {
textDecorationLine: 'underline',
textDecorationColor: t.palette.primary_500,
},
flatten(style),
]}>
{children as string}
</Text>
)
}
src/view/screens/Storybook/Buttons.tsx
+36 -1
View File
@@ -2,8 +2,16 @@ import React from 'react'
import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {Button, ButtonVariant, ButtonColor} from '#/components/Button'
import {
Button,
ButtonVariant,
ButtonColor,
ButtonIcon,
ButtonText,
} from '#/components/Button'
import {H1} from '#/components/Typography'
import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
export function Buttons() {
return (
@@ -83,6 +91,33 @@ export function Buttons() {
)}
</View>
</View>
<Button
variant="gradient"
color="gradient_sky"
size="large"
label="Link out">
<ButtonText>Link out</ButtonText>
<ButtonIcon icon={ArrowTopRight} />
</Button>
<Button
variant="gradient"
color="gradient_sky"
size="small"
label="Link out">
<ButtonText>Link out</ButtonText>
<ButtonIcon icon={ArrowTopRight} />
</Button>
<Button
variant="gradient"
color="gradient_sky"
size="small"
label="Link out">
<ButtonIcon icon={Globe} />
<ButtonText>See the world</ButtonText>
</Button>
</View>
</View>
)
src/view/screens/Storybook/Links.tsx
+4 -10
View File
@@ -13,27 +13,21 @@ export function Links() {
<View style={[a.gap_md, a.align_start]}>
<Link
label="Click here"
to="https://blueskyweb.xyz"
warnOnMismatchingTextChild
style={[a.text_md]}>
External
</Link>
<Link
label="Click here"
to="https://blueskyweb.xyz"
style={[a.text_md]}>
<Link to="https://blueskyweb.xyz" style={[a.text_md]}>
<H3>External with custom children</H3>
</Link>
<Link
label="Click here"
to="https://blueskyweb.xyz"
warnOnMismatchingTextChild
style={[a.text_md]}>
style={[a.text_lg]}>
https://blueskyweb.xyz
</Link>
<Link
label="Click here"
to="https://bsky.app/profile/bsky.app"
warnOnMismatchingTextChild
style={[a.text_md]}>
@@ -41,12 +35,12 @@ export function Links() {
</Link>
<Link
label="Click here"
variant="solid"
color="primary"
size="large"
label="View @bsky.app's profile"
to="https://bsky.app/profile/bsky.app">
{({props}) => <ButtonText {...props}>Link as a button</ButtonText>}
<ButtonText>Link as a button</ButtonText>
</Link>
</View>
</View>