doj-react-adminlte/Form/CalendarInput/DayView.js

Simple and easy-to-use AdminLTE components for React

"use strict";

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); }

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

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

var _moment = _interopRequireDefault(require("moment"));

var _PickerControl = _interopRequireDefault(require("./PickerControl"));

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], 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 Day = /*#__PURE__*/function (_React$Component) {
  _inherits(Day, _React$Component);

  var _super = _createSuper(Day);

  function Day() {
    var _this;

    _classCallCheck(this, Day);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _this.handleClick = function () {
      if (_this.props.enabled) {
        _this.props.onClick(_this.props.index);
      }
    };

    return _this;
  }

  _createClass(Day, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      return this.props.prevLastIndex !== nextProps.prevLastIndex || this.props.nextFirstIndex !== nextProps.nextFirstIndex || this.props.todayIndex !== nextProps.todayIndex || this.props.selectedIndex !== nextProps.selectedIndex && (this.props.index === nextProps.selectedIndex || this.props.index === this.props.selectedIndex) || this.props.enabled !== nextProps.enabled;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          prevLastIndex = _this$props.prevLastIndex,
          nextFirstIndex = _this$props.nextFirstIndex,
          todayIndex = _this$props.todayIndex,
          selectedIndex = _this$props.selectedIndex,
          index = _this$props.index,
          enabled = _this$props.enabled;
      var day = this.props.day;
      var classes = [];

      if (index <= prevLastIndex || index >= nextFirstIndex) {
        classes.push("dralt-cal-ex");
      }

      if (index === todayIndex) {
        classes.push("dralt-cal-today");
      }

      if (index === selectedIndex) {
        classes.push("dralt-cal-selected");
      }

      if (!enabled) {
        classes.push("dralt-cal-disabled");
      }

      return /*#__PURE__*/_react.default.createElement("span", {
        className: classes.length ? classes.join(" ") : null,
        onClick: this.handleClick
      }, day.value);
    }
  }]);

  return Day;
}(_react.default.Component);

