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

Merge pill components

Browse Source
This commit is contained in:
Eric Bailey
2026-07-09 14:09:30 -05:00
parent 39147619be
commit 98f47b634c
1 changed files with 55 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Pills.tsx
+55 -104
View File
@@ -66,83 +66,24 @@ export function Label({
const isLabeler = Boolean(desc.sourceType && desc.sourceDid)
const isBlueskyLabel =
desc.sourceType === 'labeler' && desc.sourceDid === BSKY_LABELER_DID
const {outer, avi, text} = useMemo(() => {
switch (size) {
case 'lg': {
return {
outer: [
t.atoms.bg_contrast_25,
{
gap: 5,
paddingHorizontal: 5,
paddingVertical: 5,
},
],
avi: 16,
text: [a.text_sm],
}
}
case 'sm':
default: {
return {
outer: [
!noBg && t.atoms.bg_contrast_25,
{
gap: 3,
paddingHorizontal: 3,
paddingVertical: 3,
},
],
avi: 12,
text: [a.text_xs],
}
}
}
}, [t, size, noBg])
const avi = size === 'lg' ? 16 : 12
return (
<>
<Button
disabled={disableDetailsDialog}
<LabelBase
label={desc.name}
onPress={e => {
e.preventDefault()
e.stopPropagation()
control.open()
}}>
{({hovered, pressed}) => (
<View
style={[
a.flex_row,
a.align_center,
a.rounded_full,
outer,
(hovered || pressed) && t.atoms.bg_contrast_50,
]}>
{isBlueskyLabel || !isLabeler ? (
<desc.icon
width={avi}
fill={t.atoms.text_contrast_medium.color}
/>
) : (
<UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
)}
<Text
emoji
style={[
text,
a.font_semi_bold,
a.leading_tight,
t.atoms.text_contrast_medium,
{paddingRight: 3},
]}>
{desc.name}
</Text>
</View>
)}
</Button>
size={size}
noBg={noBg}
disabled={disableDetailsDialog}
onPress={() => control.open()}
icon={
isBlueskyLabel || !isLabeler ? (
<desc.icon width={avi} fill={t.atoms.text_contrast_medium.color} />
) : (
<UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
)
}
/>
{!disableDetailsDialog && (
<ModerationDetailsDialog control={control} modcause={cause} />
@@ -154,10 +95,19 @@ export function Label({
export type LabelBaseProps = {
label: string
onPress: () => void
disabled?: boolean
noBg?: boolean
icon?: React.ReactNode
} & CommonProps
export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
export function LabelBase({
label,
onPress,
disabled,
size = 'sm',
noBg,
icon,
}: LabelBaseProps) {
const t = useTheme()
const {outer, text} = useMemo(() => {
@@ -193,38 +143,39 @@ export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
}, [t, size, noBg])
return (
<>
<Button
label={label}
onPress={e => {
e.preventDefault()
e.stopPropagation()
onPress()
}}>
{({hovered, pressed}) => (
<View
<Button
disabled={disabled}
label={label}
onPress={e => {
e.preventDefault()
e.stopPropagation()
onPress()
}}>
{({hovered, pressed}) => (
<View
style={[
a.flex_row,
a.align_center,
a.rounded_full,
outer,
(hovered || pressed) && t.atoms.bg_contrast_50,
]}>
{icon}
<Text
emoji
style={[
a.flex_row,
a.align_center,
a.rounded_full,
outer,
(hovered || pressed) && t.atoms.bg_contrast_50,
text,
a.font_semi_bold,
a.leading_tight,
t.atoms.text_contrast_medium,
{paddingRight: 3},
]}>
<Text
emoji
style={[
text,
a.font_semi_bold,
a.leading_tight,
t.atoms.text_contrast_medium,
{paddingRight: 3},
]}>
{label}
</Text>
</View>
)}
</Button>
</>
{label}
</Text>
</View>
)}
</Button>
)
}