react-datepicker - npm Package Compare versions

Comparing version 0.48.0 to 0.49.0

lib/calendar.js

@@ -293,2 +293,3 @@ 'use strict';
             day: monthDate,
+            dayClassName: _this.props.dayClassName,
             onDayClick: _this.handleDayClick,
@@ -363,2 +364,3 @@ onDayMouseEnter: _this.handleDayMouseEnter,
   dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]).isRequired,
+  dayClassName: _propTypes2.default.func,
   dropdownMode: _propTypes2.default.oneOf(['scroll', 'select']).isRequired,
@@ -365,0 +367,0 @@ endDate: _propTypes2.default.object,

lib/datepicker.js

@@ -21,5 +21,5 @@ 'use strict';
 
-var _tether_component = require('./tether_component');
+var _popper_component = require('./popper_component');
 
-var _tether_component2 = _interopRequireDefault(_tether_component);
+var _popper_component2 = _interopRequireDefault(_popper_component);
 
@@ -78,6 +78,2 @@ var _classnames2 = require('classnames');
 
-        popoverAttachment: 'top left',
-        popoverTargetAttachment: 'bottom left',
-        popoverTargetOffset: '10px 0',
-        tetherConstraints: [{ to: 'window', attachment: 'together' }],
         utcOffset: (0, _moment2.default)().utcOffset(),
@@ -238,14 +234,17 @@ monthsShown: 1,
     _this.onInputKeyDown = function (event) {
+      var eventKey = event.key;
       if (!_this.state.open && !_this.props.inline) {
-        _this.onInputClick();
+        if (eventKey !== 'Enter' && eventKey !== 'Escape' && eventKey !== 'Tab') {
+          _this.onInputClick();
+        }
         return;
       }
       var copy = (0, _moment2.default)(_this.state.preSelection);
-      if (event.key === 'Enter') {
+      if (eventKey === 'Enter') {
         event.preventDefault();
         _this.handleSelect(copy, event);
-      } else if (event.key === 'Escape') {
+      } else if (eventKey === 'Escape') {
         event.preventDefault();
         _this.setOpen(false);
-      } else if (event.key === 'Tab') {
+      } else if (eventKey === 'Tab') {
         _this.setOpen(false);
@@ -255,3 +254,3 @@ }
         var newSelection = void 0;
-        switch (event.key) {
+        switch (eventKey) {
           case 'ArrowLeft':
@@ -339,2 +338,3 @@ event.preventDefault();
           onMonthChange: _this.props.onMonthChange,
+          dayClassName: _this.props.dayClassName,
           className: _this.props.calendarClassName },
@@ -417,12 +417,7 @@ _this.props.children
 
-      return _react2.default.createElement(
-        _tether_component2.default,
-        {
-          classPrefix: 'react-datepicker__tether',
-          attachment: this.props.popoverAttachment,
-          targetAttachment: this.props.popoverTargetAttachment,
-          targetOffset: this.props.popoverTargetOffset,
-          renderElementTo: this.props.renderCalendarTo,
-          constraints: this.props.tetherConstraints },
-        _react2.default.createElement(
+      return _react2.default.createElement(_popper_component2.default, {
+        className: this.props.popperClassName,
+        hidePopper: !this.state.open || this.props.disabled,
+        popperModifiers: this.props.popperModifiers,
+        targetComponent: _react2.default.createElement(
           'div',
@@ -433,4 +428,4 @@ { className: 'react-datepicker__input-container' },
         ),
-        calendar
-      );
+        popperComponent: calendar,
+        popperPlacement: this.props.popperPlacement });
     }
@@ -453,2 +448,3 @@ }]);
   dateFormatCalendar: _propTypes2.default.string,
+  dayClassName: _propTypes2.default.func,
   disabled: _propTypes2.default.bool,
@@ -481,7 +477,6 @@ disabledKeyboardNavigation: _propTypes2.default.bool,
   placeholderText: _propTypes2.default.string,