var DayView = /*#__PURE__*/function (_React$Component2) {
  _inherits(DayView, _React$Component2);

  var _super2 = _createSuper(DayView);

  function DayView(_props) {
    var _this2;

    _classCallCheck(this, DayView);

    _this2 = _super2.call(this, _props);

    _this2.getSelectedIndex = function (currentMonth) {
      var selectedDate = _this2.props.selectedDate; // Get last week of previous month

      var prevMonth = currentMonth.clone().date(1).subtract(1, 'day').startOf('week');
      return _moment.default.isMoment(selectedDate) ? selectedDate.diff(prevMonth, 'd') : -1;
    };

    _this2.getDaysOfWeek = function () {
      var viewDate = _this2.props.viewDate;
      var locale = viewDate.localeData();
      var first = locale.firstDayOfWeek();
      var days = locale.weekdaysMin();
      var weekdays = []; // Get list of weekdays, starting on first day of locale week

      days.forEach(function (day, i) {
        weekdays[(7 + i - first) % 7] = day;
      });
      return weekdays;
    };

    _this2.getViewState = function (month) {
      var _this2$props = _this2.props,
          viewDate = _this2$props.viewDate,
          isSelectableDate = _this2$props.isSelectableDate; // Go to the last week of previous month

      var walker = month.clone().date(1).subtract(1, 'day').startOf('week'); // Get last index of previous month

      var prevLastIndex = walker.daysInMonth() - walker.date(); // Get first index of next month

      var nextFirstIndex = prevLastIndex + month.daysInMonth() + 1; // Get index of current date

      var todayIndex = viewDate.diff(walker, 'd');
      var lastDay = walker.clone().add(6, 'weeks');
      var days = [],
          enabledIndexes = [];

      while (walker.isBefore(lastDay)) {
        days.push({
          key: walker.format("DDD"),
          value: walker.format("D")
        });
        enabledIndexes.push(isSelectableDate(walker));
        walker.add(1, 'day');
      }

      return {
        prevLastIndex: prevLastIndex,
        nextFirstIndex: nextFirstIndex,
        todayIndex: todayIndex,
        selectedIndex: _this2.getSelectedIndex(month),
        enabledIndexes: enabledIndexes,
        days: days
      };
    };

    _this2.handlePreviousClick = function () {
      var _this2$props2 = _this2.props,
          onCurrentMonthChange = _this2$props2.onCurrentMonthChange,
          currentMonth = _this2$props2.currentMonth;
      var prevMonth = currentMonth.clone().subtract(1, 'month');
      onCurrentMonthChange(prevMonth);
    };

    _this2.handleNextClick = function () {
      var _this2$props3 = _this2.props,
          onCurrentMonthChange = _this2$props3.onCurrentMonthChange,
          currentMonth = _this2$props3.currentMonth;
      var nextMonth = currentMonth.clone().add(1, 'month');
      onCurrentMonthChange(nextMonth);
    };

    _this2.handleSwitchClick = function () {
      var switchCallback = _this2.props.switchCallback;
      switchCallback("year_month");
    };

    _this2.handleTimeSwitchClick = function () {
      var switchCallback = _this2.props.switchCallback;
      switchCallback("time");
    };

    _this2.handleDayClick = function (index) {
      var _this2$props4 = _this2.props,
          currentMonth = _this2$props4.currentMonth,
          onDatePick = _this2$props4.onDatePick,
          switchCallback = _this2$props4.switchCallback,
          timePicker = _this2$props4.timePicker; // Get last week of previous month

      var prevMonth = currentMonth.clone().date(1).subtract(1, 'day').startOf('week'); // Add 'index' days and call onDatePick

      onDatePick(prevMonth.add(index, 'days'));

      if (!timePicker) {
        switchCallback("none");
      } else {
        switchCallback("time");
      }
    };

    _this2.renderDaysOfWeek = function () {
      var daysOfWeek = _this2.state.daysOfWeek;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "dralt-cal-day-row text-bold"
      }, daysOfWeek.map(function (day) {
        return /*#__PURE__*/_react.default.createElement("span", {
          key: day
        }, day);
      }));
    };

    _this2.renderDays = function () {
      var _this2$state = _this2.state,
          days = _this2$state.days,
          prevLastIndex = _this2$state.prevLastIndex,
          nextFirstIndex = _this2$state.nextFirstIndex,
          todayIndex = _this2$state.todayIndex,
          selectedIndex = _this2$state.selectedIndex,
          enabledIndexes = _this2$state.enabledIndexes;
      var props = {
        prevLastIndex: prevLastIndex,
        nextFirstIndex: nextFirstIndex,
        todayIndex: todayIndex,
        selectedIndex: selectedIndex,
        onClick: _this2.handleDayClick
      };
      var weeks = [];
      var displayDays = [];
      days.forEach(function (day, i) {
        displayDays.push( /*#__PURE__*/_react.default.createElement(Day, Object.assign({
          day: day,
          key: day.key,
          index: i,
          enabled: enabledIndexes[i]
        }, props)));

        if (displayDays.length === 7) {
          weeks.push( /*#__PURE__*/_react.default.createElement("div", {
            className: "dralt-cal-day-row dralt-cal-day-calendar",
            key: weeks.length + 1
          }, displayDays));
          displayDays = [];
        }
      });
      return weeks;
    };

    _this2.renderTime = function () {
      var selectedDate = _this2.props.selectedDate;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "dralt-cal-time-switch",
        onClick: _this2.handleTimeSwitchClick
      }, selectedDate ? selectedDate.format("h:mm A") : "12:00 AM");
    };

    _this2.initialState = {
      daysOfWeek: _this2.getDaysOfWeek(),
      days: [],
      prevLastIndex: 0,
      nextFirstIndex: 0,
      todayIndex: -1,
      selectedIndex: -1,
      enabledIndexes: []
    };
    _this2.state = _objectSpread(_objectSpread({}, _this2.initialState), _this2.getViewState(_props.currentMonth));
    return _this2;
  }

  _createClass(DayView, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props2 = this.props,
          currentMonth = _this$props2.currentMonth,
          selectedDate = _this$props2.selectedDate,
          onCurrentMonthChange = _this$props2.onCurrentMonthChange;

      if (currentMonth !== prevProps.currentMonth) {
        this.setState(this.getViewState(currentMonth));
      }

      if (selectedDate !== prevProps.selectedDate) {
        if (!selectedDate) {
          this.setState(_objectSpread(_objectSpread({}, this.initialState), this.getViewState(this.props.currentMonth)));
        } else if (selectedDate.month() === currentMonth.month() && selectedDate.year() === currentMonth.year()) {
          // If current date falls within current month, just update selected index
          this.setState({
            selectedIndex: this.getSelectedIndex(currentMonth)
          });
        } else {
          // Set current month to selected date month
          onCurrentMonthChange(selectedDate.clone().date(1)); // Else, rerender view with selected month

          this.setState(this.getViewState(selectedDate));
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          currentMonth = _this$props3.currentMonth,
          timePicker = _this$props3.timePicker;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PickerControl.default, {
        switchLabel: currentMonth.format('MMMM Y'),
        onPreviousClick: this.handlePreviousClick,
        onNextClick: this.handleNextClick,
        onSwitchClick: this.handleSwitchClick
      }), this.renderDaysOfWeek(), this.renderDays(), timePicker && this.renderTime());
    }
  }]);

  return DayView;
}(_react.default.Component);

var _default = DayView;
exports.default = _default;