react-day-picker
Version:
Flexible date picker component for React
254 lines (209 loc) • 10.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Weekdays = require('./Weekdays');
var _Weekdays2 = _interopRequireDefault(_Weekdays);
var _Day = require('./Day');
var _Day2 = _interopRequireDefault(_Day);
var _keys = require('./keys');
var _ModifiersUtils = require('./ModifiersUtils');
var ModifiersUtils = _interopRequireWildcard(_ModifiersUtils);
var _Helpers = require('./Helpers');
var Helpers = _interopRequireWildcard(_Helpers);
var _DateUtils = require('./DateUtils');
var DateUtils = _interopRequireWildcard(_DateUtils);
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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _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 Month = function (_Component) {
_inherits(Month, _Component);
function Month() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Month);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.renderDay = function (day) {
var monthNumber = _this.props.month.getMonth();
var propModifiers = Helpers.getModifiersFromProps(_this.props);
var dayModifiers = ModifiersUtils.getModifiersForDay(day, propModifiers);
if (DateUtils.isSameDay(day, new Date()) && !Object.prototype.hasOwnProperty.call(propModifiers, _this.props.classNames.today)) {
dayModifiers.push(_this.props.classNames.today);
}
if (day.getMonth() !== monthNumber) {
dayModifiers.push(_this.props.classNames.outside);
}
var isOutside = day.getMonth() !== monthNumber;
var tabIndex = -1;
// Focus on the first day of the month
if (_this.props.onDayClick && !isOutside && day.getDate() === 1) {
tabIndex = _this.props.tabIndex; // eslint-disable-line prefer-destructuring
}
var key = '' + day.getFullYear() + day.getMonth() + day.getDate();
var modifiers = {};
dayModifiers.forEach(function (modifier) {
modifiers[modifier] = true;
});
return _react2.default.createElement(
_Day2.default,
{
key: '' + (isOutside ? 'outside-' : '') + key,
classNames: _this.props.classNames,
day: day,
modifiers: modifiers,
modifiersStyles: _this.props.modifiersStyles,
empty: isOutside && !_this.props.showOutsideDays && !_this.props.fixedWeeks,
tabIndex: tabIndex,
ariaLabel: _this.props.localeUtils.formatDay(day, _this.props.locale),
ariaDisabled: isOutside || dayModifiers.indexOf(_this.props.classNames.disabled) > -1,
ariaSelected: dayModifiers.indexOf(_this.props.classNames.selected) > -1,
onClick: _this.props.onDayClick,
onFocus: _this.props.onDayFocus,
onKeyDown: _this.props.onDayKeyDown,
onMouseEnter: _this.props.onDayMouseEnter,
onMouseLeave: _this.props.onDayMouseLeave,
onMouseDown: _this.props.onDayMouseDown,
onMouseUp: _this.props.onDayMouseUp,
onTouchEnd: _this.props.onDayTouchEnd,
onTouchStart: _this.props.onDayTouchStart
},
_this.props.renderDay(day, modifiers)
);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Month, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
classNames = _props.classNames,
month = _props.month,
months = _props.months,
fixedWeeks = _props.fixedWeeks,
captionElement = _props.captionElement,
weekdayElement = _props.weekdayElement,
locale = _props.locale,
localeUtils = _props.localeUtils,
weekdaysLong = _props.weekdaysLong,
weekdaysShort = _props.weekdaysShort,
firstDayOfWeek = _props.firstDayOfWeek,
onCaptionClick = _props.onCaptionClick,
showWeekNumbers = _props.showWeekNumbers,
showWeekDays = _props.showWeekDays,
onWeekClick = _props.onWeekClick;
var captionProps = {
date: month,
classNames: classNames,
months: months,
localeUtils: localeUtils,
locale: locale,
onClick: onCaptionClick ? function (e) {
return onCaptionClick(month, e);
} : undefined
};
var caption = _react2.default.isValidElement(captionElement) ? _react2.default.cloneElement(captionElement, captionProps) : _react2.default.createElement(captionElement, captionProps);
var weeks = Helpers.getWeekArray(month, firstDayOfWeek, fixedWeeks);
return _react2.default.createElement(
'div',
{ className: classNames.month, role: 'grid' },
caption,
showWeekDays && _react2.default.createElement(_Weekdays2.default, {
classNames: classNames,
weekdaysShort: weekdaysShort,
weekdaysLong: weekdaysLong,
firstDayOfWeek: firstDayOfWeek,
showWeekNumbers: showWeekNumbers,
locale: locale,
localeUtils: localeUtils,
weekdayElement: weekdayElement
}),
_react2.default.createElement(
'div',
{ className: classNames.body, role: 'rowgroup' },
weeks.map(function (week) {
var weekNumber = void 0;
if (showWeekNumbers) {
weekNumber = DateUtils.getWeekNumber(week[6]);
}
return _react2.default.createElement(
'div',
{
key: week[0].getTime(),
className: classNames.week,
role: 'row'
},
showWeekNumbers && _react2.default.createElement(
'div',
{
className: classNames.weekNumber,
tabIndex: onWeekClick ? 0 : -1,
role: 'gridcell',
onClick: onWeekClick ? function (e) {
return onWeekClick(weekNumber, week, e);
} : undefined,
onKeyUp: onWeekClick ? function (e) {
return e.keyCode === _keys.ENTER && onWeekClick(weekNumber, week, e);
} : undefined
},
_this2.props.renderWeek(weekNumber, week, month)
),
week.map(_this2.renderDay)
);
})
)
);
}
}]);
return Month;
}(_react.Component);
Month.propTypes = {
classNames: _propTypes2.default.shape({
body: _propTypes2.default.string.isRequired,
month: _propTypes2.default.string.isRequired,
outside: _propTypes2.default.string.isRequired,
today: _propTypes2.default.string.isRequired,
week: _propTypes2.default.string.isRequired,
weekNumber: _propTypes2.default.string.isRequired,
disabled: _propTypes2.default.string.isRequired,
selected: _propTypes2.default.string.isRequired
}).isRequired,
tabIndex: _propTypes2.default.number,
month: _propTypes2.default.instanceOf(Date).isRequired,
months: _propTypes2.default.arrayOf(_propTypes2.default.string),
modifiersStyles: _propTypes2.default.object,
showWeekDays: _propTypes2.default.bool,
showOutsideDays: _propTypes2.default.bool,
renderDay: _propTypes2.default.func.isRequired,
renderWeek: _propTypes2.default.func.isRequired,
captionElement: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func, _propTypes2.default.instanceOf(_react2.default.Component)]).isRequired,
weekdayElement: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func, _propTypes2.default.instanceOf(_react2.default.Component)]),
fixedWeeks: _propTypes2.default.bool,
showWeekNumbers: _propTypes2.default.bool,
locale: _propTypes2.default.string.isRequired,
localeUtils: _propTypes2.default.object.isRequired,
weekdaysLong: _propTypes2.default.arrayOf(_propTypes2.default.string),
weekdaysShort: _propTypes2.default.arrayOf(_propTypes2.default.string),
firstDayOfWeek: _propTypes2.default.number.isRequired,
onCaptionClick: _propTypes2.default.func,
onDayClick: _propTypes2.default.func,
onDayFocus: _propTypes2.default.func,
onDayKeyDown: _propTypes2.default.func,
onDayMouseEnter: _propTypes2.default.func,
onDayMouseLeave: _propTypes2.default.func,
onDayMouseDown: _propTypes2.default.func,
onDayMouseUp: _propTypes2.default.func,
onDayTouchEnd: _propTypes2.default.func,
onDayTouchStart: _propTypes2.default.func,
onWeekClick: _propTypes2.default.func
};
exports.default = Month;
//# sourceMappingURL=Month.js.map