Merge pull request #22 from kadirahq/fix-5

Multiline comments support #5

package.json

@@ -33,6 +33,8 @@
     "babel-preset-stage-0": "^6.5.0",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
+    "react-render-html": "^0.1.6",
+    "react-textarea-autosize": "^4.0.5",
     "shelljs": "^0.7.4"
   },
   "peerDependencies": {

src/manager/components/CommentForm/index.js

@@ -1,23 +1,21 @@
 import React, { Component } from 'react';
+import Textarea from 'react-textarea-autosize';
 import style from './style';
 
 export default class CommentForm extends Component {
   constructor(props, ...args) {
     super(props, ...args);
     this.state = { text: '' };
-    // bind functions so it can be passed later
-    this.onChange = this.onChange.bind(this);
-    this.onKeyUp = this.onKeyUp.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
   }
 
   onChange(e) {
     const text = e.target.value;
     this.setState({ text });
   }
 
-  onKeyUp(e) {
-    if (e.key === 'Enter') {
+  handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
       this.onSubmit();
     }
   }
@@ -29,24 +27,29 @@ export default class CommentForm extends Component {
       return;
     }
 
-    addComment(text);
+    const processedText = text.replace(/\r?\n/g, '<br />');
+    addComment(processedText);
     this.setState({ text: '' });
+    this.forceUpdate();
   }
 
   render() {
     const { text } = this.state;
     return (
       <div style={style.wrapper}>
-        <input
+        <Textarea
+          ref="commentBox"
           style={style.input}
-          onChange={this.onChange}
-          onKeyUp={this.onKeyUp}
+          onChange={e => this.onChange(e)}
+          onKeyDown={e => this.handleKeyDown(e)}
           placeholder="Add your comment..."
           value={text}
-        />
+        >
+        </Textarea>
         <button
+          ref="submitBtn"
           style={style.submitButton}
-          onClick={this.onSubmit}
+          onClick={() => this.onSubmit()}
         >Submit
         </button>
       </div>

src/manager/components/CommentForm/style.js

@@ -15,6 +15,7 @@ export default {
     display: 'flex',
     alignItems: 'center',
     borderTop: '1px solid rgb(234, 234, 234)',
+    backgroundColor: '#fafafa',
   },
   loginButton: {
     ...button,
@@ -23,18 +24,20 @@ export default {
   },
   submitButton: {
     ...button,
-    borderLeft: '1px solid rgb(234, 234, 234)',
+    cursor: 'pointer',
   },
   input: {
     flex: 1,
     boxSizing: 'border-box',
     height: 30,
+    maxHeight: 70,
     border: 'none',
     outline: 'none',
-    padding: '7px 15px',
+    padding: '5px 10px',
     fontSize: 13,
-    lineHeight: 1.7,
+    lineHeight: 1.6,
     color: 'rgba(0, 0, 0, 0.8)',
     fontFamily: 'sans-serif',
+    resize: 'none',
   },
 }

src/manager/components/CommentList/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import moment from 'moment';
+import renderHTML from 'react-render-html';
 import style from './style';
 
 export default class CommentList extends Component {
@@ -38,7 +39,7 @@ export default class CommentList extends Component {
             <span style={style.commentUser}>{comment.user.name}</span>
             <span style={style.commentTime}>{this.formatTime(comment.time)}</span>
           </div>
-          <span style={style.commentText}>{comment.text}</span>
+          <span style={style.commentText}>{ renderHTML(`<span>${comment.text}</span>`) }</span>
         </div>
       </div>
     );