react-cm-ui/core/inputs/datePickerCalendar/datePickerCalendar.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _lodash = _interopRequireDefault(require("lodash"));

var _classnames = _interopRequireDefault(require("classnames"));

var _momentTimezone = _interopRequireDefault(require("moment-timezone"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _datePickerDropdownMonth = _interopRequireDefault(require("./datePickerDropdownMonth"));

var _datePickerDropdownYear = _interopRequireDefault(require("./datePickerDropdownYear"));

var _datePickerMonth = _interopRequireDefault(require("./datePickerMonth"));

var _datePickerUtils = _interopRequireDefault(require("../../utils/datePickerUtils"));

var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var DatePickerCalendar = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(DatePickerCalendar, _React$PureComponent);

  var _super = _createSuper(DatePickerCalendar);

  function DatePickerCalendar(props) {
    var _this;

    _classCallCheck(this, DatePickerCalendar);

    _this = _super.call(this, props);
    _this.state = {
      date: _lodash["default"].cloneDeep(props.date),
      dateFrom: _lodash["default"].cloneDeep(props.dateFrom),
      dateTo: _lodash["default"].cloneDeep(props.dateTo),
      dateInView: _this._localizeMoment(_this._getDateInView(props.date, props.dateFrom, props.maxDate, props.minDate)),
      showDropdownMonth: false,
      showDropdownYear: false
    };
    _this._onMonthChange = _this._onMonthChange.bind(_assertThisInitialized(_this));
    _this._onYearChange = _this._onYearChange.bind(_assertThisInitialized(_this));
    _this._onDayClick = _this._onDayClick.bind(_assertThisInitialized(_this));
    _this._onDropdownMonthClick = _this._onDropdownMonthClick.bind(_assertThisInitialized(_this));
    _this._onDropdownYearClick = _this._onDropdownYearClick.bind(_assertThisInitialized(_this));
    _this._onPreviousMonthChange = _this._onPreviousMonthChange.bind(_assertThisInitialized(_this));
    _this._onNextMonthChange = _this._onNextMonthChange.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DatePickerCalendar, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this$props = this.props,
          date = _this$props.date,
          dateFrom = _this$props.dateFrom,
          dateTo = _this$props.dateTo,
          maxDate = _this$props.maxDate,
          minDate = _this$props.minDate;

      if (!_datePickerUtils["default"].isSameDay(prevProps.date, date) || !_datePickerUtils["default"].isSameDay(prevProps.dateFrom, dateFrom) || !_datePickerUtils["default"].isSameDay(prevProps.dateTo, dateTo)) {
        this.setState({
          date: date,
          dateFrom: dateFrom,
          dateTo: dateTo,
          dateInView: this._localizeMoment(this._getDateInView(date, dateFrom, maxDate, minDate))
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          events = _this$props2.events,
          excludeDates = _this$props2.excludeDates,
          filterDates = _this$props2.filterDates,
          id = _this$props2.id,
          includeDates = _this$props2.includeDates,
          maxDate = _this$props2.maxDate,
          minDate = _this$props2.minDate,
          mode = _this$props2.mode,
          range = _this$props2.range,
          rangeFrom = _this$props2.rangeFrom,
          rangeTo = _this$props2.rangeTo,
          style = _this$props2.style;
      var _this$state = this.state,
          date = _this$state.date,
          dateFrom = _this$state.dateFrom,
          dateTo = _this$state.dateTo,
          dateInView = _this$state.dateInView;
      var containerClasses = (0, _classnames["default"])('ui', 'date-picker-calendar', {
        'date-picker-calendar-mode-input': mode === 'input',
        'date-picker-calendar-mode-calendar': mode === 'calendar',
        'date-picker-calendar-date-range': !_lodash["default"].isEmpty(dateFrom) || !_lodash["default"].isEmpty(dateTo),
        'date-picker-calendar-single-date': _lodash["default"].isEmpty(dateFrom) && _lodash["default"].isEmpty(dateTo)
      });
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses,
        id: id,
        style: style
      }, mode === 'input' ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "date-picker-pointer"
      }) : null, this._renderControls(), /*#__PURE__*/_react["default"].createElement("div", {
        className: "date-picker-month-container"
      }, this._renderHeaderDays(), /*#__PURE__*/_react["default"].createElement(_datePickerMonth["default"], {
        date: date,
        dateFrom: dateFrom,
        dateInView: dateInView,
        dateTo: dateTo,
        events: events,
        excludeDates: excludeDates,
        filterDates: filterDates,
        includeDates: includeDates,
        maxDate: maxDate,
        minDate: minDate,
        onDayClick: this._onDayClick,
        mode: mode,
        range: range,
        rangeFrom: rangeFrom,
        rangeTo: rangeTo
      })));
    }
  }, {
    key: "_getDateInView",
    value: function _getDateInView(date, dateFrom, maxDate, minDate) {
      var today = (0, _momentTimezone["default"])();

      if (_momentTimezone["default"].isMoment(date)) {
        return date;
      } else if (_momentTimezone["default"].isMoment(dateFrom)) {
        return dateFrom;
      }

      if (_momentTimezone["default"].isMoment(minDate) && minDate.isAfter(today)) {
        return minDate;
      } else if (_momentTimezone["default"].isMoment(maxDate) && maxDate.isBefore(today)) {
        return maxDate;
      } else {
        return today;
      }
    }
  }, {
    key: "_localizeMoment",
    value: function _localizeMoment(value) {
      var locale = this.props.locale;
      return _momentTimezone["default"].isMoment(value) && value.clone().locale(locale || _momentTimezone["default"].locale());
    }
  }, {
    key: "_onMonthChange",
    value: function _onMonthChange(month) {
      var onMonthChange = this.props.onMonthChange;
      var dateInView = this.state.dateInView;

      if (!_lodash["default"].isUndefined(onMonthChange)) {
        onMonthChange(month, dateInView.year());
      }

      this.setState({
        dateInView: dateInView.clone().set('month', month),
        showDropdownMonth: false
      });
    }
  }, {
    key: "_onYearChange",
    value: function _onYearChange(year) {
      var dateInView = this.state.dateInView;
      this.setState({
        dateInView: dateInView.clone().set('year', year),
        showDropdownYear: false
      });
    }
  }, {
    key: "_onDayClick",
    value: function _onDayClick(date) {
      var _this$props3 = this.props,
          onChange = _this$props3.onChange,
          range = _this$props3.range,
          rangeFrom = _this$props3.rangeFrom,
          rangeTo = _this$props3.rangeTo;
      var _this$state2 = this.state,
          dateFrom = _this$state2.dateFrom,
          dateTo = _this$state2.dateTo;

      var isDateSame = _datePickerUtils["default"].isSameDay(this.state.date, date);

      var isDateBeforeFrom = !_lodash["default"].isUndefined(dateFrom) && date.isBefore(dateFrom);
      var isDateBetweenToAndFrom = date.isAfter(dateFrom) && date.isBefore(dateTo);
      var isDateAfterTo = !_lodash["default"].isUndefined(dateTo) && date.isAfter(dateTo);

      var isDateSameAsFrom = _datePickerUtils["default"].isSameDay(date, dateFrom);

      var isDateSameAsTo = _datePickerUtils["default"].isSameDay(date, dateTo);

      var isDateSameAsFromAndTo = isDateSameAsFrom && isDateSameAsTo;

      if (range) {
        if (isDateBeforeFrom) {
          if (!_lodash["default"].isUndefined(onChange)) {
            onChange({
              date: undefined,
              dateFrom: date,
              dateTo: dateTo
            });
          } else {
            this.setState({
              dateFrom: date
            });
          }
        }

        if (isDateSameAsTo || isDateSameAsFrom || _lodash["default"].isUndefined(dateFrom) && _lodash["default"].isUndefined(dateTo)) {
          if (!_lodash["default"].isUndefined(onChange)) {
            onChange({
              date: undefined,
              dateFrom: date,
              dateTo: date
            });
          } else {
            this.setState({
              dateFrom: date,
              dateTo: date
            });
          }
        }

        if (isDateAfterTo || isDateBetweenToAndFrom) {
          if (!_lodash["default"].isUndefined(onChange)) {
            onChange({
              date: undefined,
              dateFrom: dateFrom,
              dateTo: date
            });
          } else {
            this.setState({
              dateTo: date
            });
          }
        }

        if (isDateSameAsFromAndTo) {
          if (!_lodash["default"].isUndefined(onChange)) {
            onChange({
              date: undefined,
              dateFrom: null,
              dateTo: null
            });
          } else {
            this.setState({
              dateFrom: null,
              dateTo: null
            });
          }
        }
      } else if (rangeFrom || rangeTo) {
        var newDateFrom, newDateTo;

        if (rangeFrom && isDateSameAsTo || isDateAfterTo) {
          newDateFrom = !isDateSameAsFromAndTo ? date : null;
          newDateTo = !isDateSameAsFromAndTo ? date : null;
        } else if (rangeFrom && !isDateSameAsTo && !isDateAfterTo) {
          newDateFrom = date;
          newDateTo = dateTo;
        }

        if (rangeTo && isDateSameAsFrom || isDateBeforeFrom) {
          newDateFrom = !isDateSameAsFromAndTo ? date : null;
          newDateTo = !isDateSameAsFromAndTo ? date : null;
        } else if (rangeTo && !isDateSameAsFrom && !isDateBeforeFrom) {
          newDateFrom = dateFrom;
          newDateTo = date;
        }

        onChange({
          date: undefined,
          dateFrom: newDateFrom,
          dateTo: newDateTo
        });
      } else {
        if (!_lodash["default"].isUndefined(onChange)) {
          onChange({
            date: !isDateSame ? date : null,
            dateFrom: undefined,
            dateTo: undefined
          });
        } else {
          this.setState({
            date: !isDateSame ? date : null
          });
        }
      }
    }
  }, {
    key: "_onDropdownMonthClick",
    value: function _onDropdownMonthClick() {
      var showDropdownMonth = this.state.showDropdownMonth;
      this.setState({
        showDropdownMonth: !showDropdownMonth
      });
    }
  }, {
    key: "_onDropdownYearClick",
    value: function _onDropdownYearClick() {
      var showDropdownYear = this.state.showDropdownYear;
      this.setState({
        showDropdownYear: !showDropdownYear
      });
    }
  }, {
    key: "_onPreviousMonthChange",
    value: function _onPreviousMonthChange() {
      var _this2 = this;

      this.setState(function (prev) {
        var onMonthChange = _this2.props.onMonthChange;
        var dateInView = prev.dateInView.clone().subtract(1, 'months');

        if (!_lodash["default"].isUndefined(onMonthChange)) {
          onMonthChange(dateInView.month(), dateInView.year());
        }

        return {
          dateInView: dateInView,
          showDropdownMonth: false
        };
      });
    }
  }, {
    key: "_onNextMonthChange",
    value: function _onNextMonthChange() {
      var _this3 = this;

      this.setState(function (prev) {
        var onMonthChange = _this3.props.onMonthChange;
        var dateInView = prev.dateInView.clone().add(1, 'months');

        if (!_lodash["default"].isUndefined(onMonthChange)) {
          onMonthChange(dateInView.month(), dateInView.year());
        }

        return {
          dateInView: dateInView,
          showDropdownMonth: false
        };
      });
    }
  }, {
    key: "_renderControls",
    value: function _renderControls() {
      var controls = this.props.controls;
      var _this$state3 = this.state,
          dateInView = _this$state3.dateInView,
          showDropdownMonth = _this$state3.showDropdownMonth,
          showDropdownYear = _this$state3.showDropdownYear;

      if (controls === 'arrows') {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "date-picker-selected-month-year-arrows"
        }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          align: "left",
          onClick: this._onPreviousMonthChange,
          size: "medium",
          type: "chevron-left"
        }), /*#__PURE__*/_react["default"].createElement("div", {
          className: "title"
        }, dateInView.format('MMMM YYYY')), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          align: "right",
          onClick: this._onNextMonthChange,
          size: "medium",
          type: "chevron-right"
        }));
      } else {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "date-picker-selected-month-year-dropdowns"
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "date-picker-selected-month",
          onClick: this._onDropdownMonthClick
        }, /*#__PURE__*/_react["default"].createElement("span", null, dateInView.format('MMMM'), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          align: "right",
          size: "xxsmall",
          type: "caret-down"
        })), showDropdownMonth ? /*#__PURE__*/_react["default"].createElement(_datePickerDropdownMonth["default"], {
          month: dateInView.month(),
          onChange: this._onMonthChange,
          onClose: this._onDropdownMonthClick
        }) : null), /*#__PURE__*/_react["default"].createElement("div", {
          className: "date-picker-selected-year",
          onClick: this._onDropdownYearClick
        }, /*#__PURE__*/_react["default"].createElement("span", null, dateInView.format('YYYY'), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          align: "right",
          size: "xxsmall",
          type: "caret-down"
        })), showDropdownYear ? /*#__PURE__*/_react["default"].createElement(_datePickerDropdownYear["default"], {
          onChange: this._onYearChange,
          onClose: this._onDropdownYearClick,
          year: dateInView.year()
        }) : null));
      }
    }
  }, {
    key: "_renderHeaderDays",
    value: function _renderHeaderDays() {
      var dateInView = this.state.dateInView;
      var startOfWeek = dateInView.clone().startOf('week');
      var days = [0, 1, 2, 3, 4, 5, 6].map(function (offset) {
        var day = startOfWeek.clone().add(offset, 'days');
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "ui date-picker-day",
          key: offset
        }, day.localeData().weekdaysMin(day));
      });
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "ui date-picker-header-days"
      }, days);
    }
  }]);

  return DatePickerCalendar;
}(_react["default"].PureComponent);

DatePickerCalendar.defaultProps = {
  className: '',
  controls: 'arrows',
  locale: 'en-US',
  mode: 'calendar',
  rangeFrom: false,
  rangeTo: false
};
DatePickerCalendar.propTypes = {
  className: _propTypes["default"].string,
  controls: _propTypes["default"].oneOf(['dropdowns', 'arrows']),
  date: _propTypes["default"].shape({}),
  dateFrom: _propTypes["default"].shape({}),
  dateTo: _propTypes["default"].shape({}),
  events: _propTypes["default"].array,
  excludeDates: _propTypes["default"].array,
  filterDates: _propTypes["default"].func,
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  includeDates: _propTypes["default"].array,
  locale: _propTypes["default"].string,
  maxDate: _propTypes["default"].shape({}),
  minDate: _propTypes["default"].shape({}),
  mode: _propTypes["default"].oneOf(['calendar', 'input']),
  onChange: _propTypes["default"].func,
  onMonthChange: _propTypes["default"].func,
  range: _propTypes["default"].bool,
  rangeFrom: _propTypes["default"].bool,
  rangeTo: _propTypes["default"].bool,
  style: _propTypes["default"].shape({})
};
var _default = DatePickerCalendar;
exports["default"] = _default;