ffr-components/es/calendar/Calendar.js

Fiori styled UI components

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
// Import React Component
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames'; // Import CustomPropTypes from fundamental-react

import CustomPropTypes from 'fundamental-react/utils/CustomPropTypes/CustomPropTypes';
import "./style.css"; // Import Utils KeyCode

import "../theme/theme.css";
import { KeyCode } from '../utils';

var Calendar =
/*#__PURE__*/
function (_Component) {
  _inherits(Calendar, _Component);

  function Calendar(props) {
    var _this;

    _classCallCheck(this, Calendar);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Calendar).call(this, props));

    _this.showMonths = function () {
      _this.setState({
        showMonths: !_this.state.showMonths,
        showYears: false,
        dateClick: true
      });
    };

    _this.displayBetweenRange = function (day) {
      return _this.props.enableRangeSelection && _this.isDateBetween(day, _this.state.arrSelectedDates, _this.props.enableRangeSelection);
    };

    _this.displaySelectedRangeLast = function (day) {
      return _this.props.enableRangeSelection && typeof _this.state.arrSelectedDates[1] !== 'undefined' && _this.state.arrSelectedDates[1].getTime() === day.getTime();
    };

    _this.displayIsDayOtherMonth = function (day) {
      return day.getMonth() !== _this.state.currentDateDisplayed.getMonth();
    };

    _this.displayIsSelected = function (day) {
      return (_this.isSelected(day) || _this.props.enableRangeSelection && ((typeof _this.state.arrSelectedDates[0] !== 'undefined' ? _this.state.arrSelectedDates[0].getTime() === day.getTime() : false) || (typeof _this.state.arrSelectedDates[1] !== 'undefined' ? _this.state.arrSelectedDates[1].getTime() === day.getTime() : false))) && !(_this.props.disableWeekends && (day.getDay() === 0 || day.getDay() === 6)) && !_this.disableBeforeDate(day, _this.props.disableBeforeDate) && !_this.isDateBetween(day, _this.props.blockedDates) && !_this.disableWeekday(day, _this.props.disableWeekday) && !(_this.props.disablePastDates && _this.disableBeforeTodayDate(day)) && !(_this.props.disableFutureDates && _this.disableAfterTodayDate(day)) && !_this.isDateBetween(day, _this.props.disabledDates) ? 'is-selected' : '';
    };

    _this.displaySelectedRangeFirst = function (day) {
      return _this.props.enableRangeSelection && typeof _this.state.arrSelectedDates[0] !== 'undefined' && _this.state.arrSelectedDates[0].getTime() === day.getTime();
    };

    _this.displayDisabled = function (day) {
      return _this.props.disableWeekends && (day.getDay() === 0 || day.getDay() === 6) || _this.props.disablePastDates && _this.disableBeforeTodayDate(day) || _this.props.disableFutureDates && _this.disableAfterTodayDate(day) || _this.disableWeekday(day, _this.props.disableWeekday) || _this.disableBeforeDate(day, _this.props.disableBeforeDate) || _this.disableAfterDate(day, _this.props.disableAfterDate) || _this.isDateBetween(day, _this.props.disabledDates) ? ' is-disabled' : '';
    };

    _this.showYears = function () {
      _this.setState({
        showMonths: false,
        showYears: !_this.state.showYears,
        dateClick: true
      });
    };

    _this.changeMonth = function (month) {
      var date = _this.state.currentDateDisplayed;

      var months = _this.getMonths();

      date.setMonth(months.indexOf(month)); // reset date to first of month

      date.setDate(1); //updates month state

      if (!_this.props.enableRangeSelection) {
        _this.setState({
          currentDateDisplayed: date,
          selectedDate: date,
          showMonths: false,
          dateClick: true
        }, function () {
          this.returnDateSelected(date);
        });
      } else {
        _this.setState({
          currentDateDisplayed: date,
          showMonths: false,
          dateClick: true
        });
      }
    };

    _this.changeYear = function (year) {
      var date = _this.state.currentDateDisplayed;
      date.setFullYear(year);

      if (!_this.props.enableRangeSelection) {
        _this.setState({
          currentDateDisplayed: date,
          showYears: false,
          selectedDate: date,
          dateClick: true
        }, function () {
          this.returnDateSelected(date);
        });
      } else {
        _this.setState({
          currentDateDisplayed: date,
          showYears: false,
          dateClick: true
        });
      }
    };

    _this.generateMonths = function (monthProps) {
      var months = _this.getMonths();

      var listOfMonths = months.map(function (element) {
        var shortenedNameMonth = '';

        if (element.length > 3) {
          shortenedNameMonth = element.substring(0, 3) + '.';
        } else {
          shortenedNameMonth = element.substring(0, 3);
        }

        var calendarItemClasses = classnames('fd-calendar__item', {
          'is-selected': months[_this.state.currentDateDisplayed.getMonth()] === element,
          'fd-calendar__item--current': months[_this.state.todayDate.getMonth()] === element
        });
        var isCurrent = months[_this.state.focusDate.getMonth()] === element;
        return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/no-noninteractive-tabindex
          React.createElement("li", {
            tabIndex: isCurrent ? 0 : -1,
            className: calendarItemClasses,
            key: element,
            name: element,
            onClick: function onClick() {
              return _this.changeMonth(element);
            }
          }, shortenedNameMonth)
        );
      });
      return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
        React.createElement("div", {
          className: "fd-calendar__months",
          onKeyDown: _this.handleKeyDown
        }, React.createElement("ul", _extends({}, monthProps, {
          className: "fd-calendar__list"
        }), listOfMonths))
      );
    };

    _this.generateYears = function (yearListProps) {
      var year = _this.state.currentDateDisplayed.getFullYear();

      var years = [year];

      for (var iterations = 1; iterations < 12; iterations++) {
        year = year + 1;
        years.push(year);
      }

      var listOfYears = years.map(function (element) {
        var yearClasses = classnames('fd-calendar__item', {
          'is-selected': _this.state.currentDateDisplayed.getFullYear() === element,
          'fd-calendar__item--current': _this.state.todayDate.getFullYear() === element
        });
        return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
          React.createElement("li", {
            className: yearClasses,
            key: element,
            name: element,
            onClick: function onClick() {
              return _this.changeYear(element);
            }
          }, element)
        );
      });
      return React.createElement("div", {
        className: "fd-calendar__months"
      }, React.createElement("ul", _extends({}, yearListProps, {
        className: "fd-calendar__list"
      }), listOfYears));
    };

    _this.next = function (e, callback) {
      if (_this.state.showYears) {
        var copyDate = _this.state.currentDateDisplayed;
        copyDate.setFullYear(copyDate.getFullYear() + 12);

        _this.setState({
          currentDateDisplayed: copyDate,
          dateClick: true
        });
      } else {
        var _copyDate = _this.state.currentDateDisplayed;
        var selectedDate = new Date(_this.state.selectedDate.getFullYear(), _this.state.selectedDate.getMonth(), _this.state.selectedDate.getDate(), 0, 0, 0, 0);

        _copyDate.setMonth(_copyDate.getMonth() + 1);

        _this.setState({
          currentDateDisplayed: _copyDate,
          selectedDate: selectedDate,
          dateClick: true
        }, function () {
          callback && callback();
        });
      }
    };

    _this.previous = function (e, callback) {
      if (_this.state.showYears) {
        var copyDate = _this.state.currentDateDisplayed;
        copyDate.setFullYear(copyDate.getFullYear() - 12);

        _this.setState({
          currentDateDisplayed: copyDate,
          dateClick: true
        });
      } else {
        var _copyDate2 = _this.state.currentDateDisplayed;
        var selectedDate = new Date(_this.state.selectedDate.getFullYear(), _this.state.selectedDate.getMonth(), _this.state.selectedDate.getDate(), 0, 0, 0, 0);

        _copyDate2.setMonth(_copyDate2.getMonth() - 1);

        _this.setState({
          currentDateDisplayed: _copyDate2,
          selectedDate: selectedDate,
          dateClick: true
        }, function () {
          callback && callback();
        });
      }
    };

    _this.dateClick = function (day, isRangeEnabled) {
      var selectedDates = [];

      if (typeof isRangeEnabled !== 'undefined' && isRangeEnabled) {
        selectedDates = _this.state.arrSelectedDates;

        if (selectedDates.length === 2) {
          selectedDates = [];
          selectedDates.push(day);
        } else if (typeof selectedDates[0] !== 'undefined' && day.getTime() <= selectedDates[0].getTime()) {
          var newArr = [];
          newArr.push(day);
          newArr.push(selectedDates[0]);
          selectedDates = newArr;
        } else {
          selectedDates.push(day);
        }
      }

      _this.setState({
        currentDateDisplayed: day,
        selectedDate: day,
        arrSelectedDates: selectedDates,
        dateClick: true
      }, function () {
        if (isRangeEnabled) {
          this.returnDateSelected(selectedDates);
        } else {
          this.returnDateSelected(day);
        }
      });
    };

    _this.retrieveStartOfWeek = function (date) {
      var day = date.getDay();
      var difference = date.getDate() - day;
      return new Date(date.setDate(difference));
    };

    _this.returnFirstDayMonth = function (date) {
      var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
      return firstDay;
    };

    _this.returnLastDayMonth = function (date) {
      var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      return lastDay;
    };

    _this.addDays = function (date, days) {
      var result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
    };

    _this.retrieveEndOfWeek = function (date) {
      var difference = date.getDate() + 6 - date.getDay();
      var newDate = new Date(date.getFullYear(), date.getMonth(), difference);
      return newDate;
    };

    _this.isDateBetween = function (date, blockedDates, isRangeEnabled) {
      if (typeof blockedDates === 'undefined' || typeof blockedDates[0] === 'undefined' || typeof blockedDates[1] === 'undefined') {
        return false;
      }

      if (typeof isRangeEnabled !== 'undefined' || isRangeEnabled) {
        if (blockedDates[0].getTime() > blockedDates[1].getTime()) {
          return blockedDates[1].getTime() < date.getTime() && blockedDates[0].getTime() > date.getTime();
        }
      }

      return blockedDates[0].getTime() < date.getTime() && blockedDates[1].getTime() > date.getTime();
    };

    _this.isSelected = function (date) {
      return _this.state.selectedDate.getDate() === date.getDate() && _this.state.selectedDate.getMonth() === date.getMonth() && _this.state.selectedDate.getFullYear() === date.getFullYear();
    };

    _this.disableWeekday = function (date, weekDays) {
      var _this$props$localized = _this.props.localizedText,
          day1Sun = _this$props$localized.day1Sun,
          day2Mon = _this$props$localized.day2Mon,
          day3Tues = _this$props$localized.day3Tues,
          day4Wed = _this$props$localized.day4Wed,
          day5Thurs = _this$props$localized.day5Thurs,
          day6Fri = _this$props$localized.day6Fri,
          day7Sat = _this$props$localized.day7Sat;
      var daysName = [day1Sun, day2Mon, day3Tues, day4Wed, day5Thurs, day6Fri, day7Sat];

      if (typeof weekDays === 'undefined') {
        return false;
      }

      if (weekDays.indexOf(daysName[date.getDay()]) > 0) {
        return true;
      }

      return false;
    };

    _this.disableBeforeDate = function (date, beforeDate) {
      if (typeof beforeDate === 'undefined') {
        return false;
      }

      return date.getTime() < beforeDate.getTime();
    };

    _this.disableAfterDate = function (date, afterDate) {
      if (typeof afterDate === 'undefined') {
        return false;
      }

      return date.getTime() > afterDate.getTime();
    };

    _this.disableBeforeTodayDate = function (date) {
      var todayDate = new Date();
      todayDate.setHours(0, 0, 0, 0);
      return date.getTime() < todayDate.getTime();
    };

    _this.disableAfterTodayDate = function (date) {
      var todayDate = new Date();
      todayDate.setHours(0, 0, 0, 0);
      return date.getTime() > todayDate.getTime();
    };

    _this.returnDateSelected = function (dates) {
      _this.props.onChange(dates);
    };

    _this.getMonths = function () {
      var _this$props$localized2 = _this.props.localizedText,
          month01Jan = _this$props$localized2.month01Jan,
          month02Feb = _this$props$localized2.month02Feb,
          month03Mar = _this$props$localized2.month03Mar,
          month04Apr = _this$props$localized2.month04Apr,
          month05May = _this$props$localized2.month05May,
          month06Jun = _this$props$localized2.month06Jun,
          month07Jul = _this$props$localized2.month07Jul,
          month08Aug = _this$props$localized2.month08Aug,
          month09Sep = _this$props$localized2.month09Sep,
          month10Oct = _this$props$localized2.month10Oct,
          month11Nov = _this$props$localized2.month11Nov,
          month12Dec = _this$props$localized2.month12Dec;
      var months = [month01Jan, month02Feb, month03Mar, month04Apr, month05May, month06Jun, month07Jul, month08Aug, month09Sep, month10Oct, month11Nov, month12Dec];
      return months;
    };

    _this.generateNavigation = function () {
      var months = _this.getMonths();

      return React.createElement("header", {
        className: "fd-calendar__header"
      }, React.createElement("div", {
        className: "fd-calendar__navigation"
      }, React.createElement("div", {
        className: "fd-calendar__action"
      }, React.createElement("button", {
        className: "fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-left",
        focusflag: "true",
        onClick: _this.previous,
        type: "button"
      })), React.createElement("div", {
        className: "fd-calendar__action"
      }, React.createElement("button", {
        className: "fd-button--light fd-button--compact",
        focusflag: "true",
        onClick: _this.showMonths,
        type: "button"
      }, React.createElement("span", null, months[_this.state.currentDateDisplayed.getMonth()]))), React.createElement("div", {
        className: "fd-calendar__action"
      }, React.createElement("button", {
        className: "fd-button--light fd-button--compact",
        focusflag: "true",
        onClick: _this.showYears,
        type: "button"
      }, React.createElement("span", null, _this.state.currentDateDisplayed.getFullYear()))), React.createElement("div", {
        className: "fd-calendar__action"
      }, React.createElement("button", {
        className: "fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-right",
        focusflag: "true",
        onClick: _this.next,
        type: "button"
      }))));
    };

    _this.generateWeekdays = function () {
      var weekDays = [];
      var _this$props$localized3 = _this.props.localizedText,
          dayChar1Sun = _this$props$localized3.dayChar1Sun,
          dayChar2Mon = _this$props$localized3.dayChar2Mon,
          dayChar3Tues = _this$props$localized3.dayChar3Tues,
          dayChar4Wed = _this$props$localized3.dayChar4Wed,
          dayChar5Thurs = _this$props$localized3.dayChar5Thurs,
          dayChar6Fri = _this$props$localized3.dayChar6Fri,
          dayChar7Sat = _this$props$localized3.dayChar7Sat;
      var daysName = [dayChar1Sun, dayChar2Mon, dayChar3Tues, dayChar4Wed, dayChar5Thurs, dayChar6Fri, dayChar7Sat];

      for (var index = 0; index < 7; index++) {
        weekDays.push(React.createElement("th", {
          className: "fd-calendar__column-header",
          key: index
        }, React.createElement("span", {
          className: "fd-calendar__day-of-week"
        }, daysName[index])));
      }

      return React.createElement("tr", {
        className: "fd-calendar__row"
      }, weekDays);
    };

    _this.generateDays = function (tableBodyProps) {
      //props that allows the developer to pass their preferences
      var blockedDates = _this.props.blockedDates;
      var enableRangeSelection = _this.props.enableRangeSelection;

      var firstDayMonth = _this.returnFirstDayMonth(_this.state.currentDateDisplayed);

      var endDayMonth = _this.returnLastDayMonth(firstDayMonth);

      var firstDayWeekMonth = _this.retrieveStartOfWeek(firstDayMonth);

      var lastDateEndMonth = _this.retrieveEndOfWeek(endDayMonth);

      var rows = [];
      var days = [];
      var day = firstDayWeekMonth; //iterate until reach the end of the month

      while (day <= lastDateEndMonth) {
        var _loop = function _loop(iterations) {
          var dateFormatted = day.getDate();
          var copyDate = day;
          var isCurrent = _this.state.focusDate.getTime() === copyDate.getTime();
          var dayClasses = classnames('fd-calendar__item', {
            'fd-calendar__item--other-month': _this.displayIsDayOtherMonth(day),
            'fd-calendar__item--current': _this.state.todayDate.getTime() === copyDate.getTime(),
            'is-selected': _this.displayIsSelected(day),
            'is-selected-range-first': _this.displaySelectedRangeFirst(day),
            'is-selected-range-last': _this.displaySelectedRangeLast(day),
            'is-selected-range': _this.displayBetweenRange(day),
            'is-disabled': _this.displayDisabled(day),
            'is-blocked': _this.isDateBetween(day, blockedDates)
          });
          days.push(
          /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
          React.createElement("td", {
            focusflag: isCurrent ? 'true' : 'false',
            tabIndex: isCurrent ? 0 : -1,
            className: dayClasses,
            key: copyDate,
            onClick: !_this.displayDisabled(day) ? function () {
              return _this.dateClick(copyDate, enableRangeSelection);
            } : null,
            role: "gridcell"
          }, React.createElement("span", {
            className: "fd-calendar__text"
          }, dateFormatted)));
          day = _this.addDays(day, 1);
        };

        //7 days in a week
        for (var iterations = 0; iterations < 7; iterations++) {
          _loop(iterations);
        }

        rows.push(React.createElement("tr", {
          className: "fd-calendar__row",
          key: day
        }, days));
        days = [];
      }

      return (// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
        React.createElement("tbody", _extends({}, tableBodyProps, {
          className: "fd-calendar__group",
          onKeyDown: _this.handleKeyDown
        }), rows)
      );
    };

    _this._renderContent = function (monthListProps, yearListProps, tableProps, tableHeaderProps, tableBodyProps) {
      if (_this.state.showMonths) {
        return _this.generateMonths(monthListProps);
      }

      if (_this.state.showYears) {
        return _this.generateYears(yearListProps);
      }

      return React.createElement("div", {
        className: "fd-calendar__dates"
      }, React.createElement("table", _extends({}, tableProps, {
        className: "fd-calendar__table"
      }), React.createElement("thead", _extends({}, tableHeaderProps, {
        className: "fd-calendar__group"
      }), _this.generateWeekdays()), _this.generateDays(tableBodyProps)));
    };

    var today = new Date(props.today || new Date());
    _this.state = {
      todayDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0),
      currentDateDisplayed: today,
      focusDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0),
      arrSelectedDates: [],
      selectedDate: new Date(0, 0, 0),
      showMonths: false,
      showYears: false,
      dateClick: false,
      focusIndex: 0
    };
    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
    _this.handleTabKey = _this.handleTabKey.bind(_assertThisInitialized(_this));
    _this.changeDayFocus = _this.changeDayFocus.bind(_assertThisInitialized(_this));
    return _this;
  } //Updates the states when the props of the parent component are changed.


  _createClass(Calendar, [{
    key: "changeDayFocus",
    value: function changeDayFocus() {
      debugger;
    } // changeMonth

  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var _this2 = this;

      var _target = e.currentTarget;
      var accessKey = [KeyCode.UP, KeyCode.RIGHT, KeyCode.DOWN, KeyCode.LEFT, KeyCode.ENTER];

      if (accessKey.indexOf(e.keyCode) !== -1) {
        var ONE_DAY = 1000 * 3600 * 24;
        var SEVEN_DAY = ONE_DAY * 7;
        var enableRangeSelection = this.props.enableRangeSelection;
        var _this$state = this.state,
            focusDate = _this$state.focusDate,
            currentDateDisplayed = _this$state.currentDateDisplayed;
        focusDate = +focusDate;

        switch (e.keyCode) {
          case KeyCode.UP:
            focusDate -= SEVEN_DAY;
            break;

          case KeyCode.RIGHT:
            focusDate += ONE_DAY;
            break;

          case KeyCode.DOWN:
            focusDate += SEVEN_DAY;
            break;

          case KeyCode.LEFT:
            focusDate -= ONE_DAY;
            break;

          default:
            break;
        }

        focusDate = new Date(focusDate);

        if (e.keyCode !== KeyCode.ENTER) {
          var setFocus = function setFocus() {
            _this2.setState({
              focusDate: new Date(focusDate.getFullYear(), focusDate.getMonth(), focusDate.getDate(), 0, 0, 0, 0)
            }, function () {
              var focusDay = _target.querySelector("[tabindex='0']");

              focusDay && focusDay.focus();
            });
          };

          var currentTime = +focusDate;
          var monthFirstDay = +this.returnFirstDayMonth(currentDateDisplayed);
          var monthLastDay = +this.returnLastDayMonth(currentDateDisplayed);
          if (currentTime > monthLastDay) this.next(e, setFocus);else if (currentTime < monthFirstDay) this.previous(e, setFocus);else setFocus();
        } else this.dateClick(focusDate, enableRangeSelection);
      }
    }
  }, {
    key: "handleTabKey",
    value: function handleTabKey(e) {// if (e.keyCode === KeyCode.TAB) {
      //   let current = e.currentTarget;
      //   let { focusIndex } = this.state;
      //   let focusFlags = current.querySelectorAll('[focusflag="true"]');
      //   focusFlags = [...focusFlags];
      //   let length = focusFlags.length;
      //   if (length) {
      //     let last = focusFlags.pop();
      //     focusFlags = [last, ...focusFlags];
      //     let nextPos = (focusIndex + 1) % length;
      //     this.setState({ focusIndex: nextPos }, () => {
      //       let actionBtn = focusFlags[focusIndex];
      //       actionBtn && actionBtn.focus();
      //     });
      //   }
      // }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          enableRangeSelection = _this$props.enableRangeSelection,
          disableWeekends = _this$props.disableWeekends,
          disableBeforeDate = _this$props.disableBeforeDate,
          disableAfterDate = _this$props.disableAfterDate,
          disableWeekday = _this$props.disableWeekday,
          disablePastDates = _this$props.disablePastDates,
          disableFutureDates = _this$props.disableFutureDates,
          blockedDates = _this$props.blockedDates,
          disabledDates = _this$props.disabledDates,
          customDate = _this$props.customDate,
          className = _this$props.className,
          localizedText = _this$props.localizedText,
          monthListProps = _this$props.monthListProps,
          yearListProps = _this$props.yearListProps,
          tableProps = _this$props.tableProps,
          tableHeaderProps = _this$props.tableHeaderProps,
          tableBodyProps = _this$props.tableBodyProps,
          props = _objectWithoutProperties(_this$props, ["enableRangeSelection", "disableWeekends", "disableBeforeDate", "disableAfterDate", "disableWeekday", "disablePastDates", "disableFutureDates", "blockedDates", "disabledDates", "customDate", "className", "localizedText", "monthListProps", "yearListProps", "tableProps", "tableHeaderProps", "tableBodyProps"]);

      var calendarClasses = classnames('fd-calendar', className);
      return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
        React.createElement("div", _extends({}, props, {
          className: calendarClasses,
          onKeyDown: this.handleTabKey
        }), this.generateNavigation(), React.createElement("div", {
          className: "fd-calendar__content"
        }, this._renderContent(monthListProps, yearListProps, tableProps, tableHeaderProps, tableBodyProps)))
      );
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(updatedPropsParent, previousStates) {
      if (typeof updatedPropsParent.customDate === 'undefined') {
        return null;
      } //If range is enabled and the date from the parent component does not match the array dates of the states then states are updated


      if (typeof updatedPropsParent.enableRangeSelection !== 'undefined') {
        if (updatedPropsParent.customDate !== previousStates.arrSelectedDates) {
          //This checks if the date from date picker is undefined
          if (updatedPropsParent.customDate === 'undefined') {
            //DateClick allows to update the date from the date picker if it is undefined
            if (previousStates.dateClick) {
              return {
                dateClick: false
              };
            }

            return {
              currentDateDisplayed: new Date(),
              arrSelectedDates: [],
              selectedDate: new Date(0, 0, 0)
            };
          } //updates the calendar if the date from date picker is correct


          return {
            arrSelectedDates: updatedPropsParent.customDate,
            selectedDate: new Date(0, 0, 0)
          };
        }
      } else if (updatedPropsParent.customDate !== previousStates.currentDateDisplayed) {
        if (typeof updatedPropsParent.customDate === 'undefined' || updatedPropsParent.customDate === '') {
          return null;
        } else if (updatedPropsParent.customDate === 'undefined') {
          if (previousStates.selectedDate.getFullYear() !== 1899 && previousStates.dateClick) {
            return {
              dateClick: false
            };
          } //If date was not clicked then the date is reset


          if (!previousStates.dateClick) {
            return {
              currentDateDisplayed: new Date(),
              selectedDate: new Date(0, 0, 0)
            };
          }
        } else {
          //Updates the calendar if the date from date picker is correct
          return {
            currentDateDisplayed: updatedPropsParent.customDate,
            selectedDate: updatedPropsParent.customDate,
            dateClick: false
          };
        }
      }

      return {
        dateClick: false
      };
    }
  }]);

  return Calendar;
}(Component);

