react-datetime-picker - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

dist/DateTimePicker.js

@@ -28,2 +28,4 @@ "use strict";
 
+var _utils = require("./shared/utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -215,2 +217,22 @@
   }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state = this.state,
+          isCalendarOpen = _this$state.isCalendarOpen,
+          isClockOpen = _this$state.isClockOpen;
+      var _this$props2 = this.props,
+          onCalendarClose = _this$props2.onCalendarClose,
+          onCalendarOpen = _this$props2.onCalendarOpen,
+          onClockClose = _this$props2.onClockClose,
+          onClockOpen = _this$props2.onClockOpen;
+
+      if (isCalendarOpen !== prevState.isCalendarOpen) {
+        (0, _utils.callIfDefined)(isCalendarOpen ? onCalendarOpen : onCalendarClose);
+      }
+
+      if (isClockOpen !== prevState.isClockOpen) {
+        (0, _utils.callIfDefined)(isClockOpen ? onClockOpen : onClockClose);
+      }
+    }
+  }, {
     key: "componentWillUnmount",
@@ -224,17 +246,17 @@ value: function componentWillUnmount() {
     value: function renderInputs() {
-      var _this$props2 = this.props,
-          calendarIcon = _this$props2.calendarIcon,
-          clearIcon = _this$props2.clearIcon,
-          disabled = _this$props2.disabled,
-          locale = _this$props2.locale,
-          maxDetail = _this$props2.maxDetail,
-          maxDate = _this$props2.maxDate,
-          minDate = _this$props2.minDate,
-          name = _this$props2.name,
-          required = _this$props2.required,
-          showLeadingZeros = _this$props2.showLeadingZeros,
-          value = _this$props2.value;
-      var _this$state = this.state,
-          isCalendarOpen = _this$state.isCalendarOpen,
-          isClockOpen = _this$state.isClockOpen;
+      var _this$props3 = this.props,
+          calendarIcon = _this$props3.calendarIcon,
+          clearIcon = _this$props3.clearIcon,
+          disabled = _this$props3.disabled,
+          locale = _this$props3.locale,
+          maxDetail = _this$props3.maxDetail,
+          maxDate = _this$props3.maxDate,
+          minDate = _this$props3.minDate,
+          name = _this$props3.name,
+          required = _this$props3.required,
+          showLeadingZeros = _this$props3.showLeadingZeros,
+          value = _this$props3.value;
+      var _this$state2 = this.state,
+          isCalendarOpen = _this$state2.isCalendarOpen,
+          isClockOpen = _this$state2.isClockOpen;
       return _react.default.createElement("div", {
@@ -280,9 +302,9 @@ className: "".concat(baseClassName, "__wrapper")
 
-      var _this$props3 = this.props,
-          calendarClassName = _this$props3.calendarClassName,
-          dateTimePickerClassName = _this$props3.className,
-          dateTimePickerMaxDetail = _this$props3.maxDetail,
-          onChange = _this$props3.onChange,
-          value = _this$props3.value,
-          calendarProps = _objectWithoutProperties(_this$props3, ["calendarClassName", "className", "maxDetail", "onChange", "value"]);
+      var _this$props4 = this.props,
+          calendarClassName = _this$props4.calendarClassName,
+          dateTimePickerClassName = _this$props4.className,
+          dateTimePickerMaxDetail = _this$props4.maxDetail,
+          onChange = _this$props4.onChange,
+          value = _this$props4.value,
+          calendarProps = _objectWithoutProperties(_this$props4, ["calendarClassName", "className", "maxDetail", "onChange", "value"]);
 
@@ -308,8 +330,8 @@ var className = "".concat(baseClassName, "__calendar");
 
-      var _this$props4 = this.props,
-          clockClassName = _this$props4.clockClassName,
-          timePickerClassName = _this$props4.className,
-          maxDetail = _this$props4.maxDetail,
-          onChange = _this$props4.onChange,
-          clockProps = _objectWithoutProperties(_this$props4, ["clockClassName", "className", "maxDetail", "onChange"]);
+      var _this$props5 = this.props,
+          clockClassName = _this$props5.clockClassName,
+          timePickerClassName = _this$props5.className,
+          maxDetail = _this$props5.maxDetail,
+          onChange = _this$props5.onChange,
+          clockProps = _objectWithoutProperties(_this$props5, ["clockClassName", "className", "maxDetail", "onChange"]);
 
@@ -331,8 +353,8 @@ var className = "".concat(baseClassName, "__clock");
 
-      var _this$props5 = this.props,
-          className = _this$props5.className,
-          disabled = _this$props5.disabled;
-      var _this$state2 = this.state,
-          isCalendarOpen = _this$state2.isCalendarOpen,
-          isClockOpen = _this$state2.isClockOpen;
+      var _this$props6 = this.props,
+          className = _this$props6.className,
+          disabled = _this$props6.disabled;
+      var _this$state3 = this.state,
+          isCalendarOpen = _this$state3.isCalendarOpen,
+          isClockOpen = _this$state3.isClockOpen;
       return _react.default.createElement("div", _extends({
@@ -339,0 +361,0 @@ className: (0, _mergeClassNames.default)(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)

dist/shared/utils.js

@@ -6,2 +6,8 @@ "use strict";
 });
+Object.defineProperty(exports, "callIfDefined", {
+  enumerable: true,
+  get: function get() {
+    return _utils.callIfDefined;
+  }
+});
 Object.defineProperty(exports, "min", {
@@ -8,0 +14,0 @@ enumerable: true,

package.json

 {
   "name": "react-datetime-picker",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A date range picker for your React app.",
@@ -51,6 +51,6 @@ "main": "dist/entry.js",
     "react-clock": "^2.3.0",
-    "react-date-picker": "^7.3.0",
+    "react-date-picker": "^7.4.0",
     "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "^3.3.0"
+    "react-time-picker": "^3.4.0"
   },
@@ -57,0 +57,0 @@ "devDependencies": {

README.md

@@ -106,2 +106,6 @@ ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-datetime-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg
 |onChange|Function called when the user clicks an item on the most detailed view available.|`(value) => alert('New date is: ', value)`|
+|onCalendarClose|Function called when the calendar closes.|`() => alert('Calendar closed')`|
+|onCalendarOpen|Function called when the calendar opens.|`() => alert('Calendar opened')`|
+|onClockClose|Function called when the clock closes.|`() => alert('Clock closed')`|
+|onClockOpen|Function called when the clock opens.|`() => alert('Clock opened')`|
 |returnValue|Defines which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. Defaults to "start".|`"range"`|
@@ -108,0 +112,0 @@ |required|Defines whether date input should be required. Defaults to false.|`true`|

src/DateTimePicker.jsx

@@ -14,2 +14,3 @@ import React, { PureComponent } from 'react';
 import { isMaxDate, isMinDate } from './shared/propTypes';
+import { callIfDefined } from './shared/utils';
 
@@ -47,2 +48,20 @@ const allViews = ['hour', 'minute', 'second'];
 
+  componentDidUpdate(prevProps, prevState) {
+    const { isCalendarOpen, isClockOpen } = this.state;
+    const {
+      onCalendarClose,
+      onCalendarOpen,
+      onClockClose,
+      onClockOpen,
+    } = this.props;
+
+    if (isCalendarOpen !== prevState.isCalendarOpen) {
+      callIfDefined(isCalendarOpen ? onCalendarOpen : onCalendarClose);
+    }
+
+    if (isClockOpen !== prevState.isClockOpen) {
+      callIfDefined(isClockOpen ? onClockOpen : onClockClose);
+    }
+  }
+
   componentWillUnmount() {
@@ -49,0 +68,0 @@ document.removeEventListener('mousedown', this.onOutsideAction);

src/shared/utils.js

 export {
+  callIfDefined,
   min,
@@ -3,0 +4,0 @@ max,

No alert changes

Improved metrics

Total package byte prevSize

134299

increased by1.4%

Lines of code

3244

increased by1.31%

Number of lines in readme file

141

increased by2.92%

Dependency changes

• Updatedreact-date-picker@^7.4.0

• Updatedreact-time-picker@^3.4.0