react-infinite-calendar-with-range/dist/es6/Day/index.js

Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.default = Day;

var _react = require('react');

var _react2 = babelHelpers.interopRequireDefault(_react);

var style = {
	'root': 'Cal__Day__root',
	'enabled': 'Cal__Day__enabled',
	'highlighted': 'Cal__Day__highlighted',
	'today': 'Cal__Day__today',
	'disabled': 'Cal__Day__disabled',
	'badge': 'Cal__Day__badge',
	'selected': 'Cal__Day__selected',
	'month': 'Cal__Day__month',
	'year': 'Cal__Day__year',
	'selection': 'Cal__Day__selection',
	'day': 'Cal__Day__day',
	'selectionStart': 'Cal__Day__selectionStart',
	'selectionEnd': 'Cal__Day__selectionEnd',
	'selectionBetween': 'Cal__Day__selectionBetween',
	'badge_overdue': 'Cal__Day__badge_overdue'
};

function Day(_ref) {
	var currentYear = _ref.currentYear;
	var date = _ref.date;
	var day = _ref.day;
	var badge = _ref.badge;
	var handleDayClick = _ref.handleDayClick;
	var handleDayDown = _ref.handleDayDown;
	var handleDayOver = _ref.handleDayOver;
	var handleDayUp = _ref.handleDayUp;
	var handleTouchStart = _ref.handleTouchStart;
	var isDisabled = _ref.isDisabled;
	var isToday = _ref.isToday;
	var isSelected = _ref.isSelected;
	var isHovered = _ref.isHovered;
	var dragging = _ref.dragging;
	var isSelectedBetween = _ref.isSelectedBetween;
	var isSelectedEnd = _ref.isSelectedEnd;
	var monthShort = _ref.monthShort;
	var locale = _ref.locale;
	var theme = _ref.theme;
	var mmt = date.date;
	var yyyymmdd = date.yyyymmdd;

	var year = mmt.year();

	var highlightStyle = style.selection;
	if (isSelected && (!isSelectedEnd || dragging !== 0)) highlightStyle += " " + style.selectionStart;else if (!isSelected && isSelectedEnd) highlightStyle += " " + style.selectionEnd;else if (!isSelected && !isSelectedEnd && isSelectedBetween) highlightStyle += " " + style.selectionBetween;

	var backgroundColor = typeof theme.selectionColor == 'function' ? theme.selectionColor(mmt) : theme.selectionColor;
	if (dragging == 1 && !isSelected && !isDisabled) backgroundColor = typeof theme.selectionHoverColor == 'function' ? theme.selectionHoverColor(mmt) : theme.selectionHoverColor;else if (dragging == -1 && !isSelectedEnd && !isDisabled) backgroundColor = typeof theme.selectionHoverColor == 'function' ? theme.selectionHoverColor(mmt) : theme.selectionHoverColor;else if (isDisabled) backgroundColor = typeof theme.selectionDisabledColor == 'function' ? theme.selectionDisabledColor(mmt) : theme.selectionDisabledColor;

	var today = new Date();
	var badgeStyle = style.badge;
	if (date.date && date.date.isBefore(today)) badgeStyle += " " + style.badge_overdue;

	return _react2.default.createElement(
		'li',
		{
			style: isToday ? { color: theme.todayColor } : null,
			className: '' + style.root + (isToday ? ' ' + style.today : '') + (isSelected || isSelectedBetween || isSelectedEnd ? ' ' + style.selected : '') + (isDisabled ? ' ' + style.disabled : ' ' + style.enabled),
			'data-date': yyyymmdd,
			onClick: !isDisabled && handleDayClick ? handleDayClick.bind(this, mmt) : null,
			onMouseDown: !isDisabled && handleDayDown ? handleDayDown.bind(this, mmt) : null,
			onMouseOver: !isDisabled && handleDayOver ? handleDayOver.bind(this, mmt) : null,
			onMouseUp: !isDisabled && handleDayUp ? handleDayUp.bind(this, mmt) : null,
			onTouchStart: !isDisabled && handleDayUp ? handleTouchStart.bind(this, mmt) : null
		},
		day === 1 && _react2.default.createElement(
			'span',
			{ className: style.month },
			monthShort
		),
		_react2.default.createElement(
			'span',
			null,
			day
		),
		badge !== "" && _react2.default.createElement(
			'span',
			{ className: badgeStyle },
			badge
		),
		day === 1 && currentYear !== year && _react2.default.createElement(
			'span',
			{ className: style.year },
			year
		),
		(isSelected || isSelectedEnd) && _react2.default.createElement(
			'div',
			{ className: highlightStyle, style: { backgroundColor: backgroundColor, color: theme.textColor.active } },
			_react2.default.createElement(
				'span',
				{ className: style.month },
				isToday ? locale.todayLabel.short || locale.todayLabel.long : monthShort
			),
			_react2.default.createElement(
				'span',
				{ className: style.day },
				day
			)
		),
		isSelectedBetween && _react2.default.createElement(
			'div',
			{ className: highlightStyle, style: { backgroundColor: backgroundColor, color: theme.textColor.active } },
			_react2.default.createElement(
				'span',
				{ className: style.day },
				day
			)
		)
	);
}