-  popoverAttachment: _propTypes2.default.string,
-  popoverTargetAttachment: _propTypes2.default.string,
-  popoverTargetOffset: _propTypes2.default.string,
+  popperClassName: _propTypes2.default.string, // <PopperComponent/> props
+  popperModifiers: _propTypes2.default.object, // <PopperComponent/> props
+  popperPlacement: _propTypes2.default.oneOf(_popper_component.popperPlacementPositions), // <PopperComponent/> props
   readOnly: _propTypes2.default.bool,
-  renderCalendarTo: _propTypes2.default.any,
   required: _propTypes2.default.bool,
@@ -498,3 +493,2 @@ scrollableYearDropdown: _propTypes2.default.bool,
   tabIndex: _propTypes2.default.number,
-  tetherConstraints: _propTypes2.default.array,
   title: _propTypes2.default.string,
@@ -501,0 +495,0 @@ todayButton: _propTypes2.default.string,

lib/day.js

@@ -185,4 +185,5 @@ 'use strict';
       return _this.props.month !== undefined && _this.props.month !== _this.props.day.month();
-    }, _this.getClassNames = function () {
-      return (0, _classnames2.default)('react-datepicker__day', {
+    }, _this.getClassNames = function (date) {
+      var dayClassName = _this.props.dayClassName ? _this.props.dayClassName(date) : undefined;
+      return (0, _classnames2.default)('react-datepicker__day', dayClassName, {
         'react-datepicker__day--disabled': _this.isDisabled(),
@@ -210,3 +211,3 @@ 'react-datepicker__day--selected': _this.isSameDay(_this.props.selected),
         {
-          className: this.getClassNames(),
+          className: this.getClassNames(this.props.day),
           onClick: this.handleClick,
@@ -226,2 +227,3 @@ onMouseEnter: this.handleMouseEnter,
   day: _propTypes2.default.object.isRequired,
+  dayClassName: _propTypes2.default.func,
   endDate: _propTypes2.default.object,
@@ -228,0 +230,0 @@ highlightDates: _propTypes2.default.array,

lib/month.js

@@ -94,2 +94,3 @@ 'use strict';
           endDate: _this.props.endDate,
+          dayClassName: _this.props.dayClassName,
           utcOffset: _this.props.utcOffset }));
@@ -145,2 +146,3 @@
   day: _propTypes2.default.object.isRequired,
+  dayClassName: _propTypes2.default.func,
   endDate: _propTypes2.default.object,
@@ -147,0 +149,0 @@ excludeDates: _propTypes2.default.array,

lib/week.js

@@ -83,2 +83,3 @@ 'use strict';
           endDate: _this.props.endDate,
+          dayClassName: _this.props.dayClassName,
           utcOffset: _this.props.utcOffset });
@@ -105,2 +106,3 @@ }));
   day: _propTypes2.default.object.isRequired,
+  dayClassName: _propTypes2.default.func,
   endDate: _propTypes2.default.object,
@@ -107,0 +109,0 @@ excludeDates: _propTypes2.default.array,

package.json

@@ -5,3 +5,3 @@ {
   "description": "A simple and reusable datepicker component for React",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "license": "MIT",
@@ -100,3 +100,3 @@ "homepage": "https://github.com/Hacker0x01/react-datepicker",
     "react-onclickoutside": "^6.1.1",
-    "tether": "^1.4.0"
+    "react-popper": "^0.7.0"
   },
@@ -103,0 +103,0 @@ "scripts": {

README.md

@@ -97,2 +97,4 @@ # React Date Picker
 Latest compatible versions:
+- React 15.5 or newer: All above React-datepicker v.0.40.0
+- React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
 - React 0.14 or newer: All above React-datepicker v0.13.0
@@ -99,0 +101,0 @@ - React 0.13: React-datepicker v0.13.0

No alert changes

Improved metrics

Total package byte prevSize

436120

10.38%

Lines of code

8137

14.36%

Number of lines in readme file

135

1.5%

Dependency changes

• + Added

  react-popper@^0.7.0

• + Added

  popper.js@1.16.1
  (transitive)

• + Added

  react-popper@0.7.5
  (transitive)

• - Removed

  tether@^1.4.0

• - Removed

  tether@1.4.7
  (transitive)