@wojtekmaj/react-datetimerange-picker - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/DateTimeRangePicker.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,79 +6,96 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _react = _interopRequireWildcard(require("react"));
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _reactLifecyclesCompat = require("react-lifecycles-compat");
 
-var _react = require('react');
+var _makeEventProps = _interopRequireDefault(require("make-event-props"));
 
-var _react2 = _interopRequireDefault(_react);
+var _mergeClassNames = _interopRequireDefault(require("merge-class-names"));
 
-var _propTypes = require('prop-types');
+var _reactFit = _interopRequireDefault(require("react-fit"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _entry = _interopRequireDefault(require("react-calendar/dist/entry.nostyle"));
 
-var _reactLifecyclesCompat = require('react-lifecycles-compat');
+var _entry2 = _interopRequireDefault(require("react-clock/dist/entry.nostyle"));
 
-var _makeEventProps = require('make-event-props');
+var _DateTimeInput = _interopRequireDefault(require("react-datetime-picker/dist/DateTimeInput"));
 
-var _makeEventProps2 = _interopRequireDefault(_makeEventProps);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _mergeClassNames = require('merge-class-names');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-var _mergeClassNames2 = _interopRequireDefault(_mergeClassNames);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var _detectElementOverflow = require('detect-element-overflow');
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _detectElementOverflow2 = _interopRequireDefault(_detectElementOverflow);
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-var _entry = require('react-calendar/dist/entry.nostyle');
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var _entry2 = _interopRequireDefault(_entry);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _entry3 = require('react-clock/dist/entry.nostyle');
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
-var _entry4 = _interopRequireDefault(_entry3);
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-var _DateTimeInput = require('react-datetime-picker/dist/DateTimeInput');
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-var _DateTimeInput2 = _interopRequireDefault(_DateTimeInput);
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var allViews = ['hour', 'minute', 'second'];
 var baseClassName = 'react-datetimerange-picker';
 
-var DateTimeRangePicker = function (_PureComponent) {
+var DateTimeRangePicker =
+/*#__PURE__*/
+function (_PureComponent) {
   _inherits(DateTimeRangePicker, _PureComponent);
 
   function DateTimeRangePicker() {
-    var _ref;
+    var _getPrototypeOf2;
 
-    var _temp, _this, _ret;
+    var _this;
 
     _classCallCheck(this, DateTimeRangePicker);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateTimeRangePicker.__proto__ || Object.getPrototypeOf(DateTimeRangePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onOutsideAction = function (event) {
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DateTimeRangePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onOutsideAction", function (event) {
       if (_this.wrapper && !_this.wrapper.contains(event.target)) {
         _this.closeWidgets();
       }
-    }, _this.onDateChange = function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-          valueFrom = _ref3[0],
-          valueTo = _ref3[1];
+    });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDateChange", function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          valueFrom = _ref2[0],
+          valueTo = _ref2[1];
+
       var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -99,3 +116,2 @@ var value = _this.props.value;
         valueWithHour.setHours(prevValueFrom.getHours(), prevValueFrom.getMinutes(), prevValueFrom.getSeconds(), prevValueFrom.getMilliseconds());
-
         return valueWithHour;
@@ -111,3 +127,2 @@ }();
         valueWithHour.setHours(prevValueTo.getHours(), prevValueTo.getMinutes(), prevValueTo.getSeconds(), prevValueTo.getMilliseconds());
-
         return valueWithHour;
@@ -117,3 +132,5 @@ }();
       _this.onChange([nextValueFrom, nextValueTo], closeWidgets);
-    }, _this.onChange = function (value) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value) {
       var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -133,3 +150,5 @@
       }
-    }, _this.onChangeFrom = function (valueFrom) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeFrom", function (valueFrom) {
       var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -143,3 +162,5 @@ var value = _this.props.value;
       _this.onChange([valueFrom, valueTo], closeWidgets);
