application-amicale/screens/Proximo/ProximoListScreen.js

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);