@plusscommunities/pluss-circles-web 1.0.17-beta.0 → 1.0.17

package/dist/index.cjs.js

@@ -1578,6 +1578,17 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onReply", function (m) {
+      _this.setState({
+        replyingTo: m
+      });
+
+      if (m) {
+        var input = document.getElementById('messageInput');
+        if (input) input.focus();
+      }
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleMessageDateChange", function (date) {
       _this.setState({
         messageDate: date,
@@ -1649,6 +1660,10 @@ var Circle = /*#__PURE__*/function (_Component) {
         return;
       }
 
+      if (_this.state.replyingTo) {
+        message.replyingTo = _this.state.replyingTo;
+      }
+
       var clonedMessage = ___default['default'].cloneDeep(message);
 
       clonedMessage.uploading = true;
@@ -1671,6 +1686,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
 
       setTimeout(function () {
+        _this.onReply(null);
+
         _this.scrollToBottom();
 
         _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
@@ -1688,7 +1705,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       messages: [],
       images: [],
       files: [],
-      membersExpanded: true
+      membersExpanded: true,
+      replyingTo: null
     };
     return _this;
   }
@@ -1861,6 +1879,8 @@ var Circle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMessage",
     value: function renderMessage(m) {
+      var _this6 = this;
+
       if (m.system) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: m._id,
@@ -1889,7 +1909,12 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
         type: "body",
         className: "message_name"
-      }, m.user.name), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "message_replyBubble"
+      }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        type: "body",
+        className: "message_text"
+      }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "message_bubble"
       }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
         type: "body",
@@ -1910,7 +1935,14 @@ var Circle = /*#__PURE__*/function (_Component) {
           key: i,
           white: isSelf
         });
-      }))))));
+      }))), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "message_reply"
+      }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        type: "button",
+        onClick: function onClick() {
+          _this6.onReply(m);
+        }
+      }, "Reply")))));
     }
   }, {
     key: "renderHeaderRight",
@@ -2006,10 +2038,39 @@ var Circle = /*#__PURE__*/function (_Component) {
         });
       }))));
     }
+  }, {
+    key: "renderReplyTo",
+    value: function renderReplyTo() {
+      var _this7 = this;
+
+      if (!this.state.replyingTo) {
+        return null;
+      }
+
+      var m = this.state.replyingTo;
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "chat_replyTo"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "chat_replyTo_container"
+      }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        type: "h5"
+      }, "Replying to ", m && m.user && !___default['default'].isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !___default['default'].isEmpty(m.text) && /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        type: "body"
+      }, m.text.substr(0, 50))), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "chat_replyTo_remove"
+      }, /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+        className: "removeIcon",
+        icon: "close",
+        onClick: function onClick() {
+          _this7.onReply(null);
+        },
+        colour: Colours$1.COLOUR_DUSK
+      })));
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this8 = this;
 
       return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, {
         fullPage: true,
@@ -2046,8 +2107,8 @@ var Circle = /*#__PURE__*/function (_Component) {
         value: this.state.messageDateText,
         readOnly: true,
         onClick: function onClick() {
-          return _this6.setState({
-            showMessageDate: !_this6.state.showMessageDate
+          return _this8.setState({
+            showMessageDate: !_this8.state.showMessageDate
           });
         },
         rightContent: !___default['default'].isEmpty(this.state.messageDate) && /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
@@ -2064,13 +2125,13 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "chat_newMessage"
-      }, this.renderChatInput()), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React__default['default'].createElement("div", {
         ref: function ref(_ref6) {
-          return _this6.chat = _ref6;
+          return _this8.chat = _ref6;
         },
         className: "chat_messages"
       }, ___default['default'].isEmpty(this.state.messages) && !___default['default'].isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {
-        return _this6.renderMessage(m);
+        return _this8.renderMessage(m);
       }))))));
     }
   }]);

package/dist/index.esm.js

@@ -1536,6 +1536,17 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onReply", function (m) {
+      _this.setState({
+        replyingTo: m
+      });
+
+      if (m) {
+        var input = document.getElementById('messageInput');
+        if (input) input.focus();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleMessageDateChange", function (date) {
       _this.setState({
         messageDate: date,
@@ -1607,6 +1618,10 @@ var Circle = /*#__PURE__*/function (_Component) {
         return;
       }
 
+      if (_this.state.replyingTo) {
+        message.replyingTo = _this.state.replyingTo;
+      }
+
       var clonedMessage = _.cloneDeep(message);
 
       clonedMessage.uploading = true;
@@ -1629,6 +1644,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
 
       setTimeout(function () {
+        _this.onReply(null);
+
         _this.scrollToBottom();
 
         _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
@@ -1646,7 +1663,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       messages: [],
       images: [],
       files: [],
-      membersExpanded: true
+      membersExpanded: true,
+      replyingTo: null
     };
     return _this;
   }
@@ -1819,6 +1837,8 @@ var Circle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMessage",
     value: function renderMessage(m) {
+      var _this6 = this;
+
       if (m.system) {
         return /*#__PURE__*/React.createElement("div", {
           key: m._id,
@@ -1847,7 +1867,12 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "body",
         className: "message_name"
-      }, m.user.name), /*#__PURE__*/React.createElement("div", {
+      }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React.createElement("div", {
+        className: "message_replyBubble"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "body",
+        className: "message_text"
+      }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React.createElement("div", {
         className: "message_bubble"
       }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "body",
@@ -1868,7 +1893,14 @@ var Circle = /*#__PURE__*/function (_Component) {
           key: i,
           white: isSelf
         });
-      }))))));
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "message_reply"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "button",
+        onClick: function onClick() {
+          _this6.onReply(m);
+        }
+      }, "Reply")))));
     }
   }, {
     key: "renderHeaderRight",
@@ -1964,10 +1996,39 @@ var Circle = /*#__PURE__*/function (_Component) {
         });
       }))));
     }
