@zohodesk/components 1.2.23 → 1.2.24

package/es/DateTime/DateWidget.js

@@ -2,18 +2,18 @@
 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';
 
+import style from './DateWidget.module.css';
 /**** Methods ****/
+
 import validator from './validator';
 import { formatDate } from '../utils/datetime/common';
 import { getIsSupportedKey, arrayIsNotEqual } from './dateFormatUtils';
@@ -23,11 +23,11 @@ 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';
 
+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 {
@@ -71,9 +71,12 @@ class DateWidgetComponent extends React.Component {
     this.oldFocusOrder = '';
     this.focusOrder = '';
     this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'
+
     this.keyDownAction = ''; //'Arrow' || 'valueTyped'
+
     this.isMouseDown = false;
   }
+
   componentDidMount() {
     const {
       validation
@@ -81,9 +84,11 @@ class DateWidgetComponent extends React.Component {
     const {
       selected
     } = this.state;
+
     if (validation && validation.validate) {
       this.validateOnSelect(selected, this.props);
     }
+
     const {
       displayText,
       selected: newSelected
@@ -94,6 +99,7 @@ class DateWidgetComponent extends React.Component {
     });
     this.handleSelectionRangeDetails(this.props);
   }
+
   componentDidUpdate(prevProps, prevState) {
     const {
       selected,
@@ -115,9 +121,11 @@ class DateWidgetComponent extends React.Component {
       is24Hour,
       isHideCurrentYear
     } = 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,
@@ -127,6 +135,7 @@ class DateWidgetComponent extends React.Component {
         selected,
         displayText
       });
+
       if (value !== INVALID_DATE) {
         this.setState({
           day: '',
@@ -140,27 +149,28 @@ class DateWidgetComponent extends React.Component {
         });
       }
     }
+
     if (prevProps.isPopupReady !== isPopupReady) {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
       }
     }
+
     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) {
 
-    // if (stateFocusOrder !== prevState.stateFocusOrder) {
 
     isFocused && !getIsEmptyValue(stateFocusOrder) && this.handleSelection(stateFocusOrder);
-    this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder);
-    // }
-
+    this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
     // if (prevProps.isPopupOpen !== isPopupOpen) {
     //   if (!isPopupOpen) {
     //     this.valueInput && this.valueInput.focus({preventScroll:true});
@@ -175,18 +185,21 @@ class DateWidgetComponent extends React.Component {
       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'];
@@ -197,6 +210,7 @@ class DateWidgetComponent extends React.Component {
       onFailValidation
     } = props;
     const targetTag = this.elementRef;
+
     if (validation) {
       //validateOn won't work here ...
       const newValidation = validator.combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);
@@ -210,6 +224,7 @@ class DateWidgetComponent extends React.Component {
       onPassValidation && onPassValidation(value, targetTag);
     }
   }
+
   handleTogglePopup(e, isOpenOnly) {
     const {
       togglePopup,
@@ -217,6 +232,7 @@ class DateWidgetComponent extends React.Component {
       isPopupOpen,
       removeClose
     } = this.props;
+
     if (isOpenOnly) {
       if (!isPopupOpen) {
         togglePopup(e, `${defaultPosition}Right`);
@@ -224,8 +240,10 @@ class DateWidgetComponent extends React.Component {
         removeClose(e);
       }
     }
+
     !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
   }
+
   handleSelectionRangeDetails(props) {
     const {
       timeZone,
@@ -242,9 +260,8 @@ class DateWidgetComponent extends React.Component {
       minute,
       noon
     } = this.state;
-    const selected = value === INVALID_DATE ? '' : value;
+    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
 
-    //New UI Changes
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear: false,
       value,
@@ -273,6 +290,7 @@ class DateWidgetComponent extends React.Component {
       newDateFormat
     });
   }
+
   handleGetDisplayText(props) {
     const {
       timeZone,
@@ -293,19 +311,24 @@ class DateWidgetComponent extends React.Component {
     } = dateFormatDetails;
     let displayText = '';
     const selected = value === INVALID_DATE ? '' : value;
+
     if (selected) {
       let format = newDateFormat,
-        convertedValue = getDateText(value, isDateTime, timeZone);
+          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
@@ -318,12 +341,14 @@ class DateWidgetComponent extends React.Component {
       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 ~~~~~
+      } // ~~~~~~~ handle date navigation in dateTime popup ~~~~~
+
+
       if (isAllowedDateType) {
         cantEditOnPopupOpen && this.handleDateType(e);
       }
@@ -339,6 +364,7 @@ class DateWidgetComponent extends React.Component {
       }
     }
   }
+
   getValueInputRef(el) {
     const {
       getRef
@@ -346,11 +372,13 @@ class DateWidgetComponent extends React.Component {
     this.valueInput = el;
     getRef && getRef(el);
   }
+
   handleFocus() {
     const isAllowedDateType = this.handleGetAllowedType();
     const {
       isMouseDown
     } = this;
+
     if (isAllowedDateType && !isMouseDown) {
       const {
         dateFormatSelection
@@ -377,11 +405,13 @@ class DateWidgetComponent extends React.Component {
         isFocused: true
       });
     }
+
     const {
       onFocus
     } = this.props;
     onFocus && onFocus();
   }
+
   handleBlur() {
     this.focusOrder = '';
     this.oldFocusOrder = '';
@@ -389,9 +419,7 @@ class DateWidgetComponent extends React.Component {
     this.keyDownAction = '';
     this.setState({
       isFocused: false
-    });
-
-    // const { valueInput } = this;
+    }); // const { valueInput } = this;
     // document.getSelection().removeAllRanges();
     // valueInput && valueInput.setSelectionRange(0, 0);
 
@@ -400,6 +428,7 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     onBlur && onBlur();
   }
+
   handleGetMethods(methods) {
     const {
       getMethods
@@ -414,15 +443,18 @@ class DateWidgetComponent extends React.Component {
     this.DateTimeYearViewToggle = toggleYearView;
     getMethods && getMethods(methods);
   }
+
   handleDateType(e) {
     const {
       keyCode,
       shiftKey
     } = e;
     const input = e.target;
+
     if (getIsSupportedKey(e)) {
       e.preventDefault();
     }
+
     const {
       isDateTime,
       timeZone,
@@ -482,6 +514,7 @@ class DateWidgetComponent extends React.Component {
     } = order[focusedOrder] || {};
     this.oldFocusOrder = this.focusOrder;
     this.focusOrder = focusedOrder;
+
     if (keyCode === 38 || keyCode === 40) {
       //up arrow && down arrow
       this.oldKeyDownAction = this.keyDownAction;
@@ -490,6 +523,7 @@ class DateWidgetComponent extends React.Component {
       this.oldKeyDownAction = this.keyDownAction;
       this.keyDownAction = 'valueTyped';
     }
+
     const focusedOrders = {
       focusOrder: this.focusOrder,
       oldFocusOrder: this.oldFocusOrder
@@ -499,13 +533,14 @@ class DateWidgetComponent extends React.Component {
       keyAction: this.keyDownAction
     };
     let newDay = selectedDay,
-      newMonth = selectedMonth,
-      newYear = selectedYear,
-      newHour = selectedHour,
-      newMinute = selectedMinute,
-      newNoon = selectedNoon,
-      isValueChanged = false,
-      newFocusOrder = focusedOrder;
+        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({
@@ -594,6 +629,7 @@ class DateWidgetComponent extends React.Component {
         noon: selectedNoon
       }, e, focusedOrders, keyActions));
     }
+
     if (isValueChanged) {
       const currentValue = {
         day: newDay,
@@ -603,6 +639,7 @@ class DateWidgetComponent extends React.Component {
         minute: newMinute,
         noon: newNoon
       };
+
       const errorCaseHandle = isEmptyValError => {
         this.setState(() => ({
           day: newDay,
@@ -618,12 +655,14 @@ class DateWidgetComponent extends React.Component {
         const newSelected = isEmptyValError ? '' : INVALID_DATE;
         value !== newSelected && onSelect && onSelect(newSelected, id);
       };
+
       const {
         isError,
         isEmptyValError
       } = getIsValidDate(currentValue, isDateTime, {
         is24Hour
       });
+
       if (isError) {
         errorCaseHandle(isEmptyValError);
       } else {
@@ -638,12 +677,14 @@ class DateWidgetComponent extends React.Component {
           isDateTime,
           is24Hour
         });
+
         if (selectedDateError) {
           if (errorType === 'MIN') {
             onError && onError(minErrorText, true);
           } else if (errorType === 'MAX') {
             onError && onError(maxErrorText, true);
           }
+
           errorCaseHandle();
         } else {
           this.setState(() => ({
@@ -662,9 +703,11 @@ class DateWidgetComponent extends React.Component {
       }
     }
   }
+
   handleSelection() {
     let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const isAllowedDateType = this.handleGetAllowedType();
+
     if (isAllowedDateType) {
       const {
         dateFormatSelection
@@ -675,18 +718,21 @@ class DateWidgetComponent extends React.Component {
       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 {
@@ -702,12 +748,14 @@ class DateWidgetComponent extends React.Component {
     } = 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 {
@@ -716,22 +764,27 @@ class DateWidgetComponent extends React.Component {
         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,
@@ -754,6 +807,7 @@ class DateWidgetComponent extends React.Component {
       timeZone,
       isPopupOpen
     } = this.props;
+
     if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
       const {
         day: selectedDay = '',
@@ -788,24 +842,30 @@ class DateWidgetComponent extends React.Component {
     } 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,
@@ -823,8 +883,7 @@ class DateWidgetComponent extends React.Component {
       stateFocusOrder: 0,
       isError: false
     });
-    value && onSelect && onSelect('', id);
-    // this.valueInput && this.valueInput.focus({ preventScroll: true });
+    value && onSelect && onSelect('', id); // this.valueInput && this.valueInput.focus({ preventScroll: true });
   }
 
   handleDateTimeClear(e) {
@@ -834,16 +893,19 @@ class DateWidgetComponent extends React.Component {
     } = 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 {
@@ -854,26 +916,27 @@ class DateWidgetComponent extends React.Component {
       } = dateFormatSelection;
       const {
         isPopupOpen
-      } = this.props;
+      } = this.props; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
 
-      // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
       const {
         type: focusedType = ''
       } = order[focusOrder] || {};
       const {
-        /*isActive,*/isYearView,
+        /*isActive,*/
+        isYearView,
         isMonthOpen: oldIsMonthOpen
       } = this.getDateTimeStateValues();
       const yearViewTypes = ['month', 'year'];
       const isMonthOpen = focusedType === 'month';
+
       if (isPopupOpen) {
         if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
           this.DateTimeYearViewToggle(true, isMonthOpen);
         } else if (yearViewTypes.indexOf(focusedType) === -1 && isYearView) {
           this.DateTimeYearViewToggle(false, false);
         }
-      }
-      // }
+      } // }
+
     }
   }
 
@@ -1009,14 +1072,14 @@ class DateWidgetComponent extends React.Component {
       onError: onError
     }));
   }
+
 }
+
 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
+DateWidget.propTypes = DateWidgetComponent.propTypes; // eslint-disable-next-line no-undef
 // if (__DOCS__) {
 //   DateWidgetComponent.docs = {
 //     componentGroup: 'Form Elements',

package/es/DateTime/DateWidget.module.css

@@ -14,17 +14,17 @@
 }
 .inputLine {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);
 }
 [dir=ltr] .inputLine {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 [dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/DaysRow.js

@@ -1,11 +1,13 @@
 /* eslint-disable react/forbid-component-props */
+
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
 import { DaysRow_propTypes } from './props/propTypes';
 /** ** CSS *** */
-import style from './DateTime.module.css';
 
+import style from './DateTime.module.css';
 /** ** Components *** */
+
 import { Container, Box } from '../Layout';
 export default class DaysRow extends PureComponent {
   render() {
@@ -24,5 +26,6 @@ export default class DaysRow extends PureComponent {
       "aria-label": dayName
     }, dayNamesShort[index])));
   }
+
 }
 DaysRow.propTypes = DaysRow_propTypes;

package/es/DateTime/Time.js

@@ -1,13 +1,15 @@
 /* eslint-disable react/forbid-component-props */
+
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
 import { Time_propTypes } from './props/propTypes';
 import { Time_defaultProps } from './props/defaultProps';
 /**** Components ****/
+
 import { Container, Box } from '../Layout';
 import Select from '../Select/Select';
-
 /** ** CSS *** */
+
 import style from './DateTime.module.css';
 export default class Time extends PureComponent {
   render() {
@@ -64,9 +66,11 @@ export default class Time extends PureComponent {
       needResponsive: needResponsive
     })) : null));
   }
+
 }
 Time.propTypes = Time_propTypes;
 Time.defaultProps = Time_defaultProps;
+
 class Hour extends React.PureComponent {
   render() {
     const {
@@ -97,7 +101,9 @@ class Hour extends React.PureComponent {
       listItemSize: "small"
     });
   }
+
 }
+
 class Minute extends React.PureComponent {
   render() {
     const {
@@ -128,7 +134,9 @@ class Minute extends React.PureComponent {
       listItemSize: "small"
     });
   }
+
 }
+
 class AmPm extends React.PureComponent {
   render() {
     const {
@@ -154,4 +162,5 @@ class AmPm extends React.PureComponent {
       listItemSize: "small"
     });
   }
+
 }