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
|
import React from 'react';
import {SectionList, StyleSheet} from 'react-native';
import {SCREEN_HEIGHT} from '../../utils';
import BadgeItem from './BadgeItem';
import BadgeHeader from './BadgeListHeader';
interface BadgeListProps {
data: any[];
selectedBadges: any[];
selectKey: (ikey: string) => void;
}
const BadgeList: React.FC<BadgeListProps> = ({
data,
selectedBadges,
selectKey,
}) => {
return (
<SectionList
stickySectionHeadersEnabled={false}
style={{height: SCREEN_HEIGHT * 0.8}}
contentContainerStyle={styles.listContainer}
sections={data}
keyExtractor={(item, index) => item + index}
extraData={selectedBadges}
renderItem={({item: {badgeName, badgeImage}, index}) => {
return (
<BadgeItem
selected={selectedBadges.includes(badgeName)}
onSelection={selectKey}
title={badgeName}
resourcePath={badgeImage}
index={index}
/>
);
}}
renderSectionHeader={({section: {title}}) => (
<BadgeHeader title={title} />
)}
/>
);
};
const styles = StyleSheet.create({
listContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
flexGrow: 1,
paddingBottom: SCREEN_HEIGHT * 0.1,
},
scrollViewStyles: {
paddingBottom: SCREEN_HEIGHT * 0.5,
},
});
export default BadgeList;
|
