From 922f15f3d2d50d2b0e6c5eeb5c1eca2ae16c314b Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 7 Mar 2020 22:31:08 +0100 Subject: [PATCH] Set sort menu with modalize --- screens/Proximo/ProximoListScreen.js | 246 +++++++++++---------------- translations/en.json | 4 +- translations/fr.json | 4 +- 3 files changed, 110 insertions(+), 144 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index f8a2b2c..22cf447 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -3,15 +3,9 @@ import * as React from 'react'; import {FlatList, Image, ScrollView, View} from "react-native"; 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"; - -const sortMode = { - price: "0", - name: '1', -}; +import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper"; function sortPrice(a, b) { return a.price - b.price; @@ -22,17 +16,17 @@ function sortPriceReverse(a, b) { } function sortName(a, b) { - if (a.name < b.name) + if (a.name.toLowerCase() < b.name.toLowerCase()) return -1; - if (a.name > b.name) + if (a.name.toLowerCase() > b.name.toLowerCase()) return 1; return 0; } function sortNameReverse(a, b) { - if (a.name < b.name) + if (a.name.toLowerCase() < b.name.toLowerCase()) return 1; - if (a.name > b.name) + if (a.name.toLowerCase() > b.name.toLowerCase()) return -1; return 0; } @@ -43,13 +37,9 @@ type Props = { } type State = { - currentSortMode: string, - isSortReversed: boolean, - sortPriceIcon: React.Node, - sortNameIcon: React.Node, - modalCurrentDisplayItem: Object, + currentSortMode: number, + modalCurrentDisplayItem: React.Node, currentlyDisplayedData: Array, - menuVisible: boolean, }; /** @@ -62,10 +52,7 @@ export default class ProximoListScreen extends React.Component { shouldFocusSearchBar: boolean; onSearchStringChange: Function; - onSelectSortModeName: Function; - onSelectSortModePrice: Function; onSortMenuPress: Function; - onSortMenuDismiss: Function; renderItem: Function; constructor(props: any) { @@ -75,67 +62,42 @@ export default class ProximoListScreen extends React.Component { this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; this.state = { currentlyDisplayedData: this.originalData, - currentSortMode: sortMode.price, - isSortReversed: false, - sortPriceIcon: '', - sortNameIcon: '', - modalCurrentDisplayItem: {}, - menuVisible: false, + currentSortMode: 1, + modalCurrentDisplayItem: , }; 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); this.renderItem = this.renderItem.bind(this); } - - /** - * 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 + * @param mode The number representing the mode */ - setSortMode(mode: string, isReverse: boolean) { + setSortMode(mode: number) { 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); - } + case 1: + data.sort(sortPrice); break; - case sortMode.name: - if (isReverse) { - data.sort(sortNameReverse); - } else { - data.sort(sortName); - } + case 2: + data.sort(sortPriceReverse); + break; + case 3: + data.sort(sortName); + break; + case 4: + data.sort(sortNameReverse); break; } - this.setupSortIcons(mode, isReverse); + if (this.modalRef.current && mode !== this.state.currentSortMode) { + this.modalRef.current.close(); + } } /** @@ -148,7 +110,7 @@ export default class ProximoListScreen extends React.Component { headerRight: button, headerTitle: title, }); - this.setSortMode(this.state.currentSortMode, this.state.isSortReversed); + this.setSortMode(1); } getSearchBar() { @@ -177,42 +139,6 @@ export default class ProximoListScreen extends React.Component { 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 = - ; - const upSortIcon = - ; - 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, ""); } @@ -241,81 +167,112 @@ export default class ProximoListScreen extends React.Component { }) } - getModalContent() { + getModalItemContent(item: Object) { return ( - {this.state.modalCurrentDisplayItem.name} + {item.name} - {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')} + {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} - {this.state.modalCurrentDisplayItem.price}€ + {item.price}€ + source={{uri: item.image}}/> - {this.state.modalCurrentDisplayItem.description} + {item.description} ); } + getModalSortMenu() { + console.log(this.state.currentSortMode); + return ( + + Sort Order + this.setSortMode(value)} + value={this.state.currentSortMode} + > + + {i18n.t('proximoScreen.sortPrice')} + + + + {i18n.t('proximoScreen.sortPriceReverse')} + + + + {i18n.t('proximoScreen.sortName')} + + + + {i18n.t('proximoScreen.sortNameReverse')} + + + + + ); + } + onListItemPress(item: Object) { this.setState({ - modalCurrentDisplayItem: item + modalCurrentDisplayItem: this.getModalItemContent(item) }); if (this.modalRef.current) { this.modalRef.current.open(); } } - onSelectSortModeName() { - this.sortModeSelected(sortMode.name); - } - - onSelectSortModePrice() { - this.sortModeSelected(sortMode.price); - } - onSortMenuPress() { - this.setState({menuVisible: true}); - console.log('pressed'); - } - - onSortMenuDismiss() { - this.setState({menuVisible: false}); + this.setState({ + modalCurrentDisplayItem: this.getModalSortMenu() + }); + if (this.modalRef.current) { + this.modalRef.current.open(); + } } getSortMenu() { return ( - - } - > - - - - + ); } @@ -327,7 +284,8 @@ export default class ProximoListScreen extends React.Component { description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')} descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} onPress={onPress} - left={props => } + left={props => } right={props => {item.price}€ @@ -344,10 +302,14 @@ export default class ProximoListScreen extends React.Component { console.log("rendering ProximoListScreen"); return ( - - {this.getModalContent()} + + {this.state.modalCurrentDisplayItem}