@roo-ui/components/dist/DatePicker/DateRangePicker.js

'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;