|
@@ -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
|
}
|