@zohodesk/components 1.0.0-temp-158 → 1.0.0-temp-159

package/es/DateTime/CalendarView.js

@@ -5,21 +5,19 @@ import { Container, Box } from '../Layout';
 import style from './DateTime.module.css';
 import { getMonthEnd } from '../utils/datetime/common';
 import DaysRow from './DaysRow';
-/* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 
+/* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 export default class CalendarView extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
   }
-
   handleSelect(day, month, year, e) {
     const {
       onSelect
     } = this.props;
     onSelect(day, month, year, e);
   }
-
   render() {
     const {
       date,
@@ -39,7 +37,9 @@ export default class CalendarView extends React.PureComponent {
     const userSeeMonth = userSeeDate.getMonth();
     const monthEnd = getMonthEnd(month, year);
     const lastMonth = 11;
-    const firstMonth = 0; // let noOfRow = 5;
+    const firstMonth = 0;
+
+    // let noOfRow = 5;
     // if (
     //   (monthEnd === 31 && userSeeDay >= 6) ||
     //   (monthEnd === 30 && userSeeDay === 7)
@@ -53,21 +53,16 @@ export default class CalendarView extends React.PureComponent {
     let incremleti = 1;
     let isSelectedDay = false;
     let isToday = false;
-
     const rows = (() => {
       const rowArr = [];
-
       for (let j = 1; j <= 6; j++) {
         const dayArr = [];
         let output = null;
-
         for (let i = 1; i < 8; i++) {
           let tdclass = `${style.datesStr} ${style.grid}`;
-
           if (i === 1) {
             tdclass += ` ${style.sunday}`;
           }
-
           if (incremleti >= userSeeDay && incremday <= monthEnd) {
             if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
               isSelectedDay = true;
@@ -78,7 +73,6 @@ export default class CalendarView extends React.PureComponent {
               isSelectedDay = false;
               isToday = false;
             }
-
             output = /*#__PURE__*/React.createElement(Span, {
               i: i,
               isActive: isSelectedDay,
@@ -94,51 +88,54 @@ export default class CalendarView extends React.PureComponent {
           } else if (incremleti < userSeeDay) {
             let prevMonth = userSeeMonth - 1;
             let prevYear = userSeeYear;
-
             if (userSeeMonth === firstMonth) {
               prevMonth = lastMonth;
               prevYear = userSeeYear - 1;
             }
-
             const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
-            const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti; // isSelectedDay =
+            const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
 
-            prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false; // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+            // isSelectedDay =
+            prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+            // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
 
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i //isActive={isSelectedDay}
+              i: i
+              //isActive={isSelectedDay}
               ,
               tdclass: `${tdclass} ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: prevDate,
               userSeeMonth: prevMonth,
               userSeeYear: prevYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate` // isToday={isToday}
-
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              // isToday={isToday}
             });
           } else if (incremleti > monthEnd) {
             let nextMonth = userSeeMonth + 1;
             let nextYear = userSeeYear;
-
             if (userSeeMonth === lastMonth) {
               nextMonth = firstMonth;
               nextYear = userSeeYear + 1;
             }
+            const nextDate = incremleti - (userSeeDay - 1) - monthEnd;
 
-            const nextDate = incremleti - (userSeeDay - 1) - monthEnd; // isSelectedDay =
+            // isSelectedDay =
+            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
 
-            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false; // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+            // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
 
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i // isActive={isSelectedDay}
+              i: i
+              // isActive={isSelectedDay}
               ,
               tdclass: `${tdclass}  ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
               userSeeYear: nextYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate` //isToday={isToday}
-
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              //isToday={isToday}
             });
           } else {
             output = /*#__PURE__*/React.createElement(Box, {
@@ -146,13 +143,10 @@ export default class CalendarView extends React.PureComponent {
               className: `${style.grid}`
             });
           }
-
           incremleti++;
           dayArr.push(output);
         }
         /* eslint-disable react/forbid-component-props */
-
-
         rowArr.push( /*#__PURE__*/React.createElement(Container, {
           key: j,
           alignBox: "row",
@@ -161,10 +155,8 @@ export default class CalendarView extends React.PureComponent {
           className: style.dateRow
         }, dayArr));
       }
-
       return rowArr;
     })();
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
       dayNames: dayNames,
       dayNamesShort: dayNamesShort,
@@ -174,7 +166,6 @@ export default class CalendarView extends React.PureComponent {
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
     }, rows));
   }
-
 }
 CalendarView.propTypes = CalendarView_propTypes;
 CalendarView.defaultProps = CalendarView_defaultProps;
@@ -183,7 +174,6 @@ export class Span extends React.PureComponent {
     super(props);
     this.handleSelectChild = this.handleSelectChild.bind(this);
   }
-
   handleSelectChild(e) {
     const {
       handleSelect,
@@ -193,7 +183,6 @@ export class Span extends React.PureComponent {
     } = this.props;
     handleSelect(incremday, userSeeMonth, userSeeYear, e);
   }
-
   render() {
     const {
       tdclass,
@@ -211,7 +200,6 @@ export class Span extends React.PureComponent {
       "aria-label": incremday
     }, incremday);
   }
-
 }
 Span.propTypes = Span_propTypes;
 Span.defaultProps = Span_defaultProps;

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';
@@ -17,13 +17,11 @@ import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesSho
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { Box } from '../Layout';
 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);
