123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- /*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
- */
-
- import React, { useLayoutEffect } from 'react';
- import { Image, StyleSheet, View } from 'react-native';
- import {
- Avatar,
- Card,
- Divider,
- List,
- TouchableRipple,
- useTheme,
- } from 'react-native-paper';
- import i18n from 'i18n-js';
- import CardList from '../../components/Lists/CardList/CardList';
- import MaterialHeaderButtons, {
- Item,
- } from '../../components/Overrides/CustomHeaderButton';
- import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
- import MascotPopup from '../../components/Mascot/MascotPopup';
- import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
- import {
- getCategories,
- ServiceCategoryType,
- SERVICES_CATEGORIES_KEY,
- } from '../../utils/Services';
- import { useNavigation } from '@react-navigation/native';
- import { useLoginState } from '../../context/loginContext';
-
- const styles = StyleSheet.create({
- container: {
- margin: 5,
- marginBottom: 20,
- },
- image: {
- width: 48,
- height: 48,
- },
- icon: {
- backgroundColor: 'transparent',
- },
- });
-
- function ServicesScreen() {
- const navigation = useNavigation();
- const theme = useTheme();
- const isLoggedIn = useLoginState();
-
- const finalDataset = getCategories(navigation.navigate, isLoggedIn, [
- SERVICES_CATEGORIES_KEY.SPECIAL,
- ]);
-
- useLayoutEffect(() => {
- const getAboutButton = () => (
- <MaterialHeaderButtons>
- <Item
- title="information"
- iconName="information"
- onPress={() => navigation.navigate('amicale-contact')}
- />
- </MaterialHeaderButtons>
- );
- navigation.setOptions({
- headerRight: getAboutButton,
- });
- }, [navigation]);
-
- /**
- * Gets the list title image for the list.
- *
- * If the source is a string, we are using an icon.
- * If the source is a number, we are using an internal image.
- *
- * @param source The source image to display. Can be a string for icons or a number for local images
- * @returns {*}
- */
- const getListTitleImage = (source: string | number) => {
- if (typeof source === 'number') {
- return <Image source={source} style={styles.image} />;
- }
- return (
- <Avatar.Icon
- size={48}
- icon={source}
- color={theme.colors.primary}
- style={styles.icon}
- />
- );
- };
-
- /**
- * A list item showing a list of available services for the current category
- *
- * @param item
- * @returns {*}
- */
- const getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
- return (
- <TouchableRipple
- style={styles.container}
- onPress={() => navigation.navigate('services-section', { data: item })}
- >
- <View>
- <Card.Title
- title={item.title}
- subtitle={item.subtitle}
- left={() => getListTitleImage(item.image)}
- right={() => <List.Icon icon="chevron-right" />}
- />
- <CardList dataset={item.content} isHorizontal />
- </View>
- </TouchableRipple>
- );
- };
-
- const keyExtractor = (item: ServiceCategoryType): string => item.title;
-
- return (
- <View>
- <CollapsibleFlatList
- data={finalDataset}
- renderItem={getRenderItem}
- keyExtractor={keyExtractor}
- ItemSeparatorComponent={() => <Divider />}
- hasTab
- />
- <MascotPopup
- title={i18n.t('screens.services.mascotDialog.title')}
- message={i18n.t('screens.services.mascotDialog.message')}
- icon="cloud-question"
- buttons={{
- cancel: {
- message: i18n.t('screens.services.mascotDialog.button'),
- icon: 'check',
- },
- }}
- emotion={MASCOT_STYLE.WINK}
- />
- </View>
- );
- }
-
- export default ServicesScreen;
|