Plugins renaming

client/talk-plugin-replies/ReplyBox.js

@@ -0,0 +1,55 @@
+import React, {Component, PropTypes} from 'react';
+import CommentBox from '../talk-plugin-commentbox/CommentBox';
+
+const name = 'talk-plugin-replies';
+
+class ReplyBox extends Component {
+
+  componentDidMount() {
+    document.getElementById('replyText').focus();
+  }
+
+  cancelReply = () => {
+    this.props.setActiveReplyBox('');
+  };
+
+  render() {
+    const {
+      styles,
+      postComment,
+      assetId,
+      currentUser,
+      addNotification,
+      parentId,
+      commentPostedHandler,
+      maxCharCount,
+      charCountEnable
+    } = this.props;
+    return <div className={`${name}-textarea`} style={styles && styles.container}>
+      <CommentBox
+        maxCharCount={maxCharCount}
+        charCountEnable={charCountEnable}
+        commentPostedHandler={commentPostedHandler}
+        parentId={parentId}
+        onCancel={this.cancelReply}
+        addNotification={addNotification}
+        currentUser={currentUser}
+        assetId={assetId}
+        postComment={postComment}
+        isReply={true} />
+    </div>;
+  }
+}
+
+ReplyBox.propTypes = {
+  charCountEnable: PropTypes.bool.isRequired,
+  maxCharCount: PropTypes.number,
+  setActiveReplyBox: PropTypes.func.isRequired,
+  commentPostedHandler: PropTypes.func,
+  parentId: PropTypes.string,
+  addNotification: PropTypes.func.isRequired,
+  postComment: PropTypes.func.isRequired,
+  assetId: PropTypes.string.isRequired
+};
+
+export default ReplyBox;

client/talk-plugin-replies/ReplyButton.css

@@ -0,0 +1,16 @@
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  margin: 5px 10px 5px 0px;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}

client/talk-plugin-replies/ReplyButton.js

@@ -0,0 +1,28 @@
+import React, {PropTypes} from 'react';
+
+import t from 'coral-framework/services/i18n';
+
+import cn from 'classnames';
+import styles from './ReplyButton.css';
+
+const name = 'talk-plugin-replies';
+
+const ReplyButton = ({onClick}) => {
+  return (
+    <button
+      className={cn(`${name}-reply-button`, styles.button)}
+      onClick={onClick}>
+      <span className={cn(`${name}-label`, styles.label)}>
+        {t('reply')}
+      </span>
+      <i className={cn(`${name}-icon`, 'material-icons', styles.icon)}
+        aria-hidden={true}>reply</i>
+    </button>
+  );
+};
+
+ReplyButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default ReplyButton;

client/talk-plugin-replies/index.js

@@ -0,0 +1,7 @@
+import ReplyBox from './ReplyBox';
+import ReplyButton from './ReplyButton';
+
+export {
+  ReplyBox,
+  ReplyButton
+};