-    }, _this.onChangeTo = function (valueTo) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeTo", function (valueTo) {
       var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -153,3 +174,5 @@ var value = _this.props.value;
       _this.onChange([valueFrom, valueTo], closeWidgets);
-    }, _this.onFocus = function (event) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onFocus", function (event) {
       var _this$props = _this.props,
@@ -159,8 +182,7 @@ disabled = _this$props.disabled,
 
-
       if (onFocus) {
         onFocus(event);
-      }
+      } // Internet Explorer still fires onFocus on disabled elements
 
-      // Internet Explorer still fires onFocus on disabled elements
+
       if (disabled) {
@@ -175,3 +197,5 @@ return;
           _this.openCalendar();
+
           break;
+
         case 'hour12':
@@ -182,6 +206,10 @@ case 'hour24':
           _this.openClock();
+
           break;
+
         default:
       }
-    }, _this.openClock = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openClock", function () {
       _this.setState({
@@ -191,3 +219,5 @@ isCalendarOpen: false,
       });
-    }, _this.openCalendar = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openCalendar", function () {
       _this.setState({
@@ -197,3 +227,5 @@ isCalendarOpen: true,
       });
-    }, _this.toggleCalendar = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleCalendar", function () {
       _this.setState(function (prevState) {
@@ -205,3 +237,5 @@ return {
       });
-    }, _this.closeWidgets = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeWidgets", function () {
       _this.setState(function (prevState) {
@@ -217,11 +251,17 @@ if (!prevState.isCalendarOpen && !prevState.isClockOpen) {
       });
-    }, _this.stopPropagation = function (event) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "stopPropagation", function (event) {
       return event.stopPropagation();
-    }, _this.clear = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clear", function () {
       return _this.onChange(null);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    return _this;
   }
 
   _createClass(DateTimeRangePicker, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
@@ -232,3 +272,3 @@ document.addEventListener('mousedown', this.onOutsideAction);
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
@@ -239,19 +279,19 @@ document.removeEventListener('mousedown', this.onOutsideAction);
   }, {
-    key: 'renderInputs',
+    key: "renderInputs",
     value: function renderInputs() {
-      var _props = this.props,
-          calendarIcon = _props.calendarIcon,
-          clearIcon = _props.clearIcon,
-          disabled = _props.disabled,
-          locale = _props.locale,
-          maxDetail = _props.maxDetail,
-          maxDate = _props.maxDate,
-          minDate = _props.minDate,
-          name = _props.name,
-          required = _props.required,
-          showLeadingZeros = _props.showLeadingZeros,
-          value = _props.value;
-      var _state = this.state,
-          isCalendarOpen = _state.isCalendarOpen,
-          isClockOpen = _state.isClockOpen;
+      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;
 
@@ -264,3 +304,3 @@ var _concat7 = [].concat(value),
       var commonProps = {
-        className: baseClassName + '__inputGroup',
+        className: "".concat(baseClassName, "__inputGroup"),
         disabled: disabled,
@@ -275,52 +315,34 @@ isWidgetOpen: isCalendarOpen || isClockOpen,
       };
-
-      return _react2.default.createElement(
-        'div',
-        { className: baseClassName + '__wrapper' },
-        _react2.default.createElement(_DateTimeInput2.default, _extends({}, commonProps, {
-          name: name + '_from',
-          onChange: this.onChangeFrom,
-          returnValue: 'start',
-          value: valueFrom
-        })),
-        '\u2013',
-        _react2.default.createElement(_DateTimeInput2.default, _extends({}, commonProps, {
-          name: name + '_to',
-          onChange: this.onChangeTo,
-          returnValue: 'end',
-          value: valueTo
-        })),
-        clearIcon !== null && _react2.default.createElement(
-          'button',
-          {
-            className: baseClassName + '__clear-button ' + baseClassName + '__button',
-            disabled: disabled,
-            onClick: this.clear,
-            onFocus: this.stopPropagation,
-            type: 'button'
-          },
-          clearIcon
-        ),
-        calendarIcon !== null && _react2.default.createElement(
-          'button',
-          {
-            className: baseClassName + '__calendar-button ' + baseClassName + '__button',
-            disabled: disabled,
-            onClick: this.toggleCalendar,
-            onFocus: this.stopPropagation,
-            onBlur: this.resetValue,
-            type: 'button'
-          },
-          calendarIcon
-        )
-      );
+      return _react.default.createElement("div", {
+        className: "".concat(baseClassName, "__wrapper")
+      }, _react.default.createElement(_DateTimeInput.default, _extends({}, commonProps, {
+        name: "".concat(name, "_from"),
+        onChange: this.onChangeFrom,
+        returnValue: "start",
+        value: valueFrom
+      })), "\u2013", _react.default.createElement(_DateTimeInput.default, _extends({}, commonProps, {
+        name: "".concat(name, "_to"),
+        onChange: this.onChangeTo,
+        returnValue: "end",
+        value: valueTo
+      })), clearIcon !== null && _react.default.createElement("button", {
+        className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
+        disabled: disabled,
+        onClick: this.clear,
+        onFocus: this.stopPropagation,
+        type: "button"
+      }, clearIcon), calendarIcon !== null && _react.default.createElement("button", {
+        className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"),
+        disabled: disabled,
+        onClick: this.toggleCalendar,
+        onFocus: this.stopPropagation,
+        onBlur: this.resetValue,
+        type: "button"
+      }, calendarIcon));
     }
   }, {
-    key: 'renderCalendar',
+    key: "renderCalendar",
     value: function renderCalendar() {
-      var _this2 = this;
-
       var isCalendarOpen = this.state.isCalendarOpen;
 
-
       if (isCalendarOpen === null) {
@@ -330,52 +352,26 @@ return null;
 
-      var _props2 = this.props,
-          calendarClassName = _props2.calendarClassName,
-          dateTimeRangePickerClassName = _props2.className,
-          dateTimeRangePickerMaxDetail = _props2.maxDetail,
-          onChange = _props2.onChange,
-          value = _props2.value,
-          calendarProps = _objectWithoutProperties(_props2, ['calendarClassName', 'className', 'maxDetail', 'onChange', 'value']);
+      var _this$props3 = this.props,
+          calendarClassName = _this$props3.calendarClassName,
+          dateTimeRangePickerClassName = _this$props3.className,
+          dateTimeRangePickerMaxDetail = _this$props3.maxDetail,
+          onChange = _this$props3.onChange,
+          value = _this$props3.value,
+          calendarProps = _objectWithoutProperties(_this$props3, ["calendarClassName", "className", "maxDetail", "onChange", "value"]);
 
-      var className = baseClassName + '__calendar';
-
-      return _react2.default.createElement(
-        'div',
-        {
-          className: (0, _mergeClassNames2.default)(className, className + '--' + (isCalendarOpen ? 'open' : 'closed')),
-          ref: function ref(_ref4) {
-            if (!_ref4 || !isCalendarOpen) {
-              return;
-            }
-
-            _ref4.classList.remove(className + '--above-label');
-
-            var collisions = (0, _detectElementOverflow2.default)(_ref4, document.body);
-
-            if (collisions.collidedBottom) {
-              var overflowTopAfterChange = collisions.overflowTop + _ref4.clientHeight + _this2.wrapper.clientHeight;
-
-              // If it's going to make situation any better, display the calendar above the input
-              if (overflowTopAfterChange < collisions.overflowBottom) {
-                _ref4.classList.add(className + '--above-label');
-              }
-            }
-          }
-        },
-        _react2.default.createElement(_entry2.default, _extends({
-          className: calendarClassName,
-          onChange: this.onDateChange,
-          selectRange: true,
-          value: value || null
-        }, calendarProps))
-      );
+      var className = "".concat(baseClassName, "__calendar");
+      return _react.default.createElement(_reactFit.default, null, _react.default.createElement("div", {
+        className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'))
+      }, _react.default.createElement(_entry.default, _extends({
+        className: calendarClassName,
+        onChange: this.onDateChange,
+        selectRange: true,
+        value: value || null
+      }, calendarProps))));
     }
   }, {
-    key: 'renderClock',
+    key: "renderClock",
     value: function renderClock() {
-      var _this3 = this;
-
       var disableClock = this.props.disableClock;
       var isClockOpen = this.state.isClockOpen;
 
-
       if (isClockOpen === null || disableClock) {
@@ -385,86 +381,54 @@ return null;
 
-      var _props3 = this.props,
-          clockClassName = _props3.clockClassName,
-          dateTimeRangePickerClassName = _props3.className,
-          maxDetail = _props3.maxDetail,
-          onChange = _props3.onChange,
-          dateTimeRangePickerValue = _props3.value,
-          clockProps = _objectWithoutProperties(_props3, ['clockClassName', 'className', 'maxDetail', 'onChange', 'value']);
+      var _this$props4 = this.props,
+          clockClassName = _this$props4.clockClassName,
+          dateTimeRangePickerClassName = _this$props4.className,
+          maxDetail = _this$props4.maxDetail,
+          onChange = _this$props4.onChange,
+          dateTimeRangePickerValue = _this$props4.value,
+          clockProps = _objectWithoutProperties(_this$props4, ["clockClassName", "className", "maxDetail", "onChange", "value"]);
 
-      var className = baseClassName + '__clock';
-
+      var className = "".concat(baseClassName, "__clock");
       var maxDetailIndex = allViews.indexOf(maxDetail);
-
       var value = [].concat(dateTimeRangePickerValue)[0]; // TODO: Show clock for "date to" inputs
 
-      return _react2.default.createElement(
-        'div',
-        {
-          className: (0, _mergeClassNames2.default)(className, className + '--' + (isClockOpen ? 'open' : 'closed')),
-          ref: function ref(_ref5) {
-            if (!_ref5 || !isClockOpen) {
-              return;
-            }
-
-            _ref5.classList.remove(className + '--above-label');
-
-            var collisions = (0, _detectElementOverflow2.default)(_ref5, document.body);
-
-            if (collisions.collidedBottom) {
-              var overflowTopAfterChange = collisions.overflowTop + _ref5.clientHeight + _this3.wrapper.clientHeight;
-
-              // If it's going to make situation any better, display the calendar above the input
-              if (overflowTopAfterChange < collisions.overflowBottom) {
-                _ref5.classList.add(className + '--above-label');
-              }
-            }
-          }
-        },
-        _react2.default.createElement(_entry4.default, _extends({
-          className: clockClassName,
-          renderMinuteHand: maxDetailIndex > 0,
-          renderSecondHand: maxDetailIndex > 1,
-          value: value
-        }, clockProps))
-      );
+      return _react.default.createElement(_reactFit.default, null, _react.default.createElement("div", {
+        className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'))
+      }, _react.default.createElement(_entry2.default, _extends({
+        className: clockClassName,
+        renderMinuteHand: maxDetailIndex > 0,
+        renderSecondHand: maxDetailIndex > 1,
+        value: value
+      }, clockProps))));
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this2 = this;
 
-      var _props4 = this.props,
-          className = _props4.className,
-          disabled = _props4.disabled;
-      var _state2 = this.state,
-          isCalendarOpen = _state2.isCalendarOpen,
-          isClockOpen = _state2.isClockOpen;
+      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;
+      return _react.default.createElement("div", _extends({
+        className: (0, _mergeClassNames.default)(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
+      }, this.eventProps, {
+        onFocus: this.onFocus,
+        ref: function ref(_ref3) {
+          if (!_ref3) {
+            return;
+          }
 
-
-      return _react2.default.createElement(
-        'div',
-        _extends({
-          className: (0, _mergeClassNames2.default)(baseClassName, baseClassName + '--' + (isCalendarOpen || isClockOpen ? 'open' : 'closed'), baseClassName + '--' + (disabled ? 'disabled' : 'enabled'), className)
-        }, this.eventProps, {
-          onFocus: this.onFocus,
-          ref: function ref(_ref6) {
-            if (!_ref6) {
-              return;
-            }
-
-            _this4.wrapper = _ref6;
-          }
-        }),
-        this.renderInputs(),
-        this.renderCalendar(),
-        this.renderClock()
-      );
+          _this2.wrapper = _ref3;
+        }
+      }), this.renderInputs(), this.renderCalendar(), this.renderClock());
     }
   }, {
-    key: 'eventProps',
+    key: "eventProps",
     get: function get() {
-      return (0, _makeEventProps2.default)(this.props);
+      return (0, _makeEventProps.default)(this.props);
     }
   }], [{
-    key: 'getDerivedStateFromProps',
+    key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
@@ -492,26 +456,48 @@ var nextState = {};
 
+var CalendarIcon = _react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "19",
+  height: "19",
+  viewBox: "0 0 19 19"
+}, _react.default.createElement("g", {
+  stroke: "black",
+  strokeWidth: "2"
+}, _react.default.createElement("rect", {
+  width: "15",
+  height: "15",
+  x: "2",
+  y: "2",
+  fill: "none"
+}), _react.default.createElement("line", {
+  x1: "6",
+  y1: "0",
+  x2: "6",
+  y2: "4"
+}), _react.default.createElement("line", {
+  x1: "13",
+  y1: "0",
+  x2: "13",
+  y2: "4"
+})));
 
-var CalendarIcon = _react2.default.createElement(
-  'svg',
-  { xmlns: 'http://www.w3.org/2000/svg', width: '19', height: '19', viewBox: '0 0 19 19' },
-  _react2.default.createElement(
-    'g',
-    { stroke: 'black', strokeWidth: '2' },
-    _react2.default.createElement('rect', { width: '15', height: '15', x: '2', y: '2', fill: 'none' }),
-    _react2.default.createElement('line', { x1: '6', y1: '0', x2: '6', y2: '4' }),
-    _react2.default.createElement('line', { x1: '13', y1: '0', x2: '13', y2: '4' })
-  )
-);
+var ClearIcon = _react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "19",
+  height: "19",
+  viewBox: "0 0 19 19"
+}, _react.default.createElement("g", {
+  stroke: "black",
+  strokeWidth: "2"
+}, _react.default.createElement("line", {
+  x1: "4",
+  y1: "4",
+  x2: "15",
+  y2: "15"
+}), _react.default.createElement("line", {
+  x1: "15",
+  y1: "4",
+  x2: "4",
+  y2: "15"
+})));
 
