@zohodesk/components 1.0.0-temp-79 → 1.0.0-temp-81

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 */
+
 import React from 'react';
 import { DateTime_propTypes } from './props/propTypes';
 import { DateTime_defaultProps } from './props/defaultProps';
@@ -18,13 +18,11 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import { Box } from '../Layout';
 import { getHourDetails } from './dateFormatUtils';
-
 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);
@@ -54,29 +52,22 @@ export default class DateTime extends React.PureComponent {
       startPoint: hourStart,
       endPoint: hourEnd
     } = getHourDetails(props.is24Hour);
-
     this.hourSuggestions = (() => {
       const hourArr = [];
-
       for (let hour = hourStart; hour <= hourEnd; hour++) {
         const htxt = hour < 10 ? `0${hour}` : `${hour}`;
         hourArr.push(htxt);
       }
-
       return hourArr;
     })();
-
     this.minSuggestions = (() => {
       const minArr = [];
-
       for (let minute = 0; minute <= 59; minute++) {
         const mtxt = minute < 10 ? `0${minute}` : `${minute}`;
         minArr.push(mtxt);
       }
-
       return minArr;
     })();
-
     this.ampmSuggestions = (() => {
       const ampmSuggestions = [];
       ampmText.forEach((text, index) => {
@@ -94,29 +85,24 @@ 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,
@@ -124,11 +110,9 @@ export default class DateTime extends React.PureComponent {
       });
     }
   }
-
   componentWillUnmount() {
     this.handleExposeMethods(false);
   }
-
   getStateFromProps(props) {
     let date, month, year, hours, mins, amPm;
     let {
@@ -139,16 +123,17 @@ 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 = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : new Date();
     date = dateObj.getDate();
     month = dateObj.getMonth();
@@ -164,13 +149,14 @@ export default class DateTime extends React.PureComponent {
       year,
       mins,
       hours,
-      amPm
+      amPm,
+      todayDate,
+      todayMonth,
+      todayYear
     };
   }
-
   getHours(hoursParam, is24Hour) {
     let hours = hoursParam;
-
     if (!is24Hour) {
       if (hours === 0) {
         hours = 12;
@@ -178,11 +164,9 @@ export default class DateTime extends React.PureComponent {
         hours -= 12;
       }
     }
-
     hours = hours < 10 ? `0${hours}` : hours;
     return hours;
   }
-
   handleGetSelectedDate() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -201,25 +185,21 @@ 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;
     if (isDateTimeField) {
       selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hours, mins), timeZone);
       selectedValue = datetime.ISO(selectedInMillis);
@@ -229,10 +209,8 @@ 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';
@@ -240,7 +218,6 @@ export default class DateTime extends React.PureComponent {
       isError = true;
       errorType = 'MAX';
     }
-
     return {
       isError,
       errorType,
@@ -248,7 +225,6 @@ export default class DateTime extends React.PureComponent {
       formattedValue
     };
   }
-
   handleSelect(e) {
     e && e.preventDefault();
     const {
@@ -278,7 +254,6 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
-
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -289,7 +264,6 @@ export default class DateTime extends React.PureComponent {
       onSelect(selectedValue, formattedValue, e);
     }
   }
-
   handleChange() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -322,7 +296,6 @@ export default class DateTime extends React.PureComponent {
       mins: getIsEmptyValue(mins) ? oldMins : mins,
       amPm: getIsEmptyValue(amPm) ? oldAMPM : amPm
     };
-
     if (onChange) {
       const {
         isError,
@@ -330,7 +303,6 @@ export default class DateTime extends React.PureComponent {
         selectedValue,
         formattedValue
       } = this.handleGetSelectedDate(newSelectedInfo);
-
       if (isError) {
         if (errorType === 'MIN') {
           onError && onError(minErrorText, true);
@@ -345,20 +317,17 @@ 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,
@@ -390,7 +359,6 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
-
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -401,31 +369,26 @@ 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*/
-
 
+  /*global closeGroupPopups*/
   closePopup() {
     closeGroupPopups('calender');
   }
-
   handleCalendarNavigation(type, selectedInfo) {
     const {
       year: stateYear,
@@ -435,12 +398,10 @@ 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
@@ -464,7 +425,6 @@ export default class DateTime extends React.PureComponent {
           month = 0;
           return modifyCalendarRecursion('nextYear');
         }
-
         const newMonth = month + 1;
         return {
           date: getDate(newMonth, year),
@@ -477,7 +437,6 @@ export default class DateTime extends React.PureComponent {
           month = 11;
           return modifyCalendarRecursion('previousYear');
         }
-
         const newMonth = month - 1;
         return {
           date: getDate(newMonth, year),
@@ -486,12 +445,10 @@ 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,
@@ -503,7 +460,6 @@ 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,
@@ -512,10 +468,8 @@ export default class DateTime extends React.PureComponent {
         };
       }
     };
-
     return modifyCalendarRecursion(type);
   }
-
   modifyCalendar(type) {
     const {
       year,
@@ -528,11 +482,9 @@ export default class DateTime extends React.PureComponent {
       date
     }));
   }
-
   handleDateReset() {
     this.setState(this.getStateFromProps(this.props));
   }
-
   handleGetStateValues() {
     const {
       isActive
@@ -547,20 +499,17 @@ 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,
@@ -574,10 +523,8 @@ export default class DateTime extends React.PureComponent {
         toggleYearView: null
       };
     }
-
     getMethods && getMethods(methods);
   }
-
   handleOpenYearView() {
     const {
       isYearView,
@@ -588,14 +535,12 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: !isMonthOpen
     });
   }
-
   handleSelectYear(year) {
     this.setState({
       year,
       isMonthOpen: true
     });
   }
-
   handleSelectMonth(month) {
     const {
       date,
@@ -603,17 +548,14 @@ 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({
@@ -621,7 +563,6 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -632,7 +573,6 @@ export default class DateTime extends React.PureComponent {
       }])
     };
   }
-
   render() {
     const {
       date,
@@ -642,7 +582,10 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm,
       isYearView,
-      isMonthOpen
+      isMonthOpen,
+      todayDate,
+      todayMonth,
+      todayYear
     } = this.state;
     const {
       isDateTimeField,
@@ -703,7 +646,10 @@ export default class DateTime extends React.PureComponent {
       month: month,
       onSelect: this.dateSelect,
       dayNames: dayNames,
-      dayNamesShort: dayNamesShort
+      dayNamesShort: dayNamesShort,
+      todayDate: todayDate,
+      todayMonth: todayMonth,
+      todayYear: todayYear
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,
@@ -770,7 +716,6 @@ export default class DateTime extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(Box, null, childEle));
     }) : null;
   }
-
 }
 DateTime.propTypes = DateTime_propTypes;
 DateTime.defaultProps = DateTime_defaultProps;

package/es/DateTime/DateTime.module.css

@@ -1,158 +1,230 @@
 .semibold {
   font-family: var(--zd_semibold);
 }
-.boxPadding {
+
+[dir=ltr] .boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
 }
+
+[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19);
+}
+
 .container {
-  border-radius: 3px;
-  background-color: var(--zdt_datetime_default_bg);
   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: var(--zd_size36);
+  composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
-  composes: boxPadding;
 }
 
 .datesStr {
   font-family: var(--zd_regular);
 }
+
 .grid {
   width: var(--zd_size28);
   height: var(--zd_size28);
-  line-height: var(--zd_size20);
+  line-height: var(--zd_size18);
   text-align: center;
   padding: var(--zd_size4) 0;
   border-radius: 50%;
+  border: 1px solid transparent;
 }
+
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
   color: var(--zdt_datetime_datestr_text);
+}
+
+.thArrow, .datesStr {
   cursor: pointer;
 }
+
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
+}
+
+.thArrow:hover, .datesStr:hover {
   background: var(--zdt_datetime_datestr_hover_bg);
 }
 
-.navigation {
+[dir=ltr] .navigation {
   margin-left: var(--zd_size2);
 }
+
+[dir=rtl] .navigation {
+  margin-right: var(--zd_size2);
+}
+
 .thMonYear {
   font-size: var(--zd_font_size13);
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
 }
+
 .dateContainer {
   margin: 0 var(--zd_size19) 0 var(--zd_size19);
   padding: var(--zd_size6) 0 var(--zd_size10) 0;
 }
+
 .separator {
   border-bottom: 1px dotted var(--zdt_datetime_separator_border);
 }
+
 .days {
   min-height: var(--zd_size36);
-  padding-top: var(--zd_size7);
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
+  padding-top: var(--zd_size7);
 }
+
 .daysStr {
   font-size: var(--zd_font_size10);
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
 }
+
 .dateRow {
   height: var(--zd_size28);
-  margin: var(--zd_size1) 0 var(--zd_size5);
   composes: alignBetween from '../common/common.module.css';
+  margin: var(--zd_size1) 0 var(--zd_size5);
 }
+
 .dateRow:last-child {
   margin-bottom: 0;
 }
+
 .sunday,
 .sunday:hover,
 .invalidDate.sunday:hover {
   color: var(--zdt_datetime_invalid_hover_text);
 }
+
 .invalidDate {
   color: var(--zdt_datetime_invalid_text);
 }
+
 .invalidDate.sunday {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
-.today,
-.today:hover {
-  background-color: var(--zdt_datetime_today_bg);
+.active,
+.active:hover,
+.active.today,
+.active:hover.today:hover {
   color: var(--zdt_datetime_today_text);
+}
+
+.active, .active:hover, .active.today, .active:hover.today:hover {
+  background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
 
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
 .timesection {
   padding-top: var(--zd_size5);
   padding-bottom: var(--zd_size10);
 }
+
 .dropDownContainer {
   padding: 0 var(--zd_size5);
 }
+
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
-  margin: 0 var(--zd_size4);
   position: relative;
+  margin: 0 var(--zd_size4);
 }
+
 .footer {
   margin-top: var(--zd_size10);
   padding-bottom: var(--zd_size12);
 }
+
 .timesection,
 .footer {
   composes: boxPadding;
 }
+
 .space {
   display: inline-block;
   width: var(--zd_size15);
 }
 
 .downArrow {
-  margin-left: var(--zd_size2);
   color: var(--zdt_datetime_daystr_text);
 }
+
+[dir=ltr] .downArrow {
+  margin-left: var(--zd_size2);
+}
+
+[dir=rtl] .downArrow {
+  margin-right: var(--zd_size2);
+}
+
 .dateText {
   cursor: pointer;
 }
+
 .dateText:hover .downArrow {
   color: var(--zdt_datetime_datestr_text);
 }
+
 .text {
   composes: boxPadding;
   font-size: var(--zd_font_size11);
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
-  margin-top: var(--zd_size14);
   composes: semibold;
   display: block;
+  margin-top: var(--zd_size14);
 }
+
 .yearContainer {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
 }
+
+[dir=ltr] .yearContainer {
+  left: 0;
+}
+
+[dir=rtl] .yearContainer {
+  right: 0;
+}
+
 .subContainer {
   position: relative;
 }
+
 .dropBox {
   width: 100%;
   border-radius: 3px;