@plusscommunities/pluss-core-web 1.2.7 → 1.2.11

package/dist/index.esm.js

@@ -664,6 +664,14 @@ var isVideo = function isVideo(url) {
   return ['mov', 'mp4'].includes(extension);
 };
 
+var getFirstName = function getFirstName(string) {
+  if (_.isEmpty(string)) {
+    return '';
+  }
+
+  return string.split(' ')[0];
+};
+
 var isEmail = function isEmail(email) {
   if (_.isEmpty(email)) return false;
   var atpos = email.indexOf('@');
@@ -740,6 +748,14 @@ var getSiteNameFromRoles = function getSiteNameFromRoles(site, roles) {
   }));
 };
 
+var getSiteSettingFromState = function getSiteSettingFromState(state, key, defaultValue) {
+  if (state && state.auth && state.auth.siteSettings && !_.isUndefined(state.auth.siteSettings[key])) {
+    return state.auth.siteSettings[key];
+  }
+
+  return defaultValue || null;
+};
+
 var readJSONFromStorage = function readJSONFromStorage(storage, key, fallback) {
   var value = storage.getItem(key);
 
@@ -812,12 +828,6 @@ var setLocalStorage = function setLocalStorage(key, value, isJson) {
 //   }
 //   return string.charAt(0).toUpperCase() + string.slice(1);
 // };
-// export const getFirstName = (string) => {
-//   if (_.isEmpty(string)) {
-//     return '';
-//   }
-//   return string.split(' ')[0];
-// };
 // export const get300 = (url) => {
 //   if (!url) {
 //     return url;
@@ -1539,6 +1549,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
   getFileName: getFileName,
   getThumb300: getThumb300,
   isVideo: isVideo,
+  getFirstName: getFirstName,
   isEmail: isEmail,
   isUrl: isUrl,
   randomString: randomString,
@@ -1546,6 +1557,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
   onlyAlphanumeric: onlyAlphanumeric,
   getSiteName: getSiteName,
   getSiteNameFromRoles: getSiteNameFromRoles,
+  getSiteSettingFromState: getSiteSettingFromState,
   readJSONFromStorage: readJSONFromStorage,
   setLocalStorage: setLocalStorage,
   getTimepickerTime: getTimepickerTime,
@@ -4315,10 +4327,10 @@ var Text = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("p", {
+      return /*#__PURE__*/React.createElement("p", _extends({}, this.props, {
         className: "text-".concat(this.props.type).concat(this.getClassName()),
         style: this.props.style
-      }, this.props.children);
+      }), this.props.children);
     }
   }]);
 
@@ -4404,8 +4416,8 @@ var Comment = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(Comment, [{
-    key: "render",
-    value: function render() {
+    key: "renderComment",
+    value: function renderComment() {
       var comment = this.props.comment;
       return /*#__PURE__*/React.createElement("div", {
         key: comment.Id,
@@ -4424,6 +4436,11 @@ var Comment = /*#__PURE__*/function (_Component) {
         className: "comment_time"
       }, moment.utc(comment.Timestamp).local().format('D MMM YYYY • h:mma'))));
     }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, this.renderComment(), this.props.bottomContent);
+    }
   }]);
 
   return Comment;
@@ -4474,6 +4491,58 @@ var CommentSection = /*#__PURE__*/function (_Component) {
       }, _callee);
     })));
 
