Browse Source

Use card items when viewing the section

Arnaud Vergnet 3 years ago
parent
commit
b31269586b

+ 15
- 14
src/components/Lists/CardList/CardList.js View File

@@ -2,6 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Animated} from "react-native";
5
+import ImageListItem from "./ImageListItem";
5 6
 import CardListItem from "./CardListItem";
6 7
 
7 8
 type Props = {
@@ -26,25 +27,25 @@ export default class CardList extends React.Component<Props> {
26 27
     }
27 28
 
28 29
     renderItem = ({item}: { item: cardItem }) => {
29
-        return (
30
-            <CardListItem item={item} key={item.title}/>
31
-        );
30
+        if (this.props.isHorizontal)
31
+            return <ImageListItem item={item} key={item.title}/>;
32
+        else
33
+            return <CardListItem item={item} key={item.title}/>;
32 34
     };
33 35
 
34 36
     keyExtractor = (item: cardItem) => item.title;
35 37
 
36 38
     render() {
37
-        let containerStyle = {
38
-            ...this.props.contentContainerStyle,
39
-            height: 150,
40
-            justifyContent: 'space-around',
41
-        };
42
-        if (!this.props.isHorizontal) {
39
+        let containerStyle;
40
+        if (this.props.isHorizontal) {
41
+            containerStyle = {
42
+                ...this.props.contentContainerStyle,
43
+                height: 150,
44
+                justifyContent: 'space-around',
45
+            };
46
+        } else {
43 47
             containerStyle = {
44
-                ...containerStyle,
45
-                marginLeft: 'auto',
46
-                marginRight: 'auto',
47
-                height: 'auto',
48
+                ...this.props.contentContainerStyle,
48 49
             }
49 50
         }
50 51
         return (
@@ -53,7 +54,7 @@ export default class CardList extends React.Component<Props> {
53 54
                 data={this.props.dataset}
54 55
                 renderItem={this.renderItem}
55 56
                 keyExtractor={this.keyExtractor}
56
-                numColumns={this.props.isHorizontal ? undefined : 3}
57
+                numColumns={this.props.isHorizontal ? undefined : 2}
57 58
                 horizontal={this.props.isHorizontal}
58 59
                 contentContainerStyle={containerStyle}
59 60
             />

+ 14
- 22
src/components/Lists/CardList/CardListItem.js View File

@@ -1,8 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Text, TouchableRipple} from 'react-native-paper';
5
-import {Image, View} from 'react-native';
4
+import {Caption, Card, Paragraph} from 'react-native-paper';
6 5
 import type {cardItem} from "./CardList";
7 6
 
8 7
 type Props = {
@@ -22,31 +21,24 @@ export default class CardListItem extends React.Component<Props> {
22 21
             ? item.image
23 22
             : {uri: item.image};
24 23
         return (
25
-            <TouchableRipple
24
+            <Card
26 25
                 style={{
27
-                    width: 100,
28
-                    height: 150,
26
+                    width: '40%',
29 27
                     margin: 5,
28
+                    marginLeft: 'auto',
29
+                    marginRight: 'auto',
30 30
                 }}
31 31
                 onPress={item.onPress}
32 32
             >
33
-                <View>
34
-                    <Image
35
-                        style={{
36
-                            width: 100,
37
-                            height: 100,
38
-                            marginLeft: 'auto',
39
-                            marginRight: 'auto',
40
-                        }}
41
-                        source={source}
42
-                    />
43
-                    <Text style={{
44
-                        marginTop: 5,
45
-                        marginLeft: 'auto',
46
-                        marginRight: 'auto',
47
-                    }}>{item.title}</Text>
48
-                </View>
49
-            </TouchableRipple>
33
+                <Card.Cover
34
+                    style={{height: 80}}
35
+                    source={source}
36
+                />
37
+                <Card.Content>
38
+                    <Paragraph>{item.title}</Paragraph>
39
+                    <Caption>{item.subtitle}</Caption>
40
+                </Card.Content>
41
+            </Card>
50 42
         );
51 43
     }
52 44
 }

+ 52
- 0
src/components/Lists/CardList/ImageListItem.js View File

@@ -0,0 +1,52 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Text, TouchableRipple} from 'react-native-paper';
5
+import {Image, View} from 'react-native';
6
+import type {cardItem} from "./CardList";
7
+
8
+type Props = {
9
+    item: cardItem,
10
+}
11
+
12
+export default class ImageListItem extends React.Component<Props> {
13
+
14
+    shouldComponentUpdate() {
15
+        return false;
16
+    }
17
+
18
+    render() {
19
+        const props = this.props;
20
+        const item = props.item;
21
+        const source = typeof item.image === "number"
22
+            ? item.image
23
+            : {uri: item.image};
24
+        return (
25
+            <TouchableRipple
26
+                style={{
27
+                    width: 100,
28
+                    height: 150,
29
+                    margin: 5,
30
+                }}
31
+                onPress={item.onPress}
32
+            >
33
+                <View>
34
+                    <Image
35
+                        style={{
36
+                            width: 100,
37
+                            height: 100,
38
+                            marginLeft: 'auto',
39
+                            marginRight: 'auto',
40
+                        }}
41
+                        source={source}
42
+                    />
43
+                    <Text style={{
44
+                        marginTop: 5,
45
+                        marginLeft: 'auto',
46
+                        marginRight: 'auto',
47
+                    }}>{item.title}</Text>
48
+                </View>
49
+            </TouchableRipple>
50
+        );
51
+    }
52
+}

Loading…
Cancel
Save