Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 3x 31x 31x 3x 3x 3x 11x 11x 31x 10x | import { memo, useCallback } from "react";
import { Pressable, View, ViewStyle } from "react-native";
import { PlusCircleV2Icon } from "@repo/ui/icons/PlusCircleV2";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { Avatar } from "../Avatar";
export type AvatarItem = {
id: string;
name: string;
uri?: string;
};
interface Props {
data: AvatarItem[];
selectedIds?: string[];
onToggle?: (id: string) => void;
showAddButton?: boolean;
onAdd?: () => void;
size?: number;
showName?: boolean;
numberOfLines?: number;
containerStyle?: ViewStyle;
addIconTestID?: string;
testID?: string;
}
interface AvatarListItemProps {
item: AvatarItem;
selected: boolean;
size: number;
showName: boolean;
numberOfLines: number;
onToggle?: (id: string) => void;
}
const AvatarListItem = memo(function AvatarListItem({
item,
selected,
size,
showName,
numberOfLines,
onToggle,
}: AvatarListItemProps) {
const handlePress = useCallback(() => onToggle?.(item.id), [onToggle, item.id]);
return (
<Avatar
uri={item.uri}
name={item.name}
size={size}
selected={selected}
showName={showName}
numberOfLines={numberOfLines}
onPress={handlePress}
/>
);
});
const GAP = 4;
const ITEM_PER_ROW = 4;
export const AvatarList = memo(function AvatarList({
data,
selectedIds = [],
onToggle,
showAddButton = false,
onAdd,
size = 60,
showName = true,
numberOfLines = 2,
containerStyle,
addIconTestID,
testID,
}: Props) {
const styles = useStyles();
return (
<View style={[styles.container, containerStyle]} testID={testID} accessible={false}>
{data.map((item) => (
<View key={item.id} style={styles.item}>
<AvatarListItem
item={item}
selected={selectedIds.includes(item.id)}
size={size}
showName={showName}
numberOfLines={numberOfLines}
onToggle={onToggle}
/>
</View>
))}
{showAddButton && (
<View style={styles.item}>
<Pressable
onPress={onAdd}
accessibilityRole="button"
accessibilityLabel="Add person"
accessibilityHint="Opens user selection screen"
testID={addIconTestID}
>
<PlusCircleV2Icon color={styles.addIcon.color} />
</Pressable>
</View>
)}
</View>
);
});
const useStyles = makeStyles((theme) => ({
container: {
flexDirection: "row",
flexWrap: "wrap",
marginHorizontal: -GAP / 2,
},
item: {
width: `${100 / ITEM_PER_ROW}%`,
paddingHorizontal: GAP / 2,
marginBottom: GAP,
},
addIcon: {
color: theme.colors.icon.brand,
},
}));
|