Revert change
This commit is contained in:
@@ -6,24 +6,22 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
|||||||
import {useProfilesQuery} from '#/state/queries/profile'
|
import {useProfilesQuery} from '#/state/queries/profile'
|
||||||
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
import type * as bsky from '#/types/bsky'
|
import * as bsky from '#/types/bsky'
|
||||||
|
|
||||||
export function AvatarStack({
|
export function AvatarStack({
|
||||||
profiles,
|
profiles,
|
||||||
size = 26,
|
size = 26,
|
||||||
numPending,
|
numPending,
|
||||||
backgroundColor,
|
backgroundColor,
|
||||||
spacing = 'normal',
|
|
||||||
}: {
|
}: {
|
||||||
profiles: bsky.profile.AnyProfileView[]
|
profiles: bsky.profile.AnyProfileView[]
|
||||||
size?: number
|
size?: number
|
||||||
numPending?: number
|
numPending?: number
|
||||||
backgroundColor?: string
|
backgroundColor?: string
|
||||||
spacing?: 'normal' | 'loose'
|
|
||||||
}) {
|
}) {
|
||||||
|
const halfSize = size / 2
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const moderationOpts = useModerationOpts()
|
const moderationOpts = useModerationOpts()
|
||||||
const translateX = size / getSpacingValue(spacing)
|
|
||||||
|
|
||||||
const isPending = (numPending && profiles.length === 0) || !moderationOpts
|
const isPending = (numPending && profiles.length === 0) || !moderationOpts
|
||||||
|
|
||||||
@@ -45,7 +43,7 @@ export function AvatarStack({
|
|||||||
a.flex_row,
|
a.flex_row,
|
||||||
a.align_center,
|
a.align_center,
|
||||||
a.relative,
|
a.relative,
|
||||||
{width: size + (items.length - 1) * translateX},
|
{width: size + (items.length - 1) * halfSize},
|
||||||
]}>
|
]}>
|
||||||
{items.map((item, i) => (
|
{items.map((item, i) => (
|
||||||
<View
|
<View
|
||||||
@@ -56,7 +54,7 @@ export function AvatarStack({
|
|||||||
{
|
{
|
||||||
width: size,
|
width: size,
|
||||||
height: size,
|
height: size,
|
||||||
left: i * -translateX,
|
left: i * -halfSize,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: backgroundColor ?? t.atoms.bg.backgroundColor,
|
borderColor: backgroundColor ?? t.atoms.bg.backgroundColor,
|
||||||
borderRadius: 999,
|
borderRadius: 999,
|
||||||
@@ -77,10 +75,6 @@ export function AvatarStack({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getSpacingValue(spacing: 'normal' | 'loose') {
|
|
||||||
return spacing === 'normal' ? 2 : 4
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AvatarStackWithFetch({
|
export function AvatarStackWithFetch({
|
||||||
profiles,
|
profiles,
|
||||||
size,
|
size,
|
||||||
|
|||||||
Reference in New Issue
Block a user