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

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/regenerator'), require('react'), require('react-redux'), require('lodash'), require('moment'), require('react-router-dom'), require('@plusscommunities/pluss-core-web'), require('react-bootstrap'), require('react-fontawesome'), require('@babel/runtime/helpers/toConsumableArray'), require('react-router')) :
   typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/regenerator', 'react', 'react-redux', 'lodash', 'moment', 'react-router-dom', '@plusscommunities/pluss-core-web', 'react-bootstrap', 'react-fontawesome', '@babel/runtime/helpers/toConsumableArray', 'react-router'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-circles-web'] = {}, global._defineProperty, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._regeneratorRuntime, global.React$1, global.reactRedux, global._, global.moment, global.reactRouterDom, global.PlussCore, global.reactBootstrap, global.FontAwesome, global._toConsumableArray, global.reactRouter));
-}(this, (function (exports, _defineProperty, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _regeneratorRuntime, React$1, reactRedux, _, moment, reactRouterDom, PlussCore, reactBootstrap, FontAwesome, _toConsumableArray, reactRouter) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-circles-web'] = {}, global._defineProperty, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._regeneratorRuntime, global.React, global.reactRedux, global._, global.moment, global.reactRouterDom, global.PlussCore, global.reactBootstrap, global.FontAwesome, global._toConsumableArray, global.reactRouter));
+}(this, (function (exports, _defineProperty, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _regeneratorRuntime, React, reactRedux, _, moment, reactRouterDom, PlussCore, reactBootstrap, FontAwesome, _toConsumableArray, reactRouter) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,7 +35,7 @@
   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);
@@ -90,7 +90,7 @@
     }],
     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: {
@@ -763,7 +763,7 @@
     }]);
 
     return Circles;
-  }(React$1.Component);
+  }(React.Component);
 
   var mapStateToProps$2 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
@@ -1331,7 +1331,7 @@
     }]);
 
     return AddCircle;
-  }(React$1.Component);
+  }(React.Component);
 
   var mapStateToProps$1 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
@@ -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,19 +2107,19 @@
           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;
@@ -2139,7 +2200,7 @@
     }]);
 
     return ViewWidget;
-  }(React$1.Component);
+  }(React.Component);
 
   var styles$3 = {
     image: {
@@ -2176,7 +2237,7 @@
     }]);
 
     return ViewFull;
-  }(React$1.Component);
+  }(React.Component);
 
   var styles$2 = {
     image: {
@@ -2230,7 +2291,7 @@
     }]);
 
     return PreviewWidget;
-  }(React$1.Component);
+  }(React.Component);
 
   var styles$1 = {
     container: {
@@ -2284,7 +2345,7 @@
     }]);
 
     return PreviewFull;
-  }(React$1.Component);
+  }(React.Component);
 
   var styles = {
     container: {
@@ -2327,7 +2388,7 @@
     }]);
 
     return PreviewGrid;
-  }(React$1.Component);
+  }(React.Component);
 
   var Components = PlussCore__namespace.Components,
       Colours = PlussCore__namespace.Colours;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-circles-web",
-  "version": "1.0.16-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/feature.config.js

@@ -1,6 +1,7 @@
 // import * as PlussCore from '../../pluss-core/src';
 import _ from 'lodash';
 import * as PlussCore from '@plusscommunities/pluss-core-web';
+import React from 'react';
 import { values } from './values.config';
 
 export { PlussCore };

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) => {