Created
April 19, 2017 18:06
-
-
Save SoHotSoup/2cee5e48e6026ab2ad29b09d063bd22f to your computer and use it in GitHub Desktop.
Article Details screen with connectAnimation.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { connectStyle } from '@shoutem/theme'; | |
| import { | |
| ScrollView, | |
| Screen, | |
| Title, | |
| Caption, | |
| Icon, | |
| Image, | |
| Tile, | |
| RichMedia, | |
| View, | |
| } from '@shoutem/ui'; | |
| import { NavigationBar } from '@shoutem/ui/navigation'; | |
| import * as _ from 'lodash'; | |
| import moment from 'moment'; | |
| import { ext } from '../const'; | |
| import NextArticle from '../components/NextArticle'; | |
| class ArticleDetailsScreen extends React.PureComponent { | |
| static propTypes = { | |
| // The news article to display | |
| article: React.PropTypes.object.isRequired, | |
| // The next article, if this article is defined, the | |
| // up next view will be displayed on this screen | |
| nextArticle: React.PropTypes.object, | |
| // A function that will open the given article, this | |
| // function is required to show the up next view | |
| openArticle: React.PropTypes.func, | |
| }; | |
| renderUpNext() { | |
| const { nextArticle, openArticle } = this.props; | |
| if (nextArticle && openArticle) { | |
| return ( | |
| <NextArticle article={nextArticle} openArticle={openArticle} /> | |
| ); | |
| } | |
| return null; | |
| } | |
| render() { | |
| const { article } = this.props; | |
| const articleImage = article.image ? { uri: _.get(article, 'image.url') } : undefined; | |
| return ( | |
| <Screen styleName="full-screen paper"> | |
| <NavigationBar | |
| styleName="clear" | |
| animationName="solidify" | |
| title={article.title} | |
| share={{ | |
| link: article.link, | |
| title: article.title, | |
| }} | |
| /> | |
| <ScrollView> | |
| <Image | |
| styleName="large-portrait placeholder" | |
| source={articleImage} | |
| animationName="hero" | |
| > | |
| <Tile animationName="hero"> | |
| <Title styleName="centered">{article.title.toUpperCase()}</Title> | |
| {/* Virtual prop makes View pass Tile color style to Caption */} | |
| <View styleName="horizontal md-gutter-top" virtual> | |
| <Caption styleName="collapsible" numberOfLines={1}>{article.newsAuthor}</Caption> | |
| <Caption styleName="md-gutter-left"> | |
| {moment(article.timeUpdated).fromNow()} | |
| </Caption> | |
| </View> | |
| </Tile> | |
| <Icon name="down-arrow" styleName="scroll-indicator" /> | |
| </Image> | |
| <View styleName="solid"> | |
| <RichMedia | |
| body={article.body} | |
| attachments={article.attachments} | |
| /> | |
| {this.renderUpNext()} | |
| </View> | |
| </ScrollView> | |
| </Screen> | |
| ); | |
| } | |
| } | |
| export default connectStyle(ext('ArticleDetailsScreen'))(ArticleDetailsScreen); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment