@zohodesk/components 1.2.21 → 1.2.23

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 ****/
 
+/**** 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 ****/
 
+/**** CSS ****/
 import style from './DateWidget.module.css';
-/**** Methods ****/
 
+/**** 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 ** */
 
+/** * Constants ** */
 import { INVALID_DATE, i18nShortMonths, i18nMonths } from './constants';
-/* eslint-disable react/no-unused-prop-types */
 
+/* eslint-disable react/no-unused-prop-types */
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
 
 class DateWidgetComponent extends React.Component {
@@ -71,12 +71,9 @@ class DateWidgetComponent extends React.Component {
     this.oldFocusOrder = '';
     this.focusOrder = '';
     this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'
-
     this.keyDownAction = ''; //'Arrow' || 'valueTyped'
-
     this.isMouseDown = false;
   }
-
   componentDidMount() {
     const {
       validation
@@ -84,11 +81,9 @@ class DateWidgetComponent extends React.Component {
     const {
       selected
     } = this.state;
-
     if (validation && validation.validate) {
       this.validateOnSelect(selected, this.props);
     }
-
     const {
       displayText,
       selected: newSelected
@@ -99,7 +94,6 @@ class DateWidgetComponent extends React.Component {
     });
     this.handleSelectionRangeDetails(this.props);
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       selected,
@@ -121,11 +115,9 @@ 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,
@@ -135,7 +127,6 @@ class DateWidgetComponent extends React.Component {
         selected,
         displayText
       });
-
       if (value !== INVALID_DATE) {
         this.setState({
           day: '',
@@ -149,28 +140,27 @@ 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});
@@ -185,21 +175,18 @@ 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'];
@@ -210,7 +197,6 @@ 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);
@@ -224,7 +210,6 @@ class DateWidgetComponent extends React.Component {
       onPassValidation && onPassValidation(value, targetTag);
     }
   }
-
   handleTogglePopup(e, isOpenOnly) {
     const {
       togglePopup,
@@ -232,7 +217,6 @@ class DateWidgetComponent extends React.Component {
       isPopupOpen,
       removeClose
     } = this.props;
-
     if (isOpenOnly) {
       if (!isPopupOpen) {
         togglePopup(e, `${defaultPosition}Right`);
@@ -240,10 +224,8 @@ class DateWidgetComponent extends React.Component {
         removeClose(e);
       }
     }
-
     !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
   }
-
   handleSelectionRangeDetails(props) {
     const {
       timeZone,
@@ -260,8 +242,9 @@ class DateWidgetComponent extends React.Component {
       minute,
       noon
     } = this.state;
-    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
+    const selected = value === INVALID_DATE ? '' : value;
 
+    //New UI Changes
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear: false,
       value,
@@ -290,7 +273,6 @@ class DateWidgetComponent extends React.Component {
       newDateFormat
     });
   }
-
   handleGetDisplayText(props) {
     const {
       timeZone,
@@ -311,24 +293,19 @@ 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
@@ -341,14 +318,12 @@ 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);
       }
@@ -364,7 +339,6 @@ class DateWidgetComponent extends React.Component {
       }
     }
   }
-
   getValueInputRef(el) {
     const {
       getRef
@@ -372,13 +346,11 @@ class DateWidgetComponent extends React.Component {
     this.valueInput = el;
     getRef && getRef(el);
   }
-
   handleFocus() {
     const isAllowedDateType = this.handleGetAllowedType();
     const {
       isMouseDown
     } = this;
-
     if (isAllowedDateType && !isMouseDown) {
       const {
         dateFormatSelection
@@ -405,13 +377,11 @@ class DateWidgetComponent extends React.Component {
         isFocused: true
       });
     }
-
     const {
       onFocus
     } = this.props;
     onFocus && onFocus();
   }
-
   handleBlur() {
     this.focusOrder = '';
     this.oldFocusOrder = '';
@@ -419,7 +389,9 @@ 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);
 
@@ -428,7 +400,6 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     onBlur && onBlur();
   }
-
   handleGetMethods(methods) {
     const {
       getMethods
@@ -443,18 +414,15 @@ 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,
@@ -514,7 +482,6 @@ 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;
@@ -523,7 +490,6 @@ class DateWidgetComponent extends React.Component {
       this.oldKeyDownAction = this.keyDownAction;
       this.keyDownAction = 'valueTyped';
     }
-
     const focusedOrders = {
       focusOrder: this.focusOrder,
       oldFocusOrder: this.oldFocusOrder
@@ -533,14 +499,13 @@ 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({
@@ -629,7 +594,6 @@ class DateWidgetComponent extends React.Component {
         noon: selectedNoon
       }, e, focusedOrders, keyActions));
     }
-
     if (isValueChanged) {
       const currentValue = {
         day: newDay,
@@ -639,7 +603,6 @@ class DateWidgetComponent extends React.Component {
         minute: newMinute,
         noon: newNoon
       };
-
       const errorCaseHandle = isEmptyValError => {
         this.setState(() => ({
           day: newDay,
@@ -655,14 +618,12 @@ 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 {
@@ -677,14 +638,12 @@ 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(() => ({
@@ -703,11 +662,9 @@ 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
@@ -718,21 +675,18 @@ 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 {
@@ -748,14 +702,12 @@ 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 {
@@ -764,27 +716,22 @@ 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,
@@ -807,7 +754,6 @@ class DateWidgetComponent extends React.Component {
       timeZone,
       isPopupOpen
     } = this.props;
-
     if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
       const {
         day: selectedDay = '',
@@ -842,30 +788,24 @@ 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,
@@ -883,7 +823,8 @@ 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) {
@@ -893,19 +834,16 @@ 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 {
@@ -916,27 +854,26 @@ class DateWidgetComponent extends React.Component {
       } = dateFormatSelection;
       const {
         isPopupOpen
-      } = this.props; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
+      } = this.props;
 
+      // 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);
         }
-      } // }
-
+      }
+      // }
     }
   }
 
@@ -1072,14 +1009,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,13 +1,11 @@
 /* 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';
-/** ** Components *** */
 
+/** ** Components *** */
 import { Container, Box } from '../Layout';
 export default class DaysRow extends PureComponent {
   render() {
@@ -26,6 +24,5 @@ export default class DaysRow extends PureComponent {
       "aria-label": dayName
     }, dayNamesShort[index])));
   }
-
 }
 DaysRow.propTypes = DaysRow_propTypes;

package/es/DateTime/Time.js

@@ -1,15 +1,13 @@
 /* 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 *** */
 
+/** ** CSS *** */
 import style from './DateTime.module.css';
 export default class Time extends PureComponent {
   render() {
@@ -66,11 +64,9 @@ export default class Time extends PureComponent {
       needResponsive: needResponsive
     })) : null));
   }
-
 }
 Time.propTypes = Time_propTypes;
 Time.defaultProps = Time_defaultProps;
-
 class Hour extends React.PureComponent {
   render() {
     const {
@@ -101,9 +97,7 @@ class Hour extends React.PureComponent {
       listItemSize: "small"
     });
   }
-
 }
-
 class Minute extends React.PureComponent {
   render() {
     const {
@@ -134,9 +128,7 @@ class Minute extends React.PureComponent {
       listItemSize: "small"
     });
   }
-
 }
-
 class AmPm extends React.PureComponent {
   render() {
     const {
@@ -162,5 +154,4 @@ class AmPm extends React.PureComponent {
       listItemSize: "small"
     });
   }
-
 }