|
@@ -1,14 +1,15 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
|
|
4
|
+import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail, H1, H3} from 'native-base';
|
5
|
5
|
import CustomHeader from "../../components/CustomHeader";
|
6
|
|
-import {FlatList, Platform} from "react-native";
|
|
6
|
+import {FlatList, Platform, View, Image} from "react-native";
|
7
|
7
|
import Touchable from 'react-native-platform-touchable';
|
8
|
8
|
import Menu, {MenuItem} from 'react-native-material-menu';
|
9
|
9
|
import i18n from "i18n-js";
|
10
|
10
|
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
11
|
11
|
import ThemeManager from "../../utils/ThemeManager";
|
|
12
|
+import Modalize from 'react-native-modalize';
|
12
|
13
|
|
13
|
14
|
const sortMode = {
|
14
|
15
|
price: "0",
|
|
@@ -49,6 +50,7 @@ type State = {
|
49
|
50
|
isSortReversed: boolean,
|
50
|
51
|
sortPriceIcon: React.Node,
|
51
|
52
|
sortNameIcon: React.Node,
|
|
53
|
+ modalCurrentDisplayItem: Object,
|
52
|
54
|
};
|
53
|
55
|
|
54
|
56
|
/**
|
|
@@ -56,12 +58,15 @@ type State = {
|
56
|
58
|
*/
|
57
|
59
|
export default class ProximoListScreen extends React.Component<Props, State> {
|
58
|
60
|
|
|
61
|
+ modalRef = React.createRef();
|
|
62
|
+
|
59
|
63
|
state = {
|
60
|
64
|
navData: this.props.navigation.getParam('data', []).sort(sortPrice),
|
61
|
65
|
currentSortMode: sortMode.price,
|
62
|
66
|
isSortReversed: false,
|
63
|
67
|
sortPriceIcon: '',
|
64
|
68
|
sortNameIcon: '',
|
|
69
|
+ modalCurrentDisplayItem: {}
|
65
|
70
|
};
|
66
|
71
|
|
67
|
72
|
_menu: Menu;
|
|
@@ -182,13 +187,57 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
182
|
187
|
}
|
183
|
188
|
}
|
184
|
189
|
|
|
190
|
+ getModalContent() {
|
|
191
|
+ return (
|
|
192
|
+ <View style={{
|
|
193
|
+ flex: 1,
|
|
194
|
+ padding: 20
|
|
195
|
+ }}>
|
|
196
|
+ <H1>{this.state.modalCurrentDisplayItem.name}</H1>
|
|
197
|
+ <View style={{
|
|
198
|
+ flexDirection: 'row',
|
|
199
|
+ width: '100%',
|
|
200
|
+ marginTop: 10,
|
|
201
|
+ }}>
|
|
202
|
+ <H3 style={{
|
|
203
|
+ color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
|
|
204
|
+ }}>
|
|
205
|
+ {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
|
206
|
+ </H3>
|
|
207
|
+ <H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
|
|
208
|
+ </View>
|
|
209
|
+
|
|
210
|
+ <Content>
|
|
211
|
+ <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
|
|
212
|
+ <Image style={{flex: 1, resizeMode: "contain"}}
|
|
213
|
+ source={{uri: this.state.modalCurrentDisplayItem.image}}/>
|
|
214
|
+ </View>
|
|
215
|
+ <Text>{this.state.modalCurrentDisplayItem.description}</Text>
|
|
216
|
+ </Content>
|
|
217
|
+ </View>
|
|
218
|
+ );
|
|
219
|
+ }
|
|
220
|
+
|
|
221
|
+ showItemDetails(item: Object) {
|
|
222
|
+ this.setState({
|
|
223
|
+ modalCurrentDisplayItem: item
|
|
224
|
+ });
|
|
225
|
+ if (this.modalRef.current) {
|
|
226
|
+ this.modalRef.current.open();
|
|
227
|
+ }
|
|
228
|
+ }
|
185
|
229
|
render() {
|
186
|
230
|
const nav = this.props.navigation;
|
187
|
|
- const navType = nav.getParam('type', 'Empty');
|
|
231
|
+ const navType = nav.getParam('type', '{name: "Error"}');
|
188
|
232
|
|
189
|
233
|
return (
|
190
|
234
|
<Container>
|
191
|
|
- <CustomHeader hasBackButton={true} navigation={nav} title={navType} rightButton={
|
|
235
|
+ <Modalize ref={this.modalRef}
|
|
236
|
+ adjustToContentHeight
|
|
237
|
+ modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
|
238
|
+ {this.getModalContent()}
|
|
239
|
+ </Modalize>
|
|
240
|
+ <CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
|
192
|
241
|
<Menu
|
193
|
242
|
ref={this.setMenuRef}
|
194
|
243
|
button={
|
|
@@ -220,13 +269,13 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
220
|
269
|
<FlatList
|
221
|
270
|
data={this.state.navData}
|
222
|
271
|
extraData={this.state.navData}
|
223
|
|
- keyExtractor={(item, index) => item.name}
|
|
272
|
+ keyExtractor={(item) => item.name}
|
224
|
273
|
style={{minHeight: 300, width: '100%'}}
|
225
|
274
|
renderItem={({item}) =>
|
226
|
275
|
<ListItem
|
227
|
276
|
thumbnail
|
228
|
277
|
onPress={() => {
|
229
|
|
- console.log(item.image)
|
|
278
|
+ this.showItemDetails(item);
|
230
|
279
|
}}
|
231
|
280
|
>
|
232
|
281
|
<Left>
|