diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-04-13 17:33:42 +0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-04-13 08:33:42 -0400 |
commit | 51549cc0b261bb113f73976adcadd50048f54233 (patch) | |
tree | b8ac23a7618b54805b4ff864d7a1116ceefbff02 /webapp/components | |
parent | 76c4bebf9f6b1a56cc0a3243e7301d3c65dd8fb6 (diff) | |
download | chat-51549cc0b261bb113f73976adcadd50048f54233.tar.gz chat-51549cc0b261bb113f73976adcadd50048f54233.tar.bz2 chat-51549cc0b261bb113f73976adcadd50048f54233.zip |
Adding react scrollbar to the RHS thread (#2693)
* Adding scrollbar to the RHS thread
* Fixing the RHS thread scrolling issue
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/create_comment.jsx | 2 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 97 |
2 files changed, 60 insertions, 39 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 177f282d3..a91c03d58 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -203,7 +203,7 @@ class CreateComment extends React.Component { draft.message = messageText; PostStore.storeCommentDraft(this.props.rootId, draft); - $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); + $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight); this.setState({messageText: messageText}); } handleKeyDown(e) { diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index bbd9f8b28..499e0e7c3 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -13,9 +13,26 @@ import RootPost from './rhs_root_post.jsx'; import Comment from './rhs_comment.jsx'; import Constants from 'utils/constants.jsx'; import FileUploadOverlay from './file_upload_overlay.jsx'; +import Scrollbars from 'react-custom-scrollbars'; import React from 'react'; +export function renderThumbHorizontal(props) { + return ( + <div + {...props} + className='scrollbar--horizontal' + />); +} + +export function renderThumbVertical(props) { + return ( + <div + {...props} + className='scrollbar--vertical' + />); +} + export default class RhsThread extends React.Component { constructor(props) { super(props); @@ -46,15 +63,11 @@ export default class RhsThread extends React.Component { window.addEventListener('resize', this.handleResize); this.mounted = true; - if (!Utils.isMobile()) { - $('.sidebar--right .post-right__scroll').perfectScrollbar(); - } } componentDidUpdate() { if ($('.post-right__scroll')[0]) { - $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); + $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight); } - $('.sidebar--right .post-right__scroll').perfectScrollbar('update'); this.resize(); } componentWillUnmount() { @@ -109,7 +122,7 @@ export default class RhsThread extends React.Component { this.setState({profiles}); } resize() { - $('.post-right__scroll').scrollTop(100000); + $('.post-right__scroll').parent().scrollTop(100000); } render() { const posts = this.state.posts; @@ -180,40 +193,48 @@ export default class RhsThread extends React.Component { fromSearch={this.props.fromSearch} isMentionSearch={this.props.isMentionSearch} /> - <div className='post-right__scroll'> - <RootPost - ref={selected.id} - post={selected} - commentCount={postsArray.length} - user={profile} - currentUser={this.props.currentUser} - /> - <div className='post-right-comments-container'> - {postsArray.map((comPost) => { - let p; - if (UserStore.getCurrentId() === comPost.user_id) { - p = UserStore.getCurrentUser(); - } else { - p = profiles[comPost.user_id]; - } - return ( - <Comment - ref={comPost.id} - key={comPost.id + 'commentKey'} - post={comPost} - user={p} - currentUser={this.props.currentUser} - /> - ); - })} - </div> - <div className='post-create__container'> - <CreateComment - channelId={selected.channel_id} - rootId={selected.id} + <Scrollbars + autoHide={true} + autoHideTimeout={500} + autoHideDuration={500} + renderThumbHorizontal={renderThumbHorizontal} + renderThumbVertical={renderThumbVertical} + > + <div className='post-right__scroll'> + <RootPost + ref={selected.id} + post={selected} + commentCount={postsArray.length} + user={profile} + currentUser={this.props.currentUser} /> + <div className='post-right-comments-container'> + {postsArray.map((comPost) => { + let p; + if (UserStore.getCurrentId() === comPost.user_id) { + p = UserStore.getCurrentUser(); + } else { + p = profiles[comPost.user_id]; + } + return ( + <Comment + ref={comPost.id} + key={comPost.id + 'commentKey'} + post={comPost} + user={p} + currentUser={this.props.currentUser} + /> + ); + })} + </div> + <div className='post-create__container'> + <CreateComment + channelId={selected.channel_id} + rootId={selected.id} + /> + </div> </div> - </div> + </Scrollbars> </div> </div> ); |