@plusscommunities/pluss-core-web 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/Comment.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import { toParagraphed } from '../helper';
+import { ProfilePic } from './ProfilePic';
+
+class Comment extends Component {
+  render() {
+    const { comment } = this.props;
+    return (
+      <div key={comment.Id} className="comment">
+        <p className="comment_text">{toParagraphed(comment.Comment)}</p>
+        <div className="comment_bottom">
+          <ProfilePic className="comment_profilePic" size={25} image={comment.User.profilePic} />
+          <p className="comment_name">{comment.User.displayName}</p>
+          <p className="comment_time">{moment.utc(comment.Timestamp).local().format('D MMM YYYY • h:mma')}</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export { Comment };

package/src/components/CommentSection.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+import _ from 'lodash';
+import Textarea from 'react-textarea-autosize';
+import { Text } from './Text';
+import { Comment } from './Comment';
+
+class CommentSection extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      commentInput: '',
+    };
+  }
+
+  onHandleChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  };
+
+  onAddComment = async () => {
+    const { commentInput } = this.state;
+    this.setState({ commentInput: '' });
+    this.props.onAddComment(commentInput);
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.includeTitle && (
+          <Text type="formTitleSmall" className="marginBottom-16">
+            Comments
+          </Text>
+        )}
+        <div className="commentSection">
+          {this.props.comments.map((c) => (
+            <Comment key={c.Id} comment={c} />
+          ))}
+        </div>
+        <div className="commentReply">
+          <div
+            className={`commentReply_button${!_.isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''}`}
+            onClick={this.onAddComment}
+          >
+            <FontAwesome className="commentReply_icon" name="paper-plane-o" />
+          </div>
+          <Textarea
+            id="commentInput"
+            placeholder="Reply here..."
+            type="text"
+            className="commentReply_input"
+            value={this.state.commentInput}
+            onChange={(e) => this.onHandleChange(e)}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export { CommentSection };

package/src/components/index.js

@@ -2,6 +2,8 @@ export * from './AddButton';
 export * from './Attachment';
 export * from './Button';
 export * from './CheckBox';
+export * from './Comment';
+export * from './CommentSection';
 export * from './DatePicker';
 export * from './FileInput';
 export * from './GenericInput';