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

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

'use strict';

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

var _react = require('react');

var _react2 = babelHelpers.interopRequireDefault(_react);

var _reactAddonsShallowCompare = require('react-addons-shallow-compare');

var _reactAddonsShallowCompare2 = babelHelpers.interopRequireDefault(_reactAddonsShallowCompare);

var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');

var _reactAddonsCssTransitionGroup2 = babelHelpers.interopRequireDefault(_reactAddonsCssTransitionGroup);

var _classnames = require('classnames');

var _classnames2 = babelHelpers.interopRequireDefault(_classnames);

var style = {
	'root': 'Cal__Header__root',
	'blank': 'Cal__Header__blank',
	'wrapper': 'Cal__Header__wrapper',
	'landscape': 'Cal__Header__landscape',
	'dateWrapper': 'Cal__Header__dateWrapper',
	'day': 'Cal__Header__day',
	'active': 'Cal__Header__active',
	'start': 'Cal__Header__start',
	'end': 'Cal__Header__end',
	'year': 'Cal__Header__year',
	'date': 'Cal__Header__date',
	'rangeLabel': 'Cal__Header__rangeLabel'
};
var animation = {
	'enter': 'Cal__Animation__enter',
	'enterActive': 'Cal__Animation__enterActive',
	'leave': 'Cal__Animation__leave',
	'leaveActive': 'Cal__Animation__leaveActive'
};

var Header = function (_Component) {
	babelHelpers.inherits(Header, _Component);

	function Header() {
		babelHelpers.classCallCheck(this, Header);
		return babelHelpers.possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).apply(this, arguments));
	}

	babelHelpers.createClass(Header, [{
		key: 'shouldComponentUpdate',
		value: function shouldComponentUpdate(nextProps) {
			return (0, _reactAddonsShallowCompare2.default)(this, nextProps);
		}
	}, {
		key: 'getDateValues',
		value: function getDateValues() {
			var _props = this.props;
			var display = _props.display;
			var locale = _props.locale;
			var scrollToDate = _props.scrollToDate;
			var setDisplay = _props.setDisplay;
			var selectedDate = _props.selectedDate;
			var rangeSelectionEndDate = _props.rangeSelectionEndDate;


			var values = [{
				item: 'day',
				key: selectedDate.format('YYYYMMDD'),
				value: selectedDate.format(locale.headerFormat),
				active: display === 'days',
				title: display === 'days' ? 'Scroll to ' + selectedDate.format(locale.headerFormat) : null,
				handleClick: function handleClick(e) {
					e && e.stopPropagation();

					if (display !== 'days') {
						setDisplay('days');
					} else if (selectedDate) {
						scrollToDate(selectedDate, -40);
					}
				}
			}];

			if (selectedDate && rangeSelectionEndDate && !selectedDate.isSame(rangeSelectionEndDate)) {
				values[0].item = "start";
				var numDays = rangeSelectionEndDate.diff(selectedDate, 'days') + 1;
				values.push({
					item: 'end',
					key: rangeSelectionEndDate.format('YYYYMMDD'),
					value: locale.rangeLabel + " " + rangeSelectionEndDate.format(locale.headerFormat),
					rangeHint: _react2.default.createElement(
						'i',
						null,
						numDays,
						' days'
					),
					active: display === 'days',
					title: display === 'days' ? 'Scroll to ' + rangeSelectionEndDate.format(locale.headerFormat) : null,
					handleClick: function handleClick(e) {
						e && e.stopPropagation();

						if (display !== 'days') {
							setDisplay('days');
						} else if (rangeSelectionEndDate) {
							scrollToDate(rangeSelectionEndDate, -40);
						}
					}
				});
			}

			return values;
		}
	}, {
		key: 'render',
		value: function render() {
			var _classNames;

			var _props2 = this.props;
			var layout = _props2.layout;
			var locale = _props2.locale;
			var selectedDate = _props2.selectedDate;
			var rangeSelectionEndDate = _props2.rangeSelectionEndDate;
			var shouldHeaderAnimate = _props2.shouldHeaderAnimate;
			var theme = _props2.theme;

			var dateValues = selectedDate && this.getDateValues();

			return _react2.default.createElement(
				'div',
				{ className: (0, _classnames2.default)(style.root, (_classNames = {}, babelHelpers.defineProperty(_classNames, style.blank, !selectedDate), babelHelpers.defineProperty(_classNames, style.landscape, layout == 'landscape'), _classNames)), style: theme && { backgroundColor: theme.headerColor, color: theme.textColor.active } },
				selectedDate ? _react2.default.createElement(
					'div',
					{ className: style.wrapper, 'aria-label': selectedDate.format(locale.headerFormat + ' YYYY') },
					dateValues.map(function (_ref) {
						var handleClick = _ref.handleClick;
						var item = _ref.item;
						var key = _ref.key;
						var value = _ref.value;
						var active = _ref.active;
						var title = _ref.title;
						var rangeHint = _ref.rangeHint;

						return _react2.default.createElement(
							'div',
							{ key: item, className: (0, _classnames2.default)(style.dateWrapper, style[item], babelHelpers.defineProperty({}, style.active, active)), title: title },
							_react2.default.createElement(
								_reactAddonsCssTransitionGroup2.default,
								{ transitionName: animation, transitionEnterTimeout: 250, transitionLeaveTimeout: 250, transitionEnter: shouldHeaderAnimate, transitionLeave: shouldHeaderAnimate },
								_react2.default.createElement(
									'span',
									{ key: item + '-' + (key || value), className: style.date, 'aria-hidden': true, onClick: handleClick },
									value,
									' ',
									rangeHint
								)
							)
						);
					})
				) : _react2.default.createElement(
					'div',
					{ className: style.wrapper },
					locale.blank
				)
			);
		}
	}]);
	return Header;
}(_react.Component);

Header.propTypes = {
	layout: _react.PropTypes.string,
	locale: _react.PropTypes.object,
	onClick: _react.PropTypes.func,
	selectedDate: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.bool]),
	rangeSelectionEndDate: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.bool]),
	shouldHeaderAnimate: _react.PropTypes.bool,
	theme: _react.PropTypes.object,
	display: _react.PropTypes.string
};
exports.default = Header;