@@ -49,7 +47,6 @@ export default class DateTime extends React.PureComponent {
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
-
     this.ampmSuggestions = (() => {
       const ampmSuggestions = [];
       ampmText.forEach((text, index) => {
@@ -67,29 +64,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,
@@ -97,11 +89,9 @@ export default class DateTime extends React.PureComponent {
       });
     }
   }
-
   componentWillUnmount() {
     this.handleExposeMethods(false);
   }
-
   getStateFromProps(props) {
     let date, month, year, hours, mins, amPm;
     let {
@@ -112,20 +102,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) : todayObj;
     date = dateObj.getDate();
     month = dateObj.getMonth();
@@ -147,10 +134,8 @@ export default class DateTime extends React.PureComponent {
       todayYear
     };
   }
-
   getHours(hoursParam, is24Hour) {
     let hours = hoursParam;
-
     if (!is24Hour) {
       if (hours === 0) {
         hours = 12;
@@ -158,11 +143,9 @@ 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 {
@@ -171,8 +154,7 @@ export default class DateTime extends React.PureComponent {
       timeZone,
       isDateTimeField,
       dateFormat,
-      is24Hour,
-      customDateFormat
+      is24Hour
     } = this.props;
     let {
       year,
@@ -182,41 +164,32 @@ 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;
-    let currentDate = new Date();
-    let sec = currentDate.getSeconds();
-    let milliSec = currentDate.getMilliseconds();
-
-    if (isDateTimeField || customDateFormat) {
-      selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hours, mins, sec, milliSec), timeZone);
+      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);
-      formattedValue = formatDate(new Date(year, month, date, hours, mins, sec, milliSec), customDateFormat == null ? is24Hour ? `${dateFormat} HH:mm:ss` : `${dateFormat} hh:mm:ss A` : `${customDateFormat}`);
+      formattedValue = formatDate(new Date(year, month, date, hours, mins), is24Hour ? `${dateFormat} HH:mm` : `${dateFormat} hh:mm A`);
     } 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';
@@ -224,7 +197,6 @@ export default class DateTime extends React.PureComponent {
       isError = true;
       errorType = 'MAX';
     }
-
     return {
       isError,
       errorType,
@@ -232,7 +204,6 @@ export default class DateTime extends React.PureComponent {
       formattedValue
     };
   }
-
   handleSelect(e) {
     e && e.preventDefault();
     const {
@@ -262,7 +233,6 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
-
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -273,7 +243,6 @@ export default class DateTime extends React.PureComponent {
       onSelect(selectedValue, formattedValue, e);
     }
   }
-
   handleChange() {
     let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -306,7 +275,6 @@ export default class DateTime extends React.PureComponent {
       mins: getIsEmptyValue(mins) ? oldMins : mins,
       amPm: getIsEmptyValue(amPm) ? oldAMPM : amPm
     };
-
     if (onChange) {
       const {
         isError,
@@ -314,7 +282,6 @@ export default class DateTime extends React.PureComponent {
         selectedValue,
         formattedValue
       } = this.handleGetSelectedDate(newSelectedInfo);
-
       if (isError) {
         if (errorType === 'MIN') {
           onError && onError(minErrorText, true);
@@ -329,20 +296,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,
@@ -374,7 +338,6 @@ export default class DateTime extends React.PureComponent {
       mins,
       amPm
     });
-
     if (isError) {
       if (errorType === 'MIN') {
         onError && onError(minErrorText, true);
@@ -385,31 +348,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,
@@ -419,12 +377,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
@@ -448,7 +404,6 @@ export default class DateTime extends React.PureComponent {
           month = 0;
           return modifyCalendarRecursion('nextYear');
         }
-
         const newMonth = month + 1;
         return {
           date: getDate(newMonth, year),
@@ -461,7 +416,6 @@ export default class DateTime extends React.PureComponent {
           month = 11;
           return modifyCalendarRecursion('previousYear');
         }
-
         const newMonth = month - 1;
         return {
           date: getDate(newMonth, year),
@@ -470,12 +424,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,
@@ -487,7 +439,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,
@@ -496,10 +447,8 @@ export default class DateTime extends React.PureComponent {
         };
       }
     };
-
     return modifyCalendarRecursion(type);
   }
-
   modifyCalendar(type) {
     const {
       year,
@@ -512,11 +461,9 @@ export default class DateTime extends React.PureComponent {
       date
     }));
   }
-
   handleDateReset() {
     this.setState(this.getStateFromProps(this.props));
   }
-
   handleGetStateValues() {
     const {
       isActive
@@ -531,20 +478,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,
@@ -558,10 +502,8 @@ export default class DateTime extends React.PureComponent {
         toggleYearView: null
       };
     }
-
     getMethods && getMethods(methods);
   }
-
   handleOpenYearView() {
     const {
       isYearView,
@@ -572,14 +514,12 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: !isMonthOpen
     });
   }
-
   handleSelectYear(year) {
     this.setState({
       year,
       isMonthOpen: true
     });
   }
-
   handleSelectMonth(month) {
     const {
       date,
@@ -587,17 +527,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({
@@ -605,7 +542,6 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
-
   render() {
     const {
       date,
@@ -741,7 +677,6 @@ 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/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,21 +2,19 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-/** ** Components *** */
 
+/** ** Components *** */
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
-/** ** 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,
@@ -24,7 +22,6 @@ class Span extends React.PureComponent {
     } = this.props;
     modifyCalendar(type);
   }
-
   render() {
     const {
       dataTitle,
@@ -42,9 +39,7 @@ class Span extends React.PureComponent {
       tabindex: "0"
     }, children);
   }
-
 }
-
 export default class DateTimePopupHeader extends PureComponent {
   render() {
     const {
@@ -99,5 +94,4 @@ export default class DateTimePopupHeader extends PureComponent {
       isBold: true
     }))) : null);
   }
-
 }