134 lines
3.1 KiB
JavaScript
134 lines
3.1 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
Image,
|
|
StyleSheet
|
|
} from 'react-native';
|
|
import {
|
|
returnIcon,
|
|
returnStatus
|
|
} from '../../../utils/IQAIRhelper';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import CustomHeader from '../../../components/header.js';
|
|
import CustomSafeArea from '../../../components/safeArea.component';
|
|
import Elements from '../../../components/elements.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
|
|
const status = [
|
|
{
|
|
id: 0,
|
|
title: `0 - 50 ${returnStatus(0).title}`,
|
|
body: returnStatus(0).body,
|
|
color: Theme.colors.iqair[0].main,
|
|
},
|
|
{
|
|
id: 1,
|
|
title: `51 - 100 ${returnStatus(1).title}`,
|
|
body: returnStatus(1).body,
|
|
color: Theme.colors.iqair[1].main,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: `101 - 150 ${returnStatus(2).title}`,
|
|
body: returnStatus(2).body,
|
|
color: Theme.colors.iqair[2].main,
|
|
},
|
|
{
|
|
id: 3,
|
|
title: `151 - 200 ${returnStatus(3).title}`,
|
|
body: returnStatus(3).body,
|
|
color: Theme.colors.iqair[3].main,
|
|
},
|
|
{
|
|
id: 4,
|
|
title: `201 - 300 ${returnStatus(4).title}`,
|
|
body: returnStatus(4).body,
|
|
color: Theme.colors.iqair[4].main,
|
|
},
|
|
{
|
|
id: 5,
|
|
title: `301 - 500 ${returnStatus(5).title}`,
|
|
body: returnStatus(5).body,
|
|
color: Theme.colors.iqair[5].main,
|
|
}
|
|
]
|
|
|
|
const Guide = () => {
|
|
const navigation = useNavigation();
|
|
|
|
const renderItem = ({item, index}) => {
|
|
return (
|
|
<Elements.shadowView>
|
|
<View style={styles.container(index)}>
|
|
<View style={styles.imageContainer(item)}>
|
|
<Image source={returnIcon(item.id)} style={styles.image}/>
|
|
</View>
|
|
<View style={styles.infoContainer}>
|
|
<Text numberOfLines={1} adjustsFontSizeToFit style={styles.titleText(item)}>{item.title}</Text>
|
|
<Text style={styles.bodyText}>{item.body}</Text>
|
|
</View>
|
|
</View>
|
|
</Elements.shadowView>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader back={true} onBackPress={() => navigation.goBack()} title="IQAIR Guide" menu={false} navigation={navigation} />
|
|
|
|
<FlatList
|
|
data={status}
|
|
renderItem={renderItem}
|
|
/>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
|
|
export default Guide
|
|
|
|
const styles = StyleSheet.create({
|
|
container: (index) => {
|
|
return {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
marginHorizontal: 18,
|
|
marginTop: index === 0 ? 25 : 15,
|
|
marginBottom: index === (status.length - 1) ? 25 : 0,
|
|
backgroundColor: 'white'
|
|
}
|
|
},
|
|
imageContainer: (item) => {
|
|
return {
|
|
backgroundColor: item.color,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 15,
|
|
justifyContent: 'center'
|
|
}
|
|
},
|
|
image: {
|
|
height: 65,
|
|
width: 65,
|
|
resizeMode: 'contain'
|
|
},
|
|
infoContainer: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
paddingHorizontal: 10,
|
|
paddingTop: 4,
|
|
paddingBottom: 15
|
|
},
|
|
titleText: (item) => {
|
|
return {
|
|
color: item.color,
|
|
fontSize: 15,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
bodyText: {
|
|
marginTop: 4,
|
|
color: Theme.colors.searchText,
|
|
fontSize: 13
|
|
}
|
|
}) |