@zohodesk/components 1.2.21 → 1.2.23

package/es/DateTime/YearView.js

@@ -2,40 +2,34 @@
 import React from 'react';
 import { YearView_propTypes } from './props/propTypes';
 import { YearView_defaultProps } from './props/defaultProps';
-/**** Components ****/
 
+/**** Components ****/
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
 /**** CSS ****/
-
 import style from './YearView.module.css';
-/**** Methods ****/
 
+/**** Methods ****/
 import { getYearDetails } from './dateFormatUtils';
 const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
 function getYears() {
   const years = [];
   const {
     startPoint,
     endPoint
   } = getYearDetails();
-
   for (let i = startPoint; i <= endPoint; i++) {
     years.push(i);
   }
-
   return years;
 }
-
 class Year extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
-
   handleClick() {
     const {
       year,
@@ -43,7 +37,6 @@ class Year extends React.PureComponent {
     } = this.props;
     onClick && onClick(year);
   }
-
   render() {
     const {
       year,
@@ -73,15 +66,12 @@ class Year extends React.PureComponent {
       iconClass: isOpen ? `${style.arrow} ${style.arrowActive}` : style.arrow
     })));
   }
-
 }
-
 class Month extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
-
   handleClick() {
     const {
       month,
@@ -91,7 +81,6 @@ class Month extends React.PureComponent {
     monthIndex = monthIndex === -1 ? 0 : monthIndex;
     onClick && onClick(monthIndex);
   }
-
   render() {
     const {
       month,
@@ -107,9 +96,7 @@ class Month extends React.PureComponent {
       "aria-label": month
     }, displayText);
   }
-
 }
-
 export default class YearView extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -124,12 +111,10 @@ export default class YearView extends React.PureComponent {
       localYear: ''
     };
   }
-
   componentDidMount() {
     this.handleScrollToYear(this.props);
     this.handleUpdateLocalYear(this.props);
   }
-
   componentDidUpdate(prevProps) {
     let {
       viewedYear
@@ -139,13 +124,11 @@ export default class YearView extends React.PureComponent {
       viewedYear: oldViewedYear
     } = prevProps;
     oldViewedYear = parseInt(oldViewedYear) || 0;
-
     if (viewedYear !== oldViewedYear) {
       this.handleScrollToYear(this.props);
       this.handleUpdateLocalYear(this.props);
     }
   }
-
   handleUpdateLocalYear(props) {
     let {
       viewedYear
@@ -157,7 +140,6 @@ export default class YearView extends React.PureComponent {
       });
     }, 150);
   }
-
   handleScrollToYear(props) {
     const {
       years = [],
@@ -172,28 +154,24 @@ export default class YearView extends React.PureComponent {
       duration: 0
     });
   }
-
   getPublicMethods(methods) {
     const {
       scrollToIndex
     } = methods;
     this.scrollToIndex = scrollToIndex;
   }
-
   handleMonthClick(month) {
     const {
       onSelectMonth
     } = this.props;
     onSelectMonth && onSelectMonth(month);
   }
-
   handleYearClick(year) {
     const {
       onSelectYear
     } = this.props;
     onSelectYear && onSelectYear(year);
   }
-
   renderListItem(_ref) {
     let {
       index,
@@ -239,12 +217,11 @@ export default class YearView extends React.PureComponent {
         month: month,
         onClick: this.handleMonthClick,
         isActive: monthIndex === viewedMonth,
-        displayText: monthNamesShort[index] // hoverText={monthNames[index]}
-
+        displayText: monthNamesShort[index]
+        // hoverText={monthNames[index]}
       });
     }))) : null);
   }
-
   render() {
     const {
       years = []
@@ -258,7 +235,6 @@ export default class YearView extends React.PureComponent {
       dataId: "yearList"
     });
   }
-
 }
 YearView.propTypes = YearView_propTypes;
 YearView.defaultProps = YearView_defaultProps;

package/es/DateTime/YearView.module.css

