@plusscommunities/pluss-core-web 1.2.5 → 1.2.9

package/dist/index.cjs.js

@@ -8853,42 +8853,22 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper$4(AudienceSelector);
 
-  function AudienceSelector() {
+  function AudienceSelector(props) {
     var _this;
 
     _classCallCheck__default['default'](this, AudienceSelector);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    _this = _super.call(this, props);
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onChangeSelection", function () {
+      var _this$props = _this.props,
+          updateValidation = _this$props.updateValidation,
+          onChange = _this$props.onChange;
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
-      categories: [{
-        Title: 'All Primary Users',
-        Key: 'resident',
-        ShortName: 'Primary'
-      }, {
-        Title: 'All Staff Users',
-        Key: 'staff',
-        ShortName: 'Staff'
-      }, {
-        Title: 'All Linked Users',
-        Key: 'family',
-        ShortName: 'Linked'
-      }],
-      types: [],
-      AudienceType: 'All',
-      showInclude: false,
-      includeList: [],
-      showExclude: false,
-      excludeList: [],
-      Type: '',
-      Category: '',
-      userList: [],
-      tagList: [],
-      AudienceTagList: []
+      var isValid = _this.validateAudienceSelection();
+
+      if (updateValidation) updateValidation(isValid);
+      if (onChange) onChange(_this.getAudienceType(), _this.getAudienceTypeSelection(), isValid);
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "selectTag", function (key) {
@@ -8898,9 +8878,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         excludeList: []
       });
 
-      setTimeout(function () {
-        _this.props.updateValidation(_this.validateAudienceSelection());
-      }, 50);
+      setTimeout(_this.onChangeSelection, 50);
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "validateCustom", function () {
@@ -8908,6 +8886,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getAvailableAudienceTags", function () {
+      var includeSelected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$state = _this.state,
           categories = _this$state.categories,
           types = _this$state.types,
@@ -8937,7 +8916,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Title: "User Tag: ".concat(t.Title)
         };
       });
-      return [].concat(_toConsumableArray__default['default'](categoryTags), _toConsumableArray__default['default'](userTypeTags), _toConsumableArray__default['default'](userTagTags)).filter(function (t) {
+      var result = [].concat(_toConsumableArray__default['default'](categoryTags), _toConsumableArray__default['default'](userTypeTags), _toConsumableArray__default['default'](userTagTags));
+      return includeSelected ? result : result.filter(function (t) {
         return !___default['default'].some(AudienceTagList, function (at) {
           return at.Id === t.Id;
         });
@@ -8949,9 +8929,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         AudienceTagList: AudienceTagList
-      }, function () {
-        return _this.props.updateValidation(_this.validateAudienceSelection());
-      });
+      }, _this.onChangeSelection);
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDetachAudienceTag", function (tag) {
@@ -8961,26 +8939,58 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         AudienceTagList: AudienceTagList
-      }, function () {
-        return _this.props.updateValidation(_this.validateAudienceSelection());
-      });
+      }, _this.onChangeSelection);
     });
 
