Browse Source

Improved layout

keplyx 1 year ago
parent
commit
38ada0c027

+ 49
- 22
components/WebSectionList.js View File

@@ -5,7 +5,7 @@ import ThemeManager from '../utils/ThemeManager';
5 5
 import WebDataManager from "../utils/WebDataManager";
6 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7 7
 import i18n from "i18n-js";
8
-import {ActivityIndicator, Subheading} from 'react-native-paper';
8
+import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper';
9 9
 import {RefreshControl, SectionList, View} from "react-native";
10 10
 
11 11
 type Props = {
@@ -16,13 +16,13 @@ type Props = {
16 16
     renderSectionHeader: React.Node,
17 17
     stickyHeader: boolean,
18 18
     createDataset: Function,
19
-    updateErrorText: string,
20 19
 }
21 20
 
22 21
 type State = {
23 22
     refreshing: boolean,
24 23
     firstLoading: boolean,
25 24
     fetchedData: Object,
25
+    snackbarVisible: boolean
26 26
 };
27 27
 
28 28
 /**
@@ -37,7 +37,7 @@ type State = {
37 37
 export default class WebSectionList extends React.Component<Props, State> {
38 38
 
39 39
     static defaultProps = {
40
-        renderSectionHeader: undefined,
40
+        renderSectionHeader: null,
41 41
         stickyHeader: false,
42 42
     };
43 43
 
@@ -50,6 +50,7 @@ export default class WebSectionList extends React.Component<Props, State> {
50 50
         refreshing: false,
51 51
         firstLoading: true,
52 52
         fetchedData: {},
53
+        snackbarVisible: false
53 54
     };
54 55
 
55 56
     onRefresh: Function;
@@ -57,6 +58,8 @@ export default class WebSectionList extends React.Component<Props, State> {
57 58
     onFetchError: Function;
58 59
     getEmptyRenderItem: Function;
59 60
     getEmptySectionHeader: Function;
61
+    showSnackBar: Function;
62
+    hideSnackBar: Function;
60 63
 
61 64
     constructor() {
62 65
         super();
@@ -66,6 +69,8 @@ export default class WebSectionList extends React.Component<Props, State> {
66 69
         this.onFetchError = this.onFetchError.bind(this);
67 70
         this.getEmptyRenderItem = this.getEmptyRenderItem.bind(this);
68 71
         this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this);
72
+        this.showSnackBar = this.showSnackBar.bind(this);
73
+        this.hideSnackBar = this.hideSnackBar.bind(this);
69 74
     }
70 75
 
71 76
     /**
@@ -112,7 +117,8 @@ export default class WebSectionList extends React.Component<Props, State> {
112 117
             refreshing: false,
113 118
             firstLoading: false
114 119
         });
115
-        this.webDataManager.showUpdateToast(this.props.updateErrorText);
120
+        this.showSnackBar();
121
+        // this.webDataManager.showUpdateToast(this.props.updateErrorText);
116 122
     }
117 123
 
118 124
     /**
@@ -194,30 +200,51 @@ export default class WebSectionList extends React.Component<Props, State> {
194 200
         return item.text
195 201
     }
196 202
 
203
+    showSnackBar() {
204
+        this.setState({snackbarVisible: true})
205
+    }
206
+
207
+    hideSnackBar() {
208
+        this.setState({snackbarVisible: false})
209
+    }
210
+
197 211
     render() {
198 212
         let dataset = this.props.createDataset(this.state.fetchedData);
199 213
         const isEmpty = dataset[0].data.length === 0;
200
-        const shouldRenderHeader = isEmpty || (this.props.renderSectionHeader !== undefined);
214
+        const shouldRenderHeader = !isEmpty || (this.props.renderSectionHeader !== null);
201 215
         if (isEmpty)
202 216
             dataset = this.createEmptyDataset();
203 217
         return (
204
-            <SectionList
205
-                sections={dataset}
206
-                refreshControl={
207
-                    <RefreshControl
208
-                        refreshing={this.state.refreshing}
209
-                        onRefresh={this.onRefresh}
210
-                    />
211
-                }
212
-                renderSectionHeader={shouldRenderHeader ? this.getEmptySectionHeader : this.props.renderSectionHeader}
213
-                renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem}
214
-                style={{minHeight: 300, width: '100%'}}
215
-                stickySectionHeadersEnabled={this.props.stickyHeader}
216
-                contentContainerStyle={
217
-                    isEmpty ?
218
-                        {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
219
-                }
220
-            />
218
+            <View>
219
+                <Snackbar
220
+                    visible={this.state.snackbarVisible}
221
+                    onDismiss={this.hideSnackBar}
222
+                    action={{
223
+                        label: 'OK',
224
+                        onPress: this.hideSnackBar,
225
+                    }}
226
+                    duration={4000}
227
+                >
228
+                    {i18n.t("homeScreen.listUpdateFail")}
229
+                </Snackbar>
230
+                <SectionList
231
+                    sections={dataset}
232
+                    refreshControl={
233
+                        <RefreshControl
234
+                            refreshing={this.state.refreshing}
235
+                            onRefresh={this.onRefresh}
236
+                        />
237
+                    }
238
+                    renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader}
239
+                    renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem}
240
+                    style={{minHeight: 300, width: '100%'}}
241
+                    stickySectionHeadersEnabled={this.props.stickyHeader}
242
+                    contentContainerStyle={
243
+                        isEmpty ?
244
+                            {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
245
+                    }
246
+                />
247
+            </View>
221 248
         );
222 249
     }
223 250
 }

+ 1
- 2
screens/HomeScreen.js View File

@@ -552,8 +552,7 @@ export default class HomeScreen extends React.Component<Props> {
552 552
                 navigation={nav}
553 553
                 refreshTime={REFRESH_TIME}
554 554
                 fetchUrl={DATA_URL}
555
-                renderItem={this.getRenderItem}
556
-                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
555
+                renderItem={this.getRenderItem}/>
557 556
         );
558 557
     }
559 558
 }

+ 1
- 1
screens/Proximo/ProximoListScreen.js View File

@@ -327,7 +327,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
327 327
                 description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
328 328
                 descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
329 329
                 onPress={onPress}
330
-                left={props => <Avatar.Image size={64} source={{uri: item.image}}/>}
330
+                left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64} source={{uri: item.image}}/>}
331 331
                 right={props =>
332 332
                     <Text style={{fontWeight: "bold"}}>
333 333
                         {item.price}€

+ 1
- 2
screens/Proximo/ProximoMainScreen.js View File

@@ -205,8 +205,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
205 205
                 navigation={nav}
206 206
                 refreshTime={0}
207 207
                 fetchUrl={DATA_URL}
208
-                renderItem={this.getRenderItem}
209
-                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
208
+                renderItem={this.getRenderItem}/>
210 209
         );
211 210
     }
212 211
 }

+ 15
- 3
screens/Proxiwash/ProxiwashScreen.js View File

@@ -8,7 +8,7 @@ import WebSectionList from "../../components/WebSectionList";
8 8
 import NotificationsManager from "../../utils/NotificationsManager";
9 9
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
10 10
 import * as Expo from "expo";
11
-import {Divider, IconButton, List, Text} from 'react-native-paper';
11
+import {Divider, IconButton, List, Text, Title} from 'react-native-paper';
12 12
 
13 13
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
14 14
 
@@ -47,6 +47,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
47 47
 
48 48
     onAboutPress: Function;
49 49
     getRenderItem: Function;
50
+    getRenderSectionHeader: Function;
50 51
     createDataset: Function;
51 52
 
52 53
     state = {
@@ -88,9 +89,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
88 89
         stateIcons[MACHINE_STATES.ERREUR] = 'alert';
89 90
 
90 91
         // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current;
91
-        // this.setMinTimeRefresh(30);
92 92
         this.onAboutPress = this.onAboutPress.bind(this);
93 93
         this.getRenderItem = this.getRenderItem.bind(this);
94
+        this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
94 95
         this.createDataset = this.createDataset.bind(this);
95 96
     }
96 97
 
@@ -303,7 +304,18 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
303 304
                 refreshTime={REFRESH_TIME}
304 305
                 fetchUrl={DATA_URL}
305 306
                 renderItem={this.getRenderItem}
306
-                updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
307
+                renderSectionHeader={this.getRenderSectionHeader}/>
308
+        );
309
+    }
310
+
311
+    getRenderSectionHeader({section}: Object) {
312
+        return (
313
+            <Title style={{
314
+                marginTop: 10,
315
+                textAlign: 'center'
316
+            }}>
317
+                {section.title}
318
+            </Title>
307 319
         );
308 320
     }
309 321
 

+ 2
- 15
screens/SelfMenuScreen.js View File

@@ -95,19 +95,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
95 95
 
96 96
     getRenderSectionHeader({section}: Object) {
97 97
         return (
98
-            <Card style={{
99
-                marginLeft: 10,
100
-                marginRight: 10,
101
-                marginTop: 10,
102
-                marginBottom: 10,
103
-                borderRadius: 50
104
-            }}>
105
-                <Title style={{
106
-                    textAlign: 'center',
107
-                    marginTop: 10,
108
-                    marginBottom: 10
109
-                }}>{section.title}</Title>
110
-            </Card>
98
+            <Title>{section.title}</Title>
111 99
         );
112 100
     }
113 101
 
@@ -119,7 +107,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
119 107
             }}>
120 108
                     <Card.Title
121 109
                         title={item.name}
122
-                        titleStyle={{textAlign: 'center'}}/>
110
+                    />
123 111
                     <View style={{
124 112
                         width: '80%',
125 113
                         marginLeft: 'auto',
@@ -159,7 +147,6 @@ export default class SelfMenuScreen extends React.Component<Props> {
159 147
                 fetchUrl={DATA_URL}
160 148
                 renderItem={this.getRenderItem}
161 149
                 renderSectionHeader={this.getRenderSectionHeader}
162
-                updateErrorText={i18n.t("homeScreen.listUpdateFail")}
163 150
                 stickyHeader={true}/>
164 151
         );
165 152
     }

Loading…
Cancel
Save