From 12896bd23eeba79884245c1c29fdc568cf21a7fa Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Mon, 14 Mar 2016 08:50:46 -0400 Subject: Converting to Webpack. Stage 1. --- webapp/components/edit_post_modal.jsx | 224 ++++++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 webapp/components/edit_post_modal.jsx (limited to 'webapp/components/edit_post_modal.jsx') diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx new file mode 100644 index 000000000..0a55b2968 --- /dev/null +++ b/webapp/components/edit_post_modal.jsx @@ -0,0 +1,224 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import ReactDOM from 'react-dom'; +import * as Client from 'utils/client.jsx'; +import * as AsyncClient from 'utils/async_client.jsx'; +import * as GlobalActions from 'action_creators/global_actions.jsx'; +import Textbox from './textbox.jsx'; +import BrowserStore from 'stores/browser_store.jsx'; +import PostStore from 'stores/post_store.jsx'; +import PreferenceStore from 'stores/preference_store.jsx'; + +import Constants from 'utils/constants.jsx'; + +import {intlShape, injectIntl, defineMessages, 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 { + constructor() { + super(); + + this.handleEdit = this.handleEdit.bind(this); + 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.handleKeyDown = this.handleKeyDown.bind(this); + this.onPreferenceChange = this.onPreferenceChange.bind(this); + + this.state = {editText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''}; + } + handleEdit() { + var updatedPost = {}; + updatedPost.message = this.state.editText.trim(); + + if (updatedPost.message.length === 0) { + var tempState = this.state; + delete tempState.editText; + BrowserStore.setItem('edit_state_transfer', tempState); + $('#edit_post').modal('hide'); + GlobalActions.showDeletePostModal(PostStore.getPost(this.state.channel_id, this.state.post_id), this.state.comments); + return; + } + + updatedPost.id = this.state.post_id; + updatedPost.channel_id = this.state.channel_id; + + Client.updatePost(updatedPost, + function success() { + AsyncClient.getPosts(updatedPost.channel_id); + window.scrollTo(0, 0); + }, + function error(err) { + AsyncClient.dispatchError(err, 'updatePost'); + } + ); + + $('#edit_post').modal('hide'); + } + handleEditInput(editMessage) { + this.setState({editText: editMessage}); + } + handleEditKeyPress(e) { + if (!this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { + e.preventDefault(); + ReactDOM.findDOMNode(this.refs.editbox).blur(); + this.handleEdit(e); + } + } + 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 || '' + }); + + $(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', function onHidden() { + self.setState({editText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: ''}); + }); + + $(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-refocusid')}); + }); + + $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', function onShown() { + self.refs.editbox.resize(); + $('#edit_textbox').get(0).focus(); + }); + + $(ReactDOM.findDOMNode(this.refs.modal)).on('hide.bs.modal', function onShown() { + if (self.state.refocusId !== '') { + setTimeout(() => { + $(self.state.refocusId).get(0).focus(); + }); + } + }); + + PostStore.addEditPostListener(this.handleEditPostEvent); + PreferenceStore.addChangeListener(this.onPreferenceChange); + } + componentWillUnmount() { + PostStore.removeEditPostListner(this.handleEditPostEvent); + PreferenceStore.removeChangeListener(this.onPreferenceChange); + } + render() { + var error = (

); + if (this.state.error) { + error = (

); + } + + return ( + + ); + } +} + +EditPostModal.propTypes = { + intl: intlShape.isRequired +}; + +export default injectIntl(EditPostModal); \ No newline at end of file -- cgit v1.2.3-1-g7c22