Calendar.displayName = 'Calendar';
Calendar.basePropTypes = {
  blockedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
  disableAfterDate: PropTypes.instanceOf(Date),
  disableBeforeDate: PropTypes.instanceOf(Date),
  disabledDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
  disableFutureDates: PropTypes.bool,
  disablePastDates: PropTypes.bool,
  disableWeekday: PropTypes.arrayOf(PropTypes.string),
  disableWeekends: PropTypes.bool
};
Calendar.defaultProps = {
  localizedText: {
    day1Sun: 'Sunday',
    day2Mon: 'Monday',
    day3Tues: 'Tuesday',
    day4Wed: 'Wednesday',
    day5Thurs: 'Thursday',
    day6Fri: 'Friday',
    day7Sat: 'Saturday',
    dayChar1Sun: 'S',
    dayChar2Mon: 'M',
    dayChar3Tues: 'T',
    dayChar4Wed: 'W',
    dayChar5Thurs: 'T',
    dayChar6Fri: 'F',
    dayChar7Sat: 'S',
    month01Jan: 'January',
    month02Feb: 'February',
    month03Mar: 'March',
    month04Apr: 'April',
    month05May: 'May',
    month06Jun: 'June',
    month07Jul: 'July',
    month08Aug: 'August',
    month09Sep: 'September',
    month10Oct: 'October',
    month11Nov: 'November',
    month12Dec: 'December'
  },
  today: new Date(),
  onChange: function onChange() {}
};
export default Calendar;