|
@@ -17,37 +17,32 @@
|
17
|
17
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
18
|
18
|
*/
|
19
|
19
|
|
20
|
|
-// @flow
|
21
|
|
-
|
22
|
20
|
import * as React from 'react';
|
23
|
21
|
import {FlatList, Linking, Platform, Image, View} from 'react-native';
|
24
|
22
|
import i18n from 'i18n-js';
|
25
|
|
-import {Avatar, Card, List, withTheme} from 'react-native-paper';
|
|
23
|
+import {Avatar, Card, List} from 'react-native-paper';
|
26
|
24
|
import {StackNavigationProp} from '@react-navigation/stack';
|
27
|
25
|
import packageJson from '../../../package.json';
|
28
|
26
|
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
|
29
|
|
-import APP_LOGO from '../../../assets/android.icon.round.png';
|
30
|
|
-import type {
|
31
|
|
- CardTitleIconPropsType,
|
32
|
|
- ListIconPropsType,
|
33
|
|
-} from '../../constants/PaperStyles';
|
34
|
27
|
import OptionsDialog from '../../components/Dialogs/OptionsDialog';
|
35
|
28
|
import type {OptionsDialogButtonType} from '../../components/Dialogs/OptionsDialog';
|
36
|
29
|
|
|
30
|
+const APP_LOGO = require('../../../assets/android.icon.round.png');
|
|
31
|
+
|
37
|
32
|
type ListItemType = {
|
38
|
|
- onPressCallback: () => void,
|
39
|
|
- icon: string,
|
40
|
|
- text: string,
|
41
|
|
- showChevron: boolean,
|
|
33
|
+ onPressCallback: () => void;
|
|
34
|
+ icon: string;
|
|
35
|
+ text: string;
|
|
36
|
+ showChevron: boolean;
|
42
|
37
|
};
|
43
|
38
|
|
44
|
39
|
type MemberItemType = {
|
45
|
|
- name: string,
|
46
|
|
- message: string,
|
47
|
|
- icon: string,
|
48
|
|
- trollLink?: string,
|
49
|
|
- linkedin?: string,
|
50
|
|
- mail?: string,
|
|
40
|
+ name: string;
|
|
41
|
+ message: string;
|
|
42
|
+ icon: string;
|
|
43
|
+ trollLink?: string;
|
|
44
|
+ linkedin?: string;
|
|
45
|
+ mail?: string;
|
51
|
46
|
};
|
52
|
47
|
|
53
|
48
|
const links = {
|
|
@@ -64,14 +59,14 @@ const links = {
|
64
|
59
|
};
|
65
|
60
|
|
66
|
61
|
type PropsType = {
|
67
|
|
- navigation: StackNavigationProp,
|
|
62
|
+ navigation: StackNavigationProp<any>;
|
68
|
63
|
};
|
69
|
64
|
|
70
|
65
|
type StateType = {
|
71
|
|
- dialogVisible: boolean,
|
72
|
|
- dialogTitle: string,
|
73
|
|
- dialogMessage: string,
|
74
|
|
- dialogButtons: Array<OptionsDialogButtonType>,
|
|
66
|
+ dialogVisible: boolean;
|
|
67
|
+ dialogTitle: string;
|
|
68
|
+ dialogMessage: string;
|
|
69
|
+ dialogButtons: Array<OptionsDialogButtonType>;
|
75
|
70
|
};
|
76
|
71
|
|
77
|
72
|
/**
|
|
@@ -86,7 +81,6 @@ function openWebLink(link: string) {
|
86
|
81
|
* Class defining an about screen. This screen shows the user information about the app and it's author.
|
87
|
82
|
*/
|
88
|
83
|
class AboutScreen extends React.Component<PropsType, StateType> {
|
89
|
|
-
|
90
|
84
|
/**
|
91
|
85
|
* Object containing data relative to major contributors
|
92
|
86
|
*/
|
|
@@ -109,7 +103,8 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
109
|
103
|
message: i18n.t('screens.about.user.yohan'),
|
110
|
104
|
icon: 'xml',
|
111
|
105
|
linkedin: 'https://www.linkedin.com/in/yohan-simard',
|
112
|
|
- mail: 'mailto:ysimard@etud.insa-toulouse.fr?' +
|
|
106
|
+ mail:
|
|
107
|
+ 'mailto:ysimard@etud.insa-toulouse.fr?' +
|
113
|
108
|
'subject=' +
|
114
|
109
|
'Application Amicale INSA Toulouse' +
|
115
|
110
|
'&body=' +
|
|
@@ -333,7 +328,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
333
|
328
|
* @param user The member to show information for
|
334
|
329
|
*/
|
335
|
330
|
onContributorListItemPress(user: MemberItemType) {
|
336
|
|
- const dialogBtn = [
|
|
331
|
+ const dialogBtn: Array<OptionsDialogButtonType> = [
|
337
|
332
|
{
|
338
|
333
|
title: 'OK',
|
339
|
334
|
onPress: this.onDialogDismiss,
|
|
@@ -379,15 +374,14 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
379
|
374
|
*
|
380
|
375
|
* @return {*}
|
381
|
376
|
*/
|
382
|
|
- getAppCard(): React.Node {
|
|
377
|
+ getAppCard() {
|
383
|
378
|
return (
|
384
|
379
|
<Card style={{marginBottom: 10}}>
|
385
|
380
|
<Card.Title
|
386
|
381
|
title="Campus"
|
387
|
382
|
subtitle={packageJson.version}
|
388
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
383
|
+ left={(iconProps) => (
|
389
|
384
|
<Image
|
390
|
|
- size={iconProps.size}
|
391
|
385
|
source={APP_LOGO}
|
392
|
386
|
style={{width: iconProps.size, height: iconProps.size}}
|
393
|
387
|
/>
|
|
@@ -409,12 +403,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
409
|
403
|
*
|
410
|
404
|
* @return {*}
|
411
|
405
|
*/
|
412
|
|
- getTeamCard(): React.Node {
|
|
406
|
+ getTeamCard() {
|
413
|
407
|
return (
|
414
|
408
|
<Card style={{marginBottom: 10}}>
|
415
|
409
|
<Card.Title
|
416
|
410
|
title={i18n.t('screens.about.team')}
|
417
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
411
|
+ left={(iconProps) => (
|
418
|
412
|
<Avatar.Icon size={iconProps.size} icon="account-multiple" />
|
419
|
413
|
)}
|
420
|
414
|
/>
|
|
@@ -434,12 +428,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
434
|
428
|
*
|
435
|
429
|
* @return {*}
|
436
|
430
|
*/
|
437
|
|
- getThanksCard(): React.Node {
|
|
431
|
+ getThanksCard() {
|
438
|
432
|
return (
|
439
|
433
|
<Card style={{marginBottom: 10}}>
|
440
|
434
|
<Card.Title
|
441
|
435
|
title={i18n.t('screens.about.thanks')}
|
442
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
436
|
+ left={(iconProps) => (
|
443
|
437
|
<Avatar.Icon size={iconProps.size} icon="hand-heart" />
|
444
|
438
|
)}
|
445
|
439
|
/>
|
|
@@ -459,12 +453,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
459
|
453
|
*
|
460
|
454
|
* @return {*}
|
461
|
455
|
*/
|
462
|
|
- getTechnoCard(): React.Node {
|
|
456
|
+ getTechnoCard() {
|
463
|
457
|
return (
|
464
|
458
|
<Card style={{marginBottom: 10}}>
|
465
|
459
|
<Card.Title
|
466
|
460
|
title={i18n.t('screens.about.technologies')}
|
467
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
461
|
+ left={(iconProps) => (
|
468
|
462
|
<Avatar.Icon size={iconProps.size} icon="wrench" />
|
469
|
463
|
)}
|
470
|
464
|
/>
|
|
@@ -485,7 +479,13 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
485
|
479
|
* @param props
|
486
|
480
|
* @return {*}
|
487
|
481
|
*/
|
488
|
|
- static getChevronIcon(props: ListIconPropsType): React.Node {
|
|
482
|
+ static getChevronIcon(props: {
|
|
483
|
+ color: string;
|
|
484
|
+ style?: {
|
|
485
|
+ marginRight: number;
|
|
486
|
+ marginVertical?: number;
|
|
487
|
+ };
|
|
488
|
+ }) {
|
489
|
489
|
return (
|
490
|
490
|
<List.Icon color={props.color} style={props.style} icon="chevron-right" />
|
491
|
491
|
);
|
|
@@ -498,7 +498,16 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
498
|
498
|
* @param props
|
499
|
499
|
* @return {*}
|
500
|
500
|
*/
|
501
|
|
- static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
|
|
501
|
+ static getItemIcon(
|
|
502
|
+ item: ListItemType,
|
|
503
|
+ props: {
|
|
504
|
+ color: string;
|
|
505
|
+ style?: {
|
|
506
|
+ marginRight: number;
|
|
507
|
+ marginVertical?: number;
|
|
508
|
+ };
|
|
509
|
+ },
|
|
510
|
+ ) {
|
502
|
511
|
return (
|
503
|
512
|
<List.Icon color={props.color} style={props.style} icon={item.icon} />
|
504
|
513
|
);
|
|
@@ -509,9 +518,14 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
509
|
518
|
*
|
510
|
519
|
* @returns {*}
|
511
|
520
|
*/
|
512
|
|
- getCardItem = ({item}: {item: ListItemType}): React.Node => {
|
513
|
|
- const getItemIcon = (props: ListIconPropsType): React.Node =>
|
514
|
|
- AboutScreen.getItemIcon(item, props);
|
|
521
|
+ getCardItem = ({item}: {item: ListItemType}) => {
|
|
522
|
+ const getItemIcon = (props: {
|
|
523
|
+ color: string;
|
|
524
|
+ style?: {
|
|
525
|
+ marginRight: number;
|
|
526
|
+ marginVertical?: number;
|
|
527
|
+ };
|
|
528
|
+ }) => AboutScreen.getItemIcon(item, props);
|
515
|
529
|
if (item.showChevron) {
|
516
|
530
|
return (
|
517
|
531
|
<List.Item
|
|
@@ -537,7 +551,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
537
|
551
|
* @param item The item to show
|
538
|
552
|
* @return {*}
|
539
|
553
|
*/
|
540
|
|
- getMainCard = ({item}: {item: {id: string}}): React.Node => {
|
|
554
|
+ getMainCard = ({item}: {item: {id: string}}) => {
|
541
|
555
|
switch (item.id) {
|
542
|
556
|
case 'app':
|
543
|
557
|
return this.getAppCard();
|
|
@@ -564,7 +578,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
564
|
578
|
*/
|
565
|
579
|
keyExtractor = (item: ListItemType): string => item.icon;
|
566
|
580
|
|
567
|
|
- render(): React.Node {
|
|
581
|
+ render() {
|
568
|
582
|
const {state} = this;
|
569
|
583
|
return (
|
570
|
584
|
<View
|
|
@@ -588,4 +602,4 @@ class AboutScreen extends React.Component<PropsType, StateType> {
|
588
|
602
|
}
|
589
|
603
|
}
|
590
|
604
|
|
591
|
|
-export default withTheme(AboutScreen);
|
|
605
|
+export default AboutScreen;
|