Converting to Webpack. Stage 1.

1 files changed, 252 insertions, 0 deletions

diff --git a/webapp/components/post_info.jsx b/webapp/components/post_info.jsx
new file mode 100644
index 000000000..0aa71edd7
--- /dev/null
+++ b/webapp/components/post_info.jsx
@@ -0,0 +1,252 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import * as Utils from 'utils/utils.jsx';
+import TimeSince from './time_since.jsx';
+import * as GlobalActions from 'action_creators/global_actions.jsx';
+
+import Constants from 'utils/constants.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+import React from 'react';
+
+export default class PostInfo extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.dropdownPosition = this.dropdownPosition.bind(this);
+        this.handlePermalink = this.handlePermalink.bind(this);
+        this.removePost = this.removePost.bind(this);
+    }
+    dropdownPosition(e) {
+        var position = $('#post-list').height() - $(e.target).offset().top;
+        var dropdown = $(e.target).next('.dropdown-menu');
+        if (position < dropdown.height()) {
+            dropdown.addClass('bottom');
+        }
+    }
+    createDropdown() {
+        var post = this.props.post;
+        var isOwner = this.props.currentUser.id === post.user_id;
+        var isAdmin = Utils.isAdmin(this.props.currentUser.roles);
+
+        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || Utils.isPostEphemeral(post)) {
+            return '';
+        }
+
+        var type = 'Post';
+        if (post.root_id && post.root_id.length > 0) {
+            type = 'Comment';
+        }
+
+        var dropdownContents = [];
+        var dataComments = 0;
+        if (type === 'Post') {
+            dataComments = this.props.commentCount;
+        }
+
+        if (this.props.allowReply === 'true') {
+            dropdownContents.push(
+                <li
+                    key='replyLink'
+                    role='presentation'
+                >
+                    <a
+                        className='link__reply theme'
+                        href='#'
+                        onClick={this.props.handleCommentClick}
+                    >
+                        <FormattedMessage
+                            id='post_info.reply'
+                            defaultMessage='Reply'
+                        />
+                    </a>
+                </li>
+             );
+        }
+
+        if (!Utils.isMobile()) {
+            dropdownContents.push(
+                <li
+                    key='copyLink'
+                    role='presentation'
+                >
+                    <a
+                        href='#'
+                        onClick={this.handlePermalink}
+                    >
+                        <FormattedMessage
+                            id='post_info.permalink'
+                            defaultMessage='Permalink'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
+        if (isOwner || isAdmin) {
+            dropdownContents.push(
+                <li
+                    key='deletePost'
+                    role='presentation'
+                >
+                    <a
+                        href='#'
+                        role='menuitem'
+                        onClick={() => GlobalActions.showDeletePostModal(post, dataComments)}
+                    >
+                        <FormattedMessage
+                            id='post_info.del'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
+        if (isOwner) {
+            dropdownContents.push(
+                <li
+                    key='editPost'
+                    role='presentation'
+                >
+                    <a
+                        href='#'
+                        role='menuitem'
+                        data-toggle='modal'
+                        data-target='#edit_post'
+                        data-refocusid='#post_textbox'
+                        data-title={type}
+                        data-message={post.message}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
+                        data-comments={dataComments}
+                    >
+                        <FormattedMessage
+                            id='post_info.edit'
+                            defaultMessage='Edit'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
+        if (dropdownContents.length === 0) {
+            return '';
+        }
+
+        return (
+            <div>
+                <a
+                    href='#'
+                    className='dropdown-toggle post__dropdown theme'
+                    type='button'
+                    data-toggle='dropdown'
+                    aria-expanded='false'
+                    onClick={this.dropdownPosition}
+                />
+                <ul
+                    className='dropdown-menu'
+                    role='menu'
+                >
+                    {dropdownContents}
+                </ul>
+            </div>
+        );
+    }
+
+    handlePermalink(e) {
+        e.preventDefault();
+        GlobalActions.showGetPostLinkModal(this.props.post);
+    }
+
+    removePost() {
+        GlobalActions.emitRemovePost(this.props.post);
+    }
+    createRemovePostButton(post) {
+        if (!Utils.isPostEphemeral(post)) {
+            return null;
+        }
+
+        return (
+            <a
+                href='#'
+                className='post__remove theme'
+                type='button'
+                onClick={this.removePost}
+            >
+                {'×'}
+            </a>
+        );
+    }
+    render() {
+        var post = this.props.post;
+        var comments = '';
+        var showCommentClass = '';
+        var commentCountText = this.props.commentCount;
+
+        if (this.props.commentCount >= 1) {
+            showCommentClass = ' icon--show';
+        } else {
+            commentCountText = '';
+        }
+
+        if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && !Utils.isPostEphemeral(post)) {
+            comments = (
+                <a
+                    href='#'
+                    className={'comment-icon__container' + showCommentClass}
+                    onClick={this.props.handleCommentClick}
+                >
+                    <span
+                        className='comment-icon'
+                        dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
+                    />
+                    {commentCountText}
+                </a>
+            );
+        }
+
+        var dropdown = this.createDropdown();
+
+        return (
+            <ul className='post__header post__header--info'>
+                <li className='col'>
+                    <TimeSince
+                        eventTime={post.create_at}
+                        sameUser={this.props.sameUser}
+                    />
+                </li>
+                <li className='col col__reply'>
+                    <div
+                        className='dropdown'
+                        ref='dotMenu'
+                    >
+                        {dropdown}
+                    </div>
+                    {comments}
+                    {this.createRemovePostButton(post)}
+                </li>
+            </ul>
+        );
+    }
+}
+
+PostInfo.defaultProps = {
+    post: null,
+    commentCount: 0,
+    isLastComment: false,
+    allowReply: false,
+    sameUser: false
+};
+PostInfo.propTypes = {
+    post: React.PropTypes.object.isRequired,
+    commentCount: React.PropTypes.number.isRequired,
+    isLastComment: React.PropTypes.bool.isRequired,
+    allowReply: React.PropTypes.string.isRequired,
+    handleCommentClick: React.PropTypes.func.isRequired,
+    sameUser: React.PropTypes.bool.isRequired,
+    currentUser: React.PropTypes.object.isRequired
+};