123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405 |
- // @flow
-
- import * as React from 'react';
- import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
- import {FlatList, Image, Platform, View} from "react-native";
- import Touchable from 'react-native-platform-touchable';
- import Menu, {MenuItem} from 'react-native-material-menu';
- import i18n from "i18n-js";
- import {MaterialCommunityIcons} from "@expo/vector-icons";
- import ThemeManager from "../../utils/ThemeManager";
- import {Modalize} from 'react-native-modalize';
-
- 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,
- }
-
- type State = {
- currentSortMode: string,
- isSortReversed: boolean,
- sortPriceIcon: React.Node,
- sortNameIcon: React.Node,
- modalCurrentDisplayItem: Object,
- currentlyDisplayedData: Array<Object>,
- };
-
- /**
- * 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;
-
- sortMenuRef: Menu;
-
- onMenuRef: Function;
- onSearchStringChange: Function;
- onSelectSortModeName: Function;
- onSelectSortModePrice: Function;
- onSortMenuPress: Function;
- renderItem: Function;
-
- 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: {},
- };
-
- this.onMenuRef = this.onMenuRef.bind(this);
- 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.renderItem = this.renderItem.bind(this);
- }
-
- /**
- * Saves the reference to the sort menu for later use
- *
- * @param ref The menu reference
- */
- onMenuRef(ref: Menu) {
- this.sortMenuRef = ref;
- };
-
- /**
- * 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) {
- 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);
- }
-
- /**
- * 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) {
- this.setState({
- currentSortMode: mode,
- isSortReversed: isReverse
- });
- let data = this.state.currentlyDisplayedData;
- 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);
- if (this.sortMenuRef !== undefined)
- this.sortMenuRef.hide();
- }
-
- /**
- * Set the sort mode from state when components are ready
- */
- componentDidMount() {
- const button = this.getSortMenu.bind(this);
- const title = this.getSearchBar.bind(this);
- this.props.navigation.setOptions({
- headerRight: button,
- headerTitle: title,
- });
- this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
- }
-
- getSearchBar() {
- return (
- <Body style={{width: '100%'}}>
- <Item
- style={{
- width: '100%',
- marginBottom: 7
- }}>
- <MaterialCommunityIcons
- name={'magnify'}
- size={26}
- color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
- <Input
- ref="searchInput"
- placeholder={i18n.t('proximoScreen.search')}
- placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
- onChangeText={this.onSearchStringChange}/>
- </Item>
- </Body>
- );
- }
-
- /**
- * get color depending on quantity available
- *
- * @param availableStock
- * @return
- */
- getStockColor(availableStock: number) {
- let color: string;
- if (availableStock > 3)
- color = ThemeManager.getCurrentThemeVariables().brandSuccess;
- else if (availableStock > 0)
- color = ThemeManager.getCurrentThemeVariables().brandWarning;
- else
- color = ThemeManager.getCurrentThemeVariables().brandDanger;
- return color;
- }
-
- /**
- * 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) {
- const downSortIcon =
- <MaterialCommunityIcons
- name={'sort-descending'}
- color={'#000'}
- size={26}/>;
- const upSortIcon =
- <MaterialCommunityIcons
- name={'sort-ascending'}
- color={'#000'}
- size={26}/>;
- 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;
- }
-
- onSearchStringChange(str: string) {
- this.setState({
- currentlyDisplayedData: this.filterData(str)
- })
- }
-
- getModalContent() {
- return (
- <View style={{
- flex: 1,
- padding: 20
- }}>
- <H1>{this.state.modalCurrentDisplayItem.name}</H1>
- <View style={{
- flexDirection: 'row',
- width: '100%',
- marginTop: 10,
- }}>
- <H3 style={{
- color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
- }}>
- {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
- </H3>
- <H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
- </View>
-
- <Content>
- <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>
- </Content>
- </View>
- );
- }
-
- onListItemPress(item: Object) {
- this.setState({
- modalCurrentDisplayItem: item
- });
- if (this.modalRef.current) {
- this.modalRef.current.open();
- }
- }
-
- onSelectSortModeName() {
- this.sortModeSelected(sortMode.name);
- }
-
- onSelectSortModePrice() {
- this.sortModeSelected(sortMode.price);
- }
-
- onSortMenuPress() {
- this.sortMenuRef.show();
- }
-
-
- getSortMenu() {
- return (
- <Menu
- ref={this.onMenuRef}
- button={
- <Touchable
- style={{padding: 6, marginRight: 10}}
- onPress={this.onSortMenuPress}>
- <MaterialCommunityIcons
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- name={'sort'}
- size={26}/>
- </Touchable>
- }
- >
- <MenuItem
- onPress={this.onSelectSortModeName}>
- {this.state.sortNameIcon}
- {i18n.t('proximoScreen.sortName')}
- </MenuItem>
- <MenuItem
- onPress={this.onSelectSortModePrice}>
- {this.state.sortPriceIcon}
- {i18n.t('proximoScreen.sortPrice')}
- </MenuItem>
- </Menu>
- );
- }
-
- renderItem({item}: Object) {
- const onListItemPress = this.onListItemPress.bind(this, item);
- return (<ListItem
- thumbnail
- onPress={onListItemPress}
- >
- <Left>
- <Thumbnail square source={{uri: item.image}}/>
- </Left>
- <Body>
- <Text style={{marginLeft: 20}}>
- {item.name}
- </Text>
- <Text note style={{
- marginLeft: 20,
- color: this.getStockColor(parseInt(item.quantity))
- }}>
- {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
- </Text>
- </Body>
- <Right>
- <Text style={{fontWeight: "bold"}}>
- {item.price}€
- </Text>
- </Right>
- </ListItem>);
- }
-
- keyExtractor(item: Object) {
- return item.name + item.code;
- }
-
- render() {
- // console.log("rendering ProximoListScreen");
- const nav = this.props.navigation;
- return (
- <View>
- <Modalize ref={this.modalRef}
- adjustToContentHeight
- modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
- {this.getModalContent()}
- </Modalize>
- <FlatList
- data={this.state.currentlyDisplayedData}
- extraData={this.state.currentlyDisplayedData}
- keyExtractor={this.keyExtractor}
- style={{minHeight: 300, width: '100%'}}
- renderItem={this.renderItem}
- />
- </View>
- );
- }
- }
|