+  }, {
+    key: "renderReplyTo",
+    value: function renderReplyTo() {
+      var _this7 = this;
+
+      if (!this.state.replyingTo) {
+        return null;
+      }
+
+      var m = this.state.replyingTo;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "chat_replyTo"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "chat_replyTo_container"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "h5"
+      }, "Replying to ", m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !_.isEmpty(m.text) && /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "body"
+      }, m.text.substr(0, 50))), /*#__PURE__*/React.createElement("div", {
+        className: "chat_replyTo_remove"
+      }, /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
+        className: "removeIcon",
+        icon: "close",
+        onClick: function onClick() {
+          _this7.onReply(null);
+        },
+        colour: Colours$1.COLOUR_DUSK
+      })));
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this8 = this;
 
       return /*#__PURE__*/React.createElement(Components$1.OverlayPage, {
         fullPage: true,
@@ -2004,8 +2065,8 @@ var Circle = /*#__PURE__*/function (_Component) {
         value: this.state.messageDateText,
         readOnly: true,
         onClick: function onClick() {
-          return _this6.setState({
-            showMessageDate: !_this6.state.showMessageDate
+          return _this8.setState({
+            showMessageDate: !_this8.state.showMessageDate
           });
         },
         rightContent: !_.isEmpty(this.state.messageDate) && /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
@@ -2022,13 +2083,13 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat"
       }, /*#__PURE__*/React.createElement("div", {
         className: "chat_newMessage"
-      }, this.renderChatInput()), /*#__PURE__*/React.createElement("div", {
+      }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref6) {
-          return _this6.chat = _ref6;
+          return _this8.chat = _ref6;
         },
         className: "chat_messages"
       }, _.isEmpty(this.state.messages) && !_.isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {
-        return _this6.renderMessage(m);
+        return _this8.renderMessage(m);
       }))))));
     }
   }]);

package/dist/index.umd.js

@@ -1560,6 +1560,17 @@
         });
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onReply", function (m) {
+        _this.setState({
+          replyingTo: m
+        });
+
+        if (m) {
+          var input = document.getElementById('messageInput');
+          if (input) input.focus();
+        }
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleMessageDateChange", function (date) {
         _this.setState({
           messageDate: date,
@@ -1631,6 +1642,10 @@
           return;
         }
 
+        if (_this.state.replyingTo) {
+          message.replyingTo = _this.state.replyingTo;
+        }
+
         var clonedMessage = ___default['default'].cloneDeep(message);
 
         clonedMessage.uploading = true;
@@ -1653,6 +1668,8 @@
         });
 
         setTimeout(function () {
+          _this.onReply(null);
+
           _this.scrollToBottom();
 
           _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
@@ -1670,7 +1687,8 @@
         messages: [],
         images: [],
         files: [],
-        membersExpanded: true
+        membersExpanded: true,
+        replyingTo: null
       };
       return _this;
     }
@@ -1843,6 +1861,8 @@
     }, {
       key: "renderMessage",
       value: function renderMessage(m) {
+        var _this6 = this;
+
         if (m.system) {
           return /*#__PURE__*/React__default['default'].createElement("div", {
             key: m._id,
@@ -1871,7 +1891,12 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "body",
           className: "message_name"
-        }, m.user.name), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "message_replyBubble"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "body",
+          className: "message_text"
+        }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_bubble"
         }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "body",
@@ -1892,7 +1917,14 @@
             key: i,
             white: isSelf
           });
-        }))))));
+        }))), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "message_reply"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "button",
+          onClick: function onClick() {
+            _this6.onReply(m);
+          }
+        }, "Reply")))));
       }
     }, {
       key: "renderHeaderRight",
@@ -1988,10 +2020,39 @@
           });
         }))));
       }
