@zohodesk/components 1.0.0-test-252 → 1.1.0

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';
@@ -15,14 +15,15 @@ import { formatDate, getMonthEnd } from '../utils/datetime/common';
 import { getIsEmptyValue } from '../utils/Common';
 import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import { Box } from '../Layout';
-import { getHourDetails } from './dateFormatUtils';
+import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } 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);
@@ -45,29 +46,11 @@ export default class DateTime extends React.PureComponent {
     this.handleSelectMonthViaYearView = this.handleSelectMonthViaYearView.bind(this);
     this.handleGetStateValues = this.handleGetStateValues.bind(this);
     this.handleYearViewToggle = this.handleYearViewToggle.bind(this);
+    this.getInitialDate = this.getInitialDate.bind(this);
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
-    const {
-      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) => {
@@ -85,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,
@@ -110,9 +98,38 @@ export default class DateTime extends React.PureComponent {
       });
     }
   }
+
   componentWillUnmount() {
     this.handleExposeMethods(false);
   }
+
+  getInitialDate(value) {
+    let timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    let isDateTime = arguments.length > 2 ? arguments[2] : undefined;
+    let result = null;
+
+    if (isDateTime) {
+      if (timeZone && value) {
+        result = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
+      } else {
+        value = value ? value.replace('Z', '') : null;
+        result = value ? new Date(value) : new Date();
+      }
+    } else {
+      if (value) {
+        if (timeZone) {
+          result = datetime.toDate(value);
+        } else {
+          result = new Date(value);
+        }
+      } else {
+        result = new Date();
+      }
+    }
+
+    return result;
+  }
+
   getStateFromProps(props) {
     let date, month, year, hours, mins, amPm;
     let {
@@ -123,24 +140,27 @@ 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();
+
+    const dateObj = this.getInitialDate(value, timeZone, isDateTimeField);
     date = dateObj.getDate();
     month = dateObj.getMonth();
     year = dateObj.getFullYear();
     hours = defaultHour ? defaultHour : dateObj.getHours();
     mins = !getIsEmptyValue(defaultMin) ? defaultMin : dateObj.getMinutes();
-    mins = mins < 10 ? `0${mins}` : mins;
+    mins = addZeroIfNeeded(mins);
     amPm = defaultAmPm ? defaultAmPm : hours < 12 ? 'AM' : 'PM';
     hours = this.getHours(hours, is24Hour);
     return {
@@ -155,8 +175,10 @@ export default class DateTime extends React.PureComponent {
       todayYear
     };
   }
+
   getHours(hoursParam, is24Hour) {
     let hours = hoursParam;
+
     if (!is24Hour) {
       if (hours === 0) {
         hours = 12;
@@ -164,9 +186,11 @@ export default class DateTime extends React.PureComponent {
         hours -= 12;
       }
     }
-    hours = hours < 10 ? `0${hours}` : hours;
+
+    hours = addZeroIfNeeded(hours);
     return hours;
   }
+
   handleGetSelectedDate() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -175,7 +199,8 @@ export default class DateTime extends React.PureComponent {
       timeZone,
       isDateTimeField,
       dateFormat,
-      is24Hour
+      is24Hour,
+      customDateFormat
     } = this.props;
     let {
       year,
@@ -185,32 +210,47 @@ 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;
-    if (isDateTimeField) {
-      selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hours, mins), timeZone);
+        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(year, month, date, hours, mins), is24Hour ? `${dateFormat} HH:mm` : `${dateFormat} hh:mm A`);
+      formattedValue = formatDate(new Date(...dateArgs), customDateFormat == null ? is24Hour ? `${dateFormat} HH:mm:ss` : `${dateFormat} hh:mm:ss A` : `${customDateFormat}`);
     } else {
       selectedInMillis = Date.UTC(year, month, date);
       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';
@@ -218,6 +258,7 @@ export default class DateTime extends React.PureComponent {
       isError = true;
       errorType = 'MAX';
     }
+
     return {
       isError,
       errorType,
@@ -225,6 +266,7 @@ export default class DateTime extends React.PureComponent {
       formattedValue
     };
   }
+
   handleSelect(e) {
     e && e.preventDefault();
     const {
@@ -254,6 +296,7 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
+
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -264,6 +307,7 @@ export default class DateTime extends React.PureComponent {
       onSelect(selectedValue, formattedValue, e);
     }
   }
+
   handleChange() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -296,6 +340,7 @@ export default class DateTime extends React.PureComponent {
       mins: getIsEmptyValue(mins) ? oldMins : mins,
       amPm: getIsEmptyValue(amPm) ? oldAMPM : amPm
     };
+
     if (onChange) {
       const {
         isError,
@@ -303,6 +348,7 @@ export default class DateTime extends React.PureComponent {
         selectedValue,
         formattedValue
       } = this.handleGetSelectedDate(newSelectedInfo);
+
       if (isError) {
         if (errorType === 'MIN') {
           onError && onError(minErrorText, true);
@@ -317,17 +363,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,
@@ -359,6 +408,7 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
+
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -369,26 +419,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,
@@ -398,10 +453,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
@@ -425,6 +482,7 @@ export default class DateTime extends React.PureComponent {
           month = 0;
           return modifyCalendarRecursion('nextYear');
         }
+
         const newMonth = month + 1;
         return {
           date: getDate(newMonth, year),
@@ -437,6 +495,7 @@ export default class DateTime extends React.PureComponent {
           month = 11;
           return modifyCalendarRecursion('previousYear');
         }
+
         const newMonth = month - 1;
         return {
           date: getDate(newMonth, year),
@@ -445,10 +504,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,
@@ -460,6 +521,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,
@@ -468,8 +530,10 @@ export default class DateTime extends React.PureComponent {
         };
       }
     };
+
     return modifyCalendarRecursion(type);
   }
+
   modifyCalendar(type) {
     const {
       year,
@@ -482,9 +546,11 @@ export default class DateTime extends React.PureComponent {
       date
     }));
   }
+
   handleDateReset() {
     this.setState(this.getStateFromProps(this.props));
   }
+
   handleGetStateValues() {
     const {
       isActive
@@ -499,17 +565,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,
@@ -523,8 +592,10 @@ export default class DateTime extends React.PureComponent {
         toggleYearView: null
       };
     }
+
     getMethods && getMethods(methods);
   }
+
   handleOpenYearView() {
     const {
       isYearView,
@@ -535,12 +606,14 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: !isMonthOpen
     });
   }
+
   handleSelectYear(year) {
     this.setState({
       year,
       isMonthOpen: true
     });
   }
+
   handleSelectMonth(month) {
     const {
       date,
@@ -548,14 +621,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({
@@ -563,16 +639,7 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
+
   render() {
     const {
       date,
@@ -628,6 +695,7 @@ export default class DateTime extends React.PureComponent {
     const childEle = /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
+      "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
     }, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
       onOpenYearView: this.handleOpenYearView,
@@ -653,12 +721,12 @@ export default class DateTime extends React.PureComponent {
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,
-      hourSuggestions: this.hourSuggestions,
+      hourSuggestions: getHourSuggestions(is24Hour),
       onHourSelect: this.hoursSelect,
       hours: hours,
       hourEmptyText: hourEmptyText,
       needResponsive: needResponsive,
-      minSuggestions: this.minSuggestions,
+      minSuggestions: getMinuteSuggestions(),
       onMinutesSelect: this.minutesSelect,
       mins: mins,
       minuteEmptyText: minuteEmptyText,
@@ -685,37 +753,31 @@ export default class DateTime extends React.PureComponent {
     })) : null));
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
-      "data-id": `${dataId}_dateBoxContainer`
-    }) : isReady ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        size: boxSize,
-        boxPosition: position,
-        isActive: isActive,
-        isArrow: false,
-        isAnimate: isAnimate,
-        animationStyle: "bounce",
-        getRef: getRef,
-        onClick: onClick,
-        dataId: `${dataId}_dateBoxContainer`,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolute,
-        customClass: {
-          customDropBoxWrap: className
-        },
-        isPadding: isPadding,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        portalId: dropBoxPortalId
-      }, /*#__PURE__*/React.createElement(Box, null, childEle));
-    }) : null;
+      "data-id": `${dataId}_dateBoxContainer`,
+      "data-test-id": `${dataId}_dateBoxContainer`
+    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      size: boxSize,
+      boxPosition: position,
+      isActive: isActive,
+      isArrow: false,
+      isAnimate: isAnimate,
+      animationStyle: "bounce",
+      getRef: getRef,
+      onClick: onClick,
+      dataId: `${dataId}_dateBoxContainer`,
+      needResponsive: needResponsive,
+      isAbsolutePositioningNeeded: isAbsolute,
+      customClass: {
+        customDropBoxWrap: className
+      },
+      isPadding: isPadding,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      portalId: dropBoxPortalId
+    }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }
+
 }
 DateTime.propTypes = DateTime_propTypes;
 DateTime.defaultProps = DateTime_defaultProps;