ffr-components/es/date-picker/DatePicker.js

Fiori styled UI components

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 Framework
import React, { Component } from 'react';
import classnames from 'classnames';
import FocusTrap from 'focus-trap-react'; // Import Utils

import { isMobile } from '../utils'; // Import Customized Components

import Button from '../button';
import Calendar from '../calendar';
import "./style.css"; // Import Utils KeyCode

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

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

  function DatePicker(props) {
    var _this;

    _classCallCheck(this, DatePicker);

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

    _this.openCalendar = function (type) {
      var hidden = !_this.state.hidden;

      if (type === 'input') {
        if (_this.state.hidden) {
          _this.setState({
            hidden: hidden
          }, function () {
            setTimeout(function () {
              _this.setState({
                trapFocus: !hidden
              });
            }, 300);
          });
        }
      } else {
        _this.setState({
          hidden: hidden
        }, function () {
          setTimeout(function () {
            _this.setState({
              trapFocus: !hidden
            });
          }, 300);
        });
      }
    };

    _this.modifyDate = function (e) {
      _this.setState({
        formattedDate: e.target.value
      });
    };

    _this.formatDate = function (date) {
      var formatDate = '';

      if (_this.props.enableRangeSelection) {
        if (date.length === 0) {
          return '';
        }

        var firstDateMonth = date[0].getMonth() + 1;
        var firstDateDay = date[0].getDate();
        var firstDateYear = date[0].getFullYear();
        var secondDateMonth = date[1].getMonth() + 1;
        var secondDateDay = date[1].getDate();
        var secondDateYear = date[1].getFullYear();

        if (firstDateYear >= 3000 || secondDateYear >= 3000) {
          return '';
        }

        formatDate = firstDateMonth + '/' + firstDateDay + '/' + firstDateYear + '-' + secondDateMonth + '/' + secondDateDay + '/' + secondDateYear;
      }

      return formatDate;
    };

    _this.sendUpdate = function (e) {
      if (e.key === 'Enter') {
        _this.validateDates();
      }
    };

    _this.click = function (e) {
      if (_this.component.contains(e.target)) {
        return;
      }

      _this.clickOutside();
    };

    _this.isDateEnabled = function (dateToCheck) {
      return _this.calendarRef.current && _this.calendarRef.current.displayDisabled(new Date(dateToCheck)) === '';
    };

    _this.validateDates = function () {
      var regex = /[!$%^&*()_+|~=`{}[\]:'<>?,.a-zA-Z]/; //Checks first if range is enabled

      if (_this.props.enableRangeSelection) {
        //If the formattedDate contains a list of special characters symbols then it will be reset
        if (_this.state.formattedDate.search(regex) !== -1 || _this.state.formattedDate === '' || _this.state.formattedDate.split('-').length < 2) {
          _this.setState({
            formattedDate: '',
            arrSelectedDates: 'undefined',
            hidden: false
          });
        } else {
          //Breaks the input into an array
          var dateRange = _this.state.formattedDate.split('-'); // check if start and end dates are enabled


          if (_this.isDateEnabled(dateRange[0]) && _this.isDateEnabled(dateRange[1])) {
            var dateSeparatedFirstRange = dateRange[0].split('/');
            var dateSeparatedSecondRange = dateRange[1].split('/'); //First date

            var firstYearRange = parseInt(dateSeparatedFirstRange[2]);
            var firstDateRange = parseInt(dateSeparatedFirstRange[1]);
            var firstMonthRange = parseInt(dateSeparatedFirstRange[0]); //Second date

            var secondYearRange = parseInt(dateSeparatedSecondRange[2]);
            var secondDateRange = parseInt(dateSeparatedSecondRange[1]);
            var secondMonthRange = parseInt(dateSeparatedSecondRange[0]); //Checks if the input is actually numbers and follows the required form

            if (1 <= firstDateRange && firstDateRange <= 31 && 1 <= firstMonthRange && firstMonthRange <= 12 && firstYearRange <= 3000 && 1 <= secondDateRange && secondDateRange <= 31 && 1 <= secondMonthRange && secondMonthRange <= 12 && secondYearRange <= 3000) {
              var firstDate = new Date(firstYearRange, firstMonthRange - 1, firstDateRange);
              var secondDate = new Date(secondYearRange, secondMonthRange - 1, secondDateRange);
              var arrSelected = []; //Swaps the order in case one date is bigger than the other

              firstDate.getTime() > secondDate.getTime() ? arrSelected = [secondDate, firstDate] : arrSelected = [firstDate, secondDate];

              _this.setState({
                selectedDate: '',
                arrSelectedDates: arrSelected
              });
            } else {
              _this.setState({
                formattedDate: '',
                selectedDate: 'undefined',
                arrSelectedDates: 'undefined'
              });
            }
          } else {
            _this.setState({
              formattedDate: '',
              selectedDate: 'undefined',
              arrSelectedDates: 'undefined'
            });
          }
        }
      } else {
        // check if entered date is enabled
        if (_this.isDateEnabled(_this.state.formattedDate)) {
          if (_this.state.formattedDate.search(regex) !== -1) {
            _this.setState({
              formattedDate: _this.formatDate(_this.state.selectedDate),
              selectedDate: 'undefined'
            });
          } else {
            var dateSeparated = _this.state.formattedDate.split('/');

            var year = parseInt(dateSeparated[2]);
            var date = parseInt(dateSeparated[1]);
            var month = parseInt(dateSeparated[0]);

            if (1 <= date && date <= 31 && 1 <= month && month <= 12 && year <= 3000) {
              _this.setState({
                selectedDate: new Date(year, month - 1, date)
              });
            } else {
              _this.setState({
                selectedDate: 'undefined',
                formattedDate: ''
              });
            }
          }
        } else {
          _this.setState({
            selectedDate: 'undefined',
            formattedDate: ''
          });
        }
      }
    };

    _this.clickOutside = function () {
      // this.validateDates();
      _this.setState({
        hidden: true,
        trapFocus: false
      });
    };

    _this.updateDate = function (date) {
      var formatDate;
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          dateFormat = _this$props.dateFormat,
          enableRangeSelection = _this$props.enableRangeSelection;
      onChange && onChange(+date);

      if (enableRangeSelection) {
        if (date.length === 2) {
          var firstDateMonth = date[0].getMonth() + 1;
          var firstDateDay = date[0].getDate();
          var firstDateYear = date[0].getFullYear();
          var secondDateMonth = date[1].getMonth() + 1;
          var secondDateDay = date[1].getDate();
          var secondDateYear = date[1].getFullYear();

          if (dateFormat) {
            formatDate = "".concat(dateFormat(date[0]), " - ").concat(dateFormat(date[1]));
          } else {
            formatDate = firstDateMonth + '/' + firstDateDay + '/' + firstDateYear + '-' + secondDateMonth + '/' + secondDateDay + '/' + secondDateYear;
          }

          _this.setState({
            hidden: true,
            arrSelectedDates: date,
            formattedDate: formatDate
          });
        } else {
          var _firstDateMonth = date[0].getMonth() + 1;

          var _firstDateDay = date[0].getDate();

          var _firstDateYear = date[0].getFullYear();

          if (dateFormat) {
            formatDate = dateFormat(date[0]);
          } else {
            formatDate = _firstDateMonth + '/' + _firstDateDay + '/' + _firstDateYear;
          }

          _this.setState({
            arrSelectedDates: date,
            formattedDate: formatDate
          });
        }
      } else {
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var year = date.getFullYear();

        if (dateFormat) {
          formatDate = dateFormat(date);
        } else {
          formatDate = month + '/' + day + '/' + year;
        }

        _this.setState({
          hidden: true,
          trapFocus: false,
          selectedDate: date,
          formattedDate: formatDate
        });
      }
    };

    _this.renderCalender = function () {
      var _this$props2 = _this.props,
          enableRangeSelection = _this$props2.enableRangeSelection,
          disableWeekends = _this$props2.disableWeekends,
          disableBeforeDate = _this$props2.disableBeforeDate,
          disableAfterDate = _this$props2.disableAfterDate,
          disableWeekday = _this$props2.disableWeekday,
          disablePastDates = _this$props2.disablePastDates,
          disableFutureDates = _this$props2.disableFutureDates,
          blockedDates = _this$props2.blockedDates,
          disabledDates = _this$props2.disabledDates,
          today = _this$props2.today;
      return React.createElement(Calendar, {
        today: today,
        blockedDates: blockedDates,
        customDate: enableRangeSelection ? _this.state.arrSelectedDates : _this.state.selectedDate,
        disableAfterDate: disableAfterDate,
        disableBeforeDate: disableBeforeDate,
        disableFutureDates: disableFutureDates,
        disablePastDates: disablePastDates,
        disableWeekday: disableWeekday,
        disableWeekends: disableWeekends,
        disabledDates: disabledDates,
        enableRangeSelection: enableRangeSelection,
        onChange: _this.updateDate,
        ref: _this.calendarRef
      });
    };

    _this.state = {
      hidden: true,
      selectedDate: '',
      arrSelectedDates: [],
      formattedDate: '',
      trapFocus: false
    };
    _this.isMobile = isMobile();
    _this.calendarRef = React.createRef();
    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
    return _this;
  }

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

      if (e.altKey && [KeyCode.DOWN, KeyCode.UP].indexOf(e.keyCode) !== -1) {
        var hidden = this.state.hidden;
        this.setState({
          hidden: !hidden
        }, function () {
          setTimeout(function () {
            _this2.setState({
              trapFocus: hidden
            });
          }, 300);
        });
      }
    }
  }, {
    key: "UNSAFE_componentWillMount",
    value: function UNSAFE_componentWillMount() {
      document.addEventListener('mousedown', this.click, false);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('mousedown', this.click, false);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          compact = _this$props3.compact,
          className = _this$props3.className,
          inputProps = _this$props3.inputProps,
          buttonProps = _this$props3.buttonProps;
      var datePickerClasses = classnames('ffr-date-picker', className);
      var datePickerInputGroupClasses = classnames('fd-input-group', 'fd-input-group--after', {
        'fd-input-group--compact': compact
      });
      var datePickerInputClasses = classnames('fd-input', {
        'fd-input--compact': compact
      });
      return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
        React.createElement("div", {
          onKeyDown: this.handleKeyDown,
          className: datePickerClasses,
          ref: function ref(component) {
            return _this3.component = component;
          }
        }, React.createElement("div", {
          className: "fd-popover"
        }, React.createElement("div", {
          className: "fd-popover__control"
        }, React.createElement("div", {
          className: datePickerInputGroupClasses
        }, React.createElement("input", _extends({}, inputProps, {
          className: datePickerInputClasses,
          onChange: this.modifyDate,
          onClick: function onClick() {
            return _this3.openCalendar('input');
          },
          onKeyPress: this.sendUpdate,
          placeholder: "mm/dd/yyyy",
          type: "text",
          value: this.state.formattedDate
        })), React.createElement("span", {
          className: "fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
        }, React.createElement("button", _extends({}, buttonProps, {
          type: "button",
          className: "fd-button--light sap-icon--calendar",
          tabIndex: "-1",
          onClick: function onClick() {
            return _this3.openCalendar();
          }
        }))))), React.createElement("div", {
          "aria-hidden": this.state.hidden,
          className: "fd-popover__body fd-popover__body--left fd-popover__body--no-arrow"
        }, this.isMobile ? React.createElement(React.Fragment, null, React.createElement(Button, {
          typeAttr: "button",
          className: "fd-popover__close-calendar",
          option: "light",
          onClick: this.clickOutside
        }, "Cancel"), this.renderCalender()) : React.createElement(FocusTrap, {
          active: this.state.trapFocus,
          focusTrapOptions: {
            clickOutsideDeactivates: true,
            escapeDeactivates: false
          }
        }, this.renderCalender()))))
      );
    }
  }]);

  return DatePicker;
}(Component);

DatePicker.displayName = 'DatePicker';
DatePicker.defaultProps = {
  today: new Date()
};
export { DatePicker as default };