Browse Source

Improved services list display and enabled paging for easier navigation

Arnaud Vergnet 3 years ago
parent
commit
870cbfdadf

+ 17
- 4
src/components/Lists/CardList/CardList.js View File

@@ -1,13 +1,15 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated} from "react-native";
4
+import {Animated, Dimensions} from "react-native";
5 5
 import ImageListItem from "./ImageListItem";
6 6
 import CardListItem from "./CardListItem";
7
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
7 8
 
8 9
 type Props = {
9 10
     dataset: Array<cardItem>,
10 11
     isHorizontal: boolean,
12
+    contentContainerStyle?: ViewStyle,
11 13
 }
12 14
 
13 15
 export type cardItem = {
@@ -26,9 +28,18 @@ export default class CardList extends React.Component<Props> {
26 28
         isHorizontal: false,
27 29
     }
28 30
 
31
+    windowWidth: number;
32
+    horizontalItemSize: number;
33
+
34
+    constructor(props: Props) {
35
+        super(props);
36
+        this.windowWidth = Dimensions.get('window').width;
37
+        this.horizontalItemSize = this.windowWidth/4; // So that we can fit 3 items and a part of the 4th => user knows he can scroll
38
+    }
39
+
29 40
     renderItem = ({item}: { item: cardItem }) => {
30 41
         if (this.props.isHorizontal)
31
-            return <ImageListItem item={item} key={item.title}/>;
42
+            return <ImageListItem item={item} key={item.title} width={this.horizontalItemSize}/>;
32 43
         else
33 44
             return <CardListItem item={item} key={item.title}/>;
34 45
     };
@@ -39,7 +50,7 @@ export default class CardList extends React.Component<Props> {
39 50
         let containerStyle = {};
40 51
         if (this.props.isHorizontal) {
41 52
             containerStyle = {
42
-                height: 150,
53
+                height: this.horizontalItemSize + 50,
43 54
                 justifyContent: 'space-around',
44 55
             };
45 56
         }
@@ -51,7 +62,9 @@ export default class CardList extends React.Component<Props> {
51 62
                 keyExtractor={this.keyExtractor}
52 63
                 numColumns={this.props.isHorizontal ? undefined : 2}
53 64
                 horizontal={this.props.isHorizontal}
54
-                contentContainerStyle={containerStyle}
65
+                contentContainerStyle={this.props.isHorizontal ? containerStyle : this.props.contentContainerStyle}
66
+                pagingEnabled={this.props.isHorizontal}
67
+                snapToInterval={this.props.isHorizontal ? (this.horizontalItemSize+5)*3 : null}
55 68
             />
56 69
         );
57 70
     }

+ 10
- 8
src/components/Lists/CardList/ImageListItem.js View File

@@ -7,6 +7,7 @@ import type {cardItem} from "./CardList";
7 7
 
8 8
 type Props = {
9 9
     item: cardItem,
10
+    width: number,
10 11
 }
11 12
 
12 13
 export default class ImageListItem extends React.Component<Props> {
@@ -16,16 +17,15 @@ export default class ImageListItem extends React.Component<Props> {
16 17
     }
17 18
 
18 19
     render() {
19
-        const props = this.props;
20
-        const item = props.item;
20
+        const item = this.props.item;
21 21
         const source = typeof item.image === "number"
22 22
             ? item.image
23 23
             : {uri: item.image};
24 24
         return (
25 25
             <TouchableRipple
26 26
                 style={{
27
-                    width: 100,
28
-                    height: 150,
27
+                    width: this.props.width,
28
+                    height: this.props.width + 40,
29 29
                     margin: 5,
30 30
                 }}
31 31
                 onPress={item.onPress}
@@ -33,8 +33,8 @@ export default class ImageListItem extends React.Component<Props> {
33 33
                 <View>
34 34
                     <Image
35 35
                         style={{
36
-                            width: 80,
37
-                            height: 80,
36
+                            width: this.props.width - 20,
37
+                            height: this.props.width - 20,
38 38
                             marginLeft: 'auto',
39 39
                             marginRight: 'auto',
40 40
                         }}
@@ -45,9 +45,11 @@ export default class ImageListItem extends React.Component<Props> {
45 45
                         marginLeft: 'auto',
46 46
                         marginRight: 'auto',
47 47
                         textAlign: 'center'
48
-                    }}>{item.title}</Text>
48
+                    }}>
49
+                        {item.title}
50
+                    </Text>
49 51
                 </View>
50 52
             </TouchableRipple>
51 53
         );
52 54
     }
53
-}
55
+}

Loading…
Cancel
Save