1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { View, StyleSheet, Dimensions, TouchableOpacity, } from 'react-native';
|
14 | import { withTheme } from '../config';
|
15 | import Image from '../image/Image';
|
16 | import Text from '../text/Text';
|
17 | import Icon from '../icons/Icon';
|
18 | import FeaturedTile from './FeaturedTile';
|
19 | const Tile = (props) => {
|
20 | const { featured, imageSrc, icon, title, children, caption, titleStyle, onPress, activeOpacity, overlayContainerStyle, captionStyle, iconContainerStyle, imageContainerStyle, containerStyle, contentContainerStyle, titleNumberOfLines, ImageComponent = Image, imageProps = {} } = props, attributes = __rest(props, ["featured", "imageSrc", "icon", "title", "children", "caption", "titleStyle", "onPress", "activeOpacity", "overlayContainerStyle", "captionStyle", "iconContainerStyle", "imageContainerStyle", "containerStyle", "contentContainerStyle", "titleNumberOfLines", "ImageComponent", "imageProps"]);
|
21 | const { width = Dimensions.get('window').width, height = width * 0.8, } = props;
|
22 | if (featured) {
|
23 | const featuredProps = {
|
24 | title,
|
25 | icon,
|
26 | caption,
|
27 | imageSrc,
|
28 | onPress,
|
29 | activeOpacity,
|
30 | containerStyle,
|
31 | imageContainerStyle,
|
32 | overlayContainerStyle,
|
33 | titleStyle,
|
34 | captionStyle,
|
35 | width,
|
36 | height,
|
37 | imageProps,
|
38 | ImageComponent,
|
39 | };
|
40 | return <FeaturedTile {...featuredProps}/>;
|
41 | }
|
42 | return (<TouchableOpacity {...attributes} onPress={onPress} activeOpacity={activeOpacity} style={StyleSheet.flatten([
|
43 | {
|
44 | width,
|
45 | height,
|
46 | },
|
47 | containerStyle && containerStyle,
|
48 | ])}>
|
49 | <ImageComponent resizeMode="cover" source={imageSrc} containerStyle={StyleSheet.flatten([
|
50 | styles.imageContainer,
|
51 | imageContainerStyle && imageContainerStyle,
|
52 | ])} style={Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { alignItems: 'center', justifyContent: 'center' })} {...imageProps}>
|
53 | <View style={StyleSheet.flatten([
|
54 | styles.iconContainer,
|
55 | iconContainerStyle && iconContainerStyle,
|
56 | ])}>
|
57 | {icon && <Icon {...icon}/>}
|
58 | </View>
|
59 | </ImageComponent>
|
60 |
|
61 | <View style={StyleSheet.flatten([
|
62 | styles.contentContainer,
|
63 | contentContainerStyle && contentContainerStyle,
|
64 | ])}>
|
65 | <Text testID="tileTitle" h4={!titleStyle || !('fontSize' in titleStyle)} style={StyleSheet.flatten([styles.text, titleStyle && titleStyle])} numberOfLines={titleNumberOfLines}>
|
66 | {title}
|
67 | </Text>
|
68 | {children}
|
69 | </View>
|
70 | </TouchableOpacity>);
|
71 | };
|
72 | const styles = StyleSheet.create({
|
73 | imageContainer: {
|
74 | flex: 2,
|
75 | },
|
76 | text: {
|
77 | backgroundColor: 'rgba(0,0,0,0)',
|
78 | marginBottom: 5,
|
79 | },
|
80 | contentContainer: {
|
81 | paddingTop: 15,
|
82 | paddingBottom: 5,
|
83 | paddingLeft: 15,
|
84 | paddingRight: 15,
|
85 | },
|
86 | iconContainer: {
|
87 | justifyContent: 'center',
|
88 | alignItems: 'center',
|
89 | alignSelf: 'center',
|
90 | },
|
91 | });
|
92 | export { Tile };
|
93 | export default withTheme(Tile, 'Tile');
|