handle odd number of avatars

ava-labs · Nov 29, 2024 · beb395c · beb395c
1 parent 145feeb
commit beb395c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 21 deletions.
diff --git a/packages/k2-alpine/src/components/Avatar/Avatar.stories.tsx b/packages/k2-alpine/src/components/Avatar/Avatar.stories.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Switch } from 'react-native'
 import { ScrollView, Text, View } from '../Primitives'
 import { useTheme } from '../..'
-import AvatarList from './AvatarList'
+import AvatarSelector from './AvatarSelector'
 import { Avatar } from './Avatar'
 
 export default {
@@ -32,16 +32,20 @@ export const All = (): JSX.Element => {
     },
     {
       uri: 'https://i.seadn.io/s/raw/files/a9cb8c2298a64819a3036083818d0447.jpg?auto=format&dpr=1&w=1000'
+    },
+    {
+      uri: 'https://i.seadn.io/gcs/files/441e674e79460fc975d976465bb3634d.png?auto=format&dpr=1&w=1000'
     }
-    // {
-    //   uri: 'https://i.seadn.io/gcs/files/441e674e79460fc975d976465bb3634d.png?auto=format&dpr=1&w=1000'
-    // }
-  ]
+  ].map((avatar, index) => {
+    return { id: index.toString(), source: avatar }
+  })
 
-  const [selectedAvatarIndex, setSelectedAvatarIndex] = useState<number>(0)
+  const [selectedAvatarId, setSelectedAvatarId] = useState<string | undefined>(
+    AVATARS[0]?.id
+  )
 
-  const handleSelect = (index: number): void => {
-    setSelectedAvatarIndex(index)
+  const handleSelect = (id: string): void => {
+    setSelectedAvatarId(id)
   }
 
   return (
@@ -63,13 +67,15 @@ export const All = (): JSX.Element => {
       </View>
       <View sx={{ alignItems: 'center', padding: 100 }}>
         <Avatar
-          source={AVATARS[selectedAvatarIndex]}
+          source={
+            AVATARS.find(avatar => avatar.id === selectedAvatarId)?.source
+          }
           size="large"
           hasBlur={hasBlur}
         />
       </View>
-      <AvatarList
-        selectedIndex={selectedAvatarIndex}
+      <AvatarSelector
+        selectedId={selectedAvatarId}
         avatars={AVATARS}
         onSelect={handleSelect}
       />

diff --git a/...pine/src/components/Avatar/AvatarList.tsx → .../src/components/Avatar/AvatarSelector.tsx b/...pine/src/components/Avatar/AvatarList.tsx → .../src/components/Avatar/AvatarSelector.tsx
@@ -1,18 +1,26 @@
 import { Dimensions, ImageSourcePropType } from 'react-native'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import Carousel from 'react-native-reanimated-carousel'
 import { Pressable } from '../Primitives'
 import { Avatar } from './Avatar'
 
-const AvatarList = ({
+const AvatarSelector = ({
   avatars,
-  selectedIndex,
+  selectedId,
   onSelect
 }: {
-  avatars: ImageSourcePropType[]
-  selectedIndex?: number
-  onSelect?: (index: number) => void
+  avatars: { id: string; source: ImageSourcePropType }[]
+  selectedId?: string
+  onSelect?: (id: string) => void
 }): JSX.Element => {
+  const data = useMemo(() => {
+    // we should always have an even number of avatars, due to infinite scrolling + two avatars per column
+    if (avatars.length % 2 === 0) {
+      return avatars
+    } else {
+      return [...avatars, ...avatars]
+    }
+  }, [avatars])
   const [pressedIndex, setPressedIndex] = useState<number>()
 
   const handlePressIn = (index: number): void => {
@@ -26,7 +34,11 @@ const AvatarList = ({
   }
 
   const handleSelect = (index: number): void => {
-    onSelect?.(index)
+    if (data[index]?.id === undefined) {
+      return
+    }
+
+    onSelect?.(data[index].id)
   }
 
   const renderItem = ({
@@ -46,7 +58,7 @@ const AvatarList = ({
         <Avatar
           source={item}
           size={Configuration.avatarWidth}
-          isSelected={selectedIndex === index}
+          isSelected={data[index]?.id === selectedId}
           isPressed={pressedIndex === index}
         />
       </Pressable>
@@ -57,7 +69,7 @@ const AvatarList = ({
     <Carousel
       width={Configuration.avatarWidth / 2 + Configuration.spacing}
       height={Configuration.avatarWidth * 2}
-      data={avatars}
+      data={data.map(avatar => avatar.source)}
       renderItem={renderItem}
       pagingEnabled={false}
       snapEnabled={false}
@@ -78,4 +90,4 @@ export const Configuration = {
 
 const SCREEN_WIDTH = Dimensions.get('window').width
 
-export default AvatarList
+export default AvatarSelector