@@ -1,19 +1,19 @@
 [dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
+  padding-right: 19px;
+  padding-left: 19px;
 }[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
+  padding-left: 19px;
+  padding-right: 19px;
 }
 
 .month {
   width: 30.333%;
-  font-size: var(--zd_font_size12) ;
+  font-size: 12px;
   line-height: 2.1667;
-  height: var(--zd_size26) ;
+  height: 26px;
   color: var(--zdt_yearview_month_text);
   text-align: center;
-  margin: 0 0 var(--zd_size1) ;
+  margin: 0 0 1px;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
@@ -37,7 +37,7 @@
 }
 
 .year {
-  padding: var(--zd_size7) 0 ;
+  padding: 7px 0;
   cursor: pointer;
 }
 
@@ -48,7 +48,7 @@
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: var(--zd_font_size11) ;
+  font-size: 11px;
 }
 
 .arrow {
@@ -63,7 +63,7 @@
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
-  font-size: var(--zd_font_size11) ;
+  font-size: 11px;
 }
 
 .arrowActive {
@@ -79,7 +79,7 @@
 }
 
 .container {
-  height: 100% ;
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   composes: boxPadding;
@@ -87,13 +87,13 @@
 }
 
 .yearContainer {
-  height: var(--zd_size135) ;
+  height: 135px;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
+  padding-bottom: 5px;
 }
 
 .toggleYear {
-  height: 0 ;
-  padding: 0 ;
+  height: 0;
+  padding: 0;
 }

package/es/DateTime/common.js

@@ -2,7 +2,6 @@ export function bind() {
   for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
     handlers[_key] = arguments[_key];
   }
-
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
@@ -13,13 +12,11 @@ export function formatValue() {
   let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
   return values && values.map(value => {
     let formattedValue = value;
-
     if (typeof value === 'string' || typeof value === 'number') {
       formattedValue = {};
       formattedValue[valueField] = value;
       formattedValue[textField] = value;
     }
-
     return formattedValue;
   }) || [];
 }

package/es/DateTime/constants.js

@@ -1,6 +1,5 @@
 export const defaultFormat = 'dd-MM-yyyy';
 export const supportedPatterns = ['.', '/', '-', ' ']; // RESTRICTED PATTERNS - ['@']
-
 export const patternChangeStr = '@';
 export const patternSplitStr = '@';
 export const INCONSTANT = 'INCONSTANT';

package/es/DateTime/dateFormatUtils/dateFormat.js

@@ -2,16 +2,16 @@
 
 /** * Libraries ** */
 import datetime from '@zohodesk/datetimejs';
-/** * Methods ** */
 
+/** * Methods ** */
 import { getDayEnd, convertYearToTwoDigit, addZero, getMonthDetails, getYearDetails, getDayDetails, getHourDetails, getMinuteDetails, getNoonDetails, getIsCurrentYear, removeYearPattern } from './index';
 import { getIsEmptyValue } from '../../utils/Common';
 import { formatDate } from '../../utils/datetime/common';
-/** * Constants ** */
 
-import { defaultFormat, supportedPatterns, // patternChangeStr,
+/** * Constants ** */
+import { defaultFormat, supportedPatterns,
+// patternChangeStr,
 patternSplitStr, INCONSTANT, flags } from '../constants';
-
 function getDateFormatString() {
   let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -21,23 +21,19 @@ function getDateFormatString() {
     return res;
   }, '');
 }
-
 function getIsValidPattern() {
   let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
   const isValueInArray = function () {
     let possibleFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
   };
-
   const haveDay = isValueInArray(flags.day);
   const haveMonth = isValueInArray(flags.month);
   const haveYear = isValueInArray(flags.year);
   const isValidPattern = datePatternArr.length && datePatternArr.length <= 2 && datePatternArr.every(patternStr => supportedPatterns.indexOf(patternStr) >= 0);
   return haveDay && haveMonth && (haveYear || !haveYear) && isValidPattern;
 }