+    _this.state = {
+      categories: [{
+        Title: 'All Primary Users',
+        Key: 'resident',
+        ShortName: 'Primary'
+      }, {
+        Title: 'All Staff Users',
+        Key: 'staff',
+        ShortName: 'Staff'
+      }, {
+        Title: 'All Linked Users',
+        Key: 'family',
+        ShortName: 'Linked'
+      }],
+      types: [],
+      AudienceType: props.audienceType || 'All',
+      showInclude: false,
+      includeList: [],
+      showExclude: false,
+      excludeList: [],
+      Type: '',
+      Category: '',
+      userList: [],
+      tagList: [],
+      AudienceTagList: props.audienceTypeSelection || []
+    };
     return _this;
   }
 
   _createClass__default['default'](AudienceSelector, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props = this.props,
-          disallowUserType = _this$props.disallowUserType,
-          custom = _this$props.custom,
-          disallowSingleUsers = _this$props.disallowSingleUsers,
-          allowTags = _this$props.allowTags;
+      var _this$props2 = this.props,
+          disallowUserType = _this$props2.disallowUserType,
+          custom = _this$props2.custom,
+          disallowSingleUsers = _this$props2.disallowSingleUsers,
+          allowTags = _this$props2.allowTags;
       if (!disallowUserType || custom) this.getUserTypes();
       if (!disallowSingleUsers) this.getUsers();
       if (allowTags || custom) this.getUserTags();
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var newState = {};
+      if (prevProps.audienceType !== this.props.audienceType) newState.AudienceType = this.props.audienceType;
+      if (!___default['default'].isEqual(prevProps.audienceTypeSelection, this.props.audienceTypeSelection)) newState.AudienceTagList = this.props.audienceTypeSelection;
+      if (!___default['default'].isEmpty(newState)) this.setState(newState);
+    }
   }, {
     key: "onSubmit",
     value: function onSubmit() {
@@ -9004,12 +9014,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Category = _this$state2.Category,
           Tag = _this$state2.Tag,
           Type = _this$state2.Type;
-      if (AudienceType === 'Custom') return AudienceTagList.map(function (at) {
-        return {
-          AudienceType: at.AudienceType,
-          AudienceTypeSelection: at.AudienceTypeSelection
-        };
-      });
+      if (AudienceType === 'Custom') return AudienceTagList || [];
       if (AudienceType === 'Category') return Category;
       if (AudienceType === 'UserTags') return Tag;
       return Type;
@@ -9064,29 +9069,26 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "onChangeOption",
     value: function onChangeOption(type) {
-      var _this4 = this;
-
       this.setState({
         AudienceType: type,
         Type: '',
         Category: '',
         includeList: [],
-        excludeList: []
+        excludeList: [],
+        AudienceTagList: []
       });
-      setTimeout(function () {
-        _this4.props.updateValidation(_this4.validateAudienceSelection());
-      }, 50);
+      setTimeout(this.onChangeSelection, 50);
     }
   }, {
     key: "getOptions",
     value: function getOptions() {
-      var _this5 = this;
+      var _this4 = this;
 
       var options = [{
         Label: 'All users',
         Value: 'All',
         onChange: function onChange() {
-          return _this5.onChangeOption('All');
+          return _this4.onChangeOption('All');
         }
       }];
 
@@ -9095,7 +9097,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'Custom',
           Value: 'Custom',
           onChange: function onChange() {
-            return _this5.onChangeOption('Custom');
+            return _this4.onChangeOption('Custom');
           }
         });
       } else {
@@ -9103,7 +9105,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'By user category',
           Value: 'Category',
           onChange: function onChange() {
-            return _this5.onChangeOption('Category');
+            return _this4.onChangeOption('Category');
           }
         });
       }
@@ -9113,7 +9115,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'By user type',
           Value: 'UserType',
           onChange: function onChange() {
-            return _this5.onChangeOption('UserType');
+            return _this4.onChangeOption('UserType');
           }
         });
       }
@@ -9123,7 +9125,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'By user tag',
           Value: 'UserTags',
           onChange: function onChange() {
-            return _this5.onChangeOption('UserTags');
+            return _this4.onChangeOption('UserTags');
           }
         });
       }
@@ -9133,7 +9135,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'To single users',
           Value: 'User',
           onChange: function onChange() {
-            return _this5.onChangeOption('User');
+            return _this4.onChangeOption('User');
           }
         });
       }
