@zohodesk/components 1.2.23 → 1.2.24

package/es/DateTime/DateTime.js

@@ -1,6 +1,6 @@
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: ['datesStr', 'dateContainer', 'dateRow', 'today', 'emptySpan', 'dropDown'] }] */
-/* eslint-disable react/forbid-component-props */
 
+/* eslint-disable react/forbid-component-props */
 import React from 'react';
 import { DateTime_propTypes } from './props/propTypes';
 import { DateTime_defaultProps } from './props/defaultProps';
@@ -18,11 +18,13 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { Box } from '../Layout';
 import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from './dateFormatUtils';
 import { getDateText } from './dateFormatUtils/dateFormat';
+
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   const HeadingText = `${monthNames[month] || ''} ${year}`;
   return HeadingText;
 }
+
 export default class DateTime extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -48,6 +50,7 @@ export default class DateTime extends React.PureComponent {
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
+
     this.ampmSuggestions = (() => {
       const ampmSuggestions = [];
       ampmText.forEach((text, index) => {
@@ -65,24 +68,29 @@ export default class DateTime extends React.PureComponent {
       });
       return ampmSuggestions;
     })();
+
     const initalStateObj = this.getStateFromProps(props);
     this.state = Object.assign({}, initalStateObj, {
       isYearView: false,
       isMonthOpen: false
     });
   }
+
   componentDidMount() {
     this.handleExposeMethods(true);
   }
+
   componentDidUpdate(prevProps) {
     const {
       value,
       isActive,
       is24Hour
     } = this.props;
+
     if (prevProps.value !== value || is24Hour !== prevProps.is24Hour) {
       this.setState(this.getStateFromProps(this.props));
     }
+
     if (prevProps.isActive !== isActive && !isActive) {
       this.setState({
         isYearView: false,
@@ -90,9 +98,11 @@ export default class DateTime extends React.PureComponent {
       });
     }
   }
+
   componentWillUnmount() {
     this.handleExposeMethods(false);
   }
+
   getStateFromProps(props) {
     let date, month, year, hours, mins, amPm;
     let {
@@ -103,17 +113,20 @@ export default class DateTime extends React.PureComponent {
       isDateTimeField,
       is24Hour
     } = props; //defaultTime --> 12:00:PM
+
     defaultTime = needDefaultTime ? defaultTime ? defaultTime : '12:00:PM' : '';
     let defaultHour, defaultMin, defaultAmPm;
     let todayObj = new Date();
     let todayDate = todayObj.getDate();
     let todayMonth = todayObj.getMonth();
     let todayYear = todayObj.getFullYear();
+
     if (!value) {
       [defaultHour, defaultMin, defaultAmPm] = defaultTime ? defaultTime.split(':') : [];
       defaultHour = parseInt(defaultHour);
       defaultMin = parseInt(defaultMin);
     }
+
     const dateObj = getDateText(value, isDateTimeField, timeZone);
     date = dateObj.getDate();
     month = dateObj.getMonth();
@@ -135,8 +148,10 @@ export default class DateTime extends React.PureComponent {
       todayYear
     };
   }
+
   getHours(hoursParam, is24Hour) {
     let hours = hoursParam;
+
     if (!is24Hour) {
       if (hours === 0) {
         hours = 12;
@@ -144,9 +159,11 @@ export default class DateTime extends React.PureComponent {
         hours -= 12;
       }
     }
+
     hours = addZeroIfNeeded(hours);
     return hours;
   }
+
   handleGetSelectedDate() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -166,29 +183,35 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     } = selectedInfo;
+
     if (!is24Hour) {
       if (parseInt(hours) === 12) {
         hours = amPm === 'AM' ? 0 : 12;
       }
+
       if (amPm === 'PM') {
         if (hours < 12) {
           hours = parseInt(hours) + 12;
         }
       }
     }
+
     let minInMillis = min ? datetime.millis(min) : null,
-      maxInMillis = max ? datetime.millis(max) : null,
-      selectedInMillis,
-      selectedValue = '',
-      formattedValue;
+        maxInMillis = max ? datetime.millis(max) : null,
+        selectedInMillis,
+        selectedValue = '',
+        formattedValue;
     let currentDate = new Date();
     let sec = currentDate.getSeconds();
     let milliSec = currentDate.getMilliseconds();
+
     if (isDateTimeField || customDateFormat) {
       const dateArgs = [year, month, date, hours, mins];
+
       if (customDateFormat) {
         dateArgs.push(sec, milliSec);
       }
+
       selectedInMillis = timeZone ? datetime.tz.tzToUtc(Date.UTC(...dateArgs), timeZone) : Date.UTC(...dateArgs);
       selectedValue = datetime.ISO(selectedInMillis);
       formattedValue = formatDate(new Date(...dateArgs), customDateFormat == null ? is24Hour ? `${dateFormat} HH:mm:ss` : `${dateFormat} hh:mm:ss A` : `${customDateFormat}`);
@@ -197,8 +220,10 @@ export default class DateTime extends React.PureComponent {
       selectedValue = formatDate(new Date(year, month, date), 'YYYY-MM-DD');
       formattedValue = formatDate(new Date(year, month, date), dateFormat);
     }
+
     let isError = false;
     let errorType = '';
+
     if (minInMillis && minInMillis > selectedInMillis) {
       isError = true;
       errorType = 'MIN';
@@ -206,6 +231,7 @@ export default class DateTime extends React.PureComponent {
       isError = true;
       errorType = 'MAX';
     }
+
     return {
       isError,
       errorType,
@@ -213,6 +239,7 @@ export default class DateTime extends React.PureComponent {
       formattedValue
     };
   }
+
   handleSelect(e) {
     e && e.preventDefault();
     const {
@@ -242,6 +269,7 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
+
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -252,6 +280,7 @@ export default class DateTime extends React.PureComponent {
       onSelect(selectedValue, formattedValue, e);
     }
   }
+
   handleChange() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -284,6 +313,7 @@ export default class DateTime extends React.PureComponent {
       mins: getIsEmptyValue(mins) ? oldMins : mins,
       amPm: getIsEmptyValue(amPm) ? oldAMPM : amPm
     };
+
     if (onChange) {
       const {
         isError,
@@ -291,6 +321,7 @@ export default class DateTime extends React.PureComponent {
         selectedValue,
         formattedValue
       } = this.handleGetSelectedDate(newSelectedInfo);
+
       if (isError) {
         if (errorType === 'MIN') {
           onError && onError(minErrorText, true);
@@ -305,17 +336,20 @@ export default class DateTime extends React.PureComponent {
       this.setState(newSelectedInfo);
     }
   }
+
   handleClear(e) {
     const {
       onSelect,
       onClear
     } = this.props;
+
     if (onClear) {
       onClear(e);
     } else {
       onSelect('', '', e);
     }
   }
+
   dateSelect(date, month, year, e) {
     this.handleChange({
       date,
@@ -347,6 +381,7 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
+
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -357,26 +392,31 @@ export default class DateTime extends React.PureComponent {
       onDateSelect && onDateSelect(selectedValue, formattedValue, e);
     }
   }
+
   hoursSelect(hours) {
     this.handleChange({
       hours
     });
   }
+
   minutesSelect(mins) {
     this.handleChange({
       mins
     });
   }
+
   amPmSelect(amPm) {
     this.handleChange({
       amPm
     });
   }
-
   /*global closeGroupPopups*/
+
+
   closePopup() {
     closeGroupPopups('calender');
   }
+
   handleCalendarNavigation(type, selectedInfo) {
     const {
       year: stateYear,
@@ -386,10 +426,12 @@ export default class DateTime extends React.PureComponent {
     let date = stateDate;
     let month = stateMonth;
     const year = stateYear;
+
     const getDate = (month, year) => {
       const monthEnd = getMonthEnd(month, year);
       return monthEnd >= parseInt(date) ? date : monthEnd;
     };
+
     const modifyCalendarRecursion = recursionType => {
       if (recursionType === 'nextYear') {
         //Click next year icon
@@ -413,6 +455,7 @@ export default class DateTime extends React.PureComponent {
           month = 0;
           return modifyCalendarRecursion('nextYear');
         }
+
         const newMonth = month + 1;
         return {
           date: getDate(newMonth, year),
@@ -425,6 +468,7 @@ export default class DateTime extends React.PureComponent {
           month = 11;
           return modifyCalendarRecursion('previousYear');
         }
+
         const newMonth = month - 1;
         return {
           date: getDate(newMonth, year),
@@ -433,10 +477,12 @@ export default class DateTime extends React.PureComponent {
         };
       } else if (recursionType === 'nextDate') {
         const monthEnd = getMonthEnd(month, year);
+
         if (date === monthEnd) {
           date = 1;
           return modifyCalendarRecursion('nextMonth');
         }
+
         const newDate = parseInt(date) + 1;
         return {
           date: newDate,
@@ -448,6 +494,7 @@ export default class DateTime extends React.PureComponent {
           date = month === 0 ? getMonthEnd(11, year - 1) : getMonthEnd(month - 1, year);
           return modifyCalendarRecursion('previousMonth');
         }
+
         const newDate = parseInt(date) - 1;
         return {
           date: newDate,
@@ -456,8 +503,10 @@ export default class DateTime extends React.PureComponent {
         };
       }
     };
+
     return modifyCalendarRecursion(type);
   }
+
   modifyCalendar(type) {
     const {
       year,
@@ -470,9 +519,11 @@ export default class DateTime extends React.PureComponent {
       date
     }));
   }
+
   handleDateReset() {
     this.setState(this.getStateFromProps(this.props));
   }
+
   handleGetStateValues() {
     const {
       isActive
@@ -487,17 +538,20 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen
     };
   }
+
   handleYearViewToggle(isYearOpen, isMonthOpen) {
     this.setState({
       isYearView: isYearOpen,
       isMonthOpen
     });
   }
+
   handleExposeMethods(isMount) {
     const {
       getMethods
     } = this.props;
     let methods = {};
+
     if (isMount) {
       methods = {
         resetLocalDate: this.handleDateReset,
@@ -511,8 +565,10 @@ export default class DateTime extends React.PureComponent {
         toggleYearView: null
       };
     }
+
     getMethods && getMethods(methods);
   }
+
   handleOpenYearView() {
     const {
       isYearView,
@@ -523,12 +579,14 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: !isMonthOpen
     });
   }
+
   handleSelectYear(year) {
     this.setState({
       year,
       isMonthOpen: true
     });
   }
+
   handleSelectMonth(month) {
     const {
       date,
@@ -536,14 +594,17 @@ export default class DateTime extends React.PureComponent {
     } = this.state;
     const monthEnd = getMonthEnd(month, year);
     let newDate = date;
+
     if (date > monthEnd) {
       newDate = monthEnd;
     }
+
     this.setState({
       month,
       date: newDate
     });
   }
+
   handleSelectMonthViaYearView(month) {
     this.handleSelectMonth(month);
     this.setState({
@@ -551,6 +612,7 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
+
   render() {
     const {
       date,
@@ -688,6 +750,7 @@ export default class DateTime extends React.PureComponent {
       portalId: dropBoxPortalId
     }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }
+
 }
 DateTime.propTypes = DateTime_propTypes;
 DateTime.defaultProps = DateTime_defaultProps;

package/es/DateTime/DateTime.module.css

@@ -3,24 +3,24 @@
 }
 
 [dir=ltr] .boxPadding {
-  padding-right: 19px;
-  padding-left: 19px;
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
 }
 
 [dir=rtl] .boxPadding {
-  padding-left: 19px;
-  padding-right: 19px;
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
 }
 
 .container {
-  font-size: 16px;
+  font-size: var(--zd_font_size16) ;
   composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
 }
 
 .header {
-  min-height: 36px;
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
@@ -33,19 +33,19 @@
 }
 
 .grid {
-  width: 28px;
-  height: 28px;
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
   line-height: 1.3846;
   /* css:theme-validation:ignore */
   text-align: center;
-  padding: 4px 0;
+  padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
 }
 
 .thArrow,
 .datesStr {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
@@ -63,15 +63,15 @@
 }
 
 [dir=ltr] .navigation {
-  margin-left: 2px;
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .navigation {
-  margin-right: 2px;
+  margin-right: var(--zd_size2) ;
 }
 
 .thMonYear {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   line-height: 1.8462;
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
@@ -79,8 +79,8 @@
 }
 
 .dateContainer {
-  margin: 0 19px 0 19px;
-  padding: 6px 0 10px 0;
+  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
+  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
 }
 
 .separator {
@@ -88,29 +88,29 @@
 }
 
 .days {
-  min-height: 36px;
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: 7px;
+  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
   composes: dotted from '../common/common.module.css';
-  font-size: 10px;
+  font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
-  width: 31px;
+  width: var(--zd_size31) ;
 }
 
 .dateRow {
-  height: 28px;
+  height: var(--zd_size28) ;
   composes: alignBetween from '../common/common.module.css';
-  margin: 1px 0 5px;
+  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 ;
 }
 
 .sunday,
@@ -163,24 +163,24 @@ cursor: no-drop;
 
 
 .timesection {
-  padding-top: 5px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size5) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .dropDownContainer {
-  padding: 0 5px;
+  padding: 0 var(--zd_size5) ;
 }
 
 .dropDown {
-  width: 60px;
+  width: var(--zd_size60) ;
   display: inline-block;
   position: relative;
-  margin: 0 4px;
+  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: 10px;
-  padding-bottom: 12px;
+  margin-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size12) ;
 }
 
 .timesection,
@@ -190,7 +190,7 @@ cursor: no-drop;
 
 .space {
   display: inline-block;
-  width: 15px;
+  width: var(--zd_size15) ;
 }
 
 .downArrow {
@@ -198,11 +198,11 @@ cursor: no-drop;
 }
 
 [dir=ltr] .downArrow {
-  margin-left: 2px;
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .downArrow {
-  margin-right: 2px;
+  margin-right: var(--zd_size2) ;
 }
 
 .dateText {
@@ -215,27 +215,27 @@ cursor: no-drop;
 
 .text {
   composes: boxPadding;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
   display: block;
-  margin-top: 14px;
+  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 0 ;
+  width: 100% ;
+  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .yearContainer {
-  right: 0;
+  right: 0 ;
 }
 
 .subContainer {
@@ -243,7 +243,7 @@ cursor: no-drop;
 }
 
 .dropBox {
-  width: 100%;
+  width: 100% ;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/es/DateTime/DateTimePopupFooter.js

@@ -1,13 +1,15 @@
 /* eslint-disable react/forbid-component-props */
+
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
 import { DateTimePopupFooter_propTypes } from './props/propTypes';
 import { DateTimePopupFooter_defaultProps } from './props/defaultProps';
 /** ** Components *** */
+
 import { Container } from '../Layout';
 import Button from '../Button/Button';
-
 /** ** CSS *** */
+
 import style from './DateTime.module.css';
 export default class DateTimePopupFooter extends PureComponent {
   render() {
@@ -39,6 +41,7 @@ export default class DateTimePopupFooter extends PureComponent {
       dataId: `${dataId}_clearBtn`
     }));
   }
+
 }
 DateTimePopupFooter.propTypes = DateTimePopupFooter_propTypes;
 DateTimePopupFooter.defaultProps = DateTimePopupFooter_defaultProps;

package/es/DateTime/DateTimePopupHeader.js

@@ -3,19 +3,21 @@
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
 import { DateTimePopupHeader_propTypes } from './props/propTypes';
-
 /** ** Components *** */
+
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
-
 /** ** 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,6 +25,7 @@ class Span extends React.PureComponent {
     } = this.props;
     modifyCalendar(type);
   }
+
   render() {
     const {
       dataTitle,
@@ -40,7 +43,9 @@ class Span extends React.PureComponent {
       tabindex: "0"
     }, children);
   }
+
 }
+
 export default class DateTimePopupHeader extends PureComponent {
   render() {
     const {
@@ -95,5 +100,6 @@ export default class DateTimePopupHeader extends PureComponent {
       isBold: true
     }))) : null);
   }
+
 }
 DateTimePopupHeader.propTypes = DateTimePopupHeader_propTypes;