diff options
author | Antti Ahti <antti.ahti@gmail.com> | 2015-10-16 12:32:19 +0300 |
---|---|---|
committer | Antti Ahti <antti.ahti@gmail.com> | 2015-10-20 10:07:45 +0300 |
commit | d3f99e821733b7c86ad297c136489678a2a9fffb (patch) | |
tree | 2e6451df65b9b2373ca7af33020c7c9b9aec367d /web/react/components/create_post.jsx | |
parent | 4404912909d1ce445e5d80fb622f7d9fe91ff78d (diff) | |
download | chat-d3f99e821733b7c86ad297c136489678a2a9fffb.tar.gz chat-d3f99e821733b7c86ad297c136489678a2a9fffb.tar.bz2 chat-d3f99e821733b7c86ad297c136489678a2a9fffb.zip |
Handle window resize events in React way
Use the React-way of handling resize events. Essentially store the window size in component state instead of doing some custom handling.
See http://facebook.github.io/react/tips/dom-event-listeners.html
Diffstat (limited to 'web/react/components/create_post.jsx')
-rw-r--r-- | web/react/components/create_post.jsx | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 2581bdcca..035899592 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -37,6 +37,7 @@ export default class CreatePost extends React.Component { this.onChange = this.onChange.bind(this); this.getFileCount = this.getFileCount.bind(this); this.handleArrowUp = this.handleArrowUp.bind(this); + this.handleResize = this.handleResize.bind(this); PostStore.clearDraftUploads(); @@ -48,9 +49,17 @@ export default class CreatePost extends React.Component { uploadsInProgress: draft.uploadsInProgress, previews: draft.previews, submitting: false, - initialText: draft.messageText + initialText: draft.messageText, + windowWidth: Utils.windowWidth(), + windowHeigth: Utils.windowHeight() }; } + handleResize() { + this.setState({ + windowWidth: Utils.windowWidth(), + windowHeight: Utils.windowHeight() + }); + } componentDidUpdate(prevProps, prevState) { if (prevState.previews.length !== this.state.previews.length) { this.resizePostHolder(); @@ -61,6 +70,11 @@ export default class CreatePost extends React.Component { this.resizePostHolder(); return; } + + if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeigth) { + this.resizePostHolder(); + return; + } } getCurrentDraft() { const draft = PostStore.getCurrentDraft(); @@ -194,10 +208,9 @@ export default class CreatePost extends React.Component { PostStore.storeCurrentDraft(draft); } resizePostHolder() { - const height = $(window).height() - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50; + const height = this.state.windowHeigth - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50; $('.post-list-holder-by-time').css('height', `${height}px`); - $(window).trigger('resize'); - if ($(window).width() > 960) { + if (this.state.windowWidth > 960) { $('#post_textbox').focus(); } } @@ -274,9 +287,11 @@ export default class CreatePost extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.onChange); this.resizePostHolder(); + window.addEventListener('resize', this.handleResize); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onChange); + window.removeEventListener('resize', this.handleResize); } onChange() { const channelId = ChannelStore.getCurrentId(); |