application-amicale/screens/Proximo/ProximoListScreen.js

215 lines
6.8 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
2019-06-28 11:35:15 +02:00
import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Body, Icon} from 'native-base';
2019-06-27 10:17:51 +02:00
import CustomHeader from "../../components/CustomHeader";
import {FlatList} from "react-native";
2019-06-27 10:17:51 +02:00
import Touchable from 'react-native-platform-touchable';
import Menu, {MenuItem} from 'react-native-material-menu';
2019-06-27 10:17:51 +02:00
import i18n from "i18n-js";
const IMG_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/img/";
const defaultImage = require('../../assets/image-missing.png');
const sortMode = {
price: "0",
name: '1',
};
function sortPrice(a, b) {
return a.price - b.price;
}
function sortPriceReverse(a, b) {
return b.price - a.price;
}
function sortName(a, b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0;
}
function sortNameReverse(a, b) {
if (a.name < b.name)
return 1;
if (a.name > b.name)
return -1;
return 0;
}
type Props = {
navigation: Object
}
2019-06-27 10:17:51 +02:00
type State = {
navData: Array<Object>,
currentSortMode: string,
isSortReversed: boolean,
sortPriceIcon: React.Node,
sortNameIcon: React.Node,
};
export default class ProximoMainScreen extends React.Component<Props, State> {
state = {
navData: this.props.navigation.getParam('data', []).sort(sortPrice),
currentSortMode: sortMode.price,
isSortReversed: false,
sortPriceIcon: '',
sortNameIcon: '',
};
_menu: Menu;
2019-06-27 10:17:51 +02:00
setMenuRef = (ref: Menu) => {
2019-06-27 10:17:51 +02:00
this._menu = ref;
};
toggleSortMode(mode: string) {
2019-06-27 10:17:51 +02:00
let isReverse = this.state.isSortReversed;
if (mode === this.state.currentSortMode) // reverse mode
isReverse = !isReverse; // this.state not updating on this function cycle
else
isReverse = false;
this.setSortMode(mode, isReverse);
}
setSortMode(mode: string, isReverse: boolean) {
2019-06-27 10:17:51 +02:00
this.setState({
currentSortMode: mode,
isSortReversed: isReverse
});
let data = this.state.navData;
switch (mode) {
case sortMode.price:
if (isReverse) {
data.sort(sortPriceReverse);
} else {
data.sort(sortPrice);
}
break;
case sortMode.name:
if (isReverse) {
data.sort(sortNameReverse);
} else {
data.sort(sortName);
}
break;
}
this.setState({
navData: data,
});
this.setupSortIcons(mode, isReverse);
this._menu.hide();
}
componentDidMount() {
this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
}
setupSortIcons(mode: string, isReverse: boolean) {
2019-06-27 10:17:51 +02:00
const downSortIcon =
<Icon
active
name={'sort-descending'}
type={'MaterialCommunityIcons'}/>;
const upSortIcon =
<Icon
active
name={'sort-ascending'}
type={'MaterialCommunityIcons'}/>;
switch (mode) {
case sortMode.price:
this.setState({sortNameIcon: ''});
if (isReverse) {
this.setState({sortPriceIcon: upSortIcon});
} else {
this.setState({sortPriceIcon: downSortIcon});
}
break;
case sortMode.name:
this.setState({sortPriceIcon: ''});
if (isReverse) {
this.setState({sortNameIcon: upSortIcon});
} else {
this.setState({sortNameIcon: downSortIcon});
}
break;
}
}
render() {
const nav = this.props.navigation;
const navType = nav.getParam('type', 'Empty');
return (
<Container>
<CustomHeader backButton={true} navigation={nav} title={navType} rightMenu={
<Right>
<Menu
ref={this.setMenuRef}
button={
<Touchable
style={{padding: 6}}
onPress={() =>
this._menu.show()
}>
<Icon
style={{color: "#fff"}}
name="sort"
type={'MaterialCommunityIcons'}/>
</Touchable>
}
>
<MenuItem
onPress={() => this.toggleSortMode(sortMode.name)}>
{this.state.sortNameIcon}
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={() => this.toggleSortMode(sortMode.price)}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
</Menu>
</Right>
}/>
<Content>
<FlatList
data={this.state.navData}
extraData={this.state.navData}
keyExtractor={(item, index) => item.name}
style={{minHeight: 300, width: '100%'}}
renderItem={({item}) =>
<ListItem
thumbnail
onPress={() => {
console.log(IMG_URL + item.name + '.jpg')
}}
>
<Left>
<Thumbnail square source={{uri: IMG_URL + item.name + '.jpg'}}/>
2019-06-28 11:35:15 +02:00
</Left>
<Body>
2019-06-27 10:17:51 +02:00
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
2019-06-28 11:35:15 +02:00
</Body>
2019-06-27 10:17:51 +02:00
<Right style={{flex: 1}}>
<Text>
{item.price}
</Text>
</Right>
</ListItem>}
/>
</Content>
</Container>
);
}
}