forked from vergnet/application-amicale
Render services in sections
This commit is contained in:
parent
8fca2eac12
commit
bbe343da3b
5 changed files with 209 additions and 75 deletions
|
|
@ -1,11 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Animated, View} from "react-native";
|
||||
import {Animated} from "react-native";
|
||||
import CardListItem from "./CardListItem";
|
||||
|
||||
type Props = {
|
||||
dataset: Array<cards>
|
||||
dataset: Array<cardItem>,
|
||||
isHorizontal: boolean,
|
||||
}
|
||||
|
||||
export type cardItem = {
|
||||
|
|
@ -15,41 +16,46 @@ export type cardItem = {
|
|||
onPress: () => void,
|
||||
};
|
||||
|
||||
export type cards = Array<cardItem>;
|
||||
export type cardList = Array<cardItem>;
|
||||
|
||||
|
||||
export default class CardList extends React.Component<Props> {
|
||||
|
||||
renderItem = ({item}: { item: cards }) => {
|
||||
let width = '80%';
|
||||
if (item.length > 1) {
|
||||
width = '40%';
|
||||
static defaultProps = {
|
||||
isHorizontal: false,
|
||||
}
|
||||
|
||||
renderItem = ({item}: { item: cardItem }) => {
|
||||
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>
|
||||
<CardListItem width={150} item={item} key={item.title}/>
|
||||
);
|
||||
};
|
||||
|
||||
keyExtractor = (item: cards) => item[0].title;
|
||||
keyExtractor = (item: cardItem) => item.title;
|
||||
|
||||
render() {
|
||||
let containerStyle = {
|
||||
...this.props.contentContainerStyle,
|
||||
height: 200,
|
||||
justifyContent: 'space-around',
|
||||
};
|
||||
if (!this.props.isHorizontal) {
|
||||
containerStyle = {
|
||||
...containerStyle,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
height: 'auto',
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Animated.FlatList
|
||||
{...this.props}
|
||||
data={this.props.dataset}
|
||||
renderItem={this.renderItem}
|
||||
keyExtractor={this.keyExtractor}
|
||||
numColumns={this.props.isHorizontal ? undefined : 2}
|
||||
horizontal={this.props.isHorizontal}
|
||||
contentContainerStyle={containerStyle}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export default class CardListItem extends React.Component<Props> {
|
|||
<Card
|
||||
style={{
|
||||
width: props.width,
|
||||
margin: 5,
|
||||
elevation: 3,
|
||||
}}
|
||||
onPress={item.onPress}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import VoteScreen from "../screens/Amicale/VoteScreen";
|
|||
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
|
||||
import AmicaleHomeScreen from "../screens/Amicale/AmicaleHomeScreen";
|
||||
import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
|
||||
import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
|
||||
|
||||
const defaultScreenOptions = {
|
||||
gestureEnabled: true,
|
||||
|
|
@ -92,6 +93,7 @@ function ServicesStackComponent() {
|
|||
screenOptions={defaultScreenOptions}
|
||||
>
|
||||
{createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services'))}
|
||||
{createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
|
||||
|
||||
{createScreenCollapsibleStack("proximo", ServicesStack, ProximoMainScreen, "Proximo")}
|
||||
{createScreenCollapsibleStack(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import type {cards} from "../../components/Lists/CardList/CardList";
|
||||
import type {cardList} from "../../components/Lists/CardList/CardList";
|
||||
import CardList from "../../components/Lists/CardList/CardList";
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
import {withCollapsible} from "../../utils/withCollapsible";
|
||||
import {Collapsible} from "react-navigation-collapsible";
|
||||
import {CommonActions} from "@react-navigation/native";
|
||||
import {Animated} from "react-native";
|
||||
import {Avatar, Card, List} from "react-native-paper";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -25,57 +27,30 @@ 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";
|
||||
|
||||
type listItem = {
|
||||
title: string,
|
||||
description: string,
|
||||
image: string | number,
|
||||
content: cardList,
|
||||
}
|
||||
|
||||
class ServicesScreen extends React.Component<Props> {
|
||||
|
||||
dataset: Array<cards>;
|
||||
studentsDataset: cardList;
|
||||
insaDataset: cardList;
|
||||
|
||||
finalDataset: Array<listItem>
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const nav = props.navigation;
|
||||
this.dataset = [
|
||||
[
|
||||
{
|
||||
title: "RU",
|
||||
subtitle: "the ru",
|
||||
image: RU_IMAGE,
|
||||
onPress: () => nav.navigate("self-menu"),
|
||||
},
|
||||
this.studentsDataset = [
|
||||
{
|
||||
title: "proximo",
|
||||
subtitle: "proximo",
|
||||
image: PROXIMO_IMAGE,
|
||||
onPress: () => nav.navigate("proximo"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
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("bluemind"),
|
||||
},
|
||||
{
|
||||
title: "ENT",
|
||||
subtitle: "ENT",
|
||||
image: ENT_IMAGE,
|
||||
onPress: () => nav.navigate("ent"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "AMICALE",
|
||||
subtitle: "AMICALE",
|
||||
|
|
@ -88,8 +63,6 @@ class ServicesScreen extends React.Component<Props> {
|
|||
image: WIKETUD_LINK,
|
||||
onPress: () => nav.navigate("wiketud"),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "ELUS ETUDIANTS",
|
||||
subtitle: "ELUS ETUDIANTS",
|
||||
|
|
@ -102,8 +75,53 @@ class ServicesScreen extends React.Component<Props> {
|
|||
image: TUTORINSA_IMAGE,
|
||||
onPress: () => nav.navigate("tutorinsa"),
|
||||
},
|
||||
],
|
||||
];
|
||||
this.insaDataset = [
|
||||
{
|
||||
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("bluemind"),
|
||||
},
|
||||
{
|
||||
title: "ENT",
|
||||
subtitle: "ENT",
|
||||
image: ENT_IMAGE,
|
||||
onPress: () => nav.navigate("ent"),
|
||||
},
|
||||
];
|
||||
this.finalDataset = [
|
||||
{
|
||||
title: "AMICALE",
|
||||
description: "youhou",
|
||||
image: AMICALE_IMAGE,
|
||||
content: this.studentsDataset
|
||||
},
|
||||
{
|
||||
title: "INSA",
|
||||
description: "youhou",
|
||||
image: AMICALE_IMAGE,
|
||||
content: this.insaDataset
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -121,11 +139,49 @@ class ServicesScreen extends React.Component<Props> {
|
|||
}
|
||||
};
|
||||
|
||||
getAvatar(props, source: string | number) {
|
||||
if (typeof source === "number")
|
||||
return <Avatar.Image
|
||||
size={48}
|
||||
source={AMICALE_IMAGE}
|
||||
style={{backgroundColor: 'transparent'}}/>
|
||||
else
|
||||
return <List.Icon {...props} icon={source} />
|
||||
}
|
||||
|
||||
renderItem = ({item} : {item: listItem}) => {
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
margin: 5,
|
||||
}}
|
||||
onPress={() => this.props.navigation.navigate("services-section", {data: item})}
|
||||
>
|
||||
<Card.Title
|
||||
title={item.title}
|
||||
subtitle={item.description}
|
||||
left={(props) => this.getAvatar(props, item.image)}
|
||||
right={(props) => <List.Icon {...props} icon="chevron-right" />}
|
||||
/>
|
||||
<CardList
|
||||
dataset={item.content}
|
||||
isHorizontal={true}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
keyExtractor = (item: listItem) => {
|
||||
return item.title;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
||||
return (
|
||||
<CardList
|
||||
dataset={this.dataset}
|
||||
return <Animated.FlatList
|
||||
data={this.finalDataset}
|
||||
renderItem={this.renderItem}
|
||||
keyExtractor={this.keyExtractor}
|
||||
onScroll={onScroll}
|
||||
contentContainerStyle={{
|
||||
paddingTop: containerPaddingTop,
|
||||
|
|
@ -133,7 +189,6 @@ class ServicesScreen extends React.Component<Props> {
|
|||
}}
|
||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
69
src/screens/Services/ServicesSectionScreen.js
Normal file
69
src/screens/Services/ServicesSectionScreen.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import type {cardList} from "../../components/Lists/CardList/CardList";
|
||||
import CardList from "../../components/Lists/CardList/CardList";
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
import {withCollapsible} from "../../utils/withCollapsible";
|
||||
import {Collapsible} from "react-navigation-collapsible";
|
||||
import {CommonActions} from "@react-navigation/native";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
collapsibleStack: Collapsible,
|
||||
}
|
||||
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";
|
||||
|
||||
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";
|
||||
|
||||
type listItem = {
|
||||
title: string,
|
||||
description: string,
|
||||
image: string | number,
|
||||
content: cardList,
|
||||
}
|
||||
|
||||
class ServicesSectionScreen extends React.Component<Props> {
|
||||
|
||||
finalDataset: listItem;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleNavigationParams();
|
||||
}
|
||||
|
||||
handleNavigationParams() {
|
||||
if (this.props.route.params != null) {
|
||||
if (this.props.route.params.data != null) {
|
||||
this.finalDataset = this.props.route.params.data;
|
||||
// reset params to prevent infinite loop
|
||||
this.props.navigation.dispatch(CommonActions.setParams({data: null}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
||||
return <CardList
|
||||
dataset={this.finalDataset.content}
|
||||
isHorizontal={false}
|
||||
onScroll={onScroll}
|
||||
contentContainerStyle={{
|
||||
paddingTop: containerPaddingTop,
|
||||
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
|
||||
}}
|
||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
export default withCollapsible(ServicesSectionScreen);
|
||||
Loading…
Reference in a new issue