@@ -9156,24 +9158,20 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "selectType",
     value: function selectType(key) {
-      var _this6 = this;
-
       this.setState({
         Type: key,
         includeList: [],
         excludeList: []
       });
-      setTimeout(function () {
-        _this6.props.updateValidation(_this6.validateAudienceSelection());
-      }, 50);
+      setTimeout(this.onChangeSelection, 50);
     }
   }, {
     key: "getTypeTitle",
     value: function getTypeTitle() {
-      var _this7 = this;
+      var _this5 = this;
 
       var typeObject = ___default['default'].find(this.state.types, function (t) {
-        return t.typeName === _this7.state.Type;
+        return t.typeName === _this5.state.Type;
       });
 
       if (typeObject) {
@@ -9185,10 +9183,10 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTagTitle",
     value: function getTagTitle() {
-      var _this8 = this;
+      var _this6 = this;
 
       var tag = ___default['default'].find(this.state.tagList, function (t) {
-        return t.Id === _this8.state.Tag;
+        return t.Id === _this6.state.Tag;
       });
 
       if (tag) {
@@ -9200,10 +9198,10 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getUserTypes",
     value: function getUserTypes() {
-      var _this9 = this;
+      var _this7 = this;
 
       typeActions.getUserTypes(this.props.auth.site).then(function (res) {
-        _this9.props.setAuth({
+        _this7.props.setAuth({
           userTypes: ___default['default'].cloneDeep(res.data)
         });
 
@@ -9212,7 +9210,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           e.Key = e.typeName;
 
           if (e.category) {
-            var category = ___default['default'].find(_this9.state.categories, function (c) {
+            var category = ___default['default'].find(_this7.state.categories, function (c) {
               return c.Key === e.category;
             });
 
@@ -9221,7 +9219,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           }
         });
 
-        _this9.setState({
+        _this7.setState({
           types: res.data
         });
       }).catch(function (error) {});
@@ -9229,12 +9227,12 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getUserList",
     value: function getUserList() {
-      var _this10 = this;
+      var _this8 = this;
 
       if (this.state.AudienceType === 'UserType' && !___default['default'].isEmpty(this.state.Type)) {
         var users = [];
         this.state.userList.forEach(function (element) {
-          if (element.type !== _this10.state.Type) users.push(element);
+          if (element.type !== _this8.state.Type) users.push(element);
         });
         return ___default['default'].sortBy(users, 'displayName');
       }
@@ -9243,7 +9241,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         var _users = [];
 
         var types = ___default['default'].filter(this.state.types, function (type) {
-          return type.category === _this10.state.Category;
+          return type.category === _this8.state.Category;
         }).map(function (type) {
           return type.typeName;
         });
@@ -9261,24 +9259,20 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "selectCat",
     value: function selectCat(key, e) {
-      var _this11 = this;
-
       this.setState({
         Category: key,
         includeList: [],
         excludeList: []
       });
-      setTimeout(function () {
-        _this11.props.updateValidation(_this11.validateAudienceSelection());
-      }, 50);
+      setTimeout(this.onChangeSelection, 50);
     }
   }, {
     key: "getCatTitle",
     value: function getCatTitle() {
-      var _this12 = this;
+      var _this9 = this;
 
       var typeObject = ___default['default'].find(this.state.categories, function (t) {
-        return t.Key === _this12.state.Category;
+        return t.Key === _this9.state.Category;
       });
 
       if (typeObject) {
@@ -9334,12 +9328,12 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getUserExcludeList",
     value: function getUserExcludeList() {
-      var _this13 = this;
+      var _this10 = this;
 
       if (this.state.AudienceType === 'UserType' && !___default['default'].isEmpty(this.state.Type)) {
         var users = [];
         this.state.userList.forEach(function (element) {
-          if (element.type === _this13.state.Type) users.push(element);
+          if (element.type === _this10.state.Type) users.push(element);
         });
         return ___default['default'].sortBy(users, 'displayName');
       }
@@ -9348,7 +9342,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         var _users2 = [];
 
         var types = ___default['default'].filter(this.state.types, function (type) {
-          return type.category === _this13.state.Category;
+          return type.category === _this10.state.Category;
         }).map(function (type) {
           return type.typeName;
         });
@@ -9366,8 +9360,6 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "addToInc",
     value: function addToInc(user) {
-      var _this14 = this;
-
       var list = _toConsumableArray__default['default'](this.state.includeList);
 
       list.push({
@@ -9378,23 +9370,17 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
       this.setState({
         includeList: list
       });
-      setTimeout(function () {
-        _this14.props.updateValidation(_this14.validateAudienceSelection());
-      }, 50);
+      setTimeout(this.onChangeSelection, 50);
     }
   }, {
     key: "removeUserInc",
     value: function removeUserInc(user) {
-      var _this15 = this;
-
       this.setState({
         includeList: ___default['default'].filter(this.state.includeList, function (ev) {
           return ev.Id !== user.Id;
         })
       });
-      setTimeout(function () {
-        _this15.props.updateValidation(_this15.validateAudienceSelection());
-      }, 50);
+      setTimeout(this.onChangeSelection, 50);
     }
   }, {
     key: "addToEx",
@@ -9422,7 +9408,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExcludes",
     value: function renderExcludes() {
-      var _this16 = this;
+      var _this11 = this;
 
       if (!this.showUserPickers(false)) {
         return null;
@@ -9434,8 +9420,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "flex flex-between pointer",
         onClick: function onClick() {
-          _this16.setState({
-            showExclude: !_this16.state.showExclude
+          _this11.setState({
+            showExclude: !_this11.state.showExclude
           });
         }
       }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -9459,7 +9445,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderIncludes",
     value: function renderIncludes() {
-      var _this17 = this;
+      var _this12 = this;
 
       if (!this.showUserPickers(true)) {
         return null;
@@ -9471,8 +9457,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "flex flex-between pointer",
         onClick: function onClick() {
-          _this17.setState({
-            showInclude: !_this17.state.showInclude
+          _this12.setState({
+            showInclude: !_this12.state.showInclude
           });
         }
       }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -9496,7 +9482,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderAssignedAudiences",
     value: function renderAssignedAudiences() {
-      var _this18 = this;
+      var _this13 = this;
 
       var AudienceTagList = this.state.AudienceTagList;
       var maxWidth = this.props.maxWidth;
@@ -9515,7 +9501,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           text: t.Title,
           rightIcon: "remove",
           rightClick: function rightClick() {
-            return _this18.onDetachAudienceTag(t);
+            return _this13.onDetachAudienceTag(t);
           }
         });
       }));
@@ -9523,7 +9509,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderAvailableAudiences",
     value: function renderAvailableAudiences() {
-      var _this19 = this;
+      var _this14 = this;
 
       var maxWidth = this.props.maxWidth;
       var tags = this.getAvailableAudienceTags();
@@ -9538,7 +9524,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           className: "marginLeft-16 marginBottom-8",
           text: t.Title,
           onClick: function onClick() {
-            return _this19.onAttachAudienceTag(t);
+            return _this14.onAttachAudienceTag(t);
           }
         });
       }));
@@ -9559,7 +9545,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this20 = this;
+      var _this15 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Text, {
         type: "formTitleSmall",
@@ -9581,10 +9567,10 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         placeholder: "User Category",
         value: this.getCatTitle(),
         isValid: function isValid() {
-          return _this20.validateCategory();
+          return _this15.validateCategory();
         },
         showError: function showError() {
-          return _this20.state.showWarnings && !_this20.validateCategory();
+          return _this15.state.showWarnings && !_this15.validateCategory();
         },
         options: this.state.categories,
         onSelect: this.selectCat.bind(this),
@@ -9601,10 +9587,10 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         placeholder: "User Type",
         value: this.getTypeTitle(),
         isValid: function isValid() {
-          return _this20.validateType();
+          return _this15.validateType();
         },
         showError: function showError() {
-          return _this20.state.showWarnings && !_this20.validateType();
+          return _this15.state.showWarnings && !_this15.validateType();
         },
         options: this.state.types,
         onSelect: this.selectType.bind(this),
@@ -9620,10 +9606,10 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         placeholder: "User Tag",
         value: this.getTagTitle(),
         isValid: function isValid() {
-          return _this20.validateTag();
+          return _this15.validateTag();
         },
         showError: function showError() {
-          return _this20.state.showWarnings && !_this20.validateTag();
+          return _this15.state.showWarnings && !_this15.validateTag();
         },
         options: this.state.tagList,
         onSelect: this.selectTag,
@@ -10202,8 +10188,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleColumn", function (key) {
-      var source = _this.props.source;
-
       var columns = ___default['default'].cloneDeep(_this.state.columns);
 
       var column = columns.find(function (c) {
@@ -10219,25 +10203,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 ___default['default'].pick(i, selectedheaderKeys);
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleStartDateFilter", function () {
+      var filterDateStartVisible = _this.state.filterDateStartVisible;
+
+      if (filterDateStartVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateStartVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateStartVisible: true
         });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleEndDateFilter", function () {
+      var filterDateEndVisible = _this.state.filterDateEndVisible;
 
+      if (filterDateEndVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateEndVisible: false
+          });
+        }, 200);
+      } else {
         _this.setState({
-          columns: columns,
-          selectedHeaders: selectedHeaders,
-          selectedSource: selectedSource
+          filterDateEndVisible: true
+        });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterStartChanged", function (date) {
+      var filterDateEnd = _this.state.filterDateEnd;
+      var start = moment__default['default'](date);
+
+      if (start.isSameOrBefore(filterDateEnd)) {
+        _this.setState({
+          filterDateStart: start.startOf('day'),
+          filterDateStartVisible: false
+        });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterEndChanged", function (date) {
+      var filterDateStart = _this.state.filterDateStart;
+      var end = moment__default['default'](date);
+
+      if (end.isSameOrAfter(filterDateStart)) {
+        _this.setState({
+          filterDateEnd: end.endOf('day'),
+          filterDateEndVisible: false
+        });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_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 = ___default['default'].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 ___default['default'].pick(i, selectedheaderKeys);
+      });
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderTimestampFilter", function () {
+      if (!_this.props.timestampFilter) {
+        return null;
       }
+
+      return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].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__default['default'].createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateStart,
+        selectDate: _this.onDateFilterStartChanged
+      }) : null, /*#__PURE__*/React__default['default'].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__default['default'].createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateEnd,
+        selectDate: _this.onDateFilterEndChanged
+      }) : null);
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_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__default['default'].createElement("div", {
@@ -10272,27 +10363,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__default['default'](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__default['default'].createElement(reactCsv.CSVLink, {
           headers: selectedHeaders,
-          data: selectedSource,
+          data: this.getSelectedSource(),
           style: {
             textDecoration: 'none',
             color: '#fff'
@@ -10308,7 +10407,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }];
       return /*#__PURE__*/React__default['default'].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,
@@ -10318,7 +10416,9 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         hasPadding: true,
         onClose: this.onClose,
         buttons: buttons
-      }, this.renderContent());
+      }, this.renderTimestampFilter(), /*#__PURE__*/React__default['default'].createElement(Text, {
+        type: "bodyLarge"
+      }, "Select which columns to include in the export"), this.renderContent());
     }
   }]);