@shakthillc/components/lib/Calendar/Calendar.js

React generic components for shakthi products

"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 _CalendarModule = require("./Calendar.module.css");

var _CalendarModule2 = _interopRequireDefault(_CalendarModule);

var _lodash = require("lodash");

var _lodash2 = _interopRequireDefault(_lodash);

var _Icon = require("@material-ui/core/Icon");

var _Icon2 = _interopRequireDefault(_Icon);

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

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 Calendar = function (_React$Component) {
  _inherits(Calendar, _React$Component);

  function Calendar(props) {
    _classCallCheck(this, Calendar);

    var _this = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this, props));

    _this.type = "hdrCont_" + _this.props.type;
    _this.getCurrentMonth = function () {
      this.date = new Date();
      return this.date.getMonth();
    };
    _this.full_month_name = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    _this.date = new Date();
    _this.current_month = _this.date.getMonth();
    _this.current_year = _this.date.getFullYear();
    _this.constMonth = _this.date.getMonth();
    _this.constYear = _this.date.getFullYear();
    _this.state = {
      dateProperty: {
        cDate: _this.date.getDate(),
        cMonth: _this.full_month_name[_this.getCurrentMonth()],
        cYear: _this.current_year
      },
      selectedDate: {
        sDate: "",
        sMonth: _this.full_month_name[_this.getCurrentMonth()],
        sYear: _this.current_year
        // sDate: this.date.getDate(),
        // sMonth: this.full_month_name[this.getCurrentMonth()],
        // sYear: this.current_year,
      }
    };
    var tempDate = new Date(_this.current_year, _this.current_month + 1, 0);
    _this.number_of_days = tempDate.getDate();
    _this.firstDayOfMonth = new Date(_this.current_year, _this.current_month, 1).getDay() + 1;
    _this.handleDate = _this.handleDate.bind(_this);
    _this.handleClass = _this.handleClass.bind(_this);
    return _this;
  }

  _createClass(Calendar, [{
    key: "handleClass",
    value: function handleClass(row, day, presentDay) {
      var days = [1, 2, 3, 4, 5, 6, 7];
      var disablePastDate = this.props.disablePastDate;
      //console.log(disablePastDate)

      var _state = this.state,
          selectedDate = _state.selectedDate,
          dateProperty = _state.dateProperty;
      //console.log("testing",presentDay == dateProperty.cDate)

      var tempDate = new Date();
      var dayCalc = row * 7 + day - this.firstDayOfMonth + 1;
      if (dayCalc == tempDate.getDate() && selectedDate["sDate"] != tempDate.getDate() && dateProperty["cMonth"] == this.full_month_name[tempDate.getMonth()] && dateProperty["cYear"] == tempDate.getFullYear()) {
        return _CalendarModule2.default.current_date_highlight;
      } else {
        //console.log(selectedDate['sDate'] == dayCalc)
        //console.log(dayCalc,dateProperty['cMonth'], dateProperty["cYear"])
        //console.log("add", selectedDate['sDate'], selectedDate['sMonth'], selectedDate["sYear"] )
        //console.log(selectedDate['sYear'] ,"dei",this.current_year )
        if (disablePastDate && this.full_month_name[this.getCurrentMonth()] == dateProperty["cMonth"] && selectedDate["sYear"] == this.current_year) {
          if (dayCalc < dateProperty.cDate) {
            //console.log("inpo",selectedDate['sMonth'])
            return _CalendarModule2.default.data_past;
          }
        }

        var returnClass = selectedDate["sDate"] == dayCalc && selectedDate["sMonth"] === dateProperty["cMonth"] && selectedDate["sYear"] === dateProperty["cYear"] ? _CalendarModule2.default.date_highlight : _CalendarModule2.default.date;
        //console.log(returnClass)
        return returnClass;
      }
    }
  }, {
    key: "handleDate",
    value: function handleDate(e) {
      var _props = this.props,
          onSelectDate = _props.onSelectDate,
          disablePastDate = _props.disablePastDate;

      var dateProperty = _extends({}, this.state.dateProperty);
      var selectedDate = _extends({}, this.state.selectedDate);
      selectedDate["sDate"] = e;
      selectedDate["sMonth"] = dateProperty["cMonth"];
      selectedDate["sYear"] = dateProperty["cYear"];
      this.setState({ selectedDate: selectedDate });
      if (disablePastDate) {
        if (selectedDate["sDate"] >= dateProperty.cDate || selectedDate["sMonth"] !== this.full_month_name[this.getCurrentMonth()]) {
          onSelectDate && onSelectDate(selectedDate);
        }
      } else {
        onSelectDate && onSelectDate(selectedDate);
      }
    }
  }, {
    key: "getInnerCalendar",
    value: function getInnerCalendar() {
      var _this2 = this;

      var innerHtml = null;
      var _props$disableDate = this.props.disableDate,
          disableDate = _props$disableDate === undefined ? [] : _props$disableDate;

      var rows = [0, 1, 2, 3, 4, 5];
      var days = [1, 2, 3, 4, 5, 6, 7];
      innerHtml = rows.map(function (row, index) {
        return _react2.default.createElement(
          "div",
          { className: _CalendarModule2.default.w100, key: index },
          days.map(function (day, index) {
            var paraClass = _this2.handleClass(row, day, row * 7 + day - _this2.firstDayOfMonth + 1);
            if (row * 7 + day >= _this2.firstDayOfMonth && row * 7 + day - _this2.firstDayOfMonth + 1 <= _this2.number_of_days) {
              return _react2.default.createElement(
                "p",
                {
                  className: disableDate.includes(day) ? paraClass === _CalendarModule2.default.current_date_highlight ? _CalendarModule2.default.data_past_current : _CalendarModule2.default.data_past : paraClass,
                  key: index,
                  onClick: function onClick(e) {
                    return !disableDate.includes(day) && paraClass !== _CalendarModule2.default.data_past && _this2.handleDate(row * 7 + day - _this2.firstDayOfMonth + 1);
                  },
                  "data-id": _this2.full_month_name[_this2.current_month].toLowerCase() + (row * 7 + day - _this2.firstDayOfMonth + 1)
                },
                _react2.default.createElement(
                  "span",
                  {
                    className: paraClass === _CalendarModule2.default.date ? _CalendarModule2.default.innerdate : _CalendarModule2.default["innerdate--disabled"]
                  },
                  row * 7 + day - _this2.firstDayOfMonth + 1 < 10 ? "0" : "",
                  row * 7 + day - _this2.firstDayOfMonth + 1
                )
              );
            } else {
              return _react2.default.createElement(
                "p",
                { className: _CalendarModule2.default.emptyDate, key: index },
                _react2.default.createElement("span", { className: _CalendarModule2.default["innerdate--disabled"] })
              );
            }
          })
        );
      });

      // for (let row of rows) {
      //   for (let day of days) {
      //     if (
      //       row * 7 + day >= this.firstDayOfMonth &&
      //       row * 7 + day - this.firstDayOfMonth + 1 <= this.number_of_days
      //     ) {
      //       console.log(row * 7 + day - this.firstDayOfMonth + 1);
      //     }
      //   }
      // }
      return innerHtml;
    }
  }, {
    key: "setDateProperty",
    value: function setDateProperty(month, year) {
      var dateProperty = _extends({}, this.state.dateProperty);
      dateProperty["cMonth"] = month;
      dateProperty["cYear"] = year;
      this.setState({ dateProperty: dateProperty });
    }
  }, {
    key: "monthChanged",
    value: function monthChanged(isNext) {
      if (isNext) {
        this.current_month++;
        if (this.current_month < 12) {
          this.setDateProperty(this.full_month_name[this.current_month], this.current_year);
        } else {
          this.current_month = this.current_month % 12;
          this.current_year++;
          this.setDateProperty(this.full_month_name[this.current_month], this.current_year);
        }
      } else {
        if (this.current_month === this.constMonth && this.current_year === this.constYear) {
          return;
        }
        this.current_month--;
        if (this.current_month < 0) {
          this.current_month += 12;
          this.current_year--;
          this.setDateProperty(this.full_month_name[this.current_month], this.current_year);
        } else {
          this.setDateProperty(this.full_month_name[this.current_month], this.current_year);
        }
      }
      var tempDate = new Date(this.current_year, this.current_month + 1, 0);
      this.number_of_days = tempDate.getDate();
      this.firstDayOfMonth = new Date(this.current_year, this.current_month, 1).getDay() + 1;
    }
  }, {
    key: "render",
    value: function render() {
      //console.log(this.full_month_name[this.current_month].toLowerCase());
      var _state2 = this.state,
          dateProperty = _state2.dateProperty,
          selectedDate = _state2.selectedDate;
      //add year check in later update

      var disablePrev = this.full_month_name[this.constMonth] === dateProperty.cMonth ? true : false;
      // console.log(disablePrev,dateProperty.cMonth)
      var innerHtml = this.getInnerCalendar();
      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        _react2.default.createElement(
          "section",
          { className: _CalendarModule2.default.mainCont },
          _react2.default.createElement(
            "section",
            { style: { height: "20%" } },
            _react2.default.createElement(
              "div",
              { className: _CalendarModule2.default.divHeader },
              _react2.default.createElement(
                "div",
                { className: _CalendarModule2.default.dym },
                _react2.default.createElement(
                  "strong",
                  null,
                  dateProperty.cMonth,
                  " ",
                  dateProperty.cYear
                )
              ),
              _react2.default.createElement(
                "div",
                { style: { display: "flex" } },
                _react2.default.createElement(
                  "div",
                  {
                    className: _CalendarModule2.default.nxtNforw,
                    onClick: this.monthChanged.bind(this, false),
                    "data-id": "arrow_left"
                  },
                  _react2.default.createElement(
                    _Icon2.default,
                    { style: { color: disablePrev ? "#dadada" : "#005397" } },
                    "keyboard_arrow_left"
                  )
                ),
                _react2.default.createElement(
                  "div",
                  {
                    className: _CalendarModule2.default.nxtNprev,
                    onClick: this.monthChanged.bind(this, true),
                    "data-id": "arrow_right"
                  },
                  _react2.default.createElement(
                    _Icon2.default,
                    { style: { color: "#005397" } },
                    "keyboard_arrow_right"
                  )
                )
              )
            ),
            _react2.default.createElement(
              "div",
              { className: _CalendarModule2.default.days_row },
              _react2.default.createElement(
                "div",
                { className: _CalendarModule2.default.internal_day_row },
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "S"
                ),
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "M"
                ),
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "T"
                ),
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "W"
                ),
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "T"
                ),
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "F"
                ),
                _react2.default.createElement(
                  "div",
                  { className: _CalendarModule2.default.days },
                  "S"
                )
              )
            )
          ),
          _react2.default.createElement("hr", { className: _CalendarModule2.default.lineBreak }),
          _react2.default.createElement(
            "div",
            { "class": _CalendarModule2.default.innerdiv },
            innerHtml
          )
        )
      );
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, current_state) {
      if (props.selectDate != "" && props.selectDate != null) {
        if (props.selectDate["date"]) {
          var _props$selectDate = props.selectDate,
              date = _props$selectDate.date,
              month = _props$selectDate.month,
              year = _props$selectDate.year;

          var selectedDate = { sDate: date, sMonth: month, sYear: year };
          return { selectedDate: selectedDate };
        }
      } else {
        return null;
      }
    }
  }]);

  return Calendar;
}(_react2.default.Component);

exports.default = Calendar;