|
@@ -1,12 +1,14 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import type {cards} from "../../components/Lists/CardList/CardList";
|
|
4
|
+import type {cardList} from "../../components/Lists/CardList/CardList";
|
5
|
5
|
import CardList from "../../components/Lists/CardList/CardList";
|
6
|
6
|
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
7
|
7
|
import {withCollapsible} from "../../utils/withCollapsible";
|
8
|
8
|
import {Collapsible} from "react-navigation-collapsible";
|
9
|
9
|
import {CommonActions} from "@react-navigation/native";
|
|
10
|
+import {Animated} from "react-native";
|
|
11
|
+import {Avatar, Card, List} from "react-native-paper";
|
10
|
12
|
|
11
|
13
|
type Props = {
|
12
|
14
|
navigation: Object,
|
|
@@ -25,57 +27,30 @@ const AMICALE_IMAGE = require("../../../assets/amicale.png");
|
25
|
27
|
const EE_IMAGE = "https://etud.insa-toulouse.fr/~eeinsat/wp-content/uploads/2019/09/logo-blanc.png";
|
26
|
28
|
const TUTORINSA_IMAGE = "https://www.etud.insa-toulouse.fr/~tutorinsa/public/images/logo-gray.png";
|
27
|
29
|
|
|
30
|
+type listItem = {
|
|
31
|
+ title: string,
|
|
32
|
+ description: string,
|
|
33
|
+ image: string | number,
|
|
34
|
+ content: cardList,
|
|
35
|
+}
|
|
36
|
+
|
28
|
37
|
class ServicesScreen extends React.Component<Props> {
|
29
|
38
|
|
30
|
|
- dataset: Array<cards>;
|
|
39
|
+ studentsDataset: cardList;
|
|
40
|
+ insaDataset: cardList;
|
|
41
|
+
|
|
42
|
+ finalDataset: Array<listItem>
|
31
|
43
|
|
32
|
44
|
constructor(props) {
|
33
|
45
|
super(props);
|
34
|
46
|
const nav = props.navigation;
|
35
|
|
- this.dataset = [
|
36
|
|
- [
|
37
|
|
- {
|
38
|
|
- title: "RU",
|
39
|
|
- subtitle: "the ru",
|
40
|
|
- image: RU_IMAGE,
|
41
|
|
- onPress: () => nav.navigate("self-menu"),
|
42
|
|
- },
|
|
47
|
+ this.studentsDataset = [
|
43
|
48
|
{
|
44
|
49
|
title: "proximo",
|
45
|
50
|
subtitle: "proximo",
|
46
|
51
|
image: PROXIMO_IMAGE,
|
47
|
52
|
onPress: () => nav.navigate("proximo"),
|
48
|
53
|
},
|
49
|
|
- ],
|
50
|
|
- [
|
51
|
|
- {
|
52
|
|
- title: "AVAILABLE ROOMS",
|
53
|
|
- subtitle: "ROOMS",
|
54
|
|
- image: ROOM_IMAGE,
|
55
|
|
- onPress: () => nav.navigate("available-rooms"),
|
56
|
|
- },
|
57
|
|
- {
|
58
|
|
- title: "BIB",
|
59
|
|
- subtitle: "BIB",
|
60
|
|
- image: BIB_IMAGE,
|
61
|
|
- onPress: () => nav.navigate("bib"),
|
62
|
|
- },
|
63
|
|
- ],
|
64
|
|
- [
|
65
|
|
- {
|
66
|
|
- title: "EMAIL",
|
67
|
|
- subtitle: "EMAIL",
|
68
|
|
- image: EMAIL_IMAGE,
|
69
|
|
- onPress: () => nav.navigate("bluemind"),
|
70
|
|
- },
|
71
|
|
- {
|
72
|
|
- title: "ENT",
|
73
|
|
- subtitle: "ENT",
|
74
|
|
- image: ENT_IMAGE,
|
75
|
|
- onPress: () => nav.navigate("ent"),
|
76
|
|
- },
|
77
|
|
- ],
|
78
|
|
- [
|
79
|
54
|
{
|
80
|
55
|
title: "AMICALE",
|
81
|
56
|
subtitle: "AMICALE",
|
|
@@ -88,8 +63,6 @@ class ServicesScreen extends React.Component<Props> {
|
88
|
63
|
image: WIKETUD_LINK,
|
89
|
64
|
onPress: () => nav.navigate("wiketud"),
|
90
|
65
|
},
|
91
|
|
- ],
|
92
|
|
- [
|
93
|
66
|
{
|
94
|
67
|
title: "ELUS ETUDIANTS",
|
95
|
68
|
subtitle: "ELUS ETUDIANTS",
|
|
@@ -102,8 +75,53 @@ class ServicesScreen extends React.Component<Props> {
|
102
|
75
|
image: TUTORINSA_IMAGE,
|
103
|
76
|
onPress: () => nav.navigate("tutorinsa"),
|
104
|
77
|
},
|
105
|
|
- ],
|
106
|
78
|
];
|
|
79
|
+ this.insaDataset = [
|
|
80
|
+ {
|
|
81
|
+ title: "RU",
|
|
82
|
+ subtitle: "the ru",
|
|
83
|
+ image: RU_IMAGE,
|
|
84
|
+ onPress: () => nav.navigate("self-menu"),
|
|
85
|
+ },
|
|
86
|
+ {
|
|
87
|
+ title: "AVAILABLE ROOMS",
|
|
88
|
+ subtitle: "ROOMS",
|
|
89
|
+ image: ROOM_IMAGE,
|
|
90
|
+ onPress: () => nav.navigate("available-rooms"),
|
|
91
|
+ },
|
|
92
|
+ {
|
|
93
|
+ title: "BIB",
|
|
94
|
+ subtitle: "BIB",
|
|
95
|
+ image: BIB_IMAGE,
|
|
96
|
+ onPress: () => nav.navigate("bib"),
|
|
97
|
+ },
|
|
98
|
+ {
|
|
99
|
+ title: "EMAIL",
|
|
100
|
+ subtitle: "EMAIL",
|
|
101
|
+ image: EMAIL_IMAGE,
|
|
102
|
+ onPress: () => nav.navigate("bluemind"),
|
|
103
|
+ },
|
|
104
|
+ {
|
|
105
|
+ title: "ENT",
|
|
106
|
+ subtitle: "ENT",
|
|
107
|
+ image: ENT_IMAGE,
|
|
108
|
+ onPress: () => nav.navigate("ent"),
|
|
109
|
+ },
|
|
110
|
+ ];
|
|
111
|
+ this.finalDataset = [
|
|
112
|
+ {
|
|
113
|
+ title: "AMICALE",
|
|
114
|
+ description: "youhou",
|
|
115
|
+ image: AMICALE_IMAGE,
|
|
116
|
+ content: this.studentsDataset
|
|
117
|
+ },
|
|
118
|
+ {
|
|
119
|
+ title: "INSA",
|
|
120
|
+ description: "youhou",
|
|
121
|
+ image: AMICALE_IMAGE,
|
|
122
|
+ content: this.insaDataset
|
|
123
|
+ },
|
|
124
|
+ ]
|
107
|
125
|
}
|
108
|
126
|
|
109
|
127
|
componentDidMount() {
|
|
@@ -121,19 +139,56 @@ class ServicesScreen extends React.Component<Props> {
|
121
|
139
|
}
|
122
|
140
|
};
|
123
|
141
|
|
124
|
|
- render() {
|
125
|
|
- const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
|
142
|
+ getAvatar(props, source: string | number) {
|
|
143
|
+ if (typeof source === "number")
|
|
144
|
+ return <Avatar.Image
|
|
145
|
+ size={48}
|
|
146
|
+ source={AMICALE_IMAGE}
|
|
147
|
+ style={{backgroundColor: 'transparent'}}/>
|
|
148
|
+ else
|
|
149
|
+ return <List.Icon {...props} icon={source} />
|
|
150
|
+ }
|
|
151
|
+
|
|
152
|
+ renderItem = ({item} : {item: listItem}) => {
|
126
|
153
|
return (
|
127
|
|
- <CardList
|
128
|
|
- dataset={this.dataset}
|
129
|
|
- onScroll={onScroll}
|
130
|
|
- contentContainerStyle={{
|
131
|
|
- paddingTop: containerPaddingTop,
|
132
|
|
- paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
|
|
154
|
+ <Card
|
|
155
|
+ style={{
|
|
156
|
+ margin: 5,
|
133
|
157
|
}}
|
134
|
|
- scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
135
|
|
- />
|
|
158
|
+ onPress={() => this.props.navigation.navigate("services-section", {data: item})}
|
|
159
|
+ >
|
|
160
|
+ <Card.Title
|
|
161
|
+ title={item.title}
|
|
162
|
+ subtitle={item.description}
|
|
163
|
+ left={(props) => this.getAvatar(props, item.image)}
|
|
164
|
+ right={(props) => <List.Icon {...props} icon="chevron-right" />}
|
|
165
|
+ />
|
|
166
|
+ <CardList
|
|
167
|
+ dataset={item.content}
|
|
168
|
+ isHorizontal={true}
|
|
169
|
+ />
|
|
170
|
+ </Card>
|
|
171
|
+
|
136
|
172
|
);
|
|
173
|
+ };
|
|
174
|
+
|
|
175
|
+ keyExtractor = (item: listItem) => {
|
|
176
|
+ return item.title;
|
|
177
|
+ }
|
|
178
|
+
|
|
179
|
+ render() {
|
|
180
|
+ const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
|
181
|
+ return <Animated.FlatList
|
|
182
|
+ data={this.finalDataset}
|
|
183
|
+ renderItem={this.renderItem}
|
|
184
|
+ keyExtractor={this.keyExtractor}
|
|
185
|
+ onScroll={onScroll}
|
|
186
|
+ contentContainerStyle={{
|
|
187
|
+ paddingTop: containerPaddingTop,
|
|
188
|
+ paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
|
|
189
|
+ }}
|
|
190
|
+ scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
|
191
|
+ />
|
137
|
192
|
}
|
138
|
193
|
}
|
139
|
194
|
|