@plusscommunities/pluss-core-web 1.6.3-beta.0 → 1.6.3-beta.2

package/dist/index.cjs.js

@@ -4448,7 +4448,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "onNewProps",
     value: function onNewProps(nextProps, forceUpdate) {
-      if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+      if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+        var shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+        this.setState({
+          shownMonth: shownMonth
+        });
+        this.generateGrid(shownMonth);
+      } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
         this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
       } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
         var dateToUse = nextProps.selectedDate;
@@ -4461,11 +4467,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           dateToUse = new Date();
         }
 
+        var _shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
+
         this.setState({
-          shownMonth: dateToUse,
+          shownMonth: _shownMonth,
           selectedDate: dateToUse
         });
-        this.generateGrid(dateToUse, dateToUse);
+        this.generateGrid(_shownMonth, dateToUse);
       }
     }
   }, {
@@ -4505,7 +4513,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     value: function isDateEnabled(date) {
       if (this.props.enabledDates) {
         var found = this.props.enabledDates.find(function (d) {
-          return d.day === date.format();
+          return moment__default['default'](d.day).format('YYYYMMDD') === date.format('YYYYMMDD');
         });
         if (found) return found.enabled;
       }
@@ -4515,16 +4523,20 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "changeMonth",
     value: function changeMonth(change) {
+      var _this2 = this;
+
       var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
       this.setState({
         shownMonth: newShownDate
+      }, function () {
+        if (_this2.props.changeMonth) _this2.props.changeMonth(_this2.state.shownMonth);
       });
       this.generateGrid(newShownDate);
     }
   }, {
     key: "selectRange",
     value: function selectRange(date) {
-      var _this2 = this;
+      var _this3 = this;
 
       var d1 = moment__default['default'](this.state.lastSelected, 'DD-MM-YYYY');
       var d2 = moment__default['default'](date, 'DD-MM-YYYY');
@@ -4548,7 +4560,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
 
       if (___default['default'].includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !___default['default'].includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !___default['default'].some(dateRange, function (d) {
-        return !___default['default'].includes(_this2.props.selectedDates, d);
+        return !___default['default'].includes(_this3.props.selectedDates, d);
       })) {
         // the first clicked date was just de-selected and then clicked on a selected date
         // or every date in the range is already selected, then
@@ -4566,11 +4578,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     key: "selectDate",
     value: function selectDate(date, e) {
       var enabled = this.isDateEnabled(date);
+      var isBeforeMinDate = this.props.minDate && moment__default['default'](date).isBefore(this.props.minDate);
       console.log('selected a date', {
         date: date,
-        enabled: enabled
+        enabled: enabled,
+        isBeforeMinDate: isBeforeMinDate
       });
-      if (enabled === false) return;
+      if (enabled === false || isBeforeMinDate) return;
 
       if (this.props.multiple) {
         var dateKey = moment__default['default'](date).format('DD-MM-YYYY');
@@ -4647,7 +4661,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderGrid",
     value: function renderGrid() {
-      var _this3 = this;
+      var _this4 = this;
 
       return this.state.grid.map(function (row, index) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -4678,7 +4692,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           }, /*#__PURE__*/React__default['default'].createElement("div", {
             className: "datepicker__date__inner",
             onClick: function onClick(e) {
-              return _this3.selectDate(date.date, e);
+              return _this4.selectDate(date.date, e);
             }
           }, date.display));
         }));

package/dist/index.esm.js

@@ -4418,7 +4418,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "onNewProps",
     value: function onNewProps(nextProps, forceUpdate) {
-      if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+      if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+        var shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+        this.setState({
+          shownMonth: shownMonth
+        });
+        this.generateGrid(shownMonth);
+      } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
         this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
       } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
         var dateToUse = nextProps.selectedDate;
@@ -4431,11 +4437,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           dateToUse = new Date();
         }
 
+        var _shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
+
         this.setState({
-          shownMonth: dateToUse,
+          shownMonth: _shownMonth,
           selectedDate: dateToUse
         });
-        this.generateGrid(dateToUse, dateToUse);
+        this.generateGrid(_shownMonth, dateToUse);
       }
     }
   }, {
@@ -4475,7 +4483,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     value: function isDateEnabled(date) {
       if (this.props.enabledDates) {
         var found = this.props.enabledDates.find(function (d) {
-          return d.day === date.format();
+          return moment(d.day).format('YYYYMMDD') === date.format('YYYYMMDD');
         });
         if (found) return found.enabled;
       }
@@ -4485,16 +4493,20 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "changeMonth",
     value: function changeMonth(change) {
+      var _this2 = this;
+
       var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
       this.setState({
         shownMonth: newShownDate
+      }, function () {
+        if (_this2.props.changeMonth) _this2.props.changeMonth(_this2.state.shownMonth);
       });
       this.generateGrid(newShownDate);
     }
   }, {
     key: "selectRange",
     value: function selectRange(date) {
-      var _this2 = this;
+      var _this3 = this;
 
       var d1 = moment(this.state.lastSelected, 'DD-MM-YYYY');
       var d2 = moment(date, 'DD-MM-YYYY');
@@ -4518,7 +4530,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
 
       if (_.includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !_.includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !_.some(dateRange, function (d) {
-        return !_.includes(_this2.props.selectedDates, d);
+        return !_.includes(_this3.props.selectedDates, d);
       })) {
         // the first clicked date was just de-selected and then clicked on a selected date
         // or every date in the range is already selected, then
@@ -4536,11 +4548,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     key: "selectDate",
     value: function selectDate(date, e) {
       var enabled = this.isDateEnabled(date);
+      var isBeforeMinDate = this.props.minDate && moment(date).isBefore(this.props.minDate);
       console.log('selected a date', {
         date: date,
-        enabled: enabled
+        enabled: enabled,
+        isBeforeMinDate: isBeforeMinDate
       });
-      if (enabled === false) return;
+      if (enabled === false || isBeforeMinDate) return;
 
       if (this.props.multiple) {
         var dateKey = moment(date).format('DD-MM-YYYY');
@@ -4617,7 +4631,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderGrid",
     value: function renderGrid() {
-      var _this3 = this;
+      var _this4 = this;
 
       return this.state.grid.map(function (row, index) {
         return /*#__PURE__*/React.createElement("div", {
@@ -4648,7 +4662,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           }, /*#__PURE__*/React.createElement("div", {
             className: "datepicker__date__inner",
             onClick: function onClick(e) {
-              return _this3.selectDate(date.date, e);
+              return _this4.selectDate(date.date, e);
             }
           }, date.display));
         }));

package/dist/index.umd.js

@@ -4416,7 +4416,13 @@
     }, {
       key: "onNewProps",
       value: function onNewProps(nextProps, forceUpdate) {
-        if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+        if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+          var shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+          this.setState({
+            shownMonth: shownMonth
+          });
+          this.generateGrid(shownMonth);
+        } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
           this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
         } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
           var dateToUse = nextProps.selectedDate;
@@ -4429,11 +4435,13 @@
             dateToUse = new Date();
           }
 
+          var _shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
+
           this.setState({
-            shownMonth: dateToUse,
+            shownMonth: _shownMonth,
             selectedDate: dateToUse
           });
-          this.generateGrid(dateToUse, dateToUse);
+          this.generateGrid(_shownMonth, dateToUse);
         }
       }
     }, {
@@ -4473,7 +4481,7 @@
       value: function isDateEnabled(date) {
         if (this.props.enabledDates) {
           var found = this.props.enabledDates.find(function (d) {
-            return d.day === date.format();
+            return moment__default['default'](d.day).format('YYYYMMDD') === date.format('YYYYMMDD');
           });
           if (found) return found.enabled;
         }
@@ -4483,16 +4491,20 @@
     }, {
       key: "changeMonth",
       value: function changeMonth(change) {
+        var _this2 = this;
+
         var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
         this.setState({
           shownMonth: newShownDate
+        }, function () {
+          if (_this2.props.changeMonth) _this2.props.changeMonth(_this2.state.shownMonth);
         });
         this.generateGrid(newShownDate);
       }
     }, {
       key: "selectRange",
       value: function selectRange(date) {
-        var _this2 = this;
+        var _this3 = this;
 
         var d1 = moment__default['default'](this.state.lastSelected, 'DD-MM-YYYY');
         var d2 = moment__default['default'](date, 'DD-MM-YYYY');
@@ -4516,7 +4528,7 @@
         }
 
         if (___default['default'].includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !___default['default'].includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !___default['default'].some(dateRange, function (d) {
-          return !___default['default'].includes(_this2.props.selectedDates, d);
+          return !___default['default'].includes(_this3.props.selectedDates, d);
         })) {
           // the first clicked date was just de-selected and then clicked on a selected date
           // or every date in the range is already selected, then
@@ -4534,11 +4546,13 @@
       key: "selectDate",
       value: function selectDate(date, e) {
         var enabled = this.isDateEnabled(date);
+        var isBeforeMinDate = this.props.minDate && moment__default['default'](date).isBefore(this.props.minDate);
         console.log('selected a date', {
           date: date,
-          enabled: enabled
+          enabled: enabled,
+          isBeforeMinDate: isBeforeMinDate
         });
-        if (enabled === false) return;
+        if (enabled === false || isBeforeMinDate) return;
 
         if (this.props.multiple) {
           var dateKey = moment__default['default'](date).format('DD-MM-YYYY');
@@ -4615,7 +4629,7 @@
     }, {
       key: "renderGrid",
       value: function renderGrid() {
-        var _this3 = this;
+        var _this4 = this;
 
         return this.state.grid.map(function (row, index) {
           return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -4646,7 +4660,7 @@
             }, /*#__PURE__*/React__default['default'].createElement("div", {
               className: "datepicker__date__inner",
               onClick: function onClick(e) {
-                return _this3.selectDate(date.date, e);
+                return _this4.selectDate(date.date, e);
               }
             }, date.display));
           }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.6.3-beta.0",
+  "version": "1.6.3-beta.2",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/DatePicker.js

@@ -18,7 +18,11 @@ class DatePicker extends Component {
   }
 
   onNewProps(nextProps, forceUpdate) {
-    if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+    if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+      const shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+      this.setState({ shownMonth });
+      this.generateGrid(shownMonth);
+    } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
       this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
     } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
       let dateToUse = nextProps.selectedDate;
@@ -28,11 +32,12 @@ class DatePicker extends Component {
       if (isNaN(dateToUse)) {
         dateToUse = new Date();
       }
+      const shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
       this.setState({
-        shownMonth: dateToUse,
+        shownMonth: shownMonth,
         selectedDate: dateToUse,
       });
-      this.generateGrid(dateToUse, dateToUse);
+      this.generateGrid(shownMonth, dateToUse);
     }
   }
 
@@ -63,7 +68,7 @@ class DatePicker extends Component {
 
   isDateEnabled(date) {
     if (this.props.enabledDates) {
-      const found = this.props.enabledDates.find((d) => d.day === date.format());
+      const found = this.props.enabledDates.find((d) => moment(d.day).format('YYYYMMDD') === date.format('YYYYMMDD'));
       if (found) return found.enabled;
     }
     return null;
@@ -71,9 +76,14 @@ class DatePicker extends Component {
 
   changeMonth(change) {
     const newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
-    this.setState({
-      shownMonth: newShownDate,
-    });
+    this.setState(
+      {
+        shownMonth: newShownDate,
+      },
+      () => {
+        if (this.props.changeMonth) this.props.changeMonth(this.state.shownMonth);
+      },
+    );
     this.generateGrid(newShownDate);
   }
 
@@ -122,8 +132,9 @@ class DatePicker extends Component {
 
   selectDate(date, e) {
     const enabled = this.isDateEnabled(date);
-    console.log('selected a date', { date, enabled });
-    if (enabled === false) return;
+    const isBeforeMinDate = this.props.minDate && moment(date).isBefore(this.props.minDate);
+    console.log('selected a date', { date, enabled, isBeforeMinDate });
+    if (enabled === false || isBeforeMinDate) return;
 
     if (this.props.multiple) {
       const dateKey = moment(date).format('DD-MM-YYYY');