+    _defineProperty(_assertThisInitialized(_this), "getComments", function () {
+      if (!_this.props.onlyParents) {
+        return _this.props.comments;
+      }
+
+      return _.filter(_this.props.comments, function (c) {
+        return !c.ParentId;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderReplyText", function (c) {
+      if (!_this.props.onOpenThread) {
+        return null;
+      }
+
+      var threadComments = _.filter(_this.props.comments, function (innerC) {
+        return innerC.ParentId === c.Id;
+      });
+
+      if (_.isEmpty(threadComments)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "comment_reply"
+        }, /*#__PURE__*/React.createElement(Text, {
+          className: "comment_reply_button",
+          type: "button",
+          onClick: function onClick() {
+            _this.props.onOpenThread(c);
+          }
+        }, "Reply to ".concat(getFirstName(c.User ? c.User.displayName : 'comment'))));
+      }
+
+      var profilePics = _.take(_.uniqBy(threadComments, function (c) {
+        return c.UserId;
+      }), 3);
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "comment_reply comment_reply-hasReplies"
+      }, profilePics.map(function (c) {
+        return /*#__PURE__*/React.createElement(ProfilePic, {
+          className: "comment_reply_profilePic",
+          size: 20,
+          image: c.User.profilePic
+        });
+      }), /*#__PURE__*/React.createElement(Text, {
+        className: "comment_reply_button",
+        type: "button",
+        onClick: function onClick() {
+          _this.props.onOpenThread(c);
+        }
+      }, "".concat(threadComments.length, " repl").concat(getPluralOptions(threadComments.length, 'y', 'ies'))));
+    });
+
     _this.state = {
       commentInput: ''
     };
@@ -4490,10 +4559,11 @@ var CommentSection = /*#__PURE__*/function (_Component) {
         className: "marginBottom-16"
       }, "Comments"), /*#__PURE__*/React.createElement("div", {
         className: "commentSection"
-      }, this.props.comments.map(function (c) {
+      }, this.getComments().map(function (c) {
         return /*#__PURE__*/React.createElement(Comment, {
           key: c.Id,
-          comment: c
+          comment: c,
+          bottomContent: _this2.renderReplyText(c)
         });
       })), /*#__PURE__*/React.createElement("div", {
         className: "commentReply"
@@ -8987,7 +9057,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Category = _this$state2.Category,
           Tag = _this$state2.Tag,
           Type = _this$state2.Type;
-      if (AudienceType === 'Custom') return AudienceTagList;
+      if (AudienceType === 'Custom') return AudienceTagList || [];
       if (AudienceType === 'Category') return Category;
       if (AudienceType === 'UserTags') return Tag;
       return Type;
@@ -9047,7 +9117,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         Type: '',
         Category: '',
         includeList: [],
-        excludeList: []
+        excludeList: [],
+        AudienceTagList: []
       });
       setTimeout(this.onChangeSelection, 50);
     }
