75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import type { IconName } from "@fortawesome/fontawesome-svg-core"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"
|
|
import React, { memo } from "react"
|
|
import { View } from "react-native"
|
|
import { ActivityIndicator, IconButton, Text } from "react-native-paper"
|
|
|
|
export interface IconsListProps {
|
|
selectedIcon?: string
|
|
possibleIcons: string[]
|
|
isLoading?: boolean
|
|
handleIconSelect: (icon: string) => void
|
|
}
|
|
|
|
const IconsListWithoutMemo: React.FC<IconsListProps> = (props) => {
|
|
const {
|
|
selectedIcon,
|
|
possibleIcons,
|
|
isLoading = false,
|
|
handleIconSelect,
|
|
} = props
|
|
|
|
if (possibleIcons.length <= 0) {
|
|
return (
|
|
<View
|
|
style={{
|
|
marginTop: 20,
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<ActivityIndicator size="large" />
|
|
) : (
|
|
<Text>No results found</Text>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
gap: 15,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{possibleIcons.map((icon) => {
|
|
return (
|
|
<IconButton
|
|
key={icon}
|
|
containerColor="white"
|
|
icon={({ size }) => {
|
|
return (
|
|
<FontAwesomeIcon
|
|
icon={icon as IconName}
|
|
size={size}
|
|
color={selectedIcon === icon ? "blue" : "black"}
|
|
/>
|
|
)
|
|
}}
|
|
size={30}
|
|
onPress={() => {
|
|
handleIconSelect(icon)
|
|
}}
|
|
/>
|
|
)
|
|
})}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export const IconsList = memo(IconsListWithoutMemo)
|