vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Improved selection screens

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-21 15:17:00 +02:00
parent 77cc5d8746
commit 0b17a35856
5 changed files with 233 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/components/Lists/CardList/CardList.js Normal file
View file

@ -0,0 +1,47 @@
// @flow
import * as React from 'react';
import {Animated, View} from "react-native";
import type {cardItem, cards} from "../../../screens/Insa/InsaHomeScreen";
import CardListItem from "./CardListItem";
type Props = {
dataset: Array<cards>
}
export default class CardList extends React.Component<Props> {
renderItem = ({item}: { item: cards }) => {
let width = '80%';
if (item.length > 1) {
width = '40%';
}
return (
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: "space-evenly",
marginTop: 10,
}}>
{item.map((card: cardItem, index: number) => {
return (
<CardListItem width={width} item={card} key={index.toString()}/>
);
})}
</View>
);
};
keyExtractor = (item: cards) => item[0].title;
render() {
return (
<Animated.FlatList
{...this.props}
data={this.props.dataset}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
);
}
}

42
src/components/Lists/CardList/CardListItem.js Normal file
View file

@ -0,0 +1,42 @@
// @flow
import * as React from 'react';
import {Caption, Card, Paragraph} from 'react-native-paper';
import type {cardItem} from "../../../screens/Insa/InsaHomeScreen";
type Props = {
width: string | number,
item: cardItem,
}
export default class CardListItem extends React.Component<Props> {
shouldComponentUpdate() {
return false;
}
render() {
const props = this.props;
const item = props.item;
const source = typeof item.image === "number"
? item.image
: {uri: item.image};
return (
<Card
style={{
width: props.width,
}}
onPress={item.onPress}
>
<Card.Cover
style={{height: 80}}
source={source}
/>
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
</Card>
);
}
}

8
src/navigation/MainTabNavigator.js
View file

