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

Comparing version 2.4.0 to 3.0.0

dist/DateTimeRangePicker.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _reactLifecyclesCompat = require("react-lifecycles-compat");
-
 var _makeEventProps = _interopRequireDefault(require("make-event-props"));
@@ -19,8 +17,8 @@
 
+var _reactCalendar = _interopRequireDefault(require("react-calendar"));
+
 var _reactFit = _interopRequireDefault(require("react-fit"));
 
-var _entry = _interopRequireDefault(require("react-calendar/dist/entry.nostyle"));
+var _entry = _interopRequireDefault(require("react-clock/dist/entry.nostyle"));
 
-var _entry2 = _interopRequireDefault(require("react-clock/dist/entry.nostyle"));
-
 var _DateTimeInput = _interopRequireDefault(require("react-datetime-picker/dist/DateTimeInput"));
@@ -30,10 +28,10 @@
 
-var _utils = require("./shared/utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-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); }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; 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); }
+
 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; }
@@ -47,10 +45,14 @@
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-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; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; 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; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
@@ -64,11 +66,15 @@
 
+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 _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -81,10 +87,8 @@ 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 DateTimeRangePicker =
-/*#__PURE__*/
-function (_PureComponent) {
+var DateTimeRangePicker = /*#__PURE__*/function (_PureComponent) {
   _inherits(DateTimeRangePicker, _PureComponent);
 
+  var _super = _createSuper(DateTimeRangePicker);
+
   function DateTimeRangePicker() {
-    var _getPrototypeOf2;
-
     var _this;
@@ -98,3 +102,3 @@
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DateTimeRangePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
@@ -146,13 +150,9 @@ _defineProperty(_assertThisInitialized(_this), "state", {});
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
-      var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.closeWidgets;
+      var onChange = _this.props.onChange;
 
-      _this.setState(function (prevState) {
-        return {
-          isCalendarOpen: prevState.isCalendarOpen && !closeWidgets,
-          isClockOpen: prevState.isClockOpen && !closeWidgets
-        };
-      });
+      if (closeWidgets) {
+        _this.closeWidgets();
+      }
 
-      var onChange = _this.props.onChange;
-
       if (onChange) {
@@ -163,4 +163,3 @@ onChange(value);
 
-    _defineProperty(_assertThisInitialized(_this), "onChangeFrom", function (valueFrom) {
-      var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    _defineProperty(_assertThisInitialized(_this), "onChangeFrom", function (valueFrom, closeWidgets) {
       var value = _this.props.value;
@@ -175,4 +174,3 @@
 
-    _defineProperty(_assertThisInitialized(_this), "onChangeTo", function (valueTo) {
-      var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    _defineProperty(_assertThisInitialized(_this), "onChangeTo", function (valueTo, closeWidgets) {
       var value = _this.props.value;
@@ -292,7 +290,10 @@
       if (isCalendarOpen !== prevState.isCalendarOpen) {
-        (0, _utils.callIfDefined)(isCalendarOpen ? onCalendarOpen : onCalendarClose);
+        var callback = isCalendarOpen ? onCalendarOpen : onCalendarClose;
+        if (callback) callback();
       }
 
       if (isClockOpen !== prevState.isClockOpen) {
-        (0, _utils.callIfDefined)(isClockOpen ? onClockOpen : onClockClose);
+        var _callback = isClockOpen ? onClockOpen : onClockClose;
+
+        if (_callback) _callback();
       }
@@ -347,2 +348,3 @@ }
           nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
+          rangeDivider = _this$props3.rangeDivider,
           required = _this$props3.required,
@@ -396,5 +398,5 @@ secondAriaLabel = _this$props3.secondAriaLabel,
 
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react["default"].createElement(_DateTimeInput["default"], _extends({}, commonProps, {
+      }, /*#__PURE__*/_react["default"].createElement(_DateTimeInput["default"], _extends({}, commonProps, {
         autoFocus: autoFocus,
@@ -405,5 +407,5 @@ name: "".concat(name, "_from"),
         value: valueFrom
-      })), _react["default"].createElement("span", {
+      })), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(baseClassName, "__range-divider")
-      }, "\u2013"), _react["default"].createElement(_DateTimeInput["default"], _extends({}, commonProps, {
+      }, rangeDivider), /*#__PURE__*/_react["default"].createElement(_DateTimeInput["default"], _extends({}, commonProps, {
         name: "".concat(name, "_to"),
@@ -413,3 +415,3 @@ onChange: this.onChangeTo,
         value: valueTo
-      })), clearIcon !== null && _react["default"].createElement("button", {
+      })), clearIcon !== null && /*#__PURE__*/_react["default"].createElement("button", {
         "aria-label": clearAriaLabel,
@@ -421,3 +423,3 @@ className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
         type: "button"
-      }, clearIcon), calendarIcon !== null && !disableCalendar && _react["default"].createElement("button", {
+      }, clearIcon), calendarIcon !== null && !disableCalendar && /*#__PURE__*/_react["default"].createElement("button", {
         "aria-label": calendarAriaLabel,
@@ -451,5 +453,5 @@ className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"),
       var className = "".concat(baseClassName, "__calendar");
-      return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'))
-      }, _react["default"].createElement(_entry["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({
         className: calendarClassName,
@@ -486,5 +488,5 @@ onChange: this.onDateChange,
       var maxDetailIndex = allViews.indexOf(maxDetail);
-      return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'))
-      }, _react["default"].createElement(_entry2["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_entry["default"], _extends({
         className: clockClassName,
@@ -507,3 +509,3 @@ renderMinuteHand: maxDetailIndex > 0,
           isClockOpen = _this$state4.isClockOpen;
-      return _react["default"].createElement("div", _extends({
+      return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: (0, _mergeClassNames["default"])(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
@@ -558,5 +560,5 @@ }, this.eventProps, {
 
-var CalendarIcon = _react["default"].createElement("svg", _extends({}, iconProps, {
+var CalendarIcon = /*#__PURE__*/_react["default"].createElement("svg", _extends({}, iconProps, {
   className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon")
-}), _react["default"].createElement("rect", {
+}), /*#__PURE__*/_react["default"].createElement("rect", {
   fill: "none",
@@ -567,3 +569,3 @@ height: "15",
   y: "2"
-}), _react["default"].createElement("line", {
+}), /*#__PURE__*/_react["default"].createElement("line", {
   x1: "6",
@@ -573,3 +575,3 @@ x2: "6",
   y2: "4"
-}), _react["default"].createElement("line", {
+}), /*#__PURE__*/_react["default"].createElement("line", {
   x1: "13",
@@ -581,5 +583,5 @@ x2: "13",
 
-var ClearIcon = _react["default"].createElement("svg", _extends({}, iconProps, {
+var ClearIcon = /*#__PURE__*/_react["default"].createElement("svg", _extends({}, iconProps, {
   className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon")
-}), _react["default"].createElement("line", {
+}), /*#__PURE__*/_react["default"].createElement("line", {
   x1: "4",
@@ -589,3 +591,3 @@ x2: "15",
   y2: "15"
-}), _react["default"].createElement("line", {
+}), /*#__PURE__*/_react["default"].createElement("line", {
   x1: "15",
@@ -600,6 +602,8 @@ x2: "4",
   clearIcon: ClearIcon,
+  closeWidgets: true,
   isCalendarOpen: null,
   isClockOpen: null,
   maxDetail: 'minute',
-  name: 'datetimerange'
+  name: 'datetimerange',
+  rangeDivider: '–'
 };
@@ -619,2 +623,3 @@
   clockClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  closeWidgets: _propTypes["default"].bool,
   dayAriaLabel: _propTypes["default"].string,
@@ -646,2 +651,3 @@ dayPlaceholder: _propTypes["default"].string,
   onFocus: _propTypes["default"].func,
+  rangeDivider: _propTypes["default"].node,
   required: _propTypes["default"].bool,
@@ -654,3 +660,2 @@ secondAriaLabel: _propTypes["default"].string,
   yearPlaceholder: _propTypes["default"].string
-};
-(0, _reactLifecyclesCompat.polyfill)(DateTimeRangePicker);
+};

dist/shared/propTypes.js

@@ -6,15 +6,48 @@ "use strict";
 });
-Object.defineProperty(exports, "isMaxDate", {
-  enumerable: true,
-  get: function get() {
-    return _propTypes.isMaxDate;
+exports.isMaxDate = exports.isMinDate = void 0;
+
+function _typeof(obj) { "@babel/helpers - typeof"; 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 isMinDate = function isMinDate(props, propName, componentName) {
+  var minDate = props[propName];
+
+  if (!minDate) {
+    return null;
   }
-});
-Object.defineProperty(exports, "isMinDate", {
-  enumerable: true,
-  get: function get() {
-    return _propTypes.isMinDate;
+
+  if (!(minDate instanceof Date)) {
+    return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(minDate), "` supplied to `").concat(componentName, "`, expected instance of `Date`."));
   }
-});
 
-var _propTypes = require("react-calendar/dist/shared/propTypes");
+  var maxDate = props.maxDate;
+
+  if (maxDate && minDate > maxDate) {
+    return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(minDate), "` supplied to `").concat(componentName, "`, minDate cannot be larger than maxDate."));
+  }
+
+  return null;
+};
+
+exports.isMinDate = isMinDate;
+
+var isMaxDate = function isMaxDate(props, propName, componentName) {
+  var maxDate = props[propName];
+
+  if (!maxDate) {
+    return null;
+  }
+
+  if (!(maxDate instanceof Date)) {
+    return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(maxDate), "` supplied to `").concat(componentName, "`, expected instance of `Date`."));
+  }
+
+  var minDate = props.minDate;
+
+  if (minDate && maxDate < minDate) {
+    return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(maxDate), "` supplied to `").concat(componentName, "`, maxDate cannot be smaller than minDate."));
+  }
+
+  return null;
+};
+
+exports.isMaxDate = isMaxDate;

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "A datetime range picker for your React app.",
@@ -52,16 +52,14 @@ "main": "dist/entry.js",
     "prop-types": "^15.6.0",
-    "react-calendar": "^2.19.1",
+    "react-calendar": "^3.0.0",
     "react-clock": "^2.3.0",
-    "react-datetime-picker": "^2.8.0",
-    "react-fit": "^1.0.3",
-    "react-lifecycles-compat": "^3.0.4"
+    "react-datetime-picker": "^3.0.0",
+    "react-fit": "^1.0.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/cli": "^7.8.0",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.0",
     "babel-eslint": "^10.0.0",
-    "babel-jest": "^24.0.0",
     "enzyme": "^3.10.0",
@@ -74,4 +72,4 @@ "enzyme-adapter-react-16": "^1.14.0",
     "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^24.8.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "jest": "^26.0.0",
     "less": "^3.8.1",
@@ -84,4 +82,4 @@ "react": "^16.7.0",
   "peerDependencies": {
-    "react": ">=15.5",
-    "react-dom": ">=15.5"
+    "react": ">=16.3",
+    "react-dom": ">=16.3"
   },
@@ -88,0 +86,0 @@ "files": [

README.md

@@ -1,2 +0,2 @@
-![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-datetimerange-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-datetimerange-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetimerange-picker.svg
+[![npm](https://img.shields.io/npm/v/@wojtekmaj/react-datetimerange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-datetimerange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-datetimerange-picker.svg) ![build](https://travis-ci.com/wojtekmaj/react-datetimerange-picker.svg?branch=master) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetimerange-picker.svg
 ) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetimerange-picker.svg
@@ -49,22 +49,16 @@ ) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 ```js
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';
 
-class MyApp extends Component {
-  state = {
-    date: [new Date(), new Date()],
-  }
+function MyApp() {
+  const [value, onChange] = useState([new Date(), new Date()]);
 
-  onChange = date => this.setState({ date })
-
-  render() {
-    return (
-      <div>
-        <DateTimeRangePicker
-          onChange={this.onChange}
-          value={this.state.date}
-        />
-      </div>
-    );
-  }
+  return (
+    <div>
+      <DateTimeRangePicker
+        onChange={onChange}
+        value={value}
+      />
+    </div>
+  );
 }
@@ -92,6 +86,7 @@ ```
 |calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
+|className|Class name(s) that will be added along with `"react-datetimerange-picker"` to the main React-DateTimeRange-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
 |clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
 |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
 |clockClassName|Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|className|Class name(s) that will be added along with `"react-datetimerange-picker"` to the main React-DateTimeRange-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
+|closeWidgets|Whether to close the widgets on value selection.|`true`|`false`|
 |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
@@ -107,3 +102,3 @@ |disabled|Whether the datetime range picker should be disabled.|`false`|`true`|
 |maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTimeRange-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
-|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|
+|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-DateRange-Picker](https://github.com/wojtekmaj/react-daterange-picker)!|`"minute"`|`"second"`|
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTimeRange-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
@@ -120,2 +115,3 @@ |minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
 |onClockOpen|Function called when the clock opens.|n/a|`() => alert('Clock opened')`|
+|rangeDivider|Divider between datetime inputs.|`"–"`|`" to "`|
 |required|Whether datetime input should be required.|`false`|`true`|
@@ -122,0 +118,0 @@ |secondAriaLabel|`aria-label` for the second input.|n/a|`"Second"`|

src/DateTimeRangePicker.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { polyfill } from 'react-lifecycles-compat';
 import makeEventProps from 'make-event-props';
 import mergeClassNames from 'merge-class-names';
+import Calendar from 'react-calendar';
 import Fit from 'react-fit';
 
-import Calendar from 'react-calendar/dist/entry.nostyle';
 import Clock from 'react-clock/dist/entry.nostyle';
@@ -13,3 +12,2 @@ import DateTimeInput from 'react-datetime-picker/dist/DateTimeInput';
 import { isMaxDate, isMinDate } from './shared/propTypes';
-import { callIfDefined } from './shared/utils';
 
@@ -60,7 +58,9 @@ const allViews = ['hour', 'minute', 'second'];
     if (isCalendarOpen !== prevState.isCalendarOpen) {
-      callIfDefined(isCalendarOpen ? onCalendarOpen : onCalendarClose);
+      const callback = isCalendarOpen ? onCalendarOpen : onCalendarClose;
+      if (callback) callback();
     }
 
     if (isClockOpen !== prevState.isClockOpen) {
-      callIfDefined(isClockOpen ? onClockOpen : onClockClose);
+      const callback = isClockOpen ? onClockOpen : onClockClose;
+      if (callback) callback();
     }
@@ -122,9 +122,10 @@ }
 
-  onChange = (value, closeWidgets = true) => {
-    this.setState(prevState => ({
-      isCalendarOpen: prevState.isCalendarOpen && !closeWidgets,
-      isClockOpen: prevState.isClockOpen && !closeWidgets,
-    }));
+  // eslint-disable-next-line react/destructuring-assignment
+  onChange = (value, closeWidgets = this.props.closeWidgets) => {
+    const { onChange } = this.props;
 
-    const { onChange } = this.props;
+    if (closeWidgets) {
+      this.closeWidgets();
+    }
+
     if (onChange) {
@@ -135,3 +136,3 @@ onChange(value);
 
-  onChangeFrom = (valueFrom, closeWidgets = true) => {
+  onChangeFrom = (valueFrom, closeWidgets) => {
     const { value } = this.props;
@@ -142,3 +143,3 @@ const [, valueTo] = [].concat(value);
 
-  onChangeTo = (valueTo, closeWidgets = true) => {
+  onChangeTo = (valueTo, closeWidgets) => {
     const { value } = this.props;
@@ -249,2 +250,3 @@ const [valueFrom] = [].concat(value);
       nativeInputAriaLabel,
+      rangeDivider,
       required,
@@ -309,3 +311,3 @@ secondAriaLabel,
         <span className={`${baseClassName}__range-divider`}>
-          –
+          {rangeDivider}
         </span>
@@ -482,2 +484,3 @@ <DateTimeInput
   clearIcon: ClearIcon,
+  closeWidgets: true,
   isCalendarOpen: null,
@@ -487,2 +490,3 @@ isClockOpen: null,
   name: 'datetimerange',
+  rangeDivider: '–',
 };
@@ -514,2 +518,3 @@
   ]),
+  closeWidgets: PropTypes.bool,
   dayAriaLabel: PropTypes.string,
@@ -541,2 +546,3 @@ dayPlaceholder: PropTypes.string,
   onFocus: PropTypes.func,
+  rangeDivider: PropTypes.node,
   required: PropTypes.bool,
@@ -553,3 +559,1 @@ secondAriaLabel: PropTypes.string,
 };
-
-polyfill(DateTimeRangePicker);

src/DateTimeRangePicker.spec.jsx

@@ -221,3 +221,3 @@ import React from 'react';
 
-  it('renders range divider', () => {
+  it('renders range divider with default divider', () => {
     const component = mount(
@@ -230,4 +230,16 @@ <DateTimeRangePicker />
     expect(rangeDivider).toHaveLength(1);
+    expect(rangeDivider.text()).toBe('–');
   });
 
+  it('renders range divider with custom divider', () => {
+    const component = mount(
+      <DateTimeRangePicker rangeDivider="to" />
+    );
+
+    const rangeDivider = component.find('.react-datetimerange-picker__range-divider');
+
+    expect(rangeDivider).toHaveLength(1);
+    expect(rangeDivider.text()).toBe('to');
+  });
+
   it('renders clear button', () => {
@@ -543,3 +555,3 @@ const component = mount(
 
-  it('closes Calendar when calling internal onChange', () => {
+  it('closes Calendar when calling internal onChange by default', () => {
     const component = mount(
@@ -556,2 +568,17 @@ <DateTimeRangePicker isCalendarOpen />
 
+  it('does not close Calendar when calling internal onChange with prop closeWidgets = false', () => {
+    const component = mount(
+      <DateTimeRangePicker
+        closeWidgets={false}
+        isCalendarOpen
+      />
+    );
+
+    const { onChange } = component.instance();
+
+    onChange(new Date());
+
+    expect(component.state('isCalendarOpen')).toBe(true);
+  });
+
   it('does not close Calendar when calling internal onChange with closeWidgets = false', () => {
@@ -569,3 +596,3 @@ const component = mount(
 
-  it('closes Clock when calling internal onChange', () => {
+  it('closes Clock when calling internal onChange by default', () => {
     const component = mount(
@@ -582,2 +609,17 @@ <DateTimeRangePicker isClockOpen />
 
+  it('does not close Clock when calling internal onChange with prop closeWidgets = false', () => {
+    const component = mount(
+      <DateTimeRangePicker
+        closeWidgets={false}
+        isClockOpen
+      />
+    );
+
+    const { onChange } = component.instance();
+
+    onChange(new Date());
+
+    expect(component.state('isClockOpen')).toBe(true);
+  });
+
   it('does not close Clock when calling internal onChange with closeWidgets = false', () => {
@@ -716,3 +758,3 @@ const component = mount(
       expect(onChangeSpy).toHaveBeenCalled();
-      expect(onChangeSpy).toHaveBeenCalledWith([nextValueFrom, undefined], true);
+      expect(onChangeSpy).toHaveBeenCalledWith([nextValueFrom, undefined], undefined);
     });
@@ -735,3 +777,3 @@
       expect(onChangeSpy).toHaveBeenCalled();
-      expect(onChangeSpy).toHaveBeenCalledWith([nextValueFrom, undefined], true);
+      expect(onChangeSpy).toHaveBeenCalledWith([nextValueFrom, undefined], undefined);
     });
@@ -756,3 +798,3 @@
       expect(onChangeSpy).toHaveBeenCalled();
-      expect(onChangeSpy).toHaveBeenCalledWith([nextValueFrom, valueTo], true);
+      expect(onChangeSpy).toHaveBeenCalledWith([nextValueFrom, valueTo], undefined);
     });
@@ -775,3 +817,3 @@ });
       expect(onChangeSpy).toHaveBeenCalled();
-      expect(onChangeSpy).toHaveBeenCalledWith([undefined, nextValueTo], true);
+      expect(onChangeSpy).toHaveBeenCalledWith([undefined, nextValueTo], undefined);
     });
@@ -794,3 +836,3 @@
       expect(onChangeSpy).toHaveBeenCalled();
-      expect(onChangeSpy).toHaveBeenCalledWith([value, nextValueTo], true);
+      expect(onChangeSpy).toHaveBeenCalledWith([value, nextValueTo], undefined);
     });
@@ -815,5 +857,5 @@
       expect(onChangeSpy).toHaveBeenCalled();
-      expect(onChangeSpy).toHaveBeenCalledWith([valueFrom, nextValueTo], true);
+      expect(onChangeSpy).toHaveBeenCalledWith([valueFrom, nextValueTo], undefined);
     });
   });
 });

src/shared/propTypes.js

@@ -1,4 +0,39 @@
-export {
-  isMaxDate,
-  isMinDate,
-} from 'react-calendar/dist/shared/propTypes';
+export const isMinDate = (props, propName, componentName) => {
+  const { [propName]: minDate } = props;
+
+  if (!minDate) {
+    return null;
+  }
+
+  if (!(minDate instanceof Date)) {
+    return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+  }
+
+  const { maxDate } = props;
+
+  if (maxDate && minDate > maxDate) {
+    return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
+  }
+
+  return null;
+};
+
+export const isMaxDate = (props, propName, componentName) => {
+  const { [propName]: maxDate } = props;
+
+  if (!maxDate) {
+    return null;
+  }
+
+  if (!(maxDate instanceof Date)) {
+    return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+  }
+
+  const { minDate } = props;
+
+  if (minDate && maxDate < minDate) {
+    return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
+  }
+
+  return null;
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91994

increased by6.46%

Dependency count

9

decreased by-10%

Dev dependency count

20

decreased by-4.76%

Lines of code

1832

increased by4.27%

Worsened metrics

Number of package files

15

decreased by-11.76%

Number of lines in readme file

141

decreased by-2.76%

Dependency changes

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.12(transitive)

• + Added@types/react-calendar@3.9.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedmerge-refs@1.3.0(transitive)

• + Addedreact-clock@3.1.0(transitive)

• + Addedreact-date-picker@8.4.0(transitive)

• + Addedreact-datetime-picker@3.5.0(transitive)

• + Addedreact-time-picker@4.5.0(transitive)

• - Removedreact-lifecycles-compat@^3.0.4

• - Removedreact-calendar@2.19.2(transitive)

• - Removedreact-date-picker@7.11.1(transitive)

• - Removedreact-datetime-picker@2.9.0(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• - Removedreact-time-picker@3.9.0(transitive)

• Updatedreact-calendar@^3.0.0

• Updatedreact-datetime-picker@^3.0.0