UNPKG

@roo-ui/components

Version:

317 lines (253 loc) 11.8 kB
'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 = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _dayzed = require('dayzed'); var _dayzed2 = _interopRequireDefault(_dayzed); var _dateFns = require('date-fns'); var _throttle = require('lodash/fp/throttle'); var _throttle2 = _interopRequireDefault(_throttle); var _ = require('../'); var _isDateInRange = require('./lib/isDateInRange'); var _isDateInRange2 = _interopRequireDefault(_isDateInRange); var _CalendarNav = require('./components/CalendarNav'); var _CalendarNav2 = _interopRequireDefault(_CalendarNav); var _CalendarMonth = require('./components/CalendarMonth'); var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 NOOP = function NOOP() { return false; }; var throttled = (0, _throttle2.default)(10); var DateRangePicker = function (_React$Component) { _inherits(DateRangePicker, _React$Component); function DateRangePicker(props) { _classCallCheck(this, DateRangePicker); var _this = _possibleConstructorReturn(this, (DateRangePicker.__proto__ || Object.getPrototypeOf(DateRangePicker)).call(this, props)); _initialiseProps.call(_this); var _this$props = _this.props, initialStartDate = _this$props.initialStartDate, initialEndDate = _this$props.initialEndDate, initialDisplayDate = _this$props.initialDisplayDate; var startDate = initialStartDate ? (0, _dateFns.startOfDay)(initialStartDate) : null; var endDate = initialEndDate ? (0, _dateFns.endOfDay)(initialEndDate) : null; var focusDate = startDate || endDate || initialDisplayDate; _this.state = { hoveredDate: null, offset: (0, _dateFns.differenceInCalendarMonths)(focusDate, initialDisplayDate), isSettingStartDate: props.isSettingStartDate, isSettingEndDate: props.isSettingEndDate, startDate: startDate, endDate: endDate }; return _this; } _createClass(DateRangePicker, [{ key: 'componentDidUpdate', value: function componentDidUpdate(prevProps, prevState) { var _state = this.state, startDate = _state.startDate, endDate = _state.endDate; var prevStartDate = prevState.startDate, prevEndDate = prevState.endDate; var startDateDidUpdate = !(0, _dateFns.isSameDay)(startDate, prevStartDate); var endDateDidUpdate = !(0, _dateFns.isSameDay)(endDate, prevEndDate); if (startDateDidUpdate || endDateDidUpdate) { this.props.onChangeDates({ startDate: startDate, endDate: endDate }); } } }, { key: 'render', value: function render() { var _this2 = this; var _props = this.props, monthNames = _props.monthNames, weekdayNames = _props.weekdayNames, monthsToDisplay = _props.monthsToDisplay, stacked = _props.stacked, disabledDates = _props.disabledDates, interactiveDisabledDates = _props.interactiveDisabledDates, initialDisplayDate = _props.initialDisplayDate, rest = _objectWithoutProperties(_props, ['monthNames', 'weekdayNames', 'monthsToDisplay', 'stacked', 'disabledDates', 'interactiveDisabledDates', 'initialDisplayDate']); var _state2 = this.state, startDate = _state2.startDate, endDate = _state2.endDate, offset = _state2.offset; var selectedDates = [startDate, endDate]; return _react2.default.createElement(_dayzed2.default, _extends({}, rest, { selected: selectedDates, date: initialDisplayDate, offset: offset, monthsToDisplay: monthsToDisplay, onDateSelected: this.onDateSelected, onOffsetChanged: this.onOffsetChanged, render: function render(_ref) { var calendars = _ref.calendars, getBackProps = _ref.getBackProps, getForwardProps = _ref.getForwardProps, getDateProps = _ref.getDateProps; if (!calendars.length) return null; return _react2.default.createElement( _.Box, { onMouseLeave: _this2.onMouseLeaveOfCalendar, position: 'relative' }, _react2.default.createElement(_CalendarNav2.default, { prevProps: getBackProps({ calendars: calendars }), nextProps: getForwardProps({ calendars: calendars }) }), _react2.default.createElement( _.Flex, { flexWrap: 'wrap' }, calendars.map(function (calendar) { return _react2.default.createElement(_CalendarMonth2.default, { key: '' + calendar.month + calendar.year, monthsToDisplay: monthsToDisplay, monthName: monthNames[calendar.month], month: calendar.month, year: calendar.year, stacked: stacked, weekdayNames: weekdayNames, weeks: calendar.weeks, getDateProps: getDateProps, disabledDates: disabledDates, interactiveDisabledDates: interactiveDisabledDates, onMouseEnterOfDay: _this2.onMouseEnterOfDay, isInRange: _this2.isInRange }); }) ) ); } })); } }]); return DateRangePicker; }(_react2.default.Component); var _initialiseProps = function _initialiseProps() { var _this3 = this; this.onOffsetChanged = function (offset) { return _this3.setState({ offset: offset }); }; this.onMouseLeaveOfCalendar = function () { return _this3.setState({ hoveredDate: null }); }; this.onMouseEnterOfDay = throttled(function (hoveredDate) { if (_this3.state.startDate && !_this3.state.endDate) { _this3.setState({ hoveredDate: hoveredDate.date }); } }); this.onDateSelected = function (_ref2) { var selectable = _ref2.selectable, date = _ref2.date; if (!selectable) return; var _state3 = _this3.state, startDate = _state3.startDate, endDate = _state3.endDate, isSettingStartDate = _state3.isSettingStartDate, isSettingEndDate = _state3.isSettingEndDate; if (!startDate || isSettingStartDate) { _this3.selectStartDate(date); } else if (!endDate || isSettingEndDate) { _this3.selectEndDate(date); } else { _this3.resetWithStartDate(date); } _this3.notifyRangeSelection(); }; this.notifyRangeSelection = function () { var _state4 = _this3.state, startDate = _state4.startDate, endDate = _state4.endDate; var onRangeSelected = _this3.props.onRangeSelected; if (startDate && endDate && onRangeSelected) { onRangeSelected({ startDate: startDate, endDate: endDate }); } }; this.selectStartDate = function (startDate) { var endDate = startDate <= _this3.state.endDate ? _this3.state.endDate : null; var endDateRequiresSelection = endDate === null; _this3.setState({ startDate: startDate, endDate: endDate, isSettingStartDate: false, isSettingEndDate: endDateRequiresSelection, hoveredDate: null }); }; this.selectEndDate = function (date) { if (date <= _this3.state.startDate) { _this3.resetWithStartDate(date); } else { _this3.setState({ endDate: date, isSettingEndDate: false, hoveredDate: null }); } }; this.resetWithStartDate = function (startDate) { _this3.setState({ startDate: startDate, endDate: null, isSettingStartDate: false, isSettingEndDate: true, hoveredDate: null }); }; this.isInRange = function (date) { var _state5 = _this3.state, startDate = _state5.startDate, endDate = _state5.endDate, isSettingStartDate = _state5.isSettingStartDate, hoveredDate = _state5.hoveredDate; return (0, _isDateInRange2.default)({ startDate: startDate, endDate: endDate, isSettingStartDate: isSettingStartDate, hoveredDate: hoveredDate, date: date }); }; }; DateRangePicker.defaultProps = { monthsToDisplay: 1, firstDayOfWeek: 1, stacked: false, minDate: (0, _dateFns.subDays)(new Date(), 1), disabledDates: [], monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], interactiveDisabledDates: false, initialStartDate: null, initialEndDate: null, initialDisplayDate: new Date(), onChangeStartDate: null, onChangeEndDate: null, isSettingStartDate: false, isSettingEndDate: false, onRangeSelected: NOOP, onChangeDates: NOOP }; DateRangePicker.propTypes = { monthsToDisplay: _propTypes2.default.number, firstDayOfWeek: _propTypes2.default.number, stacked: _propTypes2.default.bool, minDate: _propTypes2.default.instanceOf(Date), disabledDates: _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(Date)), interactiveDisabledDates: _propTypes2.default.bool, monthNames: _propTypes2.default.arrayOf(_propTypes2.default.string), weekdayNames: _propTypes2.default.arrayOf(_propTypes2.default.string), initialStartDate: _propTypes2.default.instanceOf(Date), initialEndDate: _propTypes2.default.instanceOf(Date), initialDisplayDate: _propTypes2.default.instanceOf(Date), isSettingStartDate: _propTypes2.default.bool, isSettingEndDate: _propTypes2.default.bool, onRangeSelected: _propTypes2.default.func, onChangeDates: _propTypes2.default.func }; exports.default = DateRangePicker;