@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-252

package/es/DateTime/DateTimePopupFooter.js

@@ -1,13 +1,12 @@
 /* eslint-disable react/forbid-component-props */
-
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-/** ** Components *** */
 
+/** ** Components *** */
 import { Container } from '../Layout';
 import Button from '../Button/Button';
-/** ** CSS *** */
 
+/** ** CSS *** */
 import style from './DateTime.module.css';
 export default class DateTimePopupFooter extends PureComponent {
   render() {
@@ -39,5 +38,4 @@ export default class DateTimePopupFooter extends PureComponent {
       dataId: `${dataId}_clearBtn`
     }));
   }
-
 }

package/es/DateTime/DateTimePopupHeader.js

@@ -2,20 +2,18 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-/** ** Components *** */
 
+/** ** Components *** */
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
-/** ** CSS *** */
 
+/** ** CSS *** */
 import style from './DateTime.module.css';
-
 class Span extends React.PureComponent {
   constructor(props) {
     super(props);
     this.modifyCalendarChild = this.modifyCalendarChild.bind(this);
   }
-
   modifyCalendarChild() {
     const {
       modifyCalendar,
@@ -23,7 +21,6 @@ class Span extends React.PureComponent {
     } = this.props;
     modifyCalendar(type);
   }
-
   render() {
     const {
       dataTitle,
@@ -38,9 +35,7 @@ class Span extends React.PureComponent {
       onClick: this.modifyCalendarChild
     }, children);
   }
-
 }
-
 export default class DateTimePopupHeader extends PureComponent {
   render() {
     const {
@@ -86,5 +81,4 @@ export default class DateTimePopupHeader extends PureComponent {
       isBold: true
     }))) : null);
   }
-
 }

package/es/DateTime/DateWidget.js

