react-datepicker
Advanced tools
Comparing version 0.48.0 to 0.49.0
@@ -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, |
@@ -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, |
@@ -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, |
@@ -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, |
@@ -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, |
@@ -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": { |
@@ -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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
436120
8137
135
+ Addedreact-popper@^0.7.0
+ Addedpopper.js@1.16.1(transitive)
+ Addedreact-popper@0.7.5(transitive)
- Removedtether@^1.4.0
- Removedtether@1.4.7(transitive)