@plusscommunities/pluss-core-web 1.2.5 → 1.2.9-beta.0

package/dist/index.esm.js

@@ -8284,7 +8284,8 @@ var TimePicker = /*#__PURE__*/function (_Component) {
 
       if (disabled) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "timepicker disabled"
+          className: "timepicker disabled",
+          style: this.props.style
         }, /*#__PURE__*/React.createElement("span", {
           className: "timepicker__span",
           style: this.props.inputStyle
@@ -8292,7 +8293,8 @@ var TimePicker = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: "timepicker ".concat(this.props.className)
+        className: "timepicker ".concat(this.props.className),
+        style: this.props.style
       }, /*#__PURE__*/React.createElement("input", {
         className: "timepicker__input",
         maxLength: "2",
@@ -8826,42 +8828,22 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper$4(AudienceSelector);
 
-  function AudienceSelector() {
+  function AudienceSelector(props) {
     var _this;
 
     _classCallCheck(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(_assertThisInitialized(_this), "onChangeSelection", function () {
+      var _this$props = _this.props,
+          updateValidation = _this$props.updateValidation,
+          onChange = _this$props.onChange;
 
-    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "selectTag", function (key) {
@@ -8871,9 +8853,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         excludeList: []
       });
 
-      setTimeout(function () {
-        _this.props.updateValidation(_this.validateAudienceSelection());
-      }, 50);
+      setTimeout(_this.onChangeSelection, 50);
     });
 
     _defineProperty(_assertThisInitialized(_this), "validateCustom", function () {
@@ -8881,6 +8861,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_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,
@@ -8910,7 +8891,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Title: "User Tag: ".concat(t.Title)
         };
       });
-      return [].concat(_toConsumableArray(categoryTags), _toConsumableArray(userTypeTags), _toConsumableArray(userTagTags)).filter(function (t) {
+      var result = [].concat(_toConsumableArray(categoryTags), _toConsumableArray(userTypeTags), _toConsumableArray(userTagTags));
+      return includeSelected ? result : result.filter(function (t) {
         return !_.some(AudienceTagList, function (at) {
           return at.Id === t.Id;
         });
@@ -8922,9 +8904,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         AudienceTagList: AudienceTagList
-      }, function () {
-        return _this.props.updateValidation(_this.validateAudienceSelection());
-      });
+      }, _this.onChangeSelection);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onDetachAudienceTag", function (tag) {
@@ -8934,26 +8914,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(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 (!_.isEqual(prevProps.audienceTypeSelection, this.props.audienceTypeSelection)) newState.AudienceTagList = this.props.audienceTypeSelection;
+      if (!_.isEmpty(newState)) this.setState(newState);
+    }
   }, {
     key: "onSubmit",
     value: function onSubmit() {
@@ -8977,12 +8989,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;
@@ -9037,29 +9044,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');
         }
       }];
 
@@ -9068,7 +9072,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'Custom',
           Value: 'Custom',
           onChange: function onChange() {
-            return _this5.onChangeOption('Custom');
+            return _this4.onChangeOption('Custom');
           }
         });
       } else {
@@ -9076,7 +9080,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'By user category',
           Value: 'Category',
           onChange: function onChange() {
-            return _this5.onChangeOption('Category');
+            return _this4.onChangeOption('Category');
           }
         });
       }
@@ -9086,7 +9090,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'By user type',
           Value: 'UserType',
           onChange: function onChange() {
-            return _this5.onChangeOption('UserType');
+            return _this4.onChangeOption('UserType');
           }
         });
       }
@@ -9096,7 +9100,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'By user tag',
           Value: 'UserTags',
           onChange: function onChange() {
-            return _this5.onChangeOption('UserTags');
+            return _this4.onChangeOption('UserTags');
           }
         });
       }
@@ -9106,7 +9110,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           Label: 'To single users',
           Value: 'User',
           onChange: function onChange() {
-            return _this5.onChangeOption('User');
+            return _this4.onChangeOption('User');
           }
         });
       }
