@zohodesk/components/lib/DateTime/DateWidget.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

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

var _propTypes = require("./props/propTypes");

var _defaultProps = require("./props/defaultProps");

var _DateTime = _interopRequireDefault(require("./DateTime"));

var _Popup = _interopRequireDefault(require("../Popup/Popup"));

var _icons = require("@zohodesk/icons");

var _Layout = require("../Layout");

var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));

var _DateWidgetModule = _interopRequireDefault(require("./DateWidget.module.css"));

var _validator = _interopRequireDefault(require("./validator"));

var _common = require("../utils/datetime/common");

var _dateFormatUtils = require("./dateFormatUtils");

var _dateFormat = require("./dateFormatUtils/dateFormat");

var _dayChange = require("./dateFormatUtils/dayChange");

var _monthChange = require("./dateFormatUtils/monthChange");

var _yearChange = require("./dateFormatUtils/yearChange");

var _timeChange = require("./dateFormatUtils/timeChange");

var _Common = require("../utils/Common");

var _constants = require("./constants");

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }

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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

/* eslint-disable react/no-unused-prop-types */

/* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
  _inherits(DateWidgetComponent, _React$Component);

  var _super = _createSuper(DateWidgetComponent);

  function DateWidgetComponent(props) {
    var _this;

    _classCallCheck(this, DateWidgetComponent);

    _this = _super.call(this, props);
    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_this));
    _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
    _this.handleGetDisplayText = _this.handleGetDisplayText.bind(_assertThisInitialized(_this));
    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
    _this.getValueInputRef = _this.getValueInputRef.bind(_assertThisInitialized(_this));
    _this.handleGetMethods = _this.handleGetMethods.bind(_assertThisInitialized(_this));
    _this.handleInputClick = _this.handleInputClick.bind(_assertThisInitialized(_this));
    _this.handleGetShowValue = _this.handleGetShowValue.bind(_assertThisInitialized(_this));
    _this.handleSelection = _this.handleSelection.bind(_assertThisInitialized(_this));
    _this.handleDateType = _this.handleDateType.bind(_assertThisInitialized(_this));
    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
    _this.handleGetAllowedType = _this.handleGetAllowedType.bind(_assertThisInitialized(_this));
    _this.handleDateClear = _this.handleDateClear.bind(_assertThisInitialized(_this));
    _this.handleDateTimeClear = _this.handleDateTimeClear.bind(_assertThisInitialized(_this));
    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
    _this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
    _this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
    _this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
    _this.getI18nMonthLabels = _this.getI18nMonthLabels.bind(_assertThisInitialized(_this));
    _this.state = {
      selected: '',
      displayText: '',
      dateFormatDetails: {},
      dateFormatSelection: {},
      day: '',
      month: '',
      year: '',
      hour: '',
      minute: '',
      noon: '',
      isDateEdited: false,
      stateFocusOrder: '',
      isError: false,
      isFocused: false
    };
    _this.oldFocusOrder = '';
    _this.focusOrder = '';
    _this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'

    _this.keyDownAction = ''; //'Arrow' || 'valueTyped'

    _this.isMouseDown = false;
    return _this;
  }

  _createClass(DateWidgetComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          validation = _this$props.validation,
          getPopupProps = _this$props.getPopupProps,
          isPopupReady = _this$props.isPopupReady;
      var selected = this.state.selected;

      if (validation && validation.validate) {
        this.validateOnSelect(selected, this.props);
      }

      var _this$handleGetDispla = this.handleGetDisplayText(this.props),
          displayText = _this$handleGetDispla.displayText,
          newSelected = _this$handleGetDispla.selected;

      this.setState({
        displayText: displayText,
        selected: newSelected
      });
      this.handleSelectionRangeDetails(this.props);

      if (getPopupProps) {
        getPopupProps({
          isPopupReady: isPopupReady
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this$state = this.state,
          selected = _this$state.selected,
          day = _this$state.day,
          month = _this$state.month,
          year = _this$state.year,
          hour = _this$state.hour,
          minute = _this$state.minute,
          noon = _this$state.noon,
          isDateEdited = _this$state.isDateEdited,
          stateFocusOrder = _this$state.stateFocusOrder,
          isFocused = _this$state.isFocused;
      var _this$props2 = this.props,
          value = _this$props2.value,
          validation = _this$props2.validation,
          isPopupReady = _this$props2.isPopupReady,
          _this$props2$dateForm = _this$props2.dateFormat,
          dateFormat = _this$props2$dateForm === void 0 ? '' : _this$props2$dateForm,
          is24Hour = _this$props2.is24Hour,
          isHideCurrentYear = _this$props2.isHideCurrentYear,
          getPopupProps = _this$props2.getPopupProps,
          onDropboxClose = _this$props2.onDropboxClose;

      if (validation && validation.validate) {
        this.validateOnSelect(selected, this.props);
      }

      if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || isHideCurrentYear !== prevProps.isHideCurrentYear) {
        var _this$handleGetDispla2 = this.handleGetDisplayText(this.props),
            displayText = _this$handleGetDispla2.displayText,
            _selected = _this$handleGetDispla2.selected;

        this.setState({
          selected: _selected,
          displayText: displayText
        });

        if (value !== _constants.INVALID_DATE) {
          this.setState({
            day: '',
            month: '',
            year: '',
            hour: '',
            minute: '',
            noon: '',
            isDateEdited: false,
            isError: false
          });
        }
      }

      if (prevProps.isPopupReady !== isPopupReady) {
        if (isPopupReady) {
          this.resetLocalDate && this.resetLocalDate();
        } else {
          typeof onDropboxClose === 'function' && onDropboxClose();
        }

        if (getPopupProps) {
          getPopupProps({
            isPopupReady: isPopupReady
          });
        }
      }

      var haveLocalValue = [day, month, year, hour, minute, noon].some(function (value) {
        return !(0, _Common.getIsEmptyValue)(value);
      });

      if (isDateEdited !== haveLocalValue) {
        this.setState({
          isDateEdited: haveLocalValue
        });
      }

      if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || (0, _dateFormatUtils.arrayIsNotEqual)([day, month, year, hour, minute, noon], [prevState.day, prevState.month, prevState.year, prevState.hour, prevState.minute, prevState.noon])) {
        this.handleSelectionRangeDetails(this.props);
      } // if (stateFocusOrder !== prevState.stateFocusOrder) {


      isFocused && !(0, _Common.getIsEmptyValue)(stateFocusOrder) && this.handleSelection(stateFocusOrder);
      this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
      // if (prevProps.isPopupOpen !== isPopupOpen) {
      //   if (!isPopupOpen) {
      //     this.valueInput && this.valueInput.focus({preventScroll:true});
      //   }
      // }
    }
  }, {
    key: "handleSelect",
    value: function handleSelect(userZoneSelectedTime, fotmattedValue, e) {
      var _this$props3 = this.props,
          id = _this$props3.id,
          onSelect = _this$props3.onSelect,
          closePopupOnly = _this$props3.closePopupOnly,
          validation = _this$props3.validation;

      if (validation && validation.validateOn) {
        var selected = this.state.selected;
        this.validateOnSelect(selected, this.props);
      }

      onSelect && onSelect(userZoneSelectedTime, id);
      this.valueInput && this.valueInput.focus({
        preventScroll: true
      });
      closePopupOnly(e);
    }
  }, {
    key: "validateOnSelect",
    value: function validateOnSelect(value, props) {
      var defaultCheckPropsRules = ['required'];
      var defaultValidateRules = ['required'];
      var defaultType = 'onegroup';
      var validation = props.validation,
          onPassValidation = props.onPassValidation,
          onFailValidation = props.onFailValidation;
      var targetTag = this.elementRef;

      if (validation) {
        //validateOn won't work here ...
        var newValidation = _validator["default"].combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);

        var validationObj = {
          validation: newValidation,
          onPassValidation: onPassValidation,
          onFailValidation: onFailValidation
        };

        _validator["default"].executeValidation(value, targetTag, validationObj, defaultType);
      } else {
        onPassValidation && onPassValidation(value, targetTag);
      }
    }
  }, {
    key: "handleTogglePopup",
    value: function handleTogglePopup(e, isOpenOnly) {
      var _this$props4 = this.props,
          togglePopup = _this$props4.togglePopup,
          _this$props4$defaultP = _this$props4.defaultPosition,
          defaultPosition = _this$props4$defaultP === void 0 ? 'bottom' : _this$props4$defaultP,
          isPopupOpen = _this$props4.isPopupOpen,
          removeClose = _this$props4.removeClose;

      if (isOpenOnly) {
        if (!isPopupOpen) {
          togglePopup(e, "".concat(defaultPosition, "Right"));
        } else {
          removeClose(e);
        }
      }

      !isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
    }
  }, {
    key: "getI18nMonthLabels",
    value: function getI18nMonthLabels() {
      var i18nKeys = this.props.i18nKeys;
      return {
        i18nShortMonths: i18nKeys.monthNamesShort || _constants.i18nShortMonths,
        i18nMonths: i18nKeys.monthNames || _constants.i18nMonths
      };
    }
  }, {
    key: "handleSelectionRangeDetails",
    value: function handleSelectionRangeDetails(props) {
      var timeZone = props.timeZone,
          dateFormat = props.dateFormat,
          isDateTime = props.isDateTime,
          value = props.value,
          is24Hour = props.is24Hour;
      var _this$state2 = this.state,
          day = _this$state2.day,
          month = _this$state2.month,
          year = _this$state2.year,
          hour = _this$state2.hour,
          minute = _this$state2.minute,
          noon = _this$state2.noon;
      var selected = value === _constants.INVALID_DATE ? '' : value;

      var _this$getI18nMonthLab = this.getI18nMonthLabels(),
          localizedShortMonths = _this$getI18nMonthLab.i18nShortMonths,
          localizedMonths = _this$getI18nMonthLab.i18nMonths; //New UI Changes


      var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
        isHideCurrentYear: false,
        value: value,
        timeZone: timeZone,
        isDateTime: isDateTime
      });
      var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
        i18nShortMonths: localizedShortMonths,
        i18nMonths: localizedMonths,
        selectedValue: selected,
        day: day,
        month: month,
        year: year,
        hour: hour,
        minute: minute,
        noon: noon,
        timeZone: timeZone,
        is24Hour: is24Hour
      });
      var newDateFormat = dateFormatDetails.dateFormat;
      this.setState({
        dateFormatDetails: dateFormatDetails,
        dateFormatSelection: dateFormatSelection,
        newDateFormat: newDateFormat
      });
    }
  }, {
    key: "handleGetDisplayText",
    value: function handleGetDisplayText(props) {
      var timeZone = props.timeZone,
          dateFormat = props.dateFormat,
          isDateTime = props.isDateTime,
          value = props.value,
          is24Hour = props.is24Hour,
          isHideCurrentYear = props.isHideCurrentYear;

      var _this$getI18nMonthLab2 = this.getI18nMonthLabels(),
          localizedShortMonths = _this$getI18nMonthLab2.i18nShortMonths,
          localizedMonths = _this$getI18nMonthLab2.i18nMonths;

      var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
        isHideCurrentYear: isHideCurrentYear,
        value: value,
        timeZone: timeZone,
        isDateTime: isDateTime
      });
      var newDateFormat = dateFormatDetails.dateFormat;
      var displayText = '';
      var selected = value === _constants.INVALID_DATE ? '' : value;

      if (selected) {
        var format = newDateFormat,
            convertedValue = (0, _dateFormat.getDateText)(value, isDateTime, timeZone);

        if (isDateTime) {
          format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
        }

        displayText = (0, _common.formatDate)(convertedValue, format, {
          i18nShortMonths: localizedShortMonths,
          i18nMonths: localizedMonths
        });
      }

      return {
        displayText: displayText,
        selected: selected
      };
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var keyCode = e.keyCode;
      var _this$props5 = this.props,
          isPopupOpen = _this$props5.isPopupOpen,
          isPopupOpenOnEnter = _this$props5.isPopupOpenOnEnter,
          onKeyDown = _this$props5.onKeyDown,
          closePopupOnly = _this$props5.closePopupOnly,
          cantEditOnPopupOpen = _this$props5.cantEditOnPopupOpen;
      var isAllowedDateType = this.handleGetAllowedType();

      if (isPopupOpen) {
        if (keyCode === 9 && !isAllowedDateType) {
          //on tab click popup close
          closePopupOnly(e);
        } // ~~~~~~~ handle date navigation in dateTime popup ~~~~~


        if (isAllowedDateType) {
          cantEditOnPopupOpen && this.handleDateType(e);
        }
      } else if (!isPopupOpen) {
        if (isPopupOpenOnEnter && keyCode === 13) {
          //onEnter popup open
          this.handleTogglePopup(e);
        } else if (keyCode === 13) {
          //onEnter submit case
          onKeyDown && onKeyDown(e);
        } else if (isAllowedDateType) {
          this.handleDateType(e);
        }
      }
    }
  }, {
    key: "getValueInputRef",
    value: function getValueInputRef(el) {
      var getRef = this.props.getRef;
      this.valueInput = el;
      getRef && getRef(el);
    }
  }, {
    key: "handleFocus",
    value: function handleFocus() {
      var isAllowedDateType = this.handleGetAllowedType();
      var isMouseDown = this.isMouseDown;

      if (isAllowedDateType && !isMouseDown) {
        var dateFormatSelection = this.state.dateFormatSelection;
        var focusedIndex = dateFormatSelection.focusedIndex;
        var _this$valueInput = this.valueInput,
            newSelectionStart = _this$valueInput.selectionStart,
            newSelectionEnd = _this$valueInput.selectionEnd;
        var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)] || 0;
        isAllowedDateType && this.setState({
          stateFocusOrder: focusedOrder,
          isFocused: true
        });
      } else if (!isAllowedDateType) {
        var valueInput = this.valueInput;
        document.getSelection().removeAllRanges();
        valueInput && valueInput.setSelectionRange(0, 0);
        this.setState({
          isFocused: true
        });
      }

      var onFocus = this.props.onFocus;
      onFocus && onFocus();
    }
  }, {
    key: "handleBlur",
    value: function handleBlur() {
      this.focusOrder = '';
      this.oldFocusOrder = '';
      this.oldKeyDownAction = '';
      this.keyDownAction = '';
      this.setState({
        isFocused: false
      }); // const { valueInput } = this;
      // document.getSelection().removeAllRanges();
      // valueInput && valueInput.setSelectionRange(0, 0);

      var onBlur = this.props.onBlur;
      onBlur && onBlur();
    }
  }, {
    key: "handleGetMethods",
    value: function handleGetMethods(methods) {
      var getMethods = this.props.getMethods;
      var resetLocalDate = methods.resetLocalDate,
          getStateValues = methods.getStateValues,
          toggleYearView = methods.toggleYearView;
      this.resetLocalDate = resetLocalDate;
      this.getDateTimeStateValues = getStateValues;
      this.DateTimeYearViewToggle = toggleYearView;
      getMethods && getMethods(methods);
    }
  }, {
    key: "handleDateType",
    value: function handleDateType(e) {
      var _this2 = this;

      var keyCode = e.keyCode,
          shiftKey = e.shiftKey;
      var input = e.target;

      if ((0, _dateFormatUtils.getIsSupportedKey)(e)) {
        e.preventDefault();
      }

      var _this$props6 = this.props,
          isDateTime = _this$props6.isDateTime,
          timeZone = _this$props6.timeZone,
          value = _this$props6.value,
          onSelect = _this$props6.onSelect,
          id = _this$props6.id,
          min = _this$props6.min,
          max = _this$props6.max,
          minErrorText = _this$props6.minErrorText,
          maxErrorText = _this$props6.maxErrorText,
          onError = _this$props6.onError,
          closePopupOnly = _this$props6.closePopupOnly,
          is24Hour = _this$props6.is24Hour;
      var _this$state3 = this.state,
          dateFormatSelection = _this$state3.dateFormatSelection,
          day = _this$state3.day,
          month = _this$state3.month,
          year = _this$state3.year,
          hour = _this$state3.hour,
          minute = _this$state3.minute,
          noon = _this$state3.noon,
          selected = _this$state3.selected,
          dateFormatDetails = _this$state3.dateFormatDetails;
      var focusedIndex = dateFormatSelection.focusedIndex,
          order = dateFormatSelection.order;
      var yearInfo = dateFormatDetails.yearInfo;

      var _getDateDetails = (0, _dateFormat.getDateDetails)(selected, {
        day: day,
        month: month,
        year: year,
        hour: hour,
        minute: minute,
        noon: noon
      }, isDateTime, timeZone, {
        is24Hour: is24Hour
      }),
          _getDateDetails$day = _getDateDetails.day,
          selectedDay = _getDateDetails$day === void 0 ? '' : _getDateDetails$day,
          _getDateDetails$month = _getDateDetails.month,
          selectedMonth = _getDateDetails$month === void 0 ? '' : _getDateDetails$month,
          _getDateDetails$year = _getDateDetails.year,
          selectedYear = _getDateDetails$year === void 0 ? '' : _getDateDetails$year,
          _getDateDetails$hour = _getDateDetails.hour,
          selectedHour = _getDateDetails$hour === void 0 ? '' : _getDateDetails$hour,
          _getDateDetails$minut = _getDateDetails.minute,
          selectedMinute = _getDateDetails$minut === void 0 ? '' : _getDateDetails$minut,
          _getDateDetails$noon = _getDateDetails.noon,
          selectedNoon = _getDateDetails$noon === void 0 ? '' : _getDateDetails$noon;

      var newSelectionStart = input.selectionStart,
          newSelectionEnd = input.selectionEnd;
      var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)];

      var _ref = order[focusedOrder] || {},
          type = _ref.type;

      this.oldFocusOrder = this.focusOrder;
      this.focusOrder = focusedOrder;

      if (keyCode === 38 || keyCode === 40) {
        //up arrow && down arrow
        this.oldKeyDownAction = this.keyDownAction;
        this.keyDownAction = 'Arrow';
      } else {
        this.oldKeyDownAction = this.keyDownAction;
        this.keyDownAction = 'valueTyped';
      }

      var focusedOrders = {
        focusOrder: this.focusOrder,
        oldFocusOrder: this.oldFocusOrder
      };
      var keyActions = {
        oldKeyAction: this.oldKeyDownAction,
        keyAction: this.keyDownAction
      };
      var newDay = selectedDay,
          newMonth = selectedMonth,
          newYear = selectedYear,
          newHour = selectedHour,
          newMinute = selectedMinute,
          newNoon = selectedNoon,
          isValueChanged = false,
          newFocusOrder = focusedOrder;

      if (keyCode === 9 && shiftKey && !(0, _Common.getIsEmptyValue)(focusedOrder) && focusedOrder !== 0) {
        e.preventDefault();
        this.setState({
          stateFocusOrder: focusedOrder - 1
        });
      } else if (keyCode === 9 && !shiftKey && !(0, _Common.getIsEmptyValue)(focusedOrder) && order.length - 1 !== focusedOrder) {
        e.preventDefault();
        this.setState({
          stateFocusOrder: focusedOrder + 1
        });
      } else if (keyCode === 39) {
        //arrow right
        (0, _Common.getIsEmptyValue)(focusedOrder) ? this.setState({
          stateFocusOrder: 0
        }) : this.setState({
          stateFocusOrder: focusedOrder + 1
        });
      } else if (keyCode === 37) {
        //arrow left
        (0, _Common.getIsEmptyValue)(focusedOrder) ? this.setState({
          stateFocusOrder: order.length - 1
        }) : this.setState({
          stateFocusOrder: focusedOrder - 1
        });
      } else if (keyCode === 9) {
        //on tab click popup close
        closePopupOnly(e);
      } else if (type === 'day') {
        var _getChangedDay = (0, _dayChange.getChangedDay)({
          day: selectedDay,
          month: selectedMonth,
          year: selectedYear
        }, e, focusedOrders, keyActions);

        newDay = _getChangedDay.day;
        isValueChanged = _getChangedDay.isChanged;
        newFocusOrder = _getChangedDay.focusOrder;
      } else if (type === 'month') {
        var _getChangedMonth = (0, _monthChange.getChangedMonth)({
          day: selectedDay,
          month: selectedMonth,
          year: selectedYear
        }, e, focusedOrders, keyActions);

        newMonth = _getChangedMonth.month;
        isValueChanged = _getChangedMonth.isChanged;
        newFocusOrder = _getChangedMonth.focusOrder;
      } else if (type === 'year') {
        var _getChangedYear = (0, _yearChange.getChangedYear)({
          day: selectedDay,
          month: selectedMonth,
          year: selectedYear
        }, e, focusedOrders, keyActions, {
          yearInfo: yearInfo
        });

        newYear = _getChangedYear.year;
        isValueChanged = _getChangedYear.isChanged;
        newFocusOrder = _getChangedYear.focusOrder;
      } else if (type === 'hour') {
        var _getChangedHour = (0, _timeChange.getChangedHour)({
          hour: selectedHour
        }, e, focusedOrders, keyActions, {
          is24Hour: is24Hour
        });

        newHour = _getChangedHour.hour;
        isValueChanged = _getChangedHour.isChanged;
        newFocusOrder = _getChangedHour.focusOrder;
      } else if (type === 'minute') {
        var _getChangedMinute = (0, _timeChange.getChangedMinute)({
          minute: selectedMinute
        }, e, focusedOrders, keyActions);

        newMinute = _getChangedMinute.minute;
        isValueChanged = _getChangedMinute.isChanged;
        newFocusOrder = _getChangedMinute.focusOrder;
      } else if (type === 'noon') {
        var _getChangedNoon = (0, _timeChange.getChangedNoon)({
          noon: selectedNoon
        }, e, focusedOrders, keyActions);

        newNoon = _getChangedNoon.noon;
        isValueChanged = _getChangedNoon.isChanged;
        newFocusOrder = _getChangedNoon.focusOrder;
      }

      if (isValueChanged) {
        var currentValue = {
          day: newDay,
          month: newMonth,
          year: newYear,
          hour: newHour,
          minute: newMinute,
          noon: newNoon
        };

        var errorCaseHandle = function errorCaseHandle(isEmptyValError) {
          _this2.setState(function () {
            return {
              day: newDay,
              month: newMonth,
              year: newYear,
              hour: newHour,
              minute: newMinute,
              noon: newNoon,
              stateFocusOrder: newFocusOrder,
              isDateEdited: true,
              isError: !isEmptyValError
            };
          });

          var newSelected = isEmptyValError ? '' : _constants.INVALID_DATE;
          value !== newSelected && onSelect && onSelect(newSelected, id);
        };

        var _getIsValidDate = (0, _dateFormat.getIsValidDate)(currentValue, isDateTime, {
          is24Hour: is24Hour
        }),
            isError = _getIsValidDate.isError,
            isEmptyValError = _getIsValidDate.isEmptyValError;

        if (isError) {
          errorCaseHandle(isEmptyValError);
        } else {
          var _getSelectedDate = (0, _dateFormat.getSelectedDate)(currentValue, {
            min: min,
            max: max,
            timeZone: timeZone,
            isDateTime: isDateTime,
            is24Hour: is24Hour
          }),
              selectedValue = _getSelectedDate.selectedValue,
              selectedDateError = _getSelectedDate.isError,
              errorType = _getSelectedDate.errorType;

          if (selectedDateError) {
            if (errorType === 'MIN') {
              onError && onError(minErrorText, true);
            } else if (errorType === 'MAX') {
              onError && onError(maxErrorText, true);
            }

            errorCaseHandle();
          } else {
            this.setState(function () {
              return {
                day: '',
                month: '',
                year: '',
                hour: '',
                minute: '',
                noon: '',
                isDateEdited: false,
                stateFocusOrder: newFocusOrder,
                isError: false
              };
            });
            onSelect && onSelect(selectedValue, id);
          }
        }
      }
    }
  }, {
    key: "handleSelection",
    value: function handleSelection() {
      var focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      var isAllowedDateType = this.handleGetAllowedType();

      if (isAllowedDateType) {
        var dateFormatSelection = this.state.dateFormatSelection;
        var _dateFormatSelection$ = dateFormatSelection.order,
            order = _dateFormatSelection$ === void 0 ? {} : _dateFormatSelection$;

        var _ref2 = order[focusOrder] || {},
            index = _ref2.index;

        if (!index) {
          focusOrder = 0;

          var _ref3 = order[focusOrder] || {};

          index = _ref3.index;
        }

        if (index && this.valueInput) {
          document.getSelection().removeAllRanges();
          this.valueInput.setSelectionRange(index[0], index[1]);
        }
      }
    }
  }, {
    key: "handleInputClick",
    value: function handleInputClick(e) {
      this.isMouseDown = false;
      var dateFormatSelection = this.state.dateFormatSelection;
      var input = e.target;
      var selectionEnd = input.selectionEnd;
      e.preventDefault();
      var clickIndex = dateFormatSelection.clickIndex;
      var focusOrder = clickIndex[selectionEnd] || clickIndex[selectionEnd - 1] || 0;
      var isAllowedDateType = this.handleGetAllowedType();

      if (isAllowedDateType) {
        this.setState({
          stateFocusOrder: focusOrder,
          isFocused: true
        });
      }

      if (!isAllowedDateType) {
        this.handleTogglePopup(e);
      } else {
        var _this$props7 = this.props,
            isPopupOpenOnClick = _this$props7.isPopupOpenOnClick,
            isReadOnly = _this$props7.isReadOnly,
            isDisabled = _this$props7.isDisabled;

        if (isPopupOpenOnClick && (!isReadOnly || !isDisabled)) {
          this.handleTogglePopup(e, true);
        }

        var _this$props8 = this.props,
            isPopupCloseOnClick = _this$props8.isPopupCloseOnClick,
            isPopupOpen = _this$props8.isPopupOpen,
            closePopupOnly = _this$props8.closePopupOnly;

        if (isPopupCloseOnClick && !isPopupOpen) {
          closePopupOnly && closePopupOnly(e);
        }
      }
    }
  }, {
    key: "handleMouseDown",
    value: function handleMouseDown() {
      this.isMouseDown = true;
    }
  }, {
    key: "handleGetShowValue",
    value: function handleGetShowValue() {
      var _this$state4 = this.state,
          day = _this$state4.day,
          month = _this$state4.month,
          year = _this$state4.year,
          hour = _this$state4.hour,
          minute = _this$state4.minute,
          noon = _this$state4.noon,
          dateFormatDetails = _this$state4.dateFormatDetails,
          displayText = _this$state4.displayText,
          newDateFormat = _this$state4.newDateFormat,
          isDateEdited = _this$state4.isDateEdited,
          isFocused = _this$state4.isFocused,
          selected = _this$state4.selected;
      var _this$props9 = this.props,
          isDateTime = _this$props9.isDateTime,
          is24Hour = _this$props9.is24Hour,
          isPopupReady = _this$props9.isPopupReady,
          timeZone = _this$props9.timeZone,
          isPopupOpen = _this$props9.isPopupOpen;

      if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
        var _this$getI18nMonthLab3 = this.getI18nMonthLabels(),
            localizedShortMonths = _this$getI18nMonthLab3.i18nShortMonths,
            localizedMonths = _this$getI18nMonthLab3.i18nMonths;

        var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
          day: day,
          month: month,
          year: year,
          hour: hour,
          minute: minute,
          noon: noon
        }, isDateTime, timeZone, {
          is24Hour: is24Hour
        }),
            _getDateDetails2$day = _getDateDetails2.day,
            selectedDay = _getDateDetails2$day === void 0 ? '' : _getDateDetails2$day,
            _getDateDetails2$mont = _getDateDetails2.month,
            selectedMonth = _getDateDetails2$mont === void 0 ? '' : _getDateDetails2$mont,
            _getDateDetails2$year = _getDateDetails2.year,
            selectedYear = _getDateDetails2$year === void 0 ? '' : _getDateDetails2$year,
            _getDateDetails2$hour = _getDateDetails2.hour,
            selectedHour = _getDateDetails2$hour === void 0 ? '' : _getDateDetails2$hour,
            _getDateDetails2$minu = _getDateDetails2.minute,
            selectedMinute = _getDateDetails2$minu === void 0 ? '' : _getDateDetails2$minu,
            _getDateDetails2$noon = _getDateDetails2.noon,
            selectedNoon = _getDateDetails2$noon === void 0 ? '' : _getDateDetails2$noon;

        var dateTimeString = (0, _dateFormat.getDateTimeString)({
          day: selectedDay,
          month: selectedMonth,
          year: selectedYear,
          hour: selectedHour,
          minute: selectedMinute,
          noon: selectedNoon
        }, dateFormatDetails, isDateTime, {
          i18nShortMonths: localizedShortMonths,
          i18nMonths: localizedMonths,
          is24Hour: is24Hour
        });
        return dateTimeString;
      } else if (displayText) {
        return displayText;
      }

      var timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
      var dateTimeFormat = isDateTime ? "".concat(newDateFormat).concat(timeFormat) : newDateFormat;
      return dateTimeFormat || '';
    }
  }, {
    key: "handleGetAllowedType",
    value: function handleGetAllowedType() {
      var _this$props10 = this.props,
          isReadOnly = _this$props10.isReadOnly,
          isDisabled = _this$props10.isDisabled,
          isEditable = _this$props10.isEditable;

      if (isEditable) {
        if (isReadOnly || isDisabled) {
          return false;
        }

        return true;
      }

      return false;
    }
  }, {
    key: "handleDateClear",
    value: function handleDateClear() {
      var _this$props11 = this.props,
          id = _this$props11.id,
          onSelect = _this$props11.onSelect,
          value = _this$props11.value;
      this.setState({
        day: '',
        month: '',
        year: '',
        hour: '',
        minute: '',
        noon: '',
        isDateEdited: false,
        stateFocusOrder: 0,
        isError: false
      });
      value && onSelect && onSelect('', id); // this.valueInput && this.valueInput.focus({ preventScroll: true });
    }
  }, {
    key: "handleDateTimeClear",
    value: function handleDateTimeClear(e) {
      this.handleDateClear();
      var closePopupOnly = this.props.closePopupOnly;
      closePopupOnly(e);
    }
  }, {
    key: "handleDateIconClick",
    value: function handleDateIconClick(e) {
      this.handleTogglePopup(e);
      this.valueInput && this.valueInput.focus({
        preventScroll: true
      });
    }
  }, {
    key: "handleBlurSelectionRange",
    value: function handleBlurSelectionRange() {
      var focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
      var oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
      var isAllowedDateType = this.handleGetAllowedType();

      if (isAllowedDateType) {
        // if (focusOrder !== oldFocusOrder) {
        var _this$state5 = this.state,
            _this$state5$dateForm = _this$state5.dateFormatSelection,
            dateFormatSelection = _this$state5$dateForm === void 0 ? {} : _this$state5$dateForm,
            isFocused = _this$state5.isFocused;
        var _dateFormatSelection$2 = dateFormatSelection.order,
            order = _dateFormatSelection$2 === void 0 ? [] : _dateFormatSelection$2;
        var isPopupOpen = this.props.isPopupOpen; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};

        var _ref4 = order[focusOrder] || {},
            _ref4$type = _ref4.type,
            focusedType = _ref4$type === void 0 ? '' : _ref4$type;

        var _this$getDateTimeStat = this.getDateTimeStateValues(),
            isYearView = _this$getDateTimeStat.isYearView,
            oldIsMonthOpen = _this$getDateTimeStat.isMonthOpen;

        var yearViewTypes = ['month', 'year'];
        var isMonthOpen = focusedType === 'month';

        if (isPopupOpen) {
          if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
            if (!isFocused && isYearView) {
              this.DateTimeYearViewToggle(true, oldIsMonthOpen);
            } else {
              this.DateTimeYearViewToggle(true, isMonthOpen);
            }
          } else if (yearViewTypes.indexOf(focusedType) === -1) {
            if (!isFocused && isYearView) {
              this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
            } else {
              this.DateTimeYearViewToggle(false, false);
            }
          }
        } // }

      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props12 = this.props,
          removeClose = _this$props12.removeClose,
          minErrorText = _this$props12.minErrorText,
          maxErrorText = _this$props12.maxErrorText,
          min = _this$props12.min,
          max = _this$props12.max,
          placeholder = _this$props12.placeholder,
          isPopupOpen = _this$props12.isPopupOpen,
          isPopupReady = _this$props12.isPopupReady,
          isDateTime = _this$props12.isDateTime,
          position = _this$props12.position,
          textBoxVariant = _this$props12.textBoxVariant,
          textBoxSize = _this$props12.textBoxSize,
          _this$props12$childre = _this$props12.children,
          children = _this$props12$childre === void 0 ? null : _this$props12$childre,
          isDisabled = _this$props12.isDisabled,
          getContainerRef = _this$props12.getContainerRef,
          getTargetRef = _this$props12.getTargetRef,
          timeZone = _this$props12.timeZone,
          isReadOnly = _this$props12.isReadOnly,
          dataId = _this$props12.dataId,
          needResponsive = _this$props12.needResponsive,
          className = _this$props12.className,
          needBorder = _this$props12.needBorder,
          defaultTime = _this$props12.defaultTime,
          needDefaultTime = _this$props12.needDefaultTime,
          borderColor = _this$props12.borderColor,
          i18nKeys = _this$props12.i18nKeys,
          needErrorOnBlur = _this$props12.needErrorOnBlur,
          htmlId = _this$props12.htmlId,
          iconOnHover = _this$props12.iconOnHover,
          is24Hour = _this$props12.is24Hour,
          isAbsolutePositioningNeeded = _this$props12.isAbsolutePositioningNeeded,
          positionsOffset = _this$props12.positionsOffset,
          targetOffset = _this$props12.targetOffset,
          isRestrictScroll = _this$props12.isRestrictScroll,
          dropBoxPortalId = _this$props12.dropBoxPortalId,
          a11y = _this$props12.a11y,
          boxSize = _this$props12.boxSize,
          onError = _this$props12.onError,
          renderCustomHeader = _this$props12.renderCustomHeader,
          renderCustomFooter = _this$props12.renderCustomFooter,
          weekStartDay = _this$props12.weekStartDay,
          holidays = _this$props12.holidays,
          _this$props12$customP = _this$props12.customProps,
          customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
      var _customProps$DateTime = customProps.DateTimeProps,
          DateTimeProps = _customProps$DateTime === void 0 ? {} : _customProps$DateTime,
          _customProps$TextBoxP = customProps.TextBoxProps,
          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
          _customProps$TextBoxI = customProps.TextBoxIconProps,
          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
      var _this$state6 = this.state,
          _this$state6$selected = _this$state6.selected,
          value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
          isError = _this$state6.isError,
          isDateEdited = _this$state6.isDateEdited,
          isFocused = _this$state6.isFocused;
      var showValue = this.handleGetShowValue();
      var isAllowedDateType = this.handleGetAllowedType();
      var showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
      var showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(_DateWidgetModule["default"].container)
      }, children ? /*#__PURE__*/_react["default"].createElement("div", {
        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
        onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
        ref: getTargetRef,
        className: "".concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled, " ").concat(className ? className : '')
      }, children) : /*#__PURE__*/_react["default"].createElement("div", {
        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
        className: " ".concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled, " ").concat(className ? className : ''),
        onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
        ref: getTargetRef
      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
        htmlId: htmlId,
        value: showValue ? showValue : placeholder,
        needBorder: needBorder,
        size: textBoxSize,
        variant: textBoxVariant,
        inputRef: this.getValueInputRef,
        isDisabled: isDisabled,
        dataId: dataId,
        needReadOnlyStyle: isReadOnly || isDisabled,
        onKeyDown: this.handleKeyDown,
        onFocus: this.handleFocus,
        borderColor: showError ? 'error' : borderColor,
        needEffect: !(isDisabled || isReadOnly || showError),
        isClickable: true,
        onClick: isDisabled || isReadOnly ? null : this.handleInputClick,
        onBlur: this.handleBlur,
        onClear: showClear ? this.handleDateClear : null,
        isReadOnly: isReadOnly,
        onMouseDown: this.handleMouseDown,
        showClearIcon: showClear,
        customClass: {
          customTBoxWrap: isDateEdited || value ? '' : _DateWidgetModule["default"].placeHolder
        },
        iconOnHover: iconOnHover,
        isFocus: isPopupReady,
        autoComplete: false,
        a11y: a11y,
        customProps: TextBoxProps
      }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        isInline: true,
        align: "both",
        isCover: false,
        onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
        dataId: "".concat(dataId, "_datePicker"),
        className: _DateWidgetModule["default"].datePickIcon
      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
        name: "ZD-datepicker",
        size: "12"
      })))), isReadOnly || isDisabled ? null : /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
        value: value,
        isDateTimeField: isDateTime,
        onSelect: this.handleSelect,
        timeZone: timeZone,
        min: min,
        max: max,
        maxErrorText: maxErrorText,
        minErrorText: minErrorText,
        position: position,
        isReady: isPopupOpen,
        isActive: isPopupReady,
        getRef: getContainerRef,
        onClick: removeClose,
        needResponsive: needResponsive,
        dataId: dataId,
        defaultTime: defaultTime,
        needDefaultTime: needDefaultTime,
        getMethods: this.handleGetMethods,
        onClear: this.handleDateTimeClear,
        needAction: isDateTime,
        onDateSelect: !isDateTime ? this.handleSelect : null,
        i18nKeys: i18nKeys,
        is24Hour: is24Hour,
        isAbsolute: isAbsolutePositioningNeeded,
        positionsOffset: positionsOffset,
        targetOffset: targetOffset,
        isRestrictScroll: isRestrictScroll,
        dropBoxPortalId: dropBoxPortalId,
        boxSize: boxSize,
        onError: onError,
        renderCustomHeader: renderCustomHeader,
        renderCustomFooter: renderCustomFooter,
        customProps: DateTimeProps,
        weekStartDay: weekStartDay,
        holidays: holidays
      }));
    }
  }]);

  return DateWidgetComponent;
}(_react["default"].Component);

DateWidgetComponent.defaultProps = _defaultProps.DateWidget_defaultProps;
DateWidgetComponent.propTypes = _propTypes.DateWidget_propTypes;
var DateWidget = (0, _Popup["default"])(DateWidgetComponent);
DateWidget.defaultProps = DateWidgetComponent.defaultProps;
DateWidget.propTypes = DateWidgetComponent.propTypes; // eslint-disable-next-line no-undef
// if (__DOCS__) {
//   DateWidgetComponent.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' '
//   };
//   // eslint-disable-next-line react/forbid-foreign-prop-types
//   DateWidget.propTypes = DateWidgetComponent.propTypes;
// }

var _default = DateWidget;
exports["default"] = _default;