From 0b17a3585656f3a65e54db8e855c9990ef04095e Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 21 Apr 2020 15:17:00 +0200 Subject: [PATCH] Improved selection screens --- src/components/Lists/CardList/CardList.js | 47 ++++++ src/components/Lists/CardList/CardListItem.js | 42 ++++++ src/navigation/MainTabNavigator.js | 8 +- src/screens/Insa/InsaHomeScreen.js | 133 +++++++++-------- src/screens/Websites/WebsitesHomeScreen.js | 139 +++++++++--------- 5 files changed, 233 insertions(+), 136 deletions(-) create mode 100644 src/components/Lists/CardList/CardList.js create mode 100644 src/components/Lists/CardList/CardListItem.js diff --git a/src/components/Lists/CardList/CardList.js b/src/components/Lists/CardList/CardList.js new file mode 100644 index 0000000..ce8bbff --- /dev/null +++ b/src/components/Lists/CardList/CardList.js @@ -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 +} + +export default class CardList extends React.Component { + + renderItem = ({item}: { item: cards }) => { + let width = '80%'; + if (item.length > 1) { + width = '40%'; + } + return ( + + {item.map((card: cardItem, index: number) => { + return ( + + ); + })} + + ); + }; + + keyExtractor = (item: cards) => item[0].title; + + render() { + return ( + + ); + } +} \ No newline at end of file diff --git a/src/components/Lists/CardList/CardListItem.js b/src/components/Lists/CardList/CardListItem.js new file mode 100644 index 0000000..ffb8f08 --- /dev/null +++ b/src/components/Lists/CardList/CardListItem.js @@ -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 { + + shouldComponentUpdate() { + return false; + } + + render() { + const props = this.props; + const item = props.item; + const source = typeof item.image === "number" + ? item.image + : {uri: item.image}; + return ( + + + + {item.title} + {item.subtitle} + + + ); + } +} \ No newline at end of file diff --git a/src/navigation/MainTabNavigator.js b/src/navigation/MainTabNavigator.js index aecebcc..c985466 100644 --- a/src/navigation/MainTabNavigator.js +++ b/src/navigation/MainTabNavigator.js @@ -169,13 +169,7 @@ function InsaStackComponent() { headerMode={"screen"} screenOptions={defaultScreenOptions} > - + {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'))} diff --git a/src/screens/Insa/InsaHomeScreen.js b/src/screens/Insa/InsaHomeScreen.js index 18ce834..4a1971a 100644 --- a/src/screens/Insa/InsaHomeScreen.js +++ b/src/screens/Insa/InsaHomeScreen.js @@ -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; + + class InsaHomeScreen extends React.Component { state = {}; - colors: Object; + dataset: Array; - 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 ( - - - - - - - + ); } } -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); \ No newline at end of file diff --git a/src/screens/Websites/WebsitesHomeScreen.js b/src/screens/Websites/WebsitesHomeScreen.js index 9dbaeab..d4bcaf1 100644 --- a/src/screens/Websites/WebsitesHomeScreen.js +++ b/src/screens/Websites/WebsitesHomeScreen.js @@ -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 { +class WebsitesHomeScreen extends React.Component { - state = {}; - - colors: Object; + dataset: Array; 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 ( - - - - - - - - + ); } } -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);