Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AmicaleContactScreen.tsx 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import { FlatList, Image, Linking, StyleSheet, View } from 'react-native';
  21. import { Avatar, Card, List, Text } from 'react-native-paper';
  22. import i18n from 'i18n-js';
  23. import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
  24. const AMICALE_LOGO = require('../../../assets/amicale.png');
  25. type DatasetItemType = {
  26. name: string;
  27. email: string;
  28. icon: string;
  29. };
  30. const styles = StyleSheet.create({
  31. imageContainer: {
  32. width: '100%',
  33. height: 100,
  34. marginTop: 20,
  35. marginBottom: 20,
  36. justifyContent: 'center',
  37. alignItems: 'center',
  38. },
  39. image: {
  40. flex: 1,
  41. resizeMode: 'contain',
  42. },
  43. card: {
  44. margin: 5,
  45. },
  46. });
  47. /**
  48. * Class defining a planning event information page.
  49. */
  50. class AmicaleContactScreen extends React.Component<{}> {
  51. // Dataset containing information about contacts
  52. CONTACT_DATASET: Array<DatasetItemType>;
  53. constructor(props: {}) {
  54. super(props);
  55. this.CONTACT_DATASET = [
  56. {
  57. name: i18n.t('screens.amicaleAbout.roles.interSchools'),
  58. email: 'inter.ecoles@amicale-insat.fr',
  59. icon: 'share-variant',
  60. },
  61. {
  62. name: i18n.t('screens.amicaleAbout.roles.culture'),
  63. email: 'culture@amicale-insat.fr',
  64. icon: 'book',
  65. },
  66. {
  67. name: i18n.t('screens.amicaleAbout.roles.animation'),
  68. email: 'animation@amicale-insat.fr',
  69. icon: 'emoticon',
  70. },
  71. {
  72. name: i18n.t('screens.amicaleAbout.roles.clubs'),
  73. email: 'clubs@amicale-insat.fr',
  74. icon: 'account-group',
  75. },
  76. {
  77. name: i18n.t('screens.amicaleAbout.roles.event'),
  78. email: 'evenements@amicale-insat.fr',
  79. icon: 'calendar-range',
  80. },
  81. {
  82. name: i18n.t('screens.amicaleAbout.roles.tech'),
  83. email: 'technique@amicale-insat.fr',
  84. icon: 'cog',
  85. },
  86. {
  87. name: i18n.t('screens.amicaleAbout.roles.communication'),
  88. email: 'amicale@amicale-insat.fr',
  89. icon: 'comment-account',
  90. },
  91. {
  92. name: i18n.t('screens.amicaleAbout.roles.intraSchools'),
  93. email: 'intra.ecoles@amicale-insat.fr',
  94. icon: 'school',
  95. },
  96. {
  97. name: i18n.t('screens.amicaleAbout.roles.publicRelations'),
  98. email: 'rp@amicale-insat.fr',
  99. icon: 'account-tie',
  100. },
  101. ];
  102. }
  103. keyExtractor = (item: DatasetItemType): string => item.email;
  104. getChevronIcon = (iconProps: {
  105. color: string;
  106. style?: {
  107. marginRight: number;
  108. marginVertical?: number;
  109. };
  110. }) => (
  111. <List.Icon
  112. color={iconProps.color}
  113. style={iconProps.style}
  114. icon="chevron-right"
  115. />
  116. );
  117. getRenderItem = ({ item }: { item: DatasetItemType }) => {
  118. const onPress = () => {
  119. Linking.openURL(`mailto:${item.email}`);
  120. };
  121. return (
  122. <List.Item
  123. title={item.name}
  124. description={item.email}
  125. left={(iconProps) => (
  126. <List.Icon
  127. color={iconProps.color}
  128. style={iconProps.style}
  129. icon={item.icon}
  130. />
  131. )}
  132. right={this.getChevronIcon}
  133. onPress={onPress}
  134. />
  135. );
  136. };
  137. getScreen = () => {
  138. return (
  139. <View>
  140. <View style={styles.imageContainer}>
  141. <Image
  142. source={AMICALE_LOGO}
  143. style={styles.image}
  144. resizeMode="contain"
  145. />
  146. </View>
  147. <Card style={styles.card}>
  148. <Card.Title
  149. title={i18n.t('screens.amicaleAbout.title')}
  150. subtitle={i18n.t('screens.amicaleAbout.subtitle')}
  151. left={(iconProps) => (
  152. <Avatar.Icon size={iconProps.size} icon="information" />
  153. )}
  154. />
  155. <Card.Content>
  156. <Text>{i18n.t('screens.amicaleAbout.message')}</Text>
  157. <FlatList
  158. data={this.CONTACT_DATASET}
  159. keyExtractor={this.keyExtractor}
  160. renderItem={this.getRenderItem}
  161. />
  162. </Card.Content>
  163. </Card>
  164. </View>
  165. );
  166. };
  167. render() {
  168. return (
  169. <CollapsibleFlatList
  170. data={[{ key: '1' }]}
  171. renderItem={this.getScreen}
  172. hasTab
  173. />
  174. );
  175. }
  176. }
  177. export default AmicaleContactScreen;