API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 17th, 2019
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.22 KB | None | 0 0
raw download clone embed print report
  1. import React, { PureComponent } from 'react';
  2. import {Text, View, Image, TouchableOpacity} from 'react-native';
  3. import {TextButton} from 'react-native-material-buttons';
  4. import Icon from 'react-native-vector-icons/MaterialIcons';
  5. import {withStateHandlers} from 'recompose';
  6. import PropTypes from 'prop-types';
  7. import {Card, Divider} from 'common-components';
  8. import {v2Colors, feedContentStyles, v2ButtonStyles} from 'theme';
  9. import format from 'date-fns/format';
  10. import styles from 'events/styles';
  11. import EventDate from './EventDate';
  12. import * as deviceHelpers from 'utils/phone';
  13.  
  14. const defaultImage = require('icons/image-dummy-flag.png');
  15.  
  16.  
  17. const EventFeedCard = props => {
  18. //prettier-ignore
  19. const source = props.event.ImageURL ? {uri: props.event.ImageURL} : defaultImage;
  20. //prettier-ignore
  21. const contentStyles = deviceHelpers.isTablet ? feedContentStyles.tabletContent : feedContentStyles.content;
  22. //prettier-ignore
  23. const contentFlexer = deviceHelpers.isTablet ? {flex: 2} : {flex: 1};
  24. //prettier-ignore
  25. const eventLocation = `${props.event.Location.City}, ${props.event.Location.StateAbbreviation}`;
  26. const displayTotal = props.isRegistered && !props.event.IsFree;
  27.  
  28. return (
  29. <Card style={props.style}>
  30. <View style={feedContentStyles.header}>
  31. <Text style={feedContentStyles.title}>
  32. {`NFIB ${props.event.LegislatureType.toUpperCase()} EVENT `}
  33. </Text>
  34. <Text style={feedContentStyles.postDate}>
  35. {`On ${format(props.event.StartDate, 'MMM D, YYYY')}`}
  36. </Text>
  37. </View>
  38. {!deviceHelpers.isTablet && (
  39. <View style={feedContentStyles.feedMainImageContainer}>
  40. <Image source={source} style={feedContentStyles.feedMainImage} />
  41. </View>
  42. )}
  43. <Divider />
  44. <View style={contentStyles}>
  45. {deviceHelpers.isTablet && (
  46. <View style={feedContentStyles.feedMainImageContainerTablet}>
  47. <Image source={source} style={feedContentStyles.feedMainImage} />
  48. </View>
  49. )}
  50. <View style={contentFlexer}>
  51. <Text style={feedContentStyles.contentTitle}>
  52. {props.event.Title}
  53. </Text>
  54. <View style={[styles.detailsRow, {marginBottom: 8}]}>
  55. <Icon
  56. name="date-range"
  57. size={16}
  58. color="rgba(0,0,0,0.5)"
  59. style={styles.icon}
  60. />
  61. <EventDate event={props.event} />
  62. </View>
  63. <View style={[styles.detailsRow, {marginBottom: 8}]}>
  64. <Icon
  65. name="location-on"
  66. size={16}
  67. color="rgba(0,0,0,0.5)"
  68. style={styles.icon}
  69. />
  70. <Text style={styles.smallerText}>{eventLocation}</Text>
  71. </View>
  72. {displayTotal && (
  73. <View style={[styles.detailsRow, {marginBottom: 8}]}>
  74. <Icon
  75. name="credit-card"
  76. size={16}
  77. color="rgba(0,0,0,0.54)"
  78. style={styles.icon}
  79. />
  80. <Text style={styles.smallerText}>{`$${props.grandTotal}`}</Text>
  81. </View>
  82. )}
  83. <Text style={feedContentStyles.parragraph}>
  84. {props.event.ShortDescription}
  85. </Text>
  86. </View>
  87. </View>
  88. {props.isRegistered && <Divider style={styles.dividerPusher} />}
  89. <View style={[feedContentStyles.footerActions, styles.footerActions]}>
  90. {props.isRegistered && (
  91. <TouchableOpacity
  92. style={styles.calendarBtn}
  93. onPress={props.handleAddToCalendar}
  94. >
  95. <Text style={styles.gothamBold14Black}>{'ADD TO CALENDAR'}</Text>
  96. </TouchableOpacity>
  97. )}
  98. <TextButton
  99. color={v2Colors.green}
  100. title={'VIEW DETAILS'}
  101. titleColor={v2Colors.white}
  102. onPress={props.mainActionButtonPress}
  103. titleStyle={v2ButtonStyles.titleStyle}
  104. />
  105. </View>
  106. </Card>
  107. );
  108. };
  109.  
  110. EventFeedCard.propTypes = {
  111. event: PropTypes.object.isRequired,
  112. grandTotal: PropTypes.number,
  113. handleAddToCalendar: PropTypes.func,
  114. isOpen: PropTypes.bool,
  115. isRegistered: PropTypes.bool,
  116. mainActionButtonPress: PropTypes.func,
  117. numberOfLines: PropTypes.number,
  118. style: PropTypes.oneOfType([PropTypes.obejct, PropTypes.number]),
  119. toggleContent: PropTypes.func,
  120. };
  121.  
  122. export default withStateHandlers(
  123. {
  124. isOpen: false,
  125. numberOfLines: 4,
  126. },
  127. {
  128. toggleContent: ({isOpen}) => () => {
  129. const numberOfLines = isOpen ? 4 : null;
  130. return {
  131. isOpen: !isOpen,
  132. numberOfLines,
  133. };
  134. },
  135. }
  136. )(EventFeedCard);
  137.  
  138. import React from 'react';
  139. import {Text, View, Image, TouchableOpacity} from 'react-native';
  140. import {TextButton} from 'react-native-material-buttons';
  141. import Icon from 'react-native-vector-icons/MaterialIcons';
  142. import {withStateHandlers} from 'recompose';
  143. import PropTypes from 'prop-types';
  144. import {Card, Divider} from 'common-components';
  145. import {v2Colors, feedContentStyles, v2ButtonStyles} from 'theme';
  146. import format from 'date-fns/format';
  147. import styles from 'events/styles';
  148. import EventDate from './EventDate';
  149. import * as deviceHelpers from 'utils/phone';
  150.  
  151. const defaultImage = require('icons/image-dummy-flag.png');
  152.  
  153. class EventFeedCard extends React.Component {
  154. componentDidMount() {
  155. console.log(this.this);
  156. }
  157.  
  158. // //prettier-ignore
  159. // const source = this.event.ImageURL ? {uri: this.event.ImageURL} : defaultImage;
  160. // //prettier-ignore
  161. // const contentStyles = deviceHelpers.isTablet ? feedContentStyles.tabletContent : feedContentStyles.content;
  162. // //prettier-ignore
  163. // const contentFlexer = deviceHelpers.isTablet ? {flex: 2} : {flex: 1};
  164. // //prettier-ignore
  165. // const eventLocation = `${this.event.Location.City}, ${this.event.Location.StateAbbreviation}`;
  166. // const displayTotal = this.isRegistered && !this.event.IsFree;
  167.  
  168. render() {
  169. return (
  170. <Card style={this.style}>
  171. <View style={feedContentStyles.header}>
  172. <Text style={feedContentStyles.title}>
  173. {`NFIB ${this.event.LegislatureType.toUpperCase()} EVENT `}
  174. </Text>
  175. <Text style={feedContentStyles.postDate}>
  176. {`On ${format(this.event.StartDate, 'MMM D, YYYY')}`}
  177. </Text>
  178. </View>
  179. {!deviceHelpers.isTablet && (
  180. <View style={feedContentStyles.feedMainImageContainer}>
  181. <Image source={source} style={feedContentStyles.feedMainImage} />
  182. </View>
  183. )}
  184. <Divider />
  185. <View style={contentStyles}>
  186. {deviceHelpers.isTablet && (
  187. <View style={feedContentStyles.feedMainImageContainerTablet}>
  188. <Image source={source} style={feedContentStyles.feedMainImage} />
  189. </View>
  190. )}
  191. <View style={contentFlexer}>
  192. <Text style={feedContentStyles.contentTitle}>
  193. {this.event.Title}
  194. </Text>
  195. <View style={[styles.detailsRow, {marginBottom: 8}]}>
  196. <Icon
  197. name="date-range"
  198. size={16}
  199. color="rgba(0,0,0,0.5)"
  200. style={styles.icon}
  201. />
  202. <EventDate event={this.event} />
  203. </View>
  204. <View style={[styles.detailsRow, {marginBottom: 8}]}>
  205. <Icon
  206. name="location-on"
  207. size={16}
  208. color="rgba(0,0,0,0.5)"
  209. style={styles.icon}
  210. />
  211. <Text style={styles.smallerText}>{eventLocation}</Text>
  212. </View>
  213. {displayTotal && (
  214. <View style={[styles.detailsRow, {marginBottom: 8}]}>
  215. <Icon
  216. name="credit-card"
  217. size={16}
  218. color="rgba(0,0,0,0.54)"
  219. style={styles.icon}
  220. />
  221. <Text style={styles.smallerText}>{`$${this.grandTotal}`}</Text>
  222. </View>
  223. )}
  224. <Text style={feedContentStyles.parragraph}>
  225. {this.event.ShortDescription}
  226. </Text>
  227. </View>
  228. </View>
  229. {this.isRegistered && <Divider style={styles.dividerPusher} />}
  230. <View style={[feedContentStyles.footerActions, styles.footerActions]}>
  231. {this.isRegistered && (
  232. <TouchableOpacity
  233. style={styles.calendarBtn}
  234. onPress={this.handleAddToCalendar}
  235. >
  236. <Text style={styles.gothamBold14Black}>{'ADD TO CALENDAR'}</Text>
  237. </TouchableOpacity>
  238. )}
  239. <TextButton
  240. color={v2Colors.green}
  241. title={'VIEW DETAILS'}
  242. titleColor={v2Colors.white}
  243. onPress={this.mainActionButtonPress}
  244. titleStyle={v2ButtonStyles.titleStyle}
  245. />
  246. </View>
  247. </Card>
  248. );
  249. }
  250.  
  251.  
  252. // EventFeedCard.propTypes = {
  253. // event: PropTypes.object.isRequired,
  254. // grandTotal: PropTypes.number,
  255. // handleAddToCalendar: PropTypes.func,
  256. // isOpen: PropTypes.bool,
  257. // isRegistered: PropTypes.bool,
  258. // mainActionButtonPress: PropTypes.func,
  259. // numberOfLines: PropTypes.number,
  260. // style: PropTypes.oneOfType([PropTypes.obejct, PropTypes.number]),
  261. // toggleContent: PropTypes.func,
  262. // };
  263. // }
  264.  
  265.  
  266. export default withStateHandlers(
  267. {
  268. isOpen: false,
  269. numberOfLines: 4,
  270. },
  271. {
  272. toggleContent: ({isOpen}) => () => {
  273. const numberOfLines = isOpen ? 4 : null;
  274. return {
  275. isOpen: !isOpen,
  276. numberOfLines,
  277. };
  278. },
  279. }
  280. )(EventFeedCard);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!