@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/DateTime/DateWidget.js

@@ -1,1134 +0,0 @@
-/**** 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 "../../DateTime/DateWidget.module.css";
-/**** Methods ****/
-
-import validator from "../../DateTime/validator";
-import { formatDate } from "../../utils/datetime/common";
-import { getIsSupportedKey, arrayIsNotEqual } from "../../DateTime/dateFormatUtils";
-import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from "../../DateTime/dateFormatUtils/dateFormat";
-import { getChangedDay } from "../../DateTime/dateFormatUtils/dayChange";
-import { getChangedMonth } from "../../DateTime/dateFormatUtils/monthChange";
-import { getChangedYear } from "../../DateTime/dateFormatUtils/yearChange";
-import { getChangedHour, getChangedMinute, getChangedNoon } from "../../DateTime/dateFormatUtils/timeChange";
-import { getIsEmptyValue } from "../../utils/Common";
-/** * Constants ** */
-
-import { INVALID_DATE, i18nShortMonths, i18nMonths } from "../../DateTime/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.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
-    } = 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();
-      }
-
-      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`);
-  }
-
-  handleSelectionRangeDetails(props) {
-    const {
-      timeZone,
-      dateFormat,
-      isDateTime,
-      value,
-      is24Hour
-    } = props;
-    const {
-      day,
-      month,
-      year,
-      hour,
-      minute,
-      noon
-    } = this.state;
-    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
-
-    const dateFormatDetails = getDateFormatDetails(dateFormat, {
-      isHideCurrentYear: false,
-      value,
-      timeZone,
-      isDateTime
-    });
-    const dateFormatSelection = getDateFormatSelection(dateFormatDetails, isDateTime, {
-      i18nShortMonths,
-      i18nMonths,
-      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 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);
-    }
-
-    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() {
-    let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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 {
-        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,
-        i18nMonths,
-        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() {
-    let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    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,
-      startDate,
-      endDate,
-      weekStartDay,
-      holidays,
-      customProps = {}
-    } = this.props;
-    const {
-      DateTimeProps = {},
-      TextBoxProps = {}
-    } = 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: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
-    }, 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: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
-      onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
-      ref: getTargetRef
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      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
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
-      dataId: `${dataId}_datePicker`
-    }, /*#__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,
-      startDate: startDate,
-      endDate: endDate,
-      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;