application-amicale/screens/Proximo/ProximoListScreen.js

363 lines
11 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
import {FlatList, Image, ScrollView, View} from "react-native";
2019-06-27 10:17:51 +02:00
import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager";
import {Modalize} from 'react-native-modalize';
import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper";
2019-06-27 10:17:51 +02:00
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,
route: Object,
}
2019-06-27 10:17:51 +02:00
type State = {
currentSortMode: string,
isSortReversed: boolean,
sortPriceIcon: React.Node,
sortNameIcon: React.Node,
modalCurrentDisplayItem: Object,
currentlyDisplayedData: Array<Object>,
menuVisible: boolean,
};
2019-06-29 15:43:57 +02:00
/**
* Class defining proximo's article list of a certain category.
*/
export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
originalData: Array<Object>;
shouldFocusSearchBar: boolean;
2020-02-23 18:15:30 +01:00
onSearchStringChange: Function;
onSelectSortModeName: Function;
onSelectSortModePrice: Function;
onSortMenuPress: Function;
onSortMenuDismiss: Function;
2020-02-23 18:15:30 +01:00
renderItem: Function;
2019-06-27 10:17:51 +02:00
2020-01-31 16:51:43 +01:00
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.originalData = this.props.route.params['data']['data'];
this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
this.state = {
currentlyDisplayedData: this.originalData,
currentSortMode: sortMode.price,
isSortReversed: false,
sortPriceIcon: '',
sortNameIcon: '',
modalCurrentDisplayItem: {},
menuVisible: false,
};
2020-02-23 18:15:30 +01:00
this.onSearchStringChange = this.onSearchStringChange.bind(this);
this.onSelectSortModeName = this.onSelectSortModeName.bind(this);
this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
this.onSortMenuPress = this.onSortMenuPress.bind(this);
this.onSortMenuDismiss = this.onSortMenuPress.bind(this);
2020-02-11 01:05:24 +01:00
this.renderItem = this.renderItem.bind(this);
2020-01-31 16:51:43 +01:00
}
2019-06-27 10:17:51 +02:00
2019-06-29 15:43:57 +02:00
/**
* Sets the sort mode based on the one selected.
* If the selected mode is the current one, reverse it.
*
* @param mode The string representing the mode
*/
sortModeSelected(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);
}
2019-06-29 15:43:57 +02:00
/**
* Set the current sort mode.
*
* @param mode The string representing the mode
* @param isReverse Whether to use a reverse sort
*/
setSortMode(mode: string, isReverse: boolean) {
2019-06-27 10:17:51 +02:00
this.setState({
currentSortMode: mode,
isSortReversed: isReverse
});
let data = this.state.currentlyDisplayedData;
2019-06-27 10:17:51 +02:00
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.setupSortIcons(mode, isReverse);
}
2019-06-29 15:43:57 +02:00
/**
* Set the sort mode from state when components are ready
*/
2019-06-27 10:17:51 +02:00
componentDidMount() {
2020-03-05 23:40:50 +01:00
const button = this.getSortMenu.bind(this);
const title = this.getSearchBar.bind(this);
this.props.navigation.setOptions({
headerRight: button,
headerTitle: title,
});
2019-06-27 10:17:51 +02:00
this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
}
2020-03-05 23:40:50 +01:00
getSearchBar() {
return (
<Searchbar
placeholder={i18n.t('proximoScreen.search')}
onChangeText={this.onSearchStringChange}
/>
2020-03-05 23:40:50 +01:00
);
}
/**
* get color depending on quantity available
*
* @param availableStock
* @return
*/
getStockColor(availableStock: number) {
let color: string;
if (availableStock > 3)
color = ThemeManager.getCurrentThemeVariables().success;
else if (availableStock > 0)
color = ThemeManager.getCurrentThemeVariables().warning;
else
color = ThemeManager.getCurrentThemeVariables().danger;
return color;
}
2019-06-29 15:43:57 +02:00
/**
* Set the sort menu icon based on the given mode.
*
* @param mode The string representing the mode
* @param isReverse Whether to use a reversed icon
*/
setupSortIcons(mode: string, isReverse: boolean) {
2019-06-27 10:17:51 +02:00
const downSortIcon =
<MaterialCommunityIcons
name={'sort-descending'}
size={26}/>;
2019-06-27 10:17:51 +02:00
const upSortIcon =
<MaterialCommunityIcons
name={'sort-ascending'}
size={26}/>;
2019-06-27 10:17:51 +02:00
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;
}
}
sanitizeString(str: string) {
return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
/**
* Returns only the articles whose name contains str. Case and accents insensitive.
* @param str
* @returns {[]}
*/
filterData(str: string) {
let filteredData = [];
const testStr = this.sanitizeString(str);
const articles = this.originalData;
for (const article of articles) {
const name = this.sanitizeString(article.name);
if (name.includes(testStr)) {
filteredData.push(article)
}
}
return filteredData;
}
2020-02-23 18:15:30 +01:00
onSearchStringChange(str: string) {
this.setState({
currentlyDisplayedData: this.filterData(str)
})
}
getModalContent() {
return (
<View style={{
flex: 1,
padding: 20
}}>
<Title>{this.state.modalCurrentDisplayItem.name}</Title>
<View style={{
flexDirection: 'row',
width: '100%',
marginTop: 10,
}}>
<Subheading style={{
color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
}}>
{this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</Subheading>
<Subheading style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}</Subheading>
</View>
<ScrollView>
<View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
<Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.state.modalCurrentDisplayItem.image}}/>
</View>
<Text>{this.state.modalCurrentDisplayItem.description}</Text>
</ScrollView>
</View>
);
}
onListItemPress(item: Object) {
this.setState({
modalCurrentDisplayItem: item
});
if (this.modalRef.current) {
this.modalRef.current.open();
}
}
2019-09-12 15:01:07 +02:00
2020-02-23 18:15:30 +01:00
onSelectSortModeName() {
2020-02-11 01:05:24 +01:00
this.sortModeSelected(sortMode.name);
}
2020-02-23 18:15:30 +01:00
onSelectSortModePrice() {
2020-02-11 01:05:24 +01:00
this.sortModeSelected(sortMode.price);
}
2020-02-23 18:15:30 +01:00
onSortMenuPress() {
this.setState({menuVisible: true});
console.log('pressed');
2020-02-11 01:05:24 +01:00
}
onSortMenuDismiss() {
this.setState({menuVisible: false});
}
2020-02-11 01:05:24 +01:00
getSortMenu() {
return (
<Menu
visible={this.state.menuVisible}
onDismiss={this.onSortMenuDismiss}
anchor={
<IconButton
icon="sort"
color={ThemeManager.getCurrentThemeVariables().text}
size={26}
onPress={this.onSortMenuPress}
/>
}
>
<Menu.Item onPress={this.onSelectSortModeName} title={i18n.t('proximoScreen.sortName')}/>
<Divider/>
<Menu.Item onPress={this.onSelectSortModePrice} title={i18n.t('proximoScreen.sortPrice')}/>
</Menu>
);
}
2020-02-23 18:15:30 +01:00
renderItem({item}: Object) {
const onPress = this.onListItemPress.bind(this, item);
return (
<List.Item
title={item.name}
description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
onPress={onPress}
2020-03-07 09:15:25 +01:00
left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64} source={{uri: item.image}}/>}
right={props =>
<Text style={{fontWeight: "bold"}}>
{item.price}
</Text>}
/>
);
2020-02-11 01:05:24 +01:00
}
2020-02-23 18:15:30 +01:00
keyExtractor(item: Object) {
2020-02-11 01:05:24 +01:00
return item.name + item.code;
}
2019-06-27 10:17:51 +02:00
render() {
console.log("rendering ProximoListScreen");
2019-06-27 10:17:51 +02:00
return (
2020-03-06 09:12:56 +01:00
<View>
<Modalize ref={this.modalRef}
adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}>
{this.getModalContent()}
</Modalize>
<FlatList
data={this.state.currentlyDisplayedData}
extraData={this.state.currentlyDisplayedData}
2020-02-11 01:05:24 +01:00
keyExtractor={this.keyExtractor}
style={{minHeight: 300, width: '100%'}}
2020-02-11 01:05:24 +01:00
renderItem={this.renderItem}
/>
2020-03-06 09:12:56 +01:00
</View>
2019-06-27 10:17:51 +02:00
);
}
}