@ -169,13 +169,7 @@ function InsaStackComponent() {
headerMode={"screen"}
screenOptions={defaultScreenOptions}
>
<InsaStack.Screen
name="index"
component={InsaHomeScreen}
options={{
title: "INSA HOME",
}}
/>
{createScreenCollapsibleStack("index", InsaStack, InsaHomeScreen, "INSA HOME")}
{getWebsiteStack("available-rooms", InsaStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
{getWebsiteStack("bib", InsaStack, BibScreen, i18n.t('screens.bib'))}
{createScreenCollapsibleStack("self-menu", InsaStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}

133
src/screens/Insa/InsaHomeScreen.js
View file

@ -1,85 +1,98 @@
// @flow
import * as React from 'react';
import {ScrollView, StyleSheet} from "react-native";
import {Button, withTheme} from 'react-native-paper';
import CardList from "../../components/Lists/CardList/CardList";
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../utils/withCollapsible";
type Props = {
navigation: Object,
route: Object,
collapsibleStack: Collapsible,
}
type State = {}
const BIB_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/50695561_2124263197597162_2325349608210825216_n.jpg?_nc_cat=109&_nc_sid=8bfeb9&_nc_ohc=tmcV6FWO7_kAX9vfWHU&_nc_ht=scontent-cdg2-1.xx&oh=3b81c76e46b49f7c3a033ea3b07ec212&oe=5EC59B4D";
const RU_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/47123773_2041883702501779_5289372776166064128_o.jpg?_nc_cat=100&_nc_sid=cdbe9c&_nc_ohc=dpuBGlIIy_EAX8CyC0l&_nc_ht=scontent-cdg2-1.xx&oh=5c5bb4f0c7f12b554246f7c9b620a5f3&oe=5EC4DB31";
const ROOM_IMAGE = "https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-9/47041013_2043521689004647_316124496522117120_n.jpg?_nc_cat=103&_nc_sid=8bfeb9&_nc_ohc=bIp8OVJvvSEAX8mKnDZ&_nc_ht=scontent-cdt1-1.xx&oh=b4fef72a645804a849ad30e9e20fca12&oe=5EC29309";
const EMAIL_IMAGE = "https://etud-mel.insa-toulouse.fr/webmail/images/logo-bluemind.png";
const ENT_IMAGE = "https://ent.insa-toulouse.fr/media/org/jasig/portal/layout/tab-column/xhtml-theme/insa/institutional/LogoInsa.png";
export type cardItem = {
title: string,
subtitle: string,
image: string | number,
onPress: () => void,
};
export type cards = Array<cardItem>;
class InsaHomeScreen extends React.Component<Props, State> {
state = {};
colors: Object;
dataset: Array<cards>;
constructor(props) {
constructor(props: Props) {
super(props);
this.colors = props.theme.colors;
const nav = props.navigation;
this.dataset = [
[
{
title: "RU",
subtitle: "the ru",
image: RU_IMAGE,
onPress: () => nav.navigate("self-menu"),
},
],
[
{
title: "AVAILABLE ROOMS",
subtitle: "ROOMS",
image: ROOM_IMAGE,
onPress: () => nav.navigate("available-rooms"),
},
{
title: "BIB",
subtitle: "BIB",
image: BIB_IMAGE,
onPress: () => nav.navigate("bib"),
},
],
[
{
title: "EMAIL",
subtitle: "EMAIL",
image: EMAIL_IMAGE,
onPress: () => nav.navigate("available-rooms"),
},
{
title: "ENT",
subtitle: "ENT",
image: ENT_IMAGE,
onPress: () => nav.navigate("bib"),
},
],
];
}
render() {
const nav = this.props.navigation;
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return (
<ScrollView>
<Button
icon={"information"}
onPress={() => nav.navigate("self-menu")}
>
RU
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("available-rooms")}
>
AVAILABLE ROOMS
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("bib")}
>
BIB
</Button>
<Button// TODO create webview
icon={"information"}
onPress={() => nav.navigate("self-menu")}
>
EMAIL
</Button>
<Button// TODO create webview
icon={"information"}
onPress={() => nav.navigate("self-menu")}
>
ENT
</Button>
</ScrollView>
<CardList
dataset={this.dataset}
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
card: {
margin: 10,
},
header: {
fontSize: 36,
marginBottom: 48
},
textInput: {},
btnContainer: {
marginTop: 5,
marginBottom: 10,
}
});
export default withTheme(InsaHomeScreen);
export default withCollapsible(InsaHomeScreen);

139
src/screens/Websites/WebsitesHomeScreen.js
View file

@ -1,91 +1,92 @@
// @flow
import * as React from 'react';
import {ScrollView, StyleSheet} from "react-native";
import {Button, withTheme} from 'react-native-paper';
import CardList from "../../components/Lists/CardList/CardList";
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {withCollapsible} from "../../utils/withCollapsible";
import type {cards} from "../Insa/InsaHomeScreen";
import {Collapsible} from "react-navigation-collapsible";
type Props = {
navigation: Object,
route: Object,
collapsibleStack: Collapsible,
}
type State = {}
const PROXIMO_IMAGE = require("../../../assets/proximo-logo.png");
const WIKETUD_LINK = "https://wiki.etud.insa-toulouse.fr/resources/assets/wiketud.png?ff051";
const AMICALE_IMAGE = require("../../../assets/amicale.png");
const EE_IMAGE = "https://etud.insa-toulouse.fr/~eeinsat/wp-content/uploads/2019/09/logo-blanc.png";
const TUTORINSA_IMAGE = "https://www.etud.insa-toulouse.fr/~tutorinsa/public/images/logo-gray.png";
const PLANNING_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/89719124_1737599216391004_5007805161305800704_o.jpg?_nc_cat=102&_nc_sid=825194&_nc_ohc=04zvPRn2SzIAX8v3F4q&_nc_ht=scontent-cdg2-1.xx&oh=ecc4af602818481c4192c92b8a45c69b&oe=5EC355E2";
class WebsitesHomeScreen extends React.Component<Props, State> {
class WebsitesHomeScreen extends React.Component<Props> {
state = {};
colors: Object;
dataset: Array<cards>;
constructor(props) {
super(props);
this.colors = props.theme.colors;
const nav = props.navigation;
this.dataset = [
[
{
title: "proximo",
subtitle: "proximo",
image: PROXIMO_IMAGE,
onPress: () => nav.navigate("proximo"),
},
{
title: "planning",
subtitle: "planning",
image: PLANNING_IMAGE,
onPress: () => nav.navigate("planning"),
},
],
[
{
title: "AMICALE",
subtitle: "AMICALE",
image: AMICALE_IMAGE,
onPress: () => nav.navigate("amicale-website"),
},
{
title: "wiketud",
subtitle: "wiketud",
image: WIKETUD_LINK,
onPress: () => nav.navigate("wiketud"),
},
],
[
{
title: "ELUS ETUDIANTS",
subtitle: "ELUS ETUDIANTS",
image: EE_IMAGE,
onPress: () => nav.navigate("elus-etudiants"),
},
{
title: "TUTOR INSA",
subtitle: "TUTOR INSA",
image: TUTORINSA_IMAGE,
onPress: () => nav.navigate("tutor-insa"),
},
],
];
}
render() {
const nav = this.props.navigation;
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return (
<ScrollView>
<Button
icon={"information"}
onPress={() => nav.navigate("amicale-website")}
>
AMICALE
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("elus-etudiants")}
>
ELUS ETUDIANTS
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("tutorinsa")}
>
TUTOR INSA
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("wiketud")}
>
WIKETUD
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("proximo")}
>
PROXIMO
</Button>
<Button
icon={"information"}
onPress={() => nav.navigate("planning")}
>
PLANNING
</Button>
</ScrollView>
<CardList
dataset={this.dataset}
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
card: {
margin: 10,
},
header: {
fontSize: 36,
marginBottom: 48
},
textInput: {},
btnContainer: {
marginTop: 5,
marginBottom: 10,
}
});
export default withTheme(WebsitesHomeScreen);
export default withCollapsible(WebsitesHomeScreen);