@zohodesk/components/es/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

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); }

/**** Libraries ****/
import React from 'react';
import { DateWidget_propTypes } from "./props/propTypes";
import { DateWidget_defaultProps } from "./props/defaultProps";
/**** Components ****/

import DateTime from "./DateTime";
import Popup from "../Popup/Popup";
import { Icon } from '@zohodesk/icons';
import { Container } from "../Layout";
import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
/**** CSS ****/

import style from "./DateWidget.module.css";
/**** Methods ****/

import validator from "./validator";
import { formatDate } from "../utils/datetime/common";
import { getIsSupportedKey, arrayIsNotEqual } from "./dateFormatUtils";
import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from "./dateFormatUtils/dateFormat";
import { getChangedDay } from "./dateFormatUtils/dayChange";
import { getChangedMonth } from "./dateFormatUtils/monthChange";
import { getChangedYear } from "./dateFormatUtils/yearChange";
import { getChangedHour, getChangedMinute, getChangedNoon } from "./dateFormatUtils/timeChange";
import { getIsEmptyValue } from "../utils/Common";
/** * Constants ** */

import { INVALID_DATE, i18nShortMonths, i18nMonths } from "./constants";
/* eslint-disable react/no-unused-prop-types */

/* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */

class DateWidgetComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleTogglePopup = this.handleTogglePopup.bind(this);
    this.handleGetDisplayText = this.handleGetDisplayText.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.getValueInputRef = this.getValueInputRef.bind(this);
    this.handleGetMethods = this.handleGetMethods.bind(this);
    this.handleInputClick = this.handleInputClick.bind(this);
    this.handleGetShowValue = this.handleGetShowValue.bind(this);
    this.handleSelection = this.handleSelection.bind(this);
    this.handleDateType = this.handleDateType.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleGetAllowedType = this.handleGetAllowedType.bind(this);
    this.handleDateClear = this.handleDateClear.bind(this);
    this.handleDateTimeClear = this.handleDateTimeClear.bind(this);
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleDateIconClick = this.handleDateIconClick.bind(this);
    this.handleSelectionRangeDetails = this.handleSelectionRangeDetails.bind(this);
    this.handleBlurSelectionRange = this.handleBlurSelectionRange.bind(this);
    this.getI18nMonthLabels = this.getI18nMonthLabels.bind(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;
  }

  componentDidMount() {
    const {
      validation,
      getPopupProps,
      isPopupReady
    } = this.props;
    const {
      selected
    } = this.state;

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

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

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

  componentDidUpdate(prevProps, prevState) {
    const {
      selected,
      day,
      month,
      year,
      hour,
      minute,
      noon,
      isDateEdited,
      stateFocusOrder,
      isFocused
    } = this.state;
    const {
      value,
      validation,
      isPopupReady,
      dateFormat = '',
      is24Hour,
      isHideCurrentYear,
      getPopupProps,
      onDropboxClose
    } = this.props;

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

    if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || isHideCurrentYear !== prevProps.isHideCurrentYear) {
      const {
        displayText,
        selected
      } = this.handleGetDisplayText(this.props);
      this.setState({
        selected,
        displayText
      });

      if (value !== 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
        });
      }
    }

    const haveLocalValue = [day, month, year, hour, minute, noon].some(value => !getIsEmptyValue(value));

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

    if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || 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 && !getIsEmptyValue(stateFocusOrder) && this.handleSelection(stateFocusOrder);
    this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
    // if (prevProps.isPopupOpen !== isPopupOpen) {
    //   if (!isPopupOpen) {
    //     this.valueInput && this.valueInput.focus({preventScroll:true});
    //   }
    // }
  }

  handleSelect(userZoneSelectedTime, fotmattedValue, e) {
    const {
      id,
      onSelect,
      closePopupOnly,
      validation
    } = this.props;

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

    onSelect && onSelect(userZoneSelectedTime, id);
    this.valueInput && this.valueInput.focus({
      preventScroll: true
    });
    closePopupOnly(e);
  }

  validateOnSelect(value, props) {
    const defaultCheckPropsRules = ['required'];
    const defaultValidateRules = ['required'];
    const defaultType = 'onegroup';
    const {
      validation,
      onPassValidation,
      onFailValidation
    } = props;
    const targetTag = this.elementRef;

    if (validation) {
      //validateOn won't work here ...
      const newValidation = validator.combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);
      const validationObj = {
        validation: newValidation,
        onPassValidation,
        onFailValidation
      };
      validator.executeValidation(value, targetTag, validationObj, defaultType);
    } else {
      onPassValidation && onPassValidation(value, targetTag);
    }
  }

  handleTogglePopup(e, isOpenOnly) {
    const {
      togglePopup,
      defaultPosition = 'bottom',
      isPopupOpen,
      removeClose
    } = this.props;

    if (isOpenOnly) {
      if (!isPopupOpen) {
        togglePopup(e, `${defaultPosition}Right`);
      } else {
        removeClose(e);
      }
    }

    !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
  }

  getI18nMonthLabels() {
    const {
      i18nKeys
    } = this.props;
    return {
      i18nShortMonths: i18nKeys.monthNamesShort || i18nShortMonths,
      i18nMonths: i18nKeys.monthNames || i18nMonths
    };
  }

  handleSelectionRangeDetails(props) {
    const {
      timeZone,
      dateFormat,
      isDateTime,
      value,
      is24Hour
    } = props;
    const {
      day,
      month,
      year,
      hour,
      minute,
      noon
    } = this.state;
    const selected = value === INVALID_DATE ? '' : value;
    const {
      i18nShortMonths: localizedShortMonths,
      i18nMonths: localizedMonths
    } = this.getI18nMonthLabels(); //New UI Changes

    const dateFormatDetails = getDateFormatDetails(dateFormat, {
      isHideCurrentYear: false,
      value,
      timeZone,
      isDateTime
    });
    const dateFormatSelection = getDateFormatSelection(dateFormatDetails, isDateTime, {
      i18nShortMonths: localizedShortMonths,
      i18nMonths: localizedMonths,
      selectedValue: selected,
      day,
      month,
      year,
      hour,
      minute,
      noon,
      timeZone,
      is24Hour
    });
    const {
      dateFormat: newDateFormat
    } = dateFormatDetails;
    this.setState({
      dateFormatDetails,
      dateFormatSelection,
      newDateFormat
    });
  }

  handleGetDisplayText(props) {
    const {
      timeZone,
      dateFormat,
      isDateTime,
      value,
      is24Hour,
      isHideCurrentYear
    } = props;
    const {
      i18nShortMonths: localizedShortMonths,
      i18nMonths: localizedMonths
    } = this.getI18nMonthLabels();
    const dateFormatDetails = getDateFormatDetails(dateFormat, {
      isHideCurrentYear,
      value,
      timeZone,
      isDateTime
    });
    const {
      dateFormat: newDateFormat
    } = dateFormatDetails;
    let displayText = '';
    const selected = value === INVALID_DATE ? '' : value;

    if (selected) {
      let format = newDateFormat,
          convertedValue = getDateText(value, isDateTime, timeZone);

      if (isDateTime) {
        format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
      }

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

    return {
      displayText,
      selected
    };
  }

  handleKeyDown(e) {
    const {
      keyCode
    } = e;
    const {
      isPopupOpen,
      isPopupOpenOnEnter,
      onKeyDown,
      closePopupOnly,
      cantEditOnPopupOpen
    } = this.props;
    const 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);
      }
    }
  }

  getValueInputRef(el) {
    const {
      getRef
    } = this.props;
    this.valueInput = el;
    getRef && getRef(el);
  }

  handleFocus() {
    const isAllowedDateType = this.handleGetAllowedType();
    const {
      isMouseDown
    } = this;

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

    const {
      onFocus
    } = this.props;
    onFocus && onFocus();
  }

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

    const {
      onBlur
    } = this.props;
    onBlur && onBlur();
  }

  handleGetMethods(methods) {
    const {
      getMethods
    } = this.props;
    const {
      resetLocalDate,
      getStateValues,
      toggleYearView
    } = methods;
    this.resetLocalDate = resetLocalDate;
    this.getDateTimeStateValues = getStateValues;
    this.DateTimeYearViewToggle = toggleYearView;
    getMethods && getMethods(methods);
  }

  handleDateType(e) {
    const {
      keyCode,
      shiftKey
    } = e;
    const input = e.target;

    if (getIsSupportedKey(e)) {
      e.preventDefault();
    }

    const {
      isDateTime,
      timeZone,
      value,
      onSelect,
      id,
      min,
      max,
      minErrorText,
      maxErrorText,
      onError,
      closePopupOnly,
      is24Hour
    } = this.props;
    const {
      dateFormatSelection,
      day,
      month,
      year,
      hour,
      minute,
      noon,
      selected,
      dateFormatDetails
    } = this.state;
    const {
      focusedIndex,
      order
    } = dateFormatSelection;
    const {
      yearInfo
    } = dateFormatDetails;
    const {
      day: selectedDay = '',
      month: selectedMonth = '',
      year: selectedYear = '',
      hour: selectedHour = '',
      minute: selectedMinute = '',
      noon: selectedNoon = ''
    } = getDateDetails(selected, {
      day,
      month,
      year,
      hour,
      minute,
      noon
    }, isDateTime, timeZone, {
      is24Hour
    });
    const {
      selectionStart: newSelectionStart,
      selectionEnd: newSelectionEnd
    } = input;
    const focusedOrder = focusedIndex[`${newSelectionStart}_${newSelectionEnd}`];
    const {
      type
    } = order[focusedOrder] || {};
    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';
    }

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

    if (keyCode === 9 && shiftKey && !getIsEmptyValue(focusedOrder) && focusedOrder !== 0) {
      e.preventDefault();
      this.setState({
        stateFocusOrder: focusedOrder - 1
      });
    } else if (keyCode === 9 && !shiftKey && !getIsEmptyValue(focusedOrder) && order.length - 1 !== focusedOrder) {
      e.preventDefault();
      this.setState({
        stateFocusOrder: focusedOrder + 1
      });
    } else if (keyCode === 39) {
      //arrow right
      getIsEmptyValue(focusedOrder) ? this.setState({
        stateFocusOrder: 0
      }) : this.setState({
        stateFocusOrder: focusedOrder + 1
      });
    } else if (keyCode === 37) {
      //arrow left
      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') {
      ({
        day: newDay,
        isChanged: isValueChanged,
        focusOrder: newFocusOrder
      } = getChangedDay({
        day: selectedDay,
        month: selectedMonth,
        year: selectedYear
      }, e, focusedOrders, keyActions));
    } else if (type === 'month') {
      ({
        /*day: newDay,*/
        month: newMonth,
        isChanged: isValueChanged,
        focusOrder: newFocusOrder
      } = getChangedMonth({
        day: selectedDay,
        month: selectedMonth,
        year: selectedYear
      }, e, focusedOrders, keyActions));
    } else if (type === 'year') {
      ({
        /*day: newDay,*/
        year: newYear,
        isChanged: isValueChanged,
        focusOrder: newFocusOrder
      } = getChangedYear({
        day: selectedDay,
        month: selectedMonth,
        year: selectedYear
      }, e, focusedOrders, keyActions, {
        yearInfo
      }));
    } else if (type === 'hour') {
      ({
        hour: newHour,
        isChanged: isValueChanged,
        focusOrder: newFocusOrder
      } = getChangedHour({
        hour: selectedHour
      }, e, focusedOrders, keyActions, {
        is24Hour
      }));
    } else if (type === 'minute') {
      ({
        minute: newMinute,
        isChanged: isValueChanged,
        focusOrder: newFocusOrder
      } = getChangedMinute({
        minute: selectedMinute
      }, e, focusedOrders, keyActions));
    } else if (type === 'noon') {
      ({
        noon: newNoon,
        isChanged: isValueChanged,
        focusOrder: newFocusOrder
      } = getChangedNoon({
        noon: selectedNoon
      }, e, focusedOrders, keyActions));
    }

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

      const errorCaseHandle = isEmptyValError => {
        this.setState(() => ({
          day: newDay,
          month: newMonth,
          year: newYear,
          hour: newHour,
          minute: newMinute,
          noon: newNoon,
          stateFocusOrder: newFocusOrder,
          isDateEdited: true,
          isError: !isEmptyValError
        }));
        const newSelected = isEmptyValError ? '' : INVALID_DATE;
        value !== newSelected && onSelect && onSelect(newSelected, id);
      };

      const {
        isError,
        isEmptyValError
      } = getIsValidDate(currentValue, isDateTime, {
        is24Hour
      });

      if (isError) {
        errorCaseHandle(isEmptyValError);
      } else {
        const {
          selectedValue,
          isError: selectedDateError,
          errorType
        } = getSelectedDate(currentValue, {
          min,
          max,
          timeZone,
          isDateTime,
          is24Hour
        });

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

          errorCaseHandle();
        } else {
          this.setState(() => ({
            day: '',
            month: '',
            year: '',
            hour: '',
            minute: '',
            noon: '',
            isDateEdited: false,
            stateFocusOrder: newFocusOrder,
            isError: false
          }));
          onSelect && onSelect(selectedValue, id);
        }
      }
    }
  }

  handleSelection(focusOrder = 0) {
    const isAllowedDateType = this.handleGetAllowedType();

    if (isAllowedDateType) {
      const {
        dateFormatSelection
      } = this.state;
      const {
        order = {}
      } = dateFormatSelection;
      let {
        index
      } = order[focusOrder] || {};

      if (!index) {
        focusOrder = 0;
        ({
          index
        } = order[focusOrder] || {});
      }

      if (index && this.valueInput) {
        document.getSelection().removeAllRanges();
        this.valueInput.setSelectionRange(index[0], index[1]);
      }
    }
  }

  handleInputClick(e) {
    this.isMouseDown = false;
    const {
      dateFormatSelection
    } = this.state;
    const input = e.target;
    const {
      selectionEnd
    } = input;
    e.preventDefault();
    const {
      clickIndex
    } = dateFormatSelection;
    const focusOrder = clickIndex[selectionEnd] || clickIndex[selectionEnd - 1] || 0;
    const isAllowedDateType = this.handleGetAllowedType();

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

    if (!isAllowedDateType) {
      this.handleTogglePopup(e);
    } else {
      const {
        isPopupOpenOnClick,
        isReadOnly,
        isDisabled
      } = this.props;

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

      const {
        isPopupCloseOnClick,
        isPopupOpen,
        closePopupOnly
      } = this.props;

      if (isPopupCloseOnClick && !isPopupOpen) {
        closePopupOnly && closePopupOnly(e);
      }
    }
  }

  handleMouseDown() {
    this.isMouseDown = true;
  }

  handleGetShowValue() {
    const {
      day,
      month,
      year,
      hour,
      minute,
      noon,
      dateFormatDetails,
      displayText,
      newDateFormat,
      isDateEdited,
      isFocused,
      selected
    } = this.state;
    const {
      isDateTime,
      is24Hour,
      isPopupReady,
      timeZone,
      isPopupOpen
    } = this.props;

    if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
      const {
        i18nShortMonths: localizedShortMonths,
        i18nMonths: localizedMonths
      } = this.getI18nMonthLabels();
      const {
        day: selectedDay = '',
        month: selectedMonth = '',
        year: selectedYear = '',
        hour: selectedHour = '',
        minute: selectedMinute = '',
        noon: selectedNoon = ''
      } = getDateDetails(selected, {
        day,
        month,
        year,
        hour,
        minute,
        noon
      }, isDateTime, timeZone, {
        is24Hour
      });
      const dateTimeString = getDateTimeString({
        day: selectedDay,
        month: selectedMonth,
        year: selectedYear,
        hour: selectedHour,
        minute: selectedMinute,
        noon: selectedNoon
      }, dateFormatDetails, isDateTime, {
        i18nShortMonths: localizedShortMonths,
        i18nMonths: localizedMonths,
        is24Hour
      });
      return dateTimeString;
    } else if (displayText) {
      return displayText;
    }

    const timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
    const dateTimeFormat = isDateTime ? `${newDateFormat}${timeFormat}` : newDateFormat;
    return dateTimeFormat || '';
  }

  handleGetAllowedType() {
    const {
      isReadOnly,
      isDisabled,
      isEditable
    } = this.props;

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

      return true;
    }

    return false;
  }

  handleDateClear() {
    const {
      id,
      onSelect,
      value
    } = this.props;
    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 });
  }

  handleDateTimeClear(e) {
    this.handleDateClear();
    const {
      closePopupOnly
    } = this.props;
    closePopupOnly(e);
  }

  handleDateIconClick(e) {
    this.handleTogglePopup(e);
    this.valueInput && this.valueInput.focus({
      preventScroll: true
    });
  }

  handleBlurSelectionRange(focusOrder = '', oldFocusOrder = '') {
    const isAllowedDateType = this.handleGetAllowedType();

    if (isAllowedDateType) {
      // if (focusOrder !== oldFocusOrder) {
      const {
        dateFormatSelection = {},
        isFocused
      } = this.state;
      const {
        order = []
      } = dateFormatSelection;
      const {
        isPopupOpen
      } = this.props; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};

      const {
        type: focusedType = ''
      } = order[focusOrder] || {};
      const {
        /*isActive,*/
        isYearView,
        isMonthOpen: oldIsMonthOpen
      } = this.getDateTimeStateValues();
      const yearViewTypes = ['month', 'year'];
      const 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);
          }
        }
      } // }

    }
  }

  render() {
    const {
      removeClose,
      minErrorText,
      maxErrorText,
      min,
      max,
      placeholder,
      isPopupOpen,
      isPopupReady,
      isDateTime,
      position,
      textBoxVariant,
      textBoxSize,
      children = null,
      isDisabled,
      getContainerRef,
      getTargetRef,
      timeZone,
      isReadOnly,
      dataId,
      needResponsive,
      className,
      needBorder,
      defaultTime,
      needDefaultTime,
      borderColor,
      i18nKeys,
      needErrorOnBlur,
      htmlId,
      iconOnHover,
      is24Hour,
      isAbsolutePositioningNeeded,
      positionsOffset,
      targetOffset,
      isRestrictScroll,
      dropBoxPortalId,
      a11y,
      boxSize,
      onError,
      renderCustomHeader,
      renderCustomFooter,
      weekStartDay,
      holidays,
      customProps = {}
    } = this.props;
    const {
      DateTimeProps = {},
      TextBoxProps = {},
      TextBoxIconProps = {}
    } = customProps;
    const {
      selected: value = '',
      isError,
      isDateEdited,
      isFocused
    } = this.state;
    const showValue = this.handleGetShowValue();
    const isAllowedDateType = this.handleGetAllowedType();
    const showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
    const showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
    return /*#__PURE__*/React.createElement("div", {
      className: `${style.container}`
    }, children ? /*#__PURE__*/React.createElement("div", {
      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
      onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
      ref: getTargetRef,
      className: `${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`
    }, children) : /*#__PURE__*/React.createElement("div", {
      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
      className: ` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`,
      onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
      ref: getTargetRef
    }, /*#__PURE__*/React.createElement(TextBoxIcon, _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 ? '' : style.placeHolder
      },
      iconOnHover: iconOnHover,
      isFocus: isPopupReady,
      autoComplete: false,
      a11y: a11y,
      customProps: TextBoxProps
    }, TextBoxIconProps), /*#__PURE__*/React.createElement(Container, {
      isInline: true,
      align: "both",
      isCover: false,
      onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
      dataId: `${dataId}_datePicker`,
      className: style.datePickIcon
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-datepicker",
      size: "12"
    })))), isReadOnly || isDisabled ? null : /*#__PURE__*/React.createElement(DateTime, {
      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
    }));
  }

}

DateWidgetComponent.defaultProps = DateWidget_defaultProps;
DateWidgetComponent.propTypes = DateWidget_propTypes;
const DateWidget = Popup(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;
// }

export default DateWidget;