react-infinite-calendar-with-range
Version:
Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.
1,514 lines (1,276 loc) • 874 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"), require("React.addons.shallowCompare"), require("React.addons.CSSTransitionGroup"), require("ReactDOM"));
else if(typeof define === 'function' && define.amd)
define(["React", "React.addons.shallowCompare", "React.addons.CSSTransitionGroup", "ReactDOM"], factory);
else if(typeof exports === 'object')
exports["InfiniteCalendar"] = factory(require("React"), require("React.addons.shallowCompare"), require("React.addons.CSSTransitionGroup"), require("ReactDOM"));
else
root["InfiniteCalendar"] = factory(root["React"], root["React.addons.shallowCompare"], root["React.addons.CSSTransitionGroup"], root["ReactDOM"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_138__, __WEBPACK_EXTERNAL_MODULE_139__, __WEBPACK_EXTERNAL_MODULE_153__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _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 _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _moment = __webpack_require__(4);
var _moment2 = _interopRequireDefault(_moment);
var _debounce = __webpack_require__(108);
var _debounce2 = _interopRequireDefault(_debounce);
var _range = __webpack_require__(116);
var _range2 = _interopRequireDefault(_range);
var _utils = __webpack_require__(126);
var _locale = __webpack_require__(130);
var _locale2 = _interopRequireDefault(_locale);
var _theme = __webpack_require__(131);
var _theme2 = _interopRequireDefault(_theme);
var _Today = __webpack_require__(132);
var _Today2 = _interopRequireDefault(_Today);
var _Header = __webpack_require__(137);
var _Header2 = _interopRequireDefault(_Header);
var _List = __webpack_require__(144);
var _List2 = _interopRequireDefault(_List);
var _Weekdays = __webpack_require__(201);
var _Weekdays2 = _interopRequireDefault(_Weekdays);
var _Years = __webpack_require__(204);
var _Years2 = _interopRequireDefault(_Years);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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 _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; }
var containerStyle = __webpack_require__(207);
var dayStyle = __webpack_require__(195);
var style = {
container: containerStyle,
day: dayStyle
};
var InfiniteCalendar = function (_Component) {
_inherits(InfiniteCalendar, _Component);
function InfiniteCalendar(props) {
_classCallCheck(this, InfiniteCalendar);
// Initialize
var _this = _possibleConstructorReturn(this, (InfiniteCalendar.__proto__ || Object.getPrototypeOf(InfiniteCalendar)).call(this));
_initialiseProps.call(_this);
_this.updateLocale(props.locale);
_this.updateYears(props);
var selectedDate = props.selectedDate;
var rangeSelectionEndDate = props.rangeSelectionEndDate;
if (rangeSelectionEndDate === false) {
rangeSelectionEndDate = selectedDate;
} else if (selectedDate === false) {
rangeSelectionEndDate = false;
} else if (selectedDate > rangeSelectionEndDate) {
var tmp = selectedDate;
selectedDate = rangeSelectionEndDate;
rangeSelectionEndDate = tmp;
}
_this.state = {
selectedDate: _this.parseSelectedDate(selectedDate),
selectedHovering: null,
rangeSelectionEndDate: _this.parseSelectedDate(rangeSelectionEndDate),
dragging: 0, //direction -1 reverse 0 nodrag 1 forwards
touchBehavior: false,
display: props.display,
shouldHeaderAnimate: props.shouldHeaderAnimate
};
return _this;
}
_createClass(InfiniteCalendar, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _props = this.props;
var autoFocus = _props.autoFocus;
var keyboardSupport = _props.keyboardSupport;
this.node = this.refs.node;
this.list = this.refs.List;
if (keyboardSupport && autoFocus) {
this.node.focus();
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(next) {
var _props2 = this.props;
var min = _props2.min;
var minDate = _props2.minDate;
var max = _props2.max;
var maxDate = _props2.maxDate;
var locale = _props2.locale;
var selectedDate = _props2.selectedDate;
var rangeSelectionEndDate = _props2.rangeSelectionEndDate;
var display = this.state.display;
if (next.locale !== locale) {
this.updateLocale(next.locale);
}
if (next.min !== min || next.minDate !== minDate || next.max !== max || next.maxDate !== maxDate) {
this.updateYears(next);
}
if (next.selectedDate !== selectedDate || next.rangeSelectionEndDate !== rangeSelectionEndDate) {
var nextSelectedDate = next.selectedDate;
var nextSelectedDateEnd = next.rangeSelectionEndDate;
if (nextSelectedDateEnd === false) {
nextSelectedDateEnd = nextSelectedDate;
} else if (nextSelectedDate === false) {
nextSelectedDateEnd = false;
} else if (nextSelectedDate > nextSelectedDateEnd) {
var tmp = nextSelectedDate;
nextSelectedDate = nextSelectedDateEnd;
nextSelectedDateEnd = tmp;
}
if (nextSelectedDate !== selectedDate) {
var parsed = this.parseSelectedDate(nextSelectedDate);
var parsedEnd = this.parseSelectedDate(nextSelectedDateEnd);
this.setState({
selectedDate: parsed,
rangeSelectionEndDate: parsedEnd
});
if (parsed) this.scrollToDate(parsed, -this.props.rowHeight);
} else if (nextSelectedDateEnd !== rangeSelectionEndDate) {
this.setState({
rangeSelectionEndDate: this.parseSelectedDate(nextSelectedDateEnd)
});
}
} else if (next.minDate !== minDate || next.maxDate !== maxDate) {
// Need to make sure the currently selected date is not before the new minDate or after maxDate
var _selectedDate = this.parseSelectedDate(this.state.selectedDate);
if (!_selectedDate.isSame(this.state.selectedDate, 'day')) {
this.setState({
selectedDate: _selectedDate
});
}
var _rangeSelectionEndDate = this.parseSelectedDate(this.state.rangeSelectionEndDate);
if (!_rangeSelectionEndDate.isSame(this.state.rangeSelectionEndDate, 'day')) {
this.setState({
rangeSelectionEndDate: _rangeSelectionEndDate
});
}
}
if (next.display !== display) {
this.setState({
display: next.display
});
}
}
}, {
key: 'parseSelectedDate',
value: function parseSelectedDate(selectedDate) {
if (selectedDate) {
selectedDate = (0, _moment2.default)(selectedDate);
// Selected Date should not be before min date or after max date
if (selectedDate.isBefore(this._minDate)) {
return this._minDate;
} else if (selectedDate.isAfter(this._maxDate)) {
return this._maxDate;
}
}
return selectedDate;
}
}, {
key: 'updateYears',
value: function updateYears() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
var min = this._min = (0, _moment2.default)(props.min);
var max = this._max = (0, _moment2.default)(props.max);
this._minDate = (0, _moment2.default)(props.minDate);
this._maxDate = (0, _moment2.default)(props.maxDate);
this.years = (0, _range2.default)(min.year(), max.year() + 1).map(function (year) {
return (0, _utils.getMonthsForYear)(year, min, max);
});
this.months = [].concat.apply([], this.years);
}
}, {
key: 'updateLocale',
value: function updateLocale(locale) {
locale = this.getLocale(locale);
_moment2.default.updateLocale(locale.name, locale);
_moment2.default.locale(locale.name);
}
}, {
key: 'getDisabledDates',
value: function getDisabledDates(disabledDates) {
return disabledDates && disabledDates.map(function (date) {
return (0, _moment2.default)(date).format('YYYYMMDD');
});
}
}, {
key: 'getLocale',
value: function getLocale() {
var customLocale = arguments.length <= 0 || arguments[0] === undefined ? this.props.locale : arguments[0];
return _extends({}, _locale2.default, customLocale);
}
}, {
key: 'getTheme',
value: function getTheme() {
var customTheme = arguments.length <= 0 || arguments[0] === undefined ? this.props.theme : arguments[0];
return _extends({}, _theme2.default, customTheme);
}
}, {
key: 'clearHighlight',
value: function clearHighlight() {
if (this.highlightedEl) {
this.highlightedEl.classList.remove(style.day.highlighted);
this.highlightedEl = null;
}
}
}, {
key: 'render',
value: function render() {
var _props3 = this.props;
var className = _props3.className;
var disabledDays = _props3.disabledDays;
var height = _props3.height;
var hideYearsOnSelect = _props3.hideYearsOnSelect;
var keyboardSupport = _props3.keyboardSupport;
var layout = _props3.layout;
var overscanMonthCount = _props3.overscanMonthCount;
var badges = _props3.badges;
var min = _props3.min;
var minDate = _props3.minDate;
var max = _props3.max;
var maxDate = _props3.maxDate;
var showTodayHelper = _props3.showTodayHelper;
var showHeader = _props3.showHeader;
var tabIndex = _props3.tabIndex;
var width = _props3.width;
var other = _objectWithoutProperties(_props3, ['className', 'disabledDays', 'height', 'hideYearsOnSelect', 'keyboardSupport', 'layout', 'overscanMonthCount', 'badges', 'min', 'minDate', 'max', 'maxDate', 'showTodayHelper', 'showHeader', 'tabIndex', 'width']);
var disabledDates = this.getDisabledDates(this.props.disabledDates);
var locale = this.getLocale();
var theme = this.getTheme();
var _state = this.state;
var display = _state.display;
var isScrolling = _state.isScrolling;
var selectedDate = _state.selectedDate;
var dragging = _state.dragging;
var rangeSelectionEndDate = _state.rangeSelectionEndDate;
var selectedHovering = _state.selectedHovering;
var showToday = _state.showToday;
var shouldHeaderAnimate = _state.shouldHeaderAnimate;
var today = this.today = (0, _utils.parseDate)((0, _moment2.default)());
// Selected date should not be disabled
if (selectedDate && (disabledDates && disabledDates.indexOf(selectedDate.format('YYYYMMDD')) !== -1 || disabledDays && disabledDays.indexOf(selectedDate.day()) !== -1)) {
selectedDate = null;
}
return _react2.default.createElement(
'div',
{ tabIndex: tabIndex, onKeyDown: keyboardSupport && this.handleKeyDown, className: (0, _classnames2.default)(className, style.container.root, _defineProperty({}, style.container.landscape, layout == 'landscape')), style: { color: theme.textColor.default, width: width }, 'aria-label': 'Calendar', ref: 'node' },
showHeader && _react2.default.createElement(_Header2.default, { selectedDate: selectedDate, rangeSelectionEndDate: rangeSelectionEndDate, shouldHeaderAnimate: shouldHeaderAnimate, layout: layout, theme: theme, locale: locale, scrollToDate: this.scrollToDate, setDisplay: this.setDisplay, display: display }),
_react2.default.createElement(
'div',
{ className: style.container.wrapper },
_react2.default.createElement(_Weekdays2.default, { theme: theme }),
_react2.default.createElement(
'div',
{ className: style.container.listWrapper },
showTodayHelper && _react2.default.createElement(_Today2.default, { scrollToDate: this.scrollToDate, show: showToday, today: today, theme: theme, locale: locale }),
_react2.default.createElement(_List2.default, _extends({
ref: 'List'
}, other, {
width: width,
height: height,
selectedDate: (0, _utils.parseDate)(selectedDate),
dragging: dragging,
selectedHovering: (0, _utils.parseDate)(selectedHovering),
rangeSelectionEndDate: (0, _utils.parseDate)(rangeSelectionEndDate),
disabledDates: disabledDates,
disabledDays: disabledDays,
months: this.months,
onDaySelect: this.onDaySelect,
onDayDown: this.onDayDown,
onDayOver: this.onDayOver,
onDayUp: this.onDayUp,
badges: badges,
onTouchStart: this.onTouchStart,
onScroll: this.onScroll,
isScrolling: isScrolling,
today: today,
min: (0, _utils.parseDate)(min),
minDate: (0, _utils.parseDate)(minDate),
maxDate: (0, _utils.parseDate)(maxDate),
theme: theme,
locale: locale,
overscanMonthCount: overscanMonthCount
}))
),
display == 'years' && _react2.default.createElement(_Years2.default, {
ref: 'years',
width: width,
height: height,
onDaySelect: this.onDaySelect,
minDate: minDate,
maxDate: maxDate,
selectedDate: selectedDate,
theme: theme,
years: (0, _range2.default)((0, _moment2.default)(min).year(), (0, _moment2.default)(max).year() + 1),
setDisplay: this.setDisplay,
scrollToDate: this.scrollToDate,
hideYearsOnSelect: hideYearsOnSelect
})
)
);
}
}]);
return InfiniteCalendar;
}(_react.Component);
InfiniteCalendar.defaultProps = {
width: 400,
height: 500,
rowHeight: 56,
overscanMonthCount: 4,
todayHelperRowOffset: 4,
layout: 'portrait',
display: 'days',
badges: null,
selectedDate: new Date(),
endDate: new Date(),
min: { year: 1980, month: 0, day: 0 },
minDate: { year: 1980, month: 0, day: 0 },
max: { year: 2050, month: 11, day: 31 },
maxDate: { year: 2050, month: 11, day: 31 },
keyboardSupport: true,
autoFocus: true,
rangeSelection: false,
rangeSelectionBehavior: "hover",
rangeSelectionEndDate: false,
shouldHeaderAnimate: true,
showOverlay: true,
showTodayHelper: true,
showHeader: true,
tabIndex: 1,
locale: {},
theme: {},
hideYearsOnSelect: true
};
InfiniteCalendar.propTypes = {
selectedDate: _utils.validDate,
endDate: _utils.validDate,
min: _utils.validDate,
max: _utils.validDate,
minDate: _utils.validDate,
maxDate: _utils.validDate,
locale: _react.PropTypes.object,
theme: _react.PropTypes.object,
width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
height: _react.PropTypes.number,
rowHeight: _react.PropTypes.number,
className: _react.PropTypes.string,
overscanMonthCount: _react.PropTypes.number,
todayHelperRowOffset: _react.PropTypes.number,
disabledDays: _react.PropTypes.arrayOf(_react.PropTypes.number),
disabledDates: _react.PropTypes.arrayOf(_utils.validDate),
beforeSelect: _react.PropTypes.func,
onSelect: _react.PropTypes.func,
afterSelect: _react.PropTypes.func,
onScroll: _react.PropTypes.func,
onScrollEnd: _react.PropTypes.func,
keyboardSupport: _react.PropTypes.bool,
autoFocus: _react.PropTypes.bool,
rangeSelection: _react.PropTypes.bool,
rangeSelectionBehavior: _react.PropTypes.string,
rangeSelectionEndDate: _utils.validDate,
onKeyDown: _react.PropTypes.func,
tabIndex: _react.PropTypes.number,
layout: _utils.validLayout,
display: _utils.validDisplay,
badges: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.func]),
hideYearsOnSelect: _react.PropTypes.bool,
shouldHeaderAnimate: _react.PropTypes.bool,
showOverlay: _react.PropTypes.bool,
showTodayHelper: _react.PropTypes.bool,
showHeader: _react.PropTypes.bool
};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onDaySelect = function (clickedDate, e) {
var _props4 = _this2.props;
var afterSelect = _props4.afterSelect;
var beforeSelect = _props4.beforeSelect;
var onSelect = _props4.onSelect;
var rangeSelection = _props4.rangeSelection;
var shouldHeaderAnimate = _props4.shouldHeaderAnimate;
var rangeSelectionBehavior = _props4.rangeSelectionBehavior;
var selectedDate = _this2.state.selectedDate;
var rangeSelectionEndDate = _this2.state.rangeSelectionEndDate;
var dragging = 0;
if (rangeSelection && (_this2.state.touchBehavior || rangeSelectionBehavior == "hover")) {
//If we are doing a range selection in the default "hover" mode (click+click instead of drag)
if (_this2.state.dragging == 0) {
selectedDate = clickedDate;
rangeSelectionEndDate = clickedDate;
dragging = 1;
} else {
if (clickedDate > selectedDate) {
rangeSelectionEndDate = clickedDate;
} else {
selectedDate = clickedDate;
}
}
} else {
selectedDate = clickedDate;
rangeSelectionEndDate = clickedDate;
if (_this2.state.selectedDate == selectedDate) return;
}
if (!beforeSelect || typeof beforeSelect == 'function' && beforeSelect(selectedDate, rangeSelectionEndDate)) {
if (typeof onSelect == 'function') {
onSelect(selectedDate, rangeSelectionEndDate, e);
}
_this2.setState({
selectedDate: selectedDate,
rangeSelectionEndDate: rangeSelectionEndDate,
dragging: dragging,
highlightedDate: selectedDate.clone()
}, function () {
_this2.clearHighlight();
if (typeof afterSelect == 'function') {
afterSelect(selectedDate, rangeSelectionEndDate);
}
});
}
};
this.onDayDown = function (selectedDate, e) {
var _props5 = _this2.props;
var afterSelect = _props5.afterSelect;
var beforeSelect = _props5.beforeSelect;
var onSelect = _props5.onSelect;
var rangeSelection = _props5.rangeSelection;
var rangeSelectionBehavior = _props5.rangeSelectionBehavior;
if (_this2.state.touchBehavior || !rangeSelection || rangeSelectionBehavior == "hover") return false;
//only continue if we are doing range selection in "drag" mode
if (!beforeSelect || typeof beforeSelect == 'function' && beforeSelect(selectedDate, null)) {
var dragging = 1;
var rangeSelectionEndDate = selectedDate;
var selectedHovering = null;
_this2.setState({
selectedDate: selectedDate,
rangeSelectionEndDate: rangeSelectionEndDate,
selectedHovering: selectedHovering,
dragging: dragging,
highlightedDate: selectedDate.clone()
});
}
return false;
};
this.onDayOver = function (selectedHovering, e) {
if (_this2.state.dragging !== 0 && !_this2.state.touchBehavior && _this2.props.rangeSelection) {
//enter here if we are in "drag" mode for range selection
var selectedDate = _this2.state.selectedDate;
var rangeSelectionEndDate = _this2.state.rangeSelectionEndDate;
var dragging = _this2.state.dragging;
if (dragging == 1) {
//dragging forwards
rangeSelectionEndDate = selectedHovering;
} else if (dragging == -1) {
//dragging backwards
selectedDate = selectedHovering;
}
if (selectedDate > rangeSelectionEndDate) {
//flip directions of dragging start to end (1) or end to start (-1)
dragging = -dragging;
var tmp = selectedDate;
selectedDate = rangeSelectionEndDate;
rangeSelectionEndDate = tmp;
}
_this2.setState({
selectedDate: selectedDate,
rangeSelectionEndDate: rangeSelectionEndDate,
selectedHovering: selectedHovering,
dragging: dragging
});
}
return false;
};
this.onDayUp = function (overDate, e) {
var _props6 = _this2.props;
var afterSelect = _props6.afterSelect;
var beforeSelect = _props6.beforeSelect;
var onSelect = _props6.onSelect;
var rangeSelection = _props6.rangeSelection;
var rangeSelectionBehavior = _props6.rangeSelectionBehavior;
if (_this2.state.dragging !== 0 && !_this2.state.touchBehavior && rangeSelectionBehavior == "drag" && rangeSelection) {
//enter here if we are doing the "drag" mode of range selection
var selectedDate = _this2.state.selectedDate;
var rangeSelectionEndDate = _this2.state.rangeSelectionEndDate;
var dragging = 0;
var selectedHovering = null;
if (_this2.state.dragging == 1) {
//dragging forwards (start to end)
rangeSelectionEndDate = overDate;
} else if (_this2.state.dragging == -1) {
//dragging backwards (end to start)
selectedDate = overDate;
}
if (selectedDate > rangeSelectionEndDate) {
//this should already be taken care of, but I leave in for defensive programming
var tmp = selectedDate;
selectedDate = rangeSelectionEndDate;
rangeSelectionEndDate = tmp;
}
var valid = true;
if (beforeSelect || typeof beforeSelect == 'function') valid = beforeSelect(selectedDate, rangeSelectionEndDate);
if (valid) {
if (typeof onSelect == 'function') {
onSelect(selectedDate, rangeSelectionEndDate, e);
}
_this2.setState({
selectedDate: selectedDate,
rangeSelectionEndDate: rangeSelectionEndDate,
selectedHovering: selectedHovering,
dragging: dragging
}, function () {
_this2.clearHighlight();
if (typeof afterSelect == 'function') {
afterSelect(selectedDate, rangeSelectionEndDate);
}
});
} else {
//released the mouse on an invalid date, so clear the whole range
selectedDate = null;
rangeSelectionEndDate = null;
_this2.setState({
selectedDate: selectedDate,
rangeSelectionEndDate: rangeSelectionEndDate,
selectedHovering: selectedHovering,
dragging: dragging
});
}
}
return false;
};
this.onTouchStart = function (startDate, e) {
_this2.setState({ touchBehavior: true });
};
this.getCurrentOffset = function () {
return _this2.scrollTop;
};
this.getDateOffset = function (date) {
return _this2.list && _this2.list.getDateOffset(date);
};
this.scrollTo = function (offset) {
return _this2.list && _this2.list.scrollTo(offset);
};
this.scrollToDate = function () {
var date = arguments.length <= 0 || arguments[0] === undefined ? (0, _moment2.default)() : arguments[0];
var offset = arguments[1];
return _this2.list && _this2.list.scrollToDate(date, offset);
};
this.getScrollSpeed = (0, _utils.getScrollSpeed)();
this.onScroll = function (_ref) {
var scrollTop = _ref.scrollTop;
var _props7 = _this2.props;
var onScroll = _props7.onScroll;
var showOverlay = _props7.showOverlay;
var showTodayHelper = _props7.showTodayHelper;
var isScrolling = _this2.state.isScrolling;
var scrollSpeed = _this2.scrollSpeed = Math.abs(_this2.getScrollSpeed(scrollTop));
_this2.scrollTop = scrollTop;
// We only want to display the months overlay if the user is rapidly scrolling
if (showOverlay && scrollSpeed >= 50 && !isScrolling) {
_this2.setState({
isScrolling: true
});
}
if (showTodayHelper) {
_this2.updateTodayHelperPosition(scrollSpeed);
}
if (typeof onScroll == 'function') {
onScroll(scrollTop);
}
_this2.onScrollEnd();
};
this.onScrollEnd = (0, _debounce2.default)(function () {
var _props8 = _this2.props;
var onScrollEnd = _props8.onScrollEnd;
var showTodayHelper = _props8.showTodayHelper;
var isScrolling = _this2.state.isScrolling;
if (isScrolling) _this2.setState({ isScrolling: false });
if (showTodayHelper) _this2.updateTodayHelperPosition(0);
if (typeof onScrollEnd == 'function') onScrollEnd(_this2.scrollTop);
}, 150);
this.updateTodayHelperPosition = function (scrollSpeed) {
var date = _this2.today.date;
if (!_this2.todayOffset) _this2.todayOffset = _this2.getDateOffset(date); //scrollTop offset of the month "today" is in
var scrollTop = _this2.scrollTop;
var showToday = _this2.state.showToday;
var _props9 = _this2.props;
var height = _props9.height;
var rowHeight = _props9.rowHeight;
var todayHelperRowOffset = _props9.todayHelperRowOffset;
var newState = void 0;
var dayOffset = Math.ceil((date.date() - 7 + (0, _moment2.default)(date).startOf("month").day()) / 7) * rowHeight; //offset of "today" within its month
if (scrollTop >= _this2.todayOffset + dayOffset + rowHeight * (todayHelperRowOffset + 1)) {
if (showToday !== 1) newState = 1; //today is above the fold
} else if (scrollTop + height <= _this2.todayOffset + dayOffset + rowHeight - rowHeight * (todayHelperRowOffset + 1)) {
if (showToday !== -1) newState = -1; //today is below the fold
} else if (showToday && scrollSpeed <= 1) {
newState = false;
}
if (scrollTop == 0) {
newState = false;
}
if (newState != null) {
_this2.setState({ showToday: newState });
}
};
this.handleKeyDown = function (e) {
var _props10 = _this2.props;
var maxDate = _props10.maxDate;
var minDate = _props10.minDate;
var onKeyDown = _props10.onKeyDown;
var _state2 = _this2.state;
var display = _state2.display;
var selectedDate = _state2.selectedDate;
var highlightedDate = _state2.highlightedDate;
var showToday = _state2.showToday;
var delta = 0;
if (typeof onKeyDown == 'function') {
onKeyDown(e);
}
if ([_utils.keyCodes.left, _utils.keyCodes.up, _utils.keyCodes.right, _utils.keyCodes.down].indexOf(e.keyCode) > -1 && typeof e.preventDefault == 'function') {
e.preventDefault();
}
if (!selectedDate) {
selectedDate = (0, _moment2.default)();
}
if (display == 'days') {
if (!highlightedDate) {
highlightedDate = selectedDate.clone();
_this2.setState({ highlightedDate: highlightedDate });
}
switch (e.keyCode) {
case _utils.keyCodes.enter:
_this2.onDaySelect((0, _moment2.default)(highlightedDate), e);
return;
case _utils.keyCodes.left:
delta = -1;
break;
case _utils.keyCodes.right:
delta = +1;
break;
case _utils.keyCodes.down:
delta = +7;
break;
case _utils.keyCodes.up:
delta = -7;
break;
}
if (delta) {
var rowHeight = _this2.props.rowHeight;
var newHighlightedDate = (0, _moment2.default)(highlightedDate).add(delta, 'days');
// Make sure the new highlighted date isn't before min / max
if (newHighlightedDate.isBefore(minDate)) {
newHighlightedDate = (0, _moment2.default)(minDate);
} else if (newHighlightedDate.isAfter(maxDate)) {
newHighlightedDate = (0, _moment2.default)(maxDate);
}
// Update the highlight indicator
_this2.clearHighlight();
// Scroll the view
if (!_this2.currentOffset) _this2.currentOffset = _this2.getCurrentOffset();
var currentOffset = _this2.currentOffset;
var monthOffset = _this2.getDateOffset(newHighlightedDate);
var navOffset = showToday ? 36 : 0;
var highlightedEl = _this2.highlightedEl = _this2.node.querySelector('[data-date=\'' + newHighlightedDate.format('YYYYMMDD') + '\']');
// Edge-case: if the user tries to use the keyboard when the new highlighted date isn't rendered because it's too far off-screen
// We need to scroll to the month of the new highlighted date so it renders
if (!highlightedEl) {
_this2.scrollTo(monthOffset - navOffset);
return;
}
highlightedEl.classList.add(style.day.highlighted);
var dateOffset = highlightedEl.offsetTop - rowHeight;
var newOffset = monthOffset + dateOffset;
if (currentOffset !== newOffset) {
_this2.currentOffset = newOffset;
_this2.scrollTo(newOffset - navOffset);
}
// Update the reference to the currently highlighted date
_this2.setState({
highlightedDate: newHighlightedDate
});
}
} else if (display == 'years' && _this2.refs.years) {
_this2.refs.years.handleKeyDown(e);
}
};
this.setDisplay = function (display) {
_this2.setState({ display: display });
};
};
exports.default = InfiniteCalendar;
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2016 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
return classNames;
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {
window.classNames = classNames;
}
}());
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(module) {//! moment.js
//! version : 2.14.1
//! authors : Tim Wood, Iskren Chernev, Moment.js contributors
//! license : MIT
//! momentjs.com
;(function (global, factory) {
true ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.moment = factory()
}(this, function () { 'use strict';
var hookCallback;
function utils_hooks__hooks () {
return hookCallback.apply(null, arguments);
}
// This is done to register the method called with moment()
// without creating circular dependencies.
function setHookCallback (callback) {
hookCallback = callback;
}
function isArray(input) {
return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]';
}
function isObject(input) {
return Object.prototype.toString.call(input) === '[object Object]';
}
function isObjectEmpty(obj) {
var k;
for (k in obj) {
// even if its not own property I'd still call it non-empty
return false;
}
return true;
}
function isDate(input) {
return input instanceof Date || Object.prototype.toString.call(input) === '[object Date]';
}
function map(arr, fn) {
var res = [], i;
for (i = 0; i < arr.length; ++i) {
res.push(fn(arr[i], i));
}
return res;
}
function hasOwnProp(a, b) {
return Object.prototype.hasOwnProperty.call(a, b);
}
function extend(a, b) {
for (var i in b) {
if (hasOwnProp(b, i)) {
a[i] = b[i];
}
}
if (hasOwnProp(b, 'toString')) {
a.toString = b.toString;
}
if (hasOwnProp(b, 'valueOf')) {
a.valueOf = b.valueOf;
}
return a;
}
function create_utc__createUTC (input, format, locale, strict) {
return createLocalOrUTC(input, format, locale, strict, true).utc();
}
function defaultParsingFlags() {
// We need to deep clone this object.
return {
empty : false,
unusedTokens : [],
unusedInput : [],
overflow : -2,
charsLeftOver : 0,
nullInput : false,
invalidMonth : null,
invalidFormat : false,
userInvalidated : false,
iso : false,
parsedDateParts : [],
meridiem : null
};
}
function getParsingFlags(m) {
if (m._pf == null) {
m._pf = defaultParsingFlags();
}
return m._pf;
}
var some;
if (Array.prototype.some) {
some = Array.prototype.some;
} else {
some = function (fun) {
var t = Object(this);
var len = t.length >>> 0;
for (var i = 0; i < len; i++) {
if (i in t && fun.call(this, t[i], i, t)) {
return true;
}
}
return false;
};
}
function valid__isValid(m) {
if (m._isValid == null) {
var flags = getParsingFlags(m);
var parsedParts = some.call(flags.parsedDateParts, function (i) {
return i != null;
});
m._isValid = !isNaN(m._d.getTime()) &&
flags.overflow < 0 &&
!flags.empty &&
!flags.invalidMonth &&
!flags.invalidWeekday &&
!flags.nullInput &&
!flags.invalidFormat &&
!flags.userInvalidated &&
(!flags.meridiem || (flags.meridiem && parsedParts));
if (m._strict) {
m._isValid = m._isValid &&
flags.charsLeftOver === 0 &&
flags.unusedTokens.length === 0 &&
flags.bigHour === undefined;
}
}
return m._isValid;
}
function valid__createInvalid (flags) {
var m = create_utc__createUTC(NaN);
if (flags != null) {
extend(getParsingFlags(m), flags);
}
else {
getParsingFlags(m).userInvalidated = true;
}
return m;
}
function isUndefined(input) {
return input === void 0;
}
// Plugins that add properties should also add the key here (null value),
// so we can properly clone ourselves.
var momentProperties = utils_hooks__hooks.momentProperties = [];
function copyConfig(to, from) {
var i, prop, val;
if (!isUndefined(from._isAMomentObject)) {
to._isAMomentObject = from._isAMomentObject;
}
if (!isUndefined(from._i)) {
to._i = from._i;
}
if (!isUndefined(from._f)) {
to._f = from._f;
}
if (!isUndefined(from._l)) {
to._l = from._l;
}
if (!isUndefined(from._strict)) {
to._strict = from._strict;
}
if (!isUndefined(from._tzm)) {
to._tzm = from._tzm;
}
if (!isUndefined(from._isUTC)) {
to._isUTC = from._isUTC;
}
if (!isUndefined(from._offset)) {
to._offset = from._offset;
}
if (!isUndefined(from._pf)) {
to._pf = getParsingFlags(from);
}
if (!isUndefined(from._locale)) {
to._locale = from._locale;
}
if (momentProperties.length > 0) {
for (i in momentProperties) {
prop = momentProperties[i];
val = from[prop];
if (!isUndefined(val)) {
to[prop] = val;
}
}
}
return to;
}
var updateInProgress = false;
// Moment prototype object
function Moment(config) {
copyConfig(this, config);
this._d = new Date(config._d != null ? config._d.getTime() : NaN);
// Prevent infinite loop in case updateOffset creates new moment
// objects.
if (updateInProgress === false) {
updateInProgress = true;
utils_hooks__hooks.updateOffset(this);
updateInProgress = false;
}
}
function isMoment (obj) {
return obj instanceof Moment || (obj != null && obj._isAMomentObject != null);
}
function absFloor (number) {
if (number < 0) {
// -0 -> 0
return Math.ceil(number) || 0;
} else {
return Math.floor(number);
}
}
function toInt(argumentForCoercion) {
var coercedNumber = +argumentForCoercion,
value = 0;
if (coercedNumber !== 0 && isFinite(coercedNumber)) {
value = absFloor(coercedNumber);
}
return value;
}
// compare two arrays, return the number of differences
function compareArrays(array1, array2, dontConvert) {
var len = Math.min(array1.length, array2.length),
lengthDiff = Math.abs(array1.length - array2.length),
diffs = 0,
i;
for (i = 0; i < len; i++) {
if ((dontConvert && array1[i] !== array2[i]) ||
(!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
diffs++;
}
}
return diffs + lengthDiff;
}
function warn(msg) {
if (utils_hooks__hooks.suppressDeprecationWarnings === false &&
(typeof console !== 'undefined') && console.warn) {
console.warn('Deprecation warning: ' + msg);
}
}
function deprecate(msg, fn) {
var firstTime = true;
return extend(function () {
if (utils_hooks__hooks.deprecationHandler != null) {
utils_hooks__hooks.deprecationHandler(null, msg);
}
if (firstTime) {
warn(msg + '\nArguments: ' + Array.prototype.slice.call(arguments).join(', ') + '\n' + (new Error()).stack);
firstTime = false;
}
return fn.apply(this, arguments);
}, fn);
}
var deprecations = {};
function deprecateSimple(name, msg) {
if (utils_hooks__hooks.deprecationHandler != null) {
utils_hooks__hooks.deprecationHandler(name, msg);
}
if (!deprecations[name]) {
warn(msg);
deprecations[name] = true;
}
}
utils_hooks__hooks.suppressDeprecationWarnings = false;
utils_hooks__hooks.deprecationHandler = null;
function isFunction(input) {
return input instanceof Function || Object.prototype.toString.call(input) === '[object Function]';
}
function locale_set__set (config) {
var prop, i;
for (i in config) {
prop = config[i];
if (isFunction(prop)) {
this[i] = prop;
} else {
this['_' + i] = prop;
}
}
this._config = config;
// Lenient ordinal parsing accepts just a number in addition to
// number + (possibly) stuff coming from _ordinalParseLenient.
this._ordinalParseLenient = new RegExp(this._ordinalParse.source + '|' + (/\d{1,2}/).source);
}
function mergeConfigs(parentConfig, childConfig) {
var res = extend({}, parentConfig), prop;
for (prop in childConfig) {
if (hasOwnProp(childConfig, prop)) {
if (isObject(parentConfig[prop]) && isObject(childConfig[prop])) {
res[prop] = {};
extend(res[prop], parentConfig[prop]);
extend(res[prop], childConfig[prop]);
} else if (childConfig[prop] != null) {
res[prop] = childConfig[prop];
} else {
delete res[prop];
}
}
}
for (prop in parentConfig) {
if (hasOwnProp(parentConfig, prop) &&
!hasOwnProp(childConfig, prop) &&
isObject(parentConfig[prop])) {
// make sure changes to properties don't modify parent config
res[prop] = extend({}, res[prop]);
}
}
return res;
}
function Locale(config) {
if (config != null) {
this.set(config);
}
}
var keys;
if (Object.keys) {
keys = Object.keys;
} else {
keys = function (obj) {
var i, res = [];
for (i in obj) {
if (hasOwnProp(obj, i)) {
res.push(i);
}
}
return res;
};
}
var defaultCalendar = {
sameDay : '[Today at] LT',
nextDay : '[Tomorrow at] LT',
nextWeek : 'dddd [at] LT',
lastDay : '[Yesterday at] LT',
lastWeek : '[Last] dddd [at] LT',
sameElse : 'L'
};
function locale_calendar__calendar (key, mom, now) {
var output = this._calendar[key] || this._calendar['sameElse'];
return isFunction(output) ? output.call(mom, now) : output;
}
var defaultLongDateFormat = {
LTS : 'h:mm:ss A',
LT : 'h:mm A',
L : 'MM/DD/YYYY',
LL : 'MMMM D, YYYY',
LLL : 'MMMM D, YYYY h:mm A',
LLLL : 'dddd, MMMM D, YYYY h:mm A'
};
function longDateFormat (key) {
var format = this._longDateFormat[key],
formatUpper = this._longDateFormat[key.toUpperCase()];
if (format || !formatUpper) {
return format;
}
this._longDateFormat[key] = formatUpper.replace(/MMMM|MM|DD|dddd/g, function (val) {
return val.slice(1);
});
return this._longDateFormat[key];
}
var defaultInvalidDate = 'Invalid date';
function invalidDate () {
return this._invalidDate;
}
var defaultOrdinal = '%d';
var defaultOrdinalParse = /\d{1,2}/;
function ordinal (number) {
return this._ordinal.replace('%d', number);
}
var defaultRelativeTime = {
future : 'in %s',
past : '%s ago',
s : 'a few seconds',
m : 'a minute',
mm : '%d minutes',
h : 'an hour',
hh : '%d hours',
d : 'a day',
dd : '%d days',
M : 'a month',
MM : '%d months',
y : 'a year',
yy : '%d years'
};
function relative__relativeTime (number, withoutSuffix, string, isFuture) {
var output = this._relativeTime[string];
return (isFunction(output)) ?
output(number, withoutSuffix, string, isFuture) :
output.replace(/%d/i, number);
}
function pastFuture (diff, output) {
var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
return isFunction(format) ? format(output) : format.replace(/%s/i, output);
}
var aliases = {};
function addUnitAlias (unit, shorthand) {
var lowerCase = unit.toLowerCase();
aliases[lowerCase] = aliases[lowerCase + 's'] = aliases[shorthand] = unit;
}
function normalizeUnits(units) {
return typeof units === 'string' ? aliases[units] || aliases[units.toLowerCase()] : undefined;
}
function normalizeObjectUnits(inputObject) {
var normalizedInput = {},
normalizedProp,
prop;
for (prop in inputObject) {
if (hasOwnProp(inputObject, prop)) {
normalizedProp = normalizeUnits(prop);
if (normalizedProp) {
normalizedInput[normalizedProp] = inputObject[prop];
}
}
}
return normalizedInput;
}
var priorities = {};
function addUnitPriority(unit, priority) {
priorities[unit] = priority;
}
function getPrioritizedUnits(unitsObj) {
var units = [];
for (var u in unitsObj) {
units.push({unit: u, priority: priorities[u]});
}
units.sort(function (a, b) {
return a.priority - b.priority;
});
return units;
}
function makeGetSet (unit, keepTime) {
return function (value) {
if (value != null) {
get_set__set(this, unit, value);
utils_hooks__hooks.updateOffset(this, keepTime);
return this;
} else {
return get_set__get(this, unit);
}
};
}
function get_set__get (mom, unit) {
return mom.isValid() ?
mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]() : NaN;
}
function get_set__set (mom, unit, value) {
if (mom.isValid()) {
mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
}
}
// MOMENTS
function stringGet (units) {
units = normalizeUnits(units);
if (isFunction(this[units])) {
return this[units]();
}
return this;
}
function stringSet (units, value) {
if (typeof units === 'object') {
units = normalizeObjectUnits(units);
var prioritized = getPrioritizedUnits(units);
for (var i = 0; i < prioritized.length; i++) {
this[prioritized[i].unit](units[prioritized[i].unit]);
}
} else {
units = normalizeUnits(units);
if (isFunction(this[units])) {
return this[units](value);
}
}
return this;
}
function zeroFill(number, targetLength, forceSign) {
var absNumber = '' + Math.abs(number),
zerosToFill = targetLength - absNumber.length,
sign = number >= 0;
return (sign ? (forceSign ? '+' : '') : '-') +
Math.pow(10, Math.max(0, zerosToFill)).toString().substr(1) + absNumber;
}
var formattingTokens = /(\[[^\[]*\])|(\\)?([Hh]mm(ss)?|Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Qo?|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|kk?|mm?|ss?|S{1,9}|x|X|zz?|ZZ?|.)/g;
var localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g;
var formatFunctions = {};
var formatTokenFunctions = {};
// token: 'M'
// padded: ['MM', 2]
// ordinal: 'Mo'
// callback: function () { this.month() + 1 }
function addFormatToken (token, padded, ordinal, callback) {