@@ -9129,24 +9133,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 = _.find(this.state.types, function (t) {
-        return t.typeName === _this7.state.Type;
+        return t.typeName === _this5.state.Type;
       });
 
       if (typeObject) {
@@ -9158,10 +9158,10 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTagTitle",
     value: function getTagTitle() {
-      var _this8 = this;
+      var _this6 = this;
 
       var tag = _.find(this.state.tagList, function (t) {
-        return t.Id === _this8.state.Tag;
+        return t.Id === _this6.state.Tag;
       });
 
       if (tag) {
@@ -9173,10 +9173,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: _.cloneDeep(res.data)
         });
 
@@ -9185,7 +9185,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           e.Key = e.typeName;
 
           if (e.category) {
-            var category = _.find(_this9.state.categories, function (c) {
+            var category = _.find(_this7.state.categories, function (c) {
               return c.Key === e.category;
             });
 
@@ -9194,7 +9194,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           }
         });
 
-        _this9.setState({
+        _this7.setState({
           types: res.data
         });
       }).catch(function (error) {});
@@ -9202,12 +9202,12 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getUserList",
     value: function getUserList() {
-      var _this10 = this;
+      var _this8 = this;
 
       if (this.state.AudienceType === 'UserType' && !_.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 _.sortBy(users, 'displayName');
       }
@@ -9216,7 +9216,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         var _users = [];
 
         var types = _.filter(this.state.types, function (type) {
-          return type.category === _this10.state.Category;
+          return type.category === _this8.state.Category;
         }).map(function (type) {
           return type.typeName;
         });
@@ -9234,24 +9234,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 = _.find(this.state.categories, function (t) {
-        return t.Key === _this12.state.Category;
+        return t.Key === _this9.state.Category;
       });
 
       if (typeObject) {
@@ -9307,12 +9303,12 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getUserExcludeList",
     value: function getUserExcludeList() {
-      var _this13 = this;
+      var _this10 = this;
 
       if (this.state.AudienceType === 'UserType' && !_.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 _.sortBy(users, 'displayName');
       }
@@ -9321,7 +9317,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
         var _users2 = [];
 
         var types = _.filter(this.state.types, function (type) {
-          return type.category === _this13.state.Category;
+          return type.category === _this10.state.Category;
         }).map(function (type) {
           return type.typeName;
         });
@@ -9339,8 +9335,6 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "addToInc",
     value: function addToInc(user) {
-      var _this14 = this;
-
       var list = _toConsumableArray(this.state.includeList);
 
       list.push({
@@ -9351,23 +9345,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: _.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",
@@ -9395,7 +9383,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExcludes",
     value: function renderExcludes() {
-      var _this16 = this;
+      var _this11 = this;
 
       if (!this.showUserPickers(false)) {
         return null;
@@ -9407,8 +9395,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex flex-between pointer",
         onClick: function onClick() {
-          _this16.setState({
-            showExclude: !_this16.state.showExclude
+          _this11.setState({
+            showExclude: !_this11.state.showExclude
           });
         }
       }, /*#__PURE__*/React.createElement("div", {
@@ -9432,7 +9420,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderIncludes",
     value: function renderIncludes() {
-      var _this17 = this;
+      var _this12 = this;
 
       if (!this.showUserPickers(true)) {
         return null;
@@ -9444,8 +9432,8 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex flex-between pointer",
         onClick: function onClick() {
-          _this17.setState({
-            showInclude: !_this17.state.showInclude
+          _this12.setState({
+            showInclude: !_this12.state.showInclude
           });
         }
       }, /*#__PURE__*/React.createElement("div", {
@@ -9469,7 +9457,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;
@@ -9488,7 +9476,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
           text: t.Title,
           rightIcon: "remove",
           rightClick: function rightClick() {
-            return _this18.onDetachAudienceTag(t);
+            return _this13.onDetachAudienceTag(t);
           }
         });
       }));
@@ -9496,7 +9484,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();
@@ -9511,7 +9499,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);
           }
         });
       }));
@@ -9532,7 +9520,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this20 = this;
+      var _this15 = this;
 
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
         type: "formTitleSmall",
@@ -9554,10 +9542,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),
@@ -9574,10 +9562,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),
@@ -9593,10 +9581,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,