diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-12-16 09:39:26 -0500 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-12-16 09:55:00 -0500 |
commit | e0a3deeb79bd5d64d338377e9b49aaaae3975daf (patch) | |
tree | df8c0eba83aada3d0a09a4ed3c77c8c48024ef22 | |
parent | b4eb83d66ff3304653bfc80a1b2f4982351eae73 (diff) | |
download | chat-e0a3deeb79bd5d64d338377e9b49aaaae3975daf.tar.gz chat-e0a3deeb79bd5d64d338377e9b49aaaae3975daf.tar.bz2 chat-e0a3deeb79bd5d64d338377e9b49aaaae3975daf.zip |
Cleaned up floating post components
-rw-r--r-- | web/react/components/posts_view.jsx | 89 |
1 files changed, 54 insertions, 35 deletions
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index aedf431af..a28efbd04 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -444,46 +444,22 @@ export default class PostsView extends React.Component { } } - let floatingTimestamp = null; + let topPost = null; if (this.state.topPostId) { - const topPost = this.props.postList.posts[this.state.topPostId]; - const dateString = Utils.getDateForUnixTicks(topPost.create_at).toDateString(); - - let timestampClass = 'post-list__timestamp'; - if (this.state.isScrolling) { - timestampClass += ' scrolling'; - } - - floatingTimestamp = ( - <div - ref='postTimestamp' - className={timestampClass} - > - <span>{dateString}</span> - </div> - ); - } - - let scrollToBottomArrows = null; - if ($(window).width() <= 768) { - let scrollToBottomArrowsClass = 'post-list__arrows'; - if (this.state.isScrolling && !this.wasAtBottom) { - scrollToBottomArrowsClass += ' scrolling'; - } - - scrollToBottomArrows = ( - <div - ref='postArrows' - className={scrollToBottomArrowsClass} - onClick={this.scrollToBottom} - /> - ); + topPost = this.props.postList.posts[this.state.topPostId]; } return ( <div className={activeClass}> - {floatingTimestamp} - {scrollToBottomArrows} + <FloatingTimestamp + isScrolling={this.state.isScrolling} + post={topPost} + /> + <ScrollToBottomArrows + isScrolling={this.state.isScrolling} + atBottom={this.wasAtBottom} + onClick={this.scrollToBottom} + /> <div ref='postlist' className='post-list-holder-by-time' @@ -521,3 +497,46 @@ PostsView.propTypes = { messageSeparatorTime: React.PropTypes.number, postsToHighlight: React.PropTypes.object }; + +function FloatingTimestamp({isScrolling, post}) { + // only show on mobile + if ($(window).width() > 768) { + return <noscript />; + } + + if (!post) { + return <noscript />; + } + + const dateString = Utils.getDateForUnixTicks(post.create_at).toDateString(); + + let className = 'post-list__timestamp'; + if (isScrolling) { + className += ' scrolling'; + } + + return ( + <div className={className}> + <span>{dateString}</span> + </div> + ); +} + +function ScrollToBottomArrows({isScrolling, atBottom, onClick}) { + // only show on mobile + if ($(window).width() > 768) { + return <noscript />; + } + + let className = 'post-list__arrows'; + if (isScrolling && !atBottom) { + className += ' scrolling'; + } + + return ( + <div + className={className} + onClick={onClick} + /> + ); +} |