-var ClearIcon = _react2.default.createElement(
-  'svg',
-  { xmlns: 'http://www.w3.org/2000/svg', width: '19', height: '19', viewBox: '0 0 19 19' },
-  _react2.default.createElement(
-    'g',
-    { stroke: 'black', strokeWidth: '2' },
-    _react2.default.createElement('line', { x1: '4', y1: '4', x2: '15', y2: '15' }),
-    _react2.default.createElement('line', { x1: '15', y1: '4', x2: '4', y2: '15' })
-  )
-);
-
 DateTimeRangePicker.defaultProps = {
@@ -525,18 +511,16 @@ calendarIcon: CalendarIcon,
 };
-
-DateTimeRangePicker.propTypes = _extends({}, _entry2.default.propTypes, {
-  calendarClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
-  calendarIcon: _propTypes2.default.node,
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
-  clearIcon: _propTypes2.default.node,
-  disabled: _propTypes2.default.bool,
-  disableClock: _propTypes2.default.bool,
-  isCalendarOpen: _propTypes2.default.bool,
-  isClockOpen: _propTypes2.default.bool,
-  maxDetail: _propTypes2.default.oneOf(allViews),
-  name: _propTypes2.default.string,
-  required: _propTypes2.default.bool,
-  showLeadingZeros: _propTypes2.default.bool
+DateTimeRangePicker.propTypes = _objectSpread({}, _entry.default.propTypes, {
+  calendarClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  calendarIcon: _propTypes.default.node,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  clearIcon: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
+  disableClock: _propTypes.default.bool,
+  isCalendarOpen: _propTypes.default.bool,
+  isClockOpen: _propTypes.default.bool,
+  maxDetail: _propTypes.default.oneOf(allViews),
+  name: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  showLeadingZeros: _propTypes.default.bool
 });
-
 (0, _reactLifecyclesCompat.polyfill)(DateTimeRangePicker);

dist/entry.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-require('react-calendar/dist/Calendar.css');
+require("react-calendar/dist/Calendar.css");
 
-require('react-clock/dist/Clock.css');
+require("react-clock/dist/Clock.css");
 
-var _DateTimeRangePicker = require('./DateTimeRangePicker');
+var _DateTimeRangePicker = _interopRequireDefault(require("./DateTimeRangePicker"));
 
-var _DateTimeRangePicker2 = _interopRequireDefault(_DateTimeRangePicker);
+require("./DateTimeRangePicker.css");
 
-require('./DateTimeRangePicker.css');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _DateTimeRangePicker2.default;
-
 // File is created during build phase and placed in dist directory
-// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line import/no-unresolved
+var _default = _DateTimeRangePicker.default;
+exports.default = _default;

dist/entry.nostyle.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _DateTimeRangePicker = require('./DateTimeRangePicker');
+var _DateTimeRangePicker = _interopRequireDefault(require("./DateTimeRangePicker"));
 
-var _DateTimeRangePicker2 = _interopRequireDefault(_DateTimeRangePicker);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _DateTimeRangePicker2.default;
+var _default = _DateTimeRangePicker.default;
+exports.default = _default;

dist/shared/propTypes.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,6 +6,3 @@ Object.defineProperty(exports, "__esModule", {
 });
-
-var _propTypes = require('react-calendar/dist/shared/propTypes');
-
-Object.defineProperty(exports, 'isMaxDate', {
+Object.defineProperty(exports, "isMaxDate", {
   enumerable: true,
@@ -16,3 +13,3 @@ get: function get() {
 });
-Object.defineProperty(exports, 'isMinDate', {
+Object.defineProperty(exports, "isMinDate", {
   enumerable: true,
@@ -22,2 +19,4 @@ get: function get() {
   }
-});
+});
+
+var _propTypes = require("react-calendar/dist/shared/propTypes");

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A datetime range picker for your React app.",
   "main": "dist/entry.js",
-  "es6": "src/entry.js",
+  "source": "src/entry.js",
   "scripts": {
     "build": "yarn run build-js && yarn run copy-styles && yarn run build-styles",
-    "build-js": "babel src -d dist --ignore __tests__",
+    "build-js": "babel src -d dist --ignore **/__tests__",
     "build-styles": "lessc ./dist/DateTimeRangePicker.less ./dist/DateTimeRangePicker.css",
@@ -15,3 +15,3 @@ "clean": "rimraf dist",
     "test": "yarn run test-eslint && yarn run test-jest",
-    "test-eslint": "eslint src/ test/ --ext .jsx,.js",
+    "test-eslint": "eslint sample/ src/ test/ --ext .jsx,.js",
     "test-jest": "jest",
@@ -50,23 +50,22 @@ "test-jest-coverage": "jest --coverage"
   "dependencies": {
-    "detect-element-overflow": "^1.1.1",
     "make-event-props": "^1.1.0",
     "merge-class-names": "^1.1.1",
     "prop-types": "^15.6.0",
-    "react-calendar": "^2.17.4",
+    "react-calendar": "^2.18.0",
     "react-clock": "^2.3.0",
-    "react-datetime-picker": "^2.0.0",
+    "react-datetime-picker": "^2.2.1",
+    "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "eslint": "^5.5.0",
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.0",
+    "babel-jest": "^24.0.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "eslint": "^5.11.0",
     "eslint-config-airbnb": "^17.1.0",
@@ -76,7 +75,7 @@ "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
-    "jest": "^23.6.0",
-    "jest-cli": "^23.6.0",
+    "jest": "^24.0.0",
     "less": "^3.8.1",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-test-renderer": "^16.7.0",
     "rimraf": "^2.6.2"
@@ -83,0 +82,0 @@ },

src/DateTimeRangePicker.jsx

@@ -6,3 +6,3 @@ import React, { PureComponent } from 'react';
 import mergeClassNames from 'merge-class-names';
-import detectElementOverflow from 'detect-element-overflow';
+import Fit from 'react-fit';
 
@@ -278,36 +278,13 @@ import Calendar from 'react-calendar/dist/entry.nostyle';
     return (
-      <div
-        className={mergeClassNames(
-          className,
-          `${className}--${isCalendarOpen ? 'open' : 'closed'}`,
-        )}
-        ref={(ref) => {
-          if (!ref || !isCalendarOpen) {
-            return;
-          }
-
-          ref.classList.remove(`${className}--above-label`);
-
-          const collisions = detectElementOverflow(ref, document.body);
-
-          if (collisions.collidedBottom) {
-            const overflowTopAfterChange = (
-              collisions.overflowTop + ref.clientHeight + this.wrapper.clientHeight
-            );
-
-            // If it's going to make situation any better, display the calendar above the input
-            if (overflowTopAfterChange < collisions.overflowBottom) {
-              ref.classList.add(`${className}--above-label`);
-            }
-          }
-        }}
-      >
-        <Calendar
-          className={calendarClassName}
-          onChange={this.onDateChange}
-          selectRange
-          value={value || null}
-          {...calendarProps}
-        />
-      </div>
+      <Fit>
+        <div className={mergeClassNames(className, `${className}--${isCalendarOpen ? 'open' : 'closed'}`)}>
+          <Calendar
+            className={calendarClassName}
+            onChange={this.onDateChange}
+            selectRange
+            value={value || null}
+            {...calendarProps}
+          />
+        </div>
+      </Fit>
     );
@@ -340,36 +317,13 @@ }
     return (
-      <div
-        className={mergeClassNames(
-          className,
-          `${className}--${isClockOpen ? 'open' : 'closed'}`,
-        )}
-        ref={(ref) => {
-          if (!ref || !isClockOpen) {
-            return;
-          }
-
-          ref.classList.remove(`${className}--above-label`);
-
-          const collisions = detectElementOverflow(ref, document.body);
-
-          if (collisions.collidedBottom) {
-            const overflowTopAfterChange = (
-              collisions.overflowTop + ref.clientHeight + this.wrapper.clientHeight
-            );
-
-            // If it's going to make situation any better, display the calendar above the input
-            if (overflowTopAfterChange < collisions.overflowBottom) {
-              ref.classList.add(`${className}--above-label`);
-            }
-          }
-        }}
-      >
-        <Clock
-          className={clockClassName}
-          renderMinuteHand={maxDetailIndex > 0}
-          renderSecondHand={maxDetailIndex > 1}
-          value={value}
-          {...clockProps}
-        />
-      </div>
+      <Fit>
+        <div className={mergeClassNames(className, `${className}--${isClockOpen ? 'open' : 'closed'}`)}>
+          <Clock
+            className={clockClassName}
+            renderMinuteHand={maxDetailIndex > 0}
+            renderSecondHand={maxDetailIndex > 1}
+            value={value}
+            {...clockProps}
+          />
+        </div>
+      </Fit>
     );
@@ -376,0 +330,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

63737

increased by0.37%

Dev dependency count

20

decreased by-4.76%

Worsened metrics

Lines of code

1248

decreased by-3.55%

Dependency changes

• + Addedreact-fit@^1.0.3

• - Removeddetect-element-overflow@^1.1.1

• Updatedreact-calendar@^2.18.0

• Updatedreact-datetime-picker@^2.2.1