forked from vergnet/application-amicale
356 lines
10 KiB
JavaScript
356 lines
10 KiB
JavaScript
// @flow
|
|
|
|
import * as React from 'react';
|
|
import {FlatList, Image, Platform, ScrollView, View} from "react-native";
|
|
import i18n from "i18n-js";
|
|
import CustomModal from "../../components/Custom/CustomModal";
|
|
import {IconButton, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
|
import {stringMatchQuery} from "../../utils/Search";
|
|
import ProximoListItem from "../../components/Lists/ProximoListItem";
|
|
|
|
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.toLowerCase() < b.name.toLowerCase())
|
|
return -1;
|
|
if (a.name.toLowerCase() > b.name.toLowerCase())
|
|
return 1;
|
|
return 0;
|
|
}
|
|
|
|
function sortNameReverse(a, b) {
|
|
if (a.name.toLowerCase() < b.name.toLowerCase())
|
|
return 1;
|
|
if (a.name.toLowerCase() > b.name.toLowerCase())
|
|
return -1;
|
|
return 0;
|
|
}
|
|
|
|
const LIST_ITEM_HEIGHT = 84;
|
|
|
|
type Props = {
|
|
navigation: Object,
|
|
route: Object,
|
|
}
|
|
|
|
type State = {
|
|
currentSortMode: number,
|
|
modalCurrentDisplayItem: React.Node,
|
|
currentSearchString: string,
|
|
};
|
|
|
|
/**
|
|
* Class defining proximo's article list of a certain category.
|
|
*/
|
|
class ProximoListScreen extends React.Component<Props, State> {
|
|
|
|
modalRef: Object;
|
|
listData: Array<Object>;
|
|
shouldFocusSearchBar: boolean;
|
|
|
|
colors: Object;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.listData = this.props.route.params['data']['data'];
|
|
this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
|
|
this.state = {
|
|
currentSearchString: '',
|
|
currentSortMode: 3,
|
|
modalCurrentDisplayItem: null,
|
|
};
|
|
|
|
this.colors = props.theme.colors;
|
|
}
|
|
|
|
|
|
/**
|
|
* Creates the header content
|
|
*/
|
|
componentDidMount() {
|
|
this.props.navigation.setOptions({
|
|
headerRight: this.getSortMenuButton,
|
|
headerTitle: this.getSearchBar,
|
|
headerBackTitleVisible: false,
|
|
headerTitleContainerStyle: Platform.OS === 'ios' ?
|
|
{marginHorizontal: 0, width: '70%'} :
|
|
{marginHorizontal: 0, right: 50, left: 50},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Gets the header search bar
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getSearchBar = () => {
|
|
return (
|
|
<Searchbar
|
|
placeholder={i18n.t('proximoScreen.search')}
|
|
onChangeText={this.onSearchStringChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Gets the sort menu header button
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getSortMenuButton = () => {
|
|
return (
|
|
<IconButton
|
|
icon="sort"
|
|
color={this.colors.text}
|
|
size={26}
|
|
onPress={this.onSortMenuPress}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Callback used when clicking on the sort menu button.
|
|
* It will open the modal to show a sort selection
|
|
*/
|
|
onSortMenuPress = () => {
|
|
this.setState({
|
|
modalCurrentDisplayItem: this.getModalSortMenu()
|
|
});
|
|
if (this.modalRef) {
|
|
this.modalRef.open();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the current sort mode.
|
|
*
|
|
* @param mode The number representing the mode
|
|
*/
|
|
setSortMode(mode: number) {
|
|
this.setState({
|
|
currentSortMode: mode,
|
|
});
|
|
switch (mode) {
|
|
case 1:
|
|
this.listData.sort(sortPrice);
|
|
break;
|
|
case 2:
|
|
this.listData.sort(sortPriceReverse);
|
|
break;
|
|
case 3:
|
|
this.listData.sort(sortName);
|
|
break;
|
|
case 4:
|
|
this.listData.sort(sortNameReverse);
|
|
break;
|
|
}
|
|
if (this.modalRef && mode !== this.state.currentSortMode) {
|
|
this.modalRef.close();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets a color depending on the quantity available
|
|
*
|
|
* @param availableStock The quantity available
|
|
* @return
|
|
*/
|
|
getStockColor(availableStock: number) {
|
|
let color: string;
|
|
if (availableStock > 3)
|
|
color = this.colors.success;
|
|
else if (availableStock > 0)
|
|
color = this.colors.warning;
|
|
else
|
|
color = this.colors.danger;
|
|
return color;
|
|
}
|
|
|
|
/**
|
|
* Callback used when the search changes
|
|
*
|
|
* @param str The new search string
|
|
*/
|
|
onSearchStringChange = (str: string) => {
|
|
this.setState({currentSearchString: str})
|
|
};
|
|
|
|
/**
|
|
* Gets the modal content depending on the given article
|
|
*
|
|
* @param item The article to display
|
|
* @return {*}
|
|
*/
|
|
getModalItemContent(item: Object) {
|
|
return (
|
|
<View style={{
|
|
flex: 1,
|
|
padding: 20
|
|
}}>
|
|
<Title>{item.name}</Title>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
marginTop: 10,
|
|
}}>
|
|
<Subheading style={{
|
|
color: this.getStockColor(parseInt(item.quantity)),
|
|
}}>
|
|
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
|
</Subheading>
|
|
<Subheading style={{marginLeft: 'auto'}}>{item.price}€</Subheading>
|
|
</View>
|
|
|
|
<ScrollView>
|
|
<View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
|
|
<Image style={{flex: 1, resizeMode: "contain"}}
|
|
source={{uri: item.image}}/>
|
|
</View>
|
|
<Text>{item.description}</Text>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Gets the modal content to display a sort menu
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getModalSortMenu() {
|
|
return (
|
|
<View style={{
|
|
flex: 1,
|
|
padding: 20
|
|
}}>
|
|
<Title style={{marginBottom: 10}}>{i18n.t('proximoScreen.sortOrder')}</Title>
|
|
<RadioButton.Group
|
|
onValueChange={value => this.setSortMode(value)}
|
|
value={this.state.currentSortMode}
|
|
>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center'
|
|
}}>
|
|
<RadioButton value={1}/>
|
|
<Text>{i18n.t('proximoScreen.sortPrice')}</Text>
|
|
</View>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center'
|
|
}}>
|
|
<RadioButton value={2}/>
|
|
<Text>{i18n.t('proximoScreen.sortPriceReverse')}</Text>
|
|
</View>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center'
|
|
}}>
|
|
<RadioButton value={3}/>
|
|
<Text>{i18n.t('proximoScreen.sortName')}</Text>
|
|
</View>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center'
|
|
}}>
|
|
<RadioButton value={4}/>
|
|
<Text>{i18n.t('proximoScreen.sortNameReverse')}</Text>
|
|
</View>
|
|
</RadioButton.Group>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Callback used when clicking an article in the list.
|
|
* It opens the modal to show detailed information about the article
|
|
*
|
|
* @param item The article pressed
|
|
*/
|
|
onListItemPress(item: Object) {
|
|
this.setState({
|
|
modalCurrentDisplayItem: this.getModalItemContent(item)
|
|
});
|
|
if (this.modalRef) {
|
|
this.modalRef.open();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets a render item for the given article
|
|
*
|
|
* @param item The article to render
|
|
* @return {*}
|
|
*/
|
|
renderItem = ({item}: Object) => {
|
|
if (stringMatchQuery(item.name, this.state.currentSearchString)) {
|
|
const onPress = this.onListItemPress.bind(this, item);
|
|
const color = this.getStockColor(parseInt(item.quantity));
|
|
return (
|
|
<ProximoListItem
|
|
item={item}
|
|
onPress={onPress}
|
|
color={color}
|
|
height={LIST_ITEM_HEIGHT}
|
|
/>
|
|
);
|
|
} else
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Extracts a key for the given article
|
|
*
|
|
* @param item The article to extract the key from
|
|
* @return {*} The extracted key
|
|
*/
|
|
keyExtractor(item: Object) {
|
|
return item.name + item.code;
|
|
}
|
|
|
|
/**
|
|
* Callback used when receiving the modal ref
|
|
*
|
|
* @param ref
|
|
*/
|
|
onModalRef = (ref: Object) => {
|
|
this.modalRef = ref;
|
|
};
|
|
|
|
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
|
|
|
render() {
|
|
return (
|
|
<View style={{
|
|
height: '100%'
|
|
}}>
|
|
<CustomModal onRef={this.onModalRef}>
|
|
{this.state.modalCurrentDisplayItem}
|
|
</CustomModal>
|
|
{/*$FlowFixMe*/}
|
|
<FlatList
|
|
data={this.listData}
|
|
extraData={this.state.currentSearchString + this.state.currentSortMode}
|
|
keyExtractor={this.keyExtractor}
|
|
renderItem={this.renderItem}
|
|
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
|
removeClippedSubviews={true}
|
|
getItemLayout={this.itemLayout}
|
|
initialNumToRender={10}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTheme(ProximoListScreen);
|