47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { StyleService, useStyleSheet } from '@ui-kitten/components'
|
|
import { Library } from 'libraries.json'
|
|
import React, { useCallback } from 'react'
|
|
import { FlatList, ListRenderItemInfo } from 'react-native'
|
|
import { Layout as LayoutStyle, Sizing } from '../styles'
|
|
import { LibraryListItem } from './libraryListItem.component'
|
|
import { SettingListSeparator } from './settingsComponents.component'
|
|
|
|
export const LibraryList = ({ libraries }: { libraries: Library[] }) => {
|
|
const styles = useStyleSheet(themedStyles)
|
|
const renderItem = useCallback(
|
|
({ item: library }: ListRenderItemInfo<Library>) => (
|
|
<LibraryListItem library={library} />
|
|
),
|
|
[]
|
|
)
|
|
|
|
const keyExtractor = useCallback((library: Library) => {
|
|
return `${library.libraryName}:${library.version}`
|
|
}, [])
|
|
|
|
return (
|
|
<FlatList
|
|
data={libraries}
|
|
renderItem={renderItem}
|
|
keyExtractor={keyExtractor}
|
|
ItemSeparatorComponent={SettingListSeparator}
|
|
style={styles.list}
|
|
contentContainerStyle={styles.container}
|
|
initialNumToRender={15}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const themedStyles = StyleService.create({
|
|
list: {
|
|
...LayoutStyle.flex.full,
|
|
paddingHorizontal: Sizing.t4,
|
|
marginBottom: Sizing.t5,
|
|
},
|
|
container: {
|
|
borderRadius: 15,
|
|
backgroundColor: 'background-basic-color-1',
|
|
overflow: 'hidden',
|
|
},
|
|
})
|