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

package/dist/index.cjs.js

@@ -11,7 +11,7 @@ var _inherits = require('@babel/runtime/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var React$1 = require('react');
+var React = require('react');
 var reactRedux = require('react-redux');
 var _ = require('lodash');
 var moment = require('moment');
@@ -53,7 +53,7 @@ var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
 var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
 var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var PlussCore__namespace = /*#__PURE__*/_interopNamespace(PlussCore);
@@ -108,7 +108,7 @@ var FeatureConfig = {
   }],
   featurePickerInfo: {
     image: 'https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:80aecdcb-9955-493e-a341-2f2263f64777/public/e4a5948c40908e2137f0a65eb1/groups.jpg',
-    text: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Open and closed group chat - where your community does its planning, discussing and sharing."), /*#__PURE__*/React.createElement("p", null, "Keep them open for any member to join, or private to the admins - ", values.textFeatureTitle, " gives you that control."), /*#__PURE__*/React.createElement("p", null, "Your ", values.textFeatureTitle, " activity will keep the app close to your communities hands.")),
+    text: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", null, "Open and closed group chat - where your community does its planning, discussing and sharing."), /*#__PURE__*/React__default['default'].createElement("p", null, "Keep them open for any member to join, or private to the admins - ", values.textFeatureTitle, " gives you that control."), /*#__PURE__*/React__default['default'].createElement("p", null, "Your ", values.textFeatureTitle, " activity will keep the app close to your communities hands.")),
     layoutDisclaimer: true
   },
   menu: {
@@ -781,7 +781,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }]);
 
   return Circles;
-}(React$1.Component);
+}(React.Component);
 
 var mapStateToProps$2 = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
@@ -1349,7 +1349,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
   }]);
 
   return AddCircle;
-}(React$1.Component);
+}(React.Component);
 
 var mapStateToProps$1 = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
@@ -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,19 +2125,19 @@ 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);
       }))))));
     }
   }]);
 
   return Circle;
-}(React$1.Component);
+}(React.Component);
 
 var mapStateToProps = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
@@ -2157,7 +2218,7 @@ var ViewWidget = /*#__PURE__*/function (_Component) {
   }]);
 
   return ViewWidget;
-}(React$1.Component);
+}(React.Component);
 
 var styles$3 = {
   image: {
@@ -2194,7 +2255,7 @@ var ViewFull = /*#__PURE__*/function (_Component) {
   }]);
 
   return ViewFull;
-}(React$1.Component);
+}(React.Component);
 
 var styles$2 = {
   image: {
@@ -2248,7 +2309,7 @@ var PreviewWidget = /*#__PURE__*/function (_Component) {
   }]);
 
   return PreviewWidget;
-}(React$1.Component);
+}(React.Component);
 
 var styles$1 = {
   container: {
@@ -2302,7 +2363,7 @@ var PreviewFull = /*#__PURE__*/function (_Component) {
   }]);
 
   return PreviewFull;
-}(React$1.Component);
+}(React.Component);
 
 var styles = {
   container: {
@@ -2345,7 +2406,7 @@ var PreviewGrid = /*#__PURE__*/function (_Component) {
   }]);
 
   return PreviewGrid;
-}(React$1.Component);
+}(React.Component);
 
 var Components = PlussCore__namespace.Components,
     Colours = PlussCore__namespace.Colours;