+    }, {
+      key: "renderReplyTo",
+      value: function renderReplyTo() {
+        var _this7 = this;
+
+        if (!this.state.replyingTo) {
+          return null;
+        }
+
+        var m = this.state.replyingTo;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "chat_replyTo"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "chat_replyTo_container"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "h5"
+        }, "Replying to ", m && m.user && !___default['default'].isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !___default['default'].isEmpty(m.text) && /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "body"
+        }, m.text.substr(0, 50))), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "chat_replyTo_remove"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+          className: "removeIcon",
+          icon: "close",
+          onClick: function onClick() {
+            _this7.onReply(null);
+          },
+          colour: Colours$1.COLOUR_DUSK
+        })));
+      }
     }, {
       key: "render",
       value: function render() {
-        var _this6 = this;
+        var _this8 = this;
 
         return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, {
           fullPage: true,
@@ -2028,8 +2089,8 @@
           value: this.state.messageDateText,
           readOnly: true,
           onClick: function onClick() {
-            return _this6.setState({
-              showMessageDate: !_this6.state.showMessageDate
+            return _this8.setState({
+              showMessageDate: !_this8.state.showMessageDate
             });
           },
           rightContent: !___default['default'].isEmpty(this.state.messageDate) && /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
@@ -2046,13 +2107,13 @@
           className: "chat"
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_newMessage"
-        }, this.renderChatInput()), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React__default['default'].createElement("div", {
           ref: function ref(_ref6) {
-            return _this6.chat = _ref6;
+            return _this8.chat = _ref6;
           },
           className: "chat_messages"
         }, ___default['default'].isEmpty(this.state.messages) && !___default['default'].isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {
-          return _this6.renderMessage(m);
+          return _this8.renderMessage(m);
         }))))));
       }
     }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-circles-web",
-  "version": "1.0.17-beta.0",
+  "version": "1.0.17",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@plusscommunities/pluss-core-web": "1.4.14-beta.0",
+    "@plusscommunities/pluss-core-web": "1.4.17",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",

package/src/screens/Circle.js

@@ -25,6 +25,7 @@ class Circle extends Component {
       images: [],
       files: [],
       membersExpanded: true,
+      replyingTo: null,
     };
   }
 
@@ -189,6 +190,16 @@ class Circle extends Component {
     });
   };
 
+  onReply = (m) => {
+    this.setState({
+      replyingTo: m,
+    });
+    if (m) {
+      const input = document.getElementById('messageInput');
+      if (input) input.focus();
+    }
+  };
+
   isMember() {
     const audience = this.getCircle().Audience || [];
     return _.some(audience, (u) => {
@@ -268,6 +279,10 @@ class Circle extends Component {
       return;
     }
 
+    if (this.state.replyingTo) {
+      message.replyingTo = this.state.replyingTo;
+    }
+
     const clonedMessage = _.cloneDeep(message);
     clonedMessage.uploading = true;
 
@@ -287,6 +302,7 @@ class Circle extends Component {
       fileInputShowing: false,
     });
     setTimeout(() => {
+      this.onReply(null);
       this.scrollToBottom();
       this.imageInput && this.imageInput.getWrappedInstance().setValue(null);
       this.fileInput && this.fileInput.getWrappedInstance().setValue(null);
@@ -391,7 +407,15 @@ class Circle extends Component {
           <div className="message_bubbleContainer">
             <Components.Text type="body" className="message_name">
               {m.user.name}
+              {m.replyingTo ? ` replied to ${m.replyingTo.user.name}` : ''}
             </Components.Text>
+            {m.replyingTo && (
+              <div className="message_replyBubble">
+                <Components.Text type="body" className="message_text">
+                  {Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100))}
+                </Components.Text>
+              </div>
+            )}
             <div className="message_bubble">
               <Components.Text type="body" className="message_text">
                 {Helper.toParagraphed(m.text)}
@@ -411,6 +435,16 @@ class Circle extends Component {
                 })}
               </div>
             </div>
+            <div className="message_reply">
+              <Components.Text
+                type="button"
+                onClick={() => {
+                  this.onReply(m);
+                }}
+              >
+                Reply
+              </Components.Text>
+            </div>
           </div>
         </div>
       </div>
@@ -512,6 +546,31 @@ class Circle extends Component {
     );
   }
 
+  renderReplyTo() {
+    if (!this.state.replyingTo) {
+      return null;
+    }
+    const m = this.state.replyingTo;
+    return (
+      <div className="chat_replyTo">
+        <div className="chat_replyTo_container">
+          <Components.Text type="h5">Replying to {m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''}</Components.Text>
+          {m && !_.isEmpty(m.text) && <Components.Text type="body">{m.text.substr(0, 50)}</Components.Text>}
+        </div>
+        <div className="chat_replyTo_remove">
+          <Components.SVGIcon
+            className="removeIcon"
+            icon="close"
+            onClick={() => {
+              this.onReply(null);
+            }}
+            colour={Colours.COLOUR_DUSK}
+          />
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <Components.OverlayPage fullPage fullPageStyle={{ display: 'flex', flexDirection: 'column' }}>
@@ -562,6 +621,7 @@ class Circle extends Component {
             </Components.Header>
             <div className="chat">
               <div className="chat_newMessage">{this.renderChatInput()}</div>
+              {this.renderReplyTo()}
               <div ref={(ref) => (this.chat = ref)} className="chat_messages">
                 {_.isEmpty(this.state.messages) && !_.isEmpty(this.state.messageDate) && this.renderEmptyDate()}
                 {this.state.messages.map((m) => {