@@ -3,18 +3,18 @@ import React from 'react';
 import { DateWidget_propTypes } from './props/propTypes';
 import { DateWidget_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
-/**** Components ****/
 
+/**** Components ****/
 import DateTime from './DateTime';
 import Popup from '../Popup/Popup';
 import Icon from '@zohodesk/icons/lib/Icon';
 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';
@@ -24,11 +24,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 {
@@ -72,12 +72,9 @@ class DateWidgetComponent extends React.Component {
     this.oldFocusOrder = '';
     this.focusOrder = '';
     this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'
-
     this.keyDownAction = ''; //'Arrow' || 'valueTyped'
-
     this.isMouseDown = false;
   }
-
   componentDidMount() {
     const {
       validation
@@ -85,11 +82,9 @@ class DateWidgetComponent extends React.Component {
     const {
       selected
     } = this.state;
-
     if (validation && validation.validate) {
       this.validateOnSelect(selected, this.props);
     }
-
     const {
       displayText,
       selected: newSelected
@@ -100,7 +95,6 @@ class DateWidgetComponent extends React.Component {
     });
     this.handleSelectionRangeDetails(this.props);
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       selected,
@@ -122,11 +116,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,
@@ -136,7 +128,6 @@ class DateWidgetComponent extends React.Component {
         selected,
         displayText
       });
-
       if (value !== INVALID_DATE) {
         this.setState({
           day: '',
@@ -150,28 +141,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});
@@ -186,21 +176,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'];
@@ -211,7 +198,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);
@@ -225,7 +211,6 @@ class DateWidgetComponent extends React.Component {
       onPassValidation && onPassValidation(value, targetTag);
     }
   }
-
   handleTogglePopup(e, isOpenOnly) {
     const {
       togglePopup,
@@ -234,7 +219,6 @@ class DateWidgetComponent extends React.Component {
       isPopupOpen,
       removeClose
     } = this.props;
-
     if (isOpenOnly) {
       if (!isPopupOpen) {
         togglePopup(e, `${defaultPosition}Right`);
@@ -242,10 +226,8 @@ class DateWidgetComponent extends React.Component {
         removeClose(e);
       }
     }
-
     !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
   }
-
   handleSelectionRangeDetails(props) {
     const {
       timeZone,
@@ -262,8 +244,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,
@@ -292,7 +275,6 @@ class DateWidgetComponent extends React.Component {
       newDateFormat
     });
   }
-
   handleGetDisplayText(props) {
     const {
       timeZone,
@@ -313,27 +295,22 @@ class DateWidgetComponent extends React.Component {
     } = dateFormatDetails;
     let displayText = '';
     const selected = value === INVALID_DATE ? '' : value;
-
     if (selected) {
       let format = newDateFormat,
-          convertedValue;
-
+        convertedValue;
       if (isDateTime) {
         convertedValue = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
         format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
       } else {
         convertedValue = datetime.toDate(value);
       }
-
       displayText = formatDate(convertedValue, format);
     }
-
     return {
       displayText,
       selected
     };
   }
-
   handleKeyDown(e) {
     const {
       keyCode
@@ -346,14 +323,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);
       }
@@ -369,7 +344,6 @@ class DateWidgetComponent extends React.Component {
       }
     }
   }
-
   getValueInputRef(el) {
     const {
       getRef
@@ -377,13 +351,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
@@ -410,13 +382,11 @@ class DateWidgetComponent extends React.Component {
         isFocused: true
       });
     }
-
     const {
       onFocus
     } = this.props;
     onFocus && onFocus();
   }
-
   handleBlur() {
     this.focusOrder = '';
     this.oldFocusOrder = '';
@@ -424,7 +394,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);
 
@@ -433,7 +405,6 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     onBlur && onBlur();
   }
-
   handleGetMethods(methods) {
     const {
       getMethods
@@ -448,18 +419,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,
@@ -519,7 +487,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;
@@ -528,7 +495,6 @@ class DateWidgetComponent extends React.Component {
       this.oldKeyDownAction = this.keyDownAction;
       this.keyDownAction = 'valueTyped';
     }
-
     const focusedOrders = {
       focusOrder: this.focusOrder,
       oldFocusOrder: this.oldFocusOrder
@@ -538,14 +504,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({
@@ -634,7 +599,6 @@ class DateWidgetComponent extends React.Component {
         noon: selectedNoon
       }, e, focusedOrders, keyActions));
     }
-
     if (isValueChanged) {
       const currentValue = {
         day: newDay,
@@ -644,7 +608,6 @@ class DateWidgetComponent extends React.Component {
         minute: newMinute,
         noon: newNoon
       };
-
       const errorCaseHandle = isEmptyValError => {
         this.setState(() => ({
           day: newDay,
@@ -660,14 +623,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 {
@@ -682,14 +643,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(() => ({
@@ -708,11 +667,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
@@ -723,21 +680,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 {
@@ -753,14 +707,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 {
@@ -769,27 +721,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,
@@ -812,7 +759,6 @@ class DateWidgetComponent extends React.Component {
       timeZone,
       isPopupOpen
     } = this.props;
-
     if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
       const {
         day: selectedDay = '',
@@ -847,30 +793,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,
@@ -893,7 +833,6 @@ class DateWidgetComponent extends React.Component {
       preventScroll: true
     });
   }
-
   handleDateTimeClear(e) {
     this.handleDateClear();
     const {
@@ -901,19 +840,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 {
@@ -924,27 +860,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,23 +1007,21 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId: dropBoxPortalId
     }));
   }
-
 }
-
 DateWidgetComponent.defaultProps = DateWidget_defaultProps;
 DateWidgetComponent.propTypes = DateWidget_propTypes;
 const DateWidget = Popup(DateWidgetComponent);
-DateWidget.defaultProps = DateWidgetComponent.defaultProps; // eslint-disable-next-line no-undef
+DateWidget.defaultProps = DateWidgetComponent.defaultProps;
 
+// eslint-disable-next-line no-undef
 if (false) {
   DateWidgetComponent.docs = {
     componentGroup: 'Form Elements',
     folderName: 'Style Guide',
     external: true,
     description: ' '
-  }; // eslint-disable-next-line react/forbid-foreign-prop-types
-
+  };
+  // eslint-disable-next-line react/forbid-foreign-prop-types
   DateWidget.propTypes = DateWidgetComponent.propTypes;
 }
-
 export default DateWidget;

package/es/DateTime/DateWidget.module.css

@@ -3,9 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.readOnly,
-.readOnly > input,
-.disabled {
+.readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
 .enabled {
@@ -17,10 +15,16 @@
 .inputLine {
   position: absolute;
   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;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-  transition: border var(--zd_transition2) linear 0s;
+}
+[dir=rtl] .inputLine {
+  right: 0;
+  left: 0;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);