diff options
author | Florian Orben <florian.orben@gmail.com> | 2015-10-15 02:13:48 +0200 |
---|---|---|
committer | Florian Orben <florian.orben@gmail.com> | 2015-10-15 21:25:31 +0200 |
commit | 551b07960ed8ec36c24341f96f2b06fee25ceab3 (patch) | |
tree | 1b05af0c4cb1b111d935aa8fbc6cb3629b7c8742 /web/react/components | |
parent | c890e21cefe135a74a4a7235b704e7af95decc5c (diff) | |
download | chat-551b07960ed8ec36c24341f96f2b06fee25ceab3.tar.gz chat-551b07960ed8ec36c24341f96f2b06fee25ceab3.tar.bz2 chat-551b07960ed8ec36c24341f96f2b06fee25ceab3.zip |
PLT-74: Enable Up Arrow keyboard shortcut to edit your last message
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/create_post.jsx | 23 | ||||
-rw-r--r-- | web/react/components/edit_post_modal.jsx | 22 | ||||
-rw-r--r-- | web/react/components/textbox.jsx | 8 |
3 files changed, 50 insertions, 3 deletions
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 6203e567a..ed6818dc8 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -16,6 +16,7 @@ const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; +const KeyCodes = Constants.KeyCodes; export default class CreatePost extends React.Component { constructor(props) { @@ -35,6 +36,7 @@ export default class CreatePost extends React.Component { this.removePreview = this.removePreview.bind(this); this.onChange = this.onChange.bind(this); this.getFileCount = this.getFileCount.bind(this); + this.handleArrowUp = this.handleArrowUp.bind(this); PostStore.clearDraftUploads(); @@ -172,7 +174,7 @@ export default class CreatePost extends React.Component { } } postMsgKeyPress(e) { - if (e.which === 13 && !e.shiftKey && !e.altKey) { + if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { e.preventDefault(); ReactDOM.findDOMNode(this.refs.textbox).blur(); this.handleSubmit(e); @@ -292,6 +294,24 @@ export default class CreatePost extends React.Component { const draft = PostStore.getDraft(channelId); return draft.previews.length + draft.uploadsInProgress.length; } + handleArrowUp(e) { + if (e.keyCode === KeyCodes.UP && this.state.messageText === '') { + e.preventDefault(); + + const channelId = ChannelStore.getCurrentId(); + const lastPost = PostStore.getCurrentUsersLatestPost(channelId); + var type = (lastPost.root_id && lastPost.root_id.length > 0) ? 'Comment' : 'Post'; + + AppDispatcher.handleViewAction({ + type: ActionTypes.RECIEVED_EDIT_POST, + refoucsId: '#post_textbox', + title: type, + message: lastPost.message, + lastPostId: lastPost.id, + channelId: lastPost.channel_id + }); + } + } render() { let serverError = null; if (this.state.serverError) { @@ -336,6 +356,7 @@ export default class CreatePost extends React.Component { <Textbox onUserInput={this.handleUserInput} onKeyPress={this.postMsgKeyPress} + onKeyDown={this.handleArrowUp} onHeightChange={this.resizePostHolder} messageText={this.state.messageText} createMessage='Write a message...' diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx index 3dbff18cb..38d31d66f 100644 --- a/web/react/components/edit_post_modal.jsx +++ b/web/react/components/edit_post_modal.jsx @@ -5,6 +5,7 @@ var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Textbox = require('./textbox.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); +var PostStore = require('../stores/post_store.jsx'); export default class EditPostModal extends React.Component { constructor() { @@ -14,6 +15,7 @@ export default class EditPostModal extends React.Component { this.handleEditInput = this.handleEditInput.bind(this); this.handleEditKeyPress = this.handleEditKeyPress.bind(this); this.handleUserInput = this.handleUserInput.bind(this); + this.handleEditPostEvent = this.handleEditPostEvent.bind(this); this.state = {editText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''}; } @@ -59,6 +61,18 @@ export default class EditPostModal extends React.Component { handleUserInput(e) { this.setState({editText: e.target.value}); } + handleEditPostEvent(options) { + this.setState({ + editText: options.message || '', + title: options.title || '', + post_id: options.postId || '', + channel_id: options.channelId || '', + comments: options.comments || 0, + refocusId: options.refocusId || '' + }); + + $(React.findDOMNode(this.refs.modal)).modal('show'); + } componentDidMount() { var self = this; @@ -68,12 +82,20 @@ export default class EditPostModal extends React.Component { $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', function onShow(e) { var button = e.relatedTarget; + if (!button) { + return; + } self.setState({editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid')}); }); $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', function onShown() { self.refs.editbox.resize(); }); + + PostStore.addEditPostListener(this.handleEditPostEvent); + } + componentWillUnmount() { + PostStore.removeEditPostListener(this.handleEditPostEvent); } render() { var error = (<div className='form-group'><br /></div>); diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index d51fb9523..86bb42f62 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -9,6 +9,7 @@ const ErrorStore = require('../stores/error_store.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; +const KeyCodes = Constants.KeyCodes; export default class Textbox extends React.Component { constructor(props) { @@ -148,8 +149,10 @@ export default class Textbox extends React.Component { this.doProcessMentions = true; } - if (e.keyCode === 8) { + if (e.keyCode === KeyCodes.BACKSPACE) { this.handleBackspace(e); + } else if (this.props.onKeyDown) { + this.props.onKeyDown(e); } } @@ -318,5 +321,6 @@ Textbox.propTypes = { onUserInput: React.PropTypes.func.isRequired, onKeyPress: React.PropTypes.func.isRequired, onHeightChange: React.PropTypes.func, - createMessage: React.PropTypes.string.isRequired + createMessage: React.PropTypes.string.isRequired, + onKeyDown: React.PropTypes.func }; |