-
 export function getDateFormatDetails() {
   let dateFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let {
@@ -59,20 +55,17 @@ export function getDateFormatDetails() {
     isDateTime
   });
   const isHideYear = isHideCurrentYear ? isCurrentYear : false;
-
   function getDateFormat(dateFormat) {
     const token = /D{1,4}|M{1,4}|YY(?:YY)?|([HhmsA])\1?|[LloSZWN]|\[[^\]]*\]|'[^']*'/gi;
     dateFormatArr = [];
     patternArr = [];
     const newDateFormat = dateFormat.replace(token, match => {
       const dateFormatArrLen = dateFormatArr.length;
-
       if (match in flags) {
         dateFormatArr.push(match);
         const {
           type
         } = flags[match];
-
         if (type === 'day') {
           dayInfo = Object.assign({}, flags[match], {
             index: dateFormatArrLen
@@ -86,35 +79,28 @@ export function getDateFormatDetails() {
             index: dateFormatArrLen
           });
         }
-
         return patternSplitStr;
       }
-
       return match.slice(1, match.length - 1);
     });
     patternArr = newDateFormat.split(patternSplitStr).reduce((res, patternStr) => {
       if (patternStr) {
         res.push(patternStr);
       }
-
       return res;
     }, []);
   }
-
   getDateFormat(dateFormat);
   const isValidPattern = getIsValidPattern(dateFormatArr, patternArr);
-
   if (!isValidPattern) {
     getDateFormat(defaultFormat);
   }
-
   if (isHideYear) {
     ({
       dateFormatArr,
       patternArr
     } = removeYearPattern(dateFormatArr, patternArr));
   }
-
   return {
     dateFormat: getDateFormatString(dateFormatArr, patternArr),
     dateFormatArr,
@@ -125,7 +111,6 @@ export function getDateFormatDetails() {
     isValidPattern
   };
 }
-
 function getDisplayFormatValue(dateVal, formatVal) {
   let {
     i18nShortMonths = [],
@@ -135,22 +120,18 @@ function getDisplayFormatValue(dateVal, formatVal) {
     length,
     type
   } = flags[formatVal] || {};
-
   if (length === INCONSTANT) {
     if (dateVal && formatVal === 'MMM' && i18nShortMonths.length) {
       return i18nShortMonths[dateVal - 1];
     } else if (dateVal && formatVal === 'MMMM' && i18nMonths.length) {
       return i18nMonths[dateVal - 1];
     }
-
     return addZero(dateVal, formatVal.length ? formatVal.length : 1);
   } else if (type === 'year' && length === 2) {
     return addZero(convertYearToTwoDigit(dateVal), length);
   }
-
   return addZero(dateVal, length);
 }
-
 function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
   let {
     i18nShortMonths,
@@ -171,7 +152,6 @@ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
   }, '');
   return dateString;
 }
-
 export function getDateTimeString() {
   let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let dateFormatDetails = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -204,20 +184,17 @@ export function getDateTimeString() {
     i18nMonths
   });
   let timeString = '';
-
   if (isDateTime) {
     hour = !getIsEmptyValue(hour) ? addZero(hour, 2) : is24Hour ? 'HH' : 'hh';
     minute = !getIsEmptyValue(minute) ? addZero(minute, 2) : 'mm';
     timeString = ` ${hour}:${minute} ${is24Hour ? '' : `${noon || '--'}`}`;
   }
-
   return `${dateString}${timeString}`;
 }
 export function getDateText(value, isDateTime, timeZone) {
   if (value && !timeZone) {
     value = value.replace('Z', '');
   }
-
   return value ? isDateTime ? timeZone ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? datetime.toDate(value) : new Date(value) : new Date();
 }
 export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
@@ -232,7 +209,6 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
     minute,
     noon
   } = localValues;
