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 | 1x 1x 1x 9x 27x 9x 27x 27x 2x 8x | 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;
}
const GAP = 4;
const ITEM_PER_ROW = 4;
export const AvatarList = ({
data,
selectedIds = [],
onToggle,
showAddButton = false,
onAdd,
size = 60,
showName = true,
numberOfLines = 2,
containerStyle,
addIconTestID,
testID,
}: Props) => {
const styles = useStyles();
const isSelected = (id: string) => selectedIds.includes(id);
return (
<View
style={[styles.container, containerStyle]}
accessible
accessibilityRole="list"
testID={testID}
>
{data.map((item) => {
const selected = isSelected(item.id);
return (
<View key={item.id} style={styles.item}>
<Avatar
uri={item.uri}
name={item.name}
size={size}
selected={selected}
showName={showName}
numberOfLines={numberOfLines}
onPress={() => onToggle?.(item.id)}
/>
</View>
);
})}
{showAddButton && (
<View style={styles.item}>
<Pressable
onPress={onAdd}
accessibilityRole="button"
accessibilityLabel="Add person"
accessibilityHint="Opens user selection screen"
testID={addIconTestID}
>
<PlusCircleV2Icon />
</Pressable>
</View>
)}
</View>
);
};
const useStyles = makeStyles(() => ({
container: {
flexDirection: "row",
flexWrap: "wrap",
marginHorizontal: -GAP / 2,
},
item: {
width: `${100 / ITEM_PER_ROW}%`,
paddingHorizontal: GAP / 2,
marginBottom: GAP,
},
}));
|