@shakthillc/components/es/Calendar/Calendar.js

React generic components for shakthi products

import _extends from "babel-runtime/helpers/extends";
import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import style from "./Calendar.module.css";

import _ from "lodash";
import Icon from "@material-ui/core/Icon";

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 style.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 style.data_past;
          }
        }

        var returnClass = selectedDate["sDate"] == dayCalc && selectedDate["sMonth"] === dateProperty["cMonth"] && selectedDate["sYear"] === dateProperty["cYear"] ? style.date_highlight : style.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 React.createElement(
          "div",
          { className: style.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 React.createElement(
                "p",
                {
                  className: disableDate.includes(day) ? paraClass === style.current_date_highlight ? style.data_past_current : style.data_past : paraClass,
                  key: index,
                  onClick: function onClick(e) {
                    return !disableDate.includes(day) && paraClass !== style.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)
                },
                React.createElement(
                  "span",
                  {
                    className: paraClass === style.date ? style.innerdate : style["innerdate--disabled"]
                  },
                  row * 7 + day - _this2.firstDayOfMonth + 1 < 10 ? "0" : "",
                  row * 7 + day - _this2.firstDayOfMonth + 1
                )
              );
            } else {
              return React.createElement(
                "p",
                { className: style.emptyDate, key: index },
                React.createElement("span", { className: style["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 React.createElement(
        React.Fragment,
        null,
        React.createElement(
          "section",
          { className: style.mainCont },
          React.createElement(
            "section",
            { style: { height: "20%" } },
            React.createElement(
              "div",
              { className: style.divHeader },
              React.createElement(
                "div",
                { className: style.dym },
                React.createElement(
                  "strong",
                  null,
                  dateProperty.cMonth,
                  " ",
                  dateProperty.cYear
                )
              ),
              React.createElement(
                "div",
                { style: { display: "flex" } },
                React.createElement(
                  "div",
                  {
                    className: style.nxtNforw,
                    onClick: this.monthChanged.bind(this, false),
                    "data-id": "arrow_left"
                  },
                  React.createElement(
                    Icon,
                    { style: { color: disablePrev ? "#dadada" : "#005397" } },
                    "keyboard_arrow_left"
                  )
                ),
                React.createElement(
                  "div",
                  {
                    className: style.nxtNprev,
                    onClick: this.monthChanged.bind(this, true),
                    "data-id": "arrow_right"
                  },
                  React.createElement(
                    Icon,
                    { style: { color: "#005397" } },
                    "keyboard_arrow_right"
                  )
                )
              )
            ),
            React.createElement(
              "div",
              { className: style.days_row },
              React.createElement(
                "div",
                { className: style.internal_day_row },
                React.createElement(
                  "div",
                  { className: style.days },
                  "S"
                ),
                React.createElement(
                  "div",
                  { className: style.days },
                  "M"
                ),
                React.createElement(
                  "div",
                  { className: style.days },
                  "T"
                ),
                React.createElement(
                  "div",
                  { className: style.days },
                  "W"
                ),
                React.createElement(
                  "div",
                  { className: style.days },
                  "T"
                ),
                React.createElement(
                  "div",
                  { className: style.days },
                  "F"
                ),
                React.createElement(
                  "div",
                  { className: style.days },
                  "S"
                )
              )
            )
          ),
          React.createElement("hr", { className: style.lineBreak }),
          React.createElement(
            "div",
            { "class": style.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;
}(React.Component);

export default Calendar;