-
   if (value) {
     const dateObj = getDateText(value, isDateTime, timeZone);
     const selectedDay = dateObj.getDate();
@@ -241,16 +217,13 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
     const newDay = day ? day : selectedDay;
     const newMonth = month ? month : selectedMonth + 1;
     const newYear = year ? year : selectedYear;
-
     if (isDateTime) {
       let selectedHour = dateObj.getHours();
       const selectedMinute = dateObj.getMinutes();
       const selectedNoon = selectedHour < 12 ? 'AM' : 'PM';
-
       if (!is24Hour) {
         selectedHour = selectedHour === 0 ? 12 : selectedHour > 12 ? selectedHour - 12 : selectedHour;
       }
-
       const newHour = hour ? hour : selectedHour;
       const newMinute = minute ? minute : selectedMinute;
       const newNoon = noon ? noon : selectedNoon;
@@ -263,14 +236,12 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
         noon: newNoon
       };
     }
-
     return {
       day: newDay,
       month: newMonth,
       year: newYear
     };
   }
-
   return localValues;
 }
 export function getIsValidDate(values, isDateTime, _ref2) {
@@ -294,7 +265,6 @@ export function getIsValidDate(values, isDateTime, _ref2) {
       const value = parseInt(val);
       return getIsEmptyValue(value);
     }
-
     return getIsEmptyValue(val);
   });
   const haveAllValues = valuesArr.every((val, index) => {
@@ -310,10 +280,8 @@ export function getIsValidDate(values, isDateTime, _ref2) {
     } else if (val) {
       return true;
     }
-
     return false;
   });