@@ -10160,8 +10231,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onToggleColumn", function (key) {
-      var source = _this.props.source;
-
       var columns = _.cloneDeep(_this.state.columns);
 
       var column = columns.find(function (c) {
@@ -10177,25 +10246,132 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         var selectedHeaders = columns.filter(function (c) {
           return c.key && c.selected;
         });
-        var selectedheaderKeys = selectedHeaders.map(function (h) {
-          return h.key;
+
+        _this.setState({
+          columns: columns,
+          selectedHeaders: selectedHeaders
         });
-        var selectedSource = source.map(function (i) {
-          return _.pick(i, selectedheaderKeys);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToggleStartDateFilter", function () {
+      var filterDateStartVisible = _this.state.filterDateStartVisible;
+
+      if (filterDateStartVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateStartVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateStartVisible: true
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToggleEndDateFilter", function () {
+      var filterDateEndVisible = _this.state.filterDateEndVisible;
+
+      if (filterDateEndVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateEndVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateEndVisible: true
         });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDateFilterStartChanged", function (date) {
+      var filterDateEnd = _this.state.filterDateEnd;
+      var start = moment(date);
 
+      if (start.isSameOrBefore(filterDateEnd)) {
         _this.setState({
-          columns: columns,
-          selectedHeaders: selectedHeaders,
-          selectedSource: selectedSource
+          filterDateStart: start.startOf('day'),
+          filterDateStartVisible: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDateFilterEndChanged", function (date) {
+      var filterDateStart = _this.state.filterDateStart;
+      var end = moment(date);
+
+      if (end.isSameOrAfter(filterDateStart)) {
+        _this.setState({
+          filterDateEnd: end.endOf('day'),
+          filterDateEndVisible: false
         });
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getSelectedSource", function () {
+      var source = _this.props.source;
+      var selectedHeaders = _this.state.selectedHeaders;
+      var result = source; // apply timestamp filter
+
+      if (_this.props.timestampFilter) {
+        var _this$state = _this.state,
+            filterDateStart = _this$state.filterDateStart,
+            filterDateEnd = _this$state.filterDateEnd;
+        var filterKey = _this.props.timestampFilter.filterKey;
+        var minDate = filterDateStart.valueOf();
+        var maxDate = filterDateEnd.valueOf();
+        result = _.filter(source, function (item) {
+          return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+        });
+      } // map result to columns
+
+
+      var selectedheaderKeys = selectedHeaders.map(function (h) {
+        return h.key;
+      });
+      return result.map(function (i) {
+        return _.pick(i, selectedheaderKeys);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTimestampFilter", function () {
+      if (!_this.props.timestampFilter) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GenericInput, {
+        id: "dateStart",
+        label: "Start Date",
+        alwaysShowLabel: true,
+        placeholder: 'Select start date',
+        value: _this.state.filterDateStart.format('DD/MM/YYYY'),
+        onClick: _this.onToggleStartDateFilter,
+        readOnly: true
+      }), _this.state.filterDateStartVisible ? /*#__PURE__*/React.createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateStart,
+        selectDate: _this.onDateFilterStartChanged
+      }) : null, /*#__PURE__*/React.createElement(GenericInput, {
+        id: "dateEnd",
+        label: "End Date",
+        alwaysShowLabel: true,
+        placeholder: 'Select end date',
+        value: _this.state.filterDateEnd.format('DD/MM/YYYY'),
+        onClick: _this.onToggleEndDateFilter,
+        readOnly: true
+      }), _this.state.filterDateEndVisible ? /*#__PURE__*/React.createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateEnd,
+        selectDate: _this.onDateFilterEndChanged
+      }) : null);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderContent", function () {
-      var _this$state = _this.state,
-          saving = _this$state.saving,
-          columns = _this$state.columns;
+      var _this$state2 = _this.state,
+          saving = _this$state2.saving,
+          columns = _this$state2.columns;
 
       if (saving) {
         return /*#__PURE__*/React.createElement("div", {
@@ -10230,27 +10406,35 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }));
     });
 
-    _this.state = {
+    var state = {
       columns: props.columns,
+      selectedHeaders: props.columns.filter(function (c) {
+        return c.key && c.selected;
+      }),
       selectedSource: [],
       saving: false
     };
+
+    if (props.timestampFilter) {
+      state.filterDateStart = props.timestampFilter.startDate;
+      state.filterDateEnd = props.timestampFilter.endDate;
+    }
+
+    _this.state = state;
     return _this;
   }
 
   _createClass(ExportCsvPopup, [{
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          selectedHeaders = _this$state2.selectedHeaders,
-          selectedSource = _this$state2.selectedSource;
+      var selectedHeaders = this.state.selectedHeaders;
       var filename = this.props.filename;
       var buttons = [{
         type: 'primary',
         isActive: this.canSave(),
         text: /*#__PURE__*/React.createElement(CSVLink, {
           headers: selectedHeaders,
-          data: selectedSource,
+          data: this.getSelectedSource(),
           style: {
             textDecoration: 'none',
             color: '#fff'
@@ -10266,7 +10450,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }];
       return /*#__PURE__*/React.createElement(Popup, {
         title: "Confirm Export",
-        subtitle: "Select which columns to include in the export",
         boxClasses: "flex flex-column",
         innerClasses: "flex flex-column fillSpace flex-1",
         minWidth: 500,
@@ -10276,7 +10459,9 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         hasPadding: true,
         onClose: this.onClose,
         buttons: buttons
-      }, this.renderContent());
+      }, this.renderTimestampFilter(), /*#__PURE__*/React.createElement(Text, {
+        type: "bodyLarge"
+      }, "Select which columns to include in the export"), this.renderContent());
     }
   }]);