summaryrefslogtreecommitdiffstats
path: root/webapp/components/edit_post_modal.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components/edit_post_modal.jsx')
-rw-r--r--webapp/components/edit_post_modal.jsx125
1 files changed, 70 insertions, 55 deletions
diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx
index 4bd23a26d..8be0ba243 100644
--- a/webapp/components/edit_post_modal.jsx
+++ b/webapp/components/edit_post_modal.jsx
@@ -11,35 +11,35 @@ import BrowserStore from 'stores/browser_store.jsx';
import PostStore from 'stores/post_store.jsx';
import MessageHistoryStore from 'stores/message_history_store.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
+import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
var KeyCodes = Constants.KeyCodes;
-const holders = defineMessages({
- editPost: {
- id: 'edit_post.editPost',
- defaultMessage: 'Edit the post...'
- }
-});
-
import React from 'react';
-class EditPostModal extends React.Component {
+export default class EditPostModal extends React.Component {
constructor(props) {
super(props);
this.handleEdit = this.handleEdit.bind(this);
- this.handleEditInput = this.handleEditInput.bind(this);
this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
this.handleEditPostEvent = this.handleEditPostEvent.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
+ this.handleInput = this.handleInput.bind(this);
this.onPreferenceChange = this.onPreferenceChange.bind(this);
+ this.onModalHidden = this.onModalHidden.bind(this);
+ this.onModalShow = this.onModalShow.bind(this);
+ this.onModalShown = this.onModalShown.bind(this);
+ this.onModalHide = this.onModalHide.bind(this);
+ this.onModalKeyDown = this.onModalKeyDown.bind(this);
- this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: '', typing: false};
+ this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''};
}
+
handleEdit() {
var updatedPost = {};
updatedPost.message = this.state.editText.trim();
@@ -77,10 +77,13 @@ class EditPostModal extends React.Component {
$('#edit_post').modal('hide');
}
- handleEditInput(editMessage) {
- const typing = editMessage !== '';
- this.setState({editText: editMessage, typing});
+
+ handleInput(e) {
+ this.setState({
+ editText: e.target.value
+ });
}
+
handleEditKeyPress(e) {
if (!this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
e.preventDefault();
@@ -92,6 +95,7 @@ class EditPostModal extends React.Component {
this.handleSubmit(e);
}
}
+
handleEditPostEvent(options) {
this.setState({
editText: options.message || '',
@@ -100,65 +104,83 @@ class EditPostModal extends React.Component {
post_id: options.postId || '',
channel_id: options.channelId || '',
comments: options.comments || 0,
- refocusId: options.refocusId || '',
- typing: false
+ refocusId: options.refocusId || ''
});
$(ReactDOM.findDOMNode(this.refs.modal)).modal('show');
}
+
handleKeyDown(e) {
if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) {
this.handleEdit(e);
}
}
+
onPreferenceChange() {
this.setState({
ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
});
}
- componentDidMount() {
- var self = this;
- $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', () => {
- self.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: '', typing: false});
- });
+ onModalHidden() {
+ this.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: '', typing: false});
+ }
- $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', (e) => {
- var button = e.relatedTarget;
- if (!button) {
- return;
- }
- self.setState({
- editText: $(button).attr('data-message'),
- originalText: $(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-refocusid'),
- typing: false
- });
+ onModalShow(e) {
+ var button = e.relatedTarget;
+ if (!button) {
+ return;
+ }
+ this.setState({
+ editText: $(button).attr('data-message'),
+ originalText: $(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-refocusid'),
+ typing: false
});
+ }
- $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', () => {
- self.refs.editbox.focus();
- });
+ onModalShown() {
+ this.refs.editbox.focus();
+ }
- $(ReactDOM.findDOMNode(this.refs.modal)).on('hide.bs.modal', () => {
- if (self.state.refocusId !== '') {
- setTimeout(() => {
- $(self.state.refocusId).get(0).focus();
- });
- }
- });
+ onModalHide() {
+ if (this.state.refocusId !== '') {
+ setTimeout(() => {
+ $(this.state.refocusId).get(0).focus();
+ });
+ }
+ }
+ onModalKeyDown(e) {
+ if (e.which === Constants.KeyCodes.ESCAPE) {
+ e.stopPropagation();
+ }
+ }
+
+ componentDidMount() {
+ $(this.refs.modal).on('hidden.bs.modal', this.onModalHidden);
+ $(this.refs.modal).on('show.bs.modal', this.onModalShow);
+ $(this.refs.modal).on('shown.bs.modal', this.onModalShown);
+ $(this.refs.modal).on('hide.bs.modal', this.onModalHide);
+ $(this.refs.modal).on('keydown', this.onModalKeyDown);
PostStore.addEditPostListener(this.handleEditPostEvent);
PreferenceStore.addChangeListener(this.onPreferenceChange);
}
+
componentWillUnmount() {
+ $(this.refs.modal).off('hidden.bs.modal', this.onModalHidden);
+ $(this.refs.modal).off('show.bs.modal', this.onModalShow);
+ $(this.refs.modal).off('shown.bs.modal', this.onModalShown);
+ $(this.refs.modal).off('hide.bs.modal', this.onModalHide);
+ $(this.refs.modal).off('keydown', this.onModalKeyDown);
PostStore.removeEditPostListner(this.handleEditPostEvent);
PreferenceStore.removeChangeListener(this.onPreferenceChange);
}
+
render() {
var error = (<div className='form-group'><br/></div>);
if (this.state.error) {
@@ -198,12 +220,11 @@ class EditPostModal extends React.Component {
</div>
<div className='edit-modal-body modal-body'>
<Textbox
- onUserInput={this.handleEditInput}
+ onInput={this.handleInput}
onKeyPress={this.handleEditKeyPress}
onKeyDown={this.handleKeyDown}
messageText={this.state.editText}
- typing={this.state.typing}
- createMessage={this.props.intl.formatMessage(holders.editPost)}
+ createMessage={Utils.localizeMessage('edit_post.editPost', 'Edit the post...')}
supportsCommands={false}
id='edit_textbox'
ref='editbox'
@@ -238,9 +259,3 @@ class EditPostModal extends React.Component {
);
}
}
-
-EditPostModal.propTypes = {
- intl: intlShape.isRequired
-};
-
-export default injectIntl(EditPostModal);
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-21 16:36:55 +0000