-
   if (haveAllValues) {
     const dayEnd = getDayEnd(month, year);
     const {
@@ -338,7 +306,6 @@ export function getIsValidDate(values, isDateTime, _ref2) {
     const {
       allowedValues: noonAllowedValues
     } = getNoonDetails();
-
     if (dayEnd < day || dayStart > day) {
       isError = true;
       message = 'Wrong Day';
@@ -362,7 +329,6 @@ export function getIsValidDate(values, isDateTime, _ref2) {
     isError = true;
     message = 'Empty value';
   }
-
   return {
     isError,
     message,
@@ -387,41 +353,34 @@ export function getSelectedDate(values, props) {
     isDateTime,
     is24Hour
   } = props;
-
   if (!is24Hour) {
     if (parseInt(hour) === 12) {
       hour = noon === 'AM' ? 0 : 12;
     }
-
     if (noon === 'PM') {
       if (hour < 12) {
         hour = parseInt(hour) + 12;
       }
     }
   }
-
   month = parseInt(month) - 1;
   const minInMillis = min ? datetime.millis(min) : null,
-        maxInMillis = max ? datetime.millis(max) : null;
+    maxInMillis = max ? datetime.millis(max) : null;
   let selectedInMillis,
-      selectedValue = '';
-
+    selectedValue = '';
   if (isDateTime) {
     if (timeZone) {
       selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
     } else {
       selectedInMillis = Date.UTC(year, month, date, hour, mins);
     }
-
     selectedValue = datetime.ISO(selectedInMillis);
   } else {
     selectedInMillis = Date.UTC(year, month, date);
     selectedValue = formatDate(new Date(year, month, date), 'YYYY-MM-DD');
   }
-
   let isError = false;
   let errorType = '';
-
   if (minInMillis && minInMillis > selectedInMillis) {
     isError = true;
     errorType = 'MIN';
@@ -429,14 +388,12 @@ export function getSelectedDate(values, props) {
     isError = true;
     errorType = 'MAX';
   }
-
   return {
     isError,
     errorType,
     selectedValue: selectedValue
   };
 }
-
 function getDateFormatLength(type, length) {
   let formatVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   let {
@@ -465,20 +422,16 @@ function getDateFormatLength(type, length) {
   }, isDateTime, timeZone, {
     is24Hour
   });
-
   if (length === INCONSTANT) {
     if (selectedMonth && formatVal === 'MMM' && i18nShortMonths.length) {
       return i18nShortMonths[selectedMonth - 1].length;
     } else if (selectedMonth && formatVal === 'MMMM' && i18nMonths.length) {
       return i18nMonths[selectedMonth - 1].length;
     }
-
     return formatVal.length ? formatVal.length : 1;
   }
-
   return length;
 }
-
 export function getDateFormatSelection(dateFormatDetails, isDateTime) {
   let {
     i18nShortMonths,
@@ -501,24 +454,20 @@ export function getDateFormatSelection(dateFormatDetails, isDateTime) {
   const clickIndex = {};
   const order = [];
   let tempLength = 0;
-
   function addResult(type, length) {
     const startIndex = tempLength;
     const endIndex = tempLength + length;
     const orderLen = order.length;
     focusedIndex[`${startIndex}_${endIndex}`] = orderLen;
-
     for (let i = startIndex; i <= endIndex; i++) {
       clickIndex[i] = orderLen;
     }
-
     order.push({
       type,
       index: [startIndex, endIndex]
     });
     tempLength += length;
   }
-
   dateFormatArr.forEach((formatVal, index) => {
     const {
       type,
@@ -542,32 +491,38 @@ export function getDateFormatSelection(dateFormatDetails, isDateTime) {
     addResult(type, validLength);
     tempLength += patternVal.length;
   });
-
   if (isDateTime) {
     //For space between date and time
-    tempLength += 1; //hour
+    tempLength += 1;
 
-    addResult('hour', 2); //For :
+    //hour
+    addResult('hour', 2);
 
-    tempLength += 1; //minute
+    //For :
+    tempLength += 1;
 
-    addResult('minute', 2); //For space between time and noon
+    //minute
+    addResult('minute', 2);
 
-    tempLength += 1; //noon
+    //For space between time and noon
+    tempLength += 1;
 
+    //noon
     if (!is24Hour) {
       addResult('noon', 2);
     }
   }
-
   return {
     focusedIndex,
     clickIndex,
     order
   };
-} // export function getDateValues(date = '', dateFormatDetails = {}) {
+}
+
+// export function getDateValues(date = '', dateFormatDetails = {}) {
 //   const { dateFormatArr, patternArr, dayInfo, monthInfo, yearInfo } =
 //     dateFormatDetails;
+
 //   const newDate = date.split('').reduce((res, str) => {
 //     if (patternArr.indexOf(str) >= 0) {
 //       res += patternChangeStr;
@@ -576,16 +531,21 @@ export function getDateFormatSelection(dateFormatDetails, isDateTime) {
 //     }
 //     return res;
 //   }, '');
+
 //   const dateArr = newDate.split(patternChangeStr);
+
 //   const { index: dayIndex, length: dayLength } = dayInfo;
 //   let day = dateArr[dayIndex];
 //   day = addZero(day, dayLength);
+
 //   const { index: monthIndex, length: monthLength } = monthInfo;
 //   let month = dateArr[monthIndex];
 //   month = addZero(month, monthLength);
+
 //   const { index: yearIndex, length: yearLength } = yearInfo;
 //   let year = dateArr[yearIndex];
 //   year = addZero(year, yearLength);
+
 //   return {
 //     day,
 //     month,
@@ -593,16 +553,21 @@ export function getDateFormatSelection(dateFormatDetails, isDateTime) {
 //     dateString: concatDate({ day, month, year }, dateFormatArr, patternArr)
 //   };
 // }
+
 // export function getDateTimeValues(value = '', dateFormatDetails = {}) {
 //   const [date, time = '', noon = ''] = value.split(' ');
+
 //   let [hour = '', minute = ''] = time.split(':');
 //   hour = addZero(hour, 2);
 //   minute = addZero(minute, 2);
+
 //   const { day, month, year, dateString } = getDateValues(
 //     date,
 //     dateFormatDetails
 //   );
+
 //   const timeString = `${hour}:${minute}`;
+
 //   return {
 //     day,
 //     month,