@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-165

package/es/DateTime/Time.js

@@ -1,12 +1,13 @@
 /* eslint-disable react/forbid-component-props */
+
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-
 /**** Components ****/
+
 import { Container, Box } from '../Layout';
 import Select from '../Select/Select';
-
 /** ** CSS *** */
+
 import style from './DateTime.module.css';
 export default class Time extends PureComponent {
   render() {
@@ -63,7 +64,9 @@ export default class Time extends PureComponent {
       needResponsive: needResponsive
     })) : null));
   }
+
 }
+
 class Hour extends React.PureComponent {
   render() {
     const {
@@ -94,7 +97,9 @@ class Hour extends React.PureComponent {
       listItemSize: "small"
     });
   }
+
 }
+
 class Minute extends React.PureComponent {
   render() {
     const {
@@ -125,7 +130,9 @@ class Minute extends React.PureComponent {
       listItemSize: "small"
     });
   }
+
 }
+
 class AmPm extends React.PureComponent {
   render() {
     const {
@@ -151,4 +158,5 @@ class AmPm extends React.PureComponent {
       listItemSize: "small"
     });
   }
+
 }

package/es/DateTime/YearView.js

@@ -2,34 +2,40 @@
 import React from 'react';
 import { YearView_propTypes } from './props/propTypes';
 import { YearView_defaultProps } from './props/defaultProps';
-
 /**** 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';
 
+import style from './YearView.module.css';
 /**** 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,
@@ -37,6 +43,7 @@ class Year extends React.PureComponent {
     } = this.props;
     onClick && onClick(year);
   }
+
   render() {
     const {
       year,
@@ -66,12 +73,15 @@ 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,
@@ -81,6 +91,7 @@ class Month extends React.PureComponent {
     monthIndex = monthIndex === -1 ? 0 : monthIndex;
     onClick && onClick(monthIndex);
   }
+
   render() {
     const {
       month,
@@ -96,7 +107,9 @@ class Month extends React.PureComponent {
       "aria-label": month
     }, displayText);
   }
+
 }
+
 export default class YearView extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -111,10 +124,12 @@ export default class YearView extends React.PureComponent {
       localYear: ''
     };
   }
+
   componentDidMount() {
     this.handleScrollToYear(this.props);
     this.handleUpdateLocalYear(this.props);
   }
+
   componentDidUpdate(prevProps) {
     let {
       viewedYear
@@ -124,11 +139,13 @@ 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
@@ -140,6 +157,7 @@ export default class YearView extends React.PureComponent {
       });
     }, 150);
   }
+
   handleScrollToYear(props) {
     const {
       years = [],
@@ -154,24 +172,28 @@ 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,
@@ -218,11 +240,12 @@ 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 = []
@@ -236,6 +259,7 @@ export default class YearView extends React.PureComponent {
       dataId: "yearList"
     });
   }
+
 }
 YearView.propTypes = YearView_propTypes;
 YearView.defaultProps = YearView_defaultProps;

package/es/DateTime/YearView.module.css

@@ -1,99 +1,99 @@
-[dir=ltr] .boxPadding {
-  padding-right: 19px;
-  padding-left: 19px;
-}[dir=rtl] .boxPadding {
-  padding-left: 19px;
-  padding-right: 19px;
-}
-
-.month {
-  width: 30.333%;
-  font-size: 12px;
-  line-height: var(--zd_size26);
-  height: 26px;
-  color: var(--zdt_yearview_month_text);
-  text-align: center;
-  margin: 0 0 1px;
-  cursor: pointer;
-  background-color: var(--zdt_yearview_month_bg);
-  border-radius: 20px;
-}
-
-.month:hover {
-  background-color: var(--zdt_yearview_month_hover_bg);
-}
-
-.currentMonth,
-.currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-
-.currentMonth, .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
-}
-
-.yearBox {
-  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
-}
-
-.year {
-  padding: 7px 0;
-  cursor: pointer;
-}
-
-.year:hover .yearText,
-.year:hover .arrow {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-.yearText {
-  color: var(--zdt_yearview_yeartext_text);
-  font-size: 11px;
-}
-
-.arrow {
-  color: var(--zdt_yearview_yeartext_text);
-  transition: transform var(--zd_transition1);
-}
-
-.isActive {
-  cursor: default;
-}
-
-.isActive .yearText {
-  font-family: var(--zd_semibold);
-  color: var(--zdt_yearview_year_hover_text);
-  font-size: 11px;
-}
-
-.arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-[dir=ltr] .arrowActive {
-  transform: rotate(180deg);
-}
-
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
-}
-
-.container {
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  composes: boxPadding;
-  background-color: var(--zdt_yearview_default_bg);
-}
-
-.yearContainer {
-  height: 135px;
-  overflow: hidden;
-  transition: height var(--zd_transition1);
-  padding-bottom: 5px;
-}
-
-.toggleYear {
-  height: 0;
-  padding: 0;
+[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) ;
+}
+
+.month {
+  width: 30.333%;
+  font-size: var(--zd_font_size12) ;
+  line-height: var(--zd_size26);
+  height: var(--zd_size26) ;
+  color: var(--zdt_yearview_month_text);
+  text-align: center;
+  margin: 0 0 var(--zd_size1) ;
+  cursor: pointer;
+  background-color: var(--zdt_yearview_month_bg);
+  border-radius: 20px;
+}
+
+.month:hover {
+  background-color: var(--zdt_yearview_month_hover_bg);
+}
+
+.currentMonth,
+.currentMonth:hover {
+  color: var(--zdt_yearview_currentmonth_text);
+}
+
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
+
+.yearBox {
+  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
+}
+
+.year {
+  padding: var(--zd_size7) 0 ;
+  cursor: pointer;
+}
+
+.year:hover .yearText,
+.year:hover .arrow {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+.yearText {
+  color: var(--zdt_yearview_yeartext_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrow {
+  color: var(--zdt_yearview_yeartext_text);
+  transition: transform var(--zd_transition1);
+}
+
+.isActive {
+  cursor: default;
+}
+
+.isActive .yearText {
+  font-family: var(--zd_semibold);
+  color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrowActive {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
+
+.container {
+  height: 100% ;
+  overflow-y: auto;
+  overflow-x: hidden;
+  composes: boxPadding;
+  background-color: var(--zdt_yearview_default_bg);
+}
+
+.yearContainer {
+  height: var(--zd_size135) ;
+  overflow: hidden;
+  transition: height var(--zd_transition1);
+  padding-bottom: var(--zd_size5) ;
+}
+
+.toggleYear {
+  height: 0 ;
+  padding: 0 ;
 }

package/es/DateTime/__tests__/CalendarView.spec.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-undef */
+
 /*eslint-disable no-unused-vars*/
 import CalendarView, { Span } from '../CalendarView';
 import React from 'react';

package/es/DateTime/__tests__/DateTime.spec.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-undef */
+
 /*eslint-disable no-unused-vars*/
 import DateTime, { Span } from '../DateTime';
 import React from 'react';

package/es/DateTime/__tests__/DateWidget.spec.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-undef */
+
 /*eslint-disable no-unused-vars*/
 import DateWidget from '../DateWidget';
 import React from 'react';
@@ -50,9 +51,7 @@ describe('DateWidgetComponent testing', () => {
     }));
     let dropboxComponent = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateWidget_dateBoxContainer');
     expect(dropboxComponent.length).toBe(0);
-  });
-
-  // it('Should render dateTime if isReadOnly is false', () => {
+  }); // it('Should render dateTime if isReadOnly is false', () => {
   //   const { props, renderedDOM } = setup(DateWidget, Object.assign({}, defaultProps, { isReadOnly: false }));
   //   let dropboxComponent = TestUtils.scryRenderedComponentsWithTestid(
   //     renderedDOM,

package/es/DateTime/common.js

@@ -2,6 +2,7 @@ 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);
   });
@@ -12,11 +13,13 @@ 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,5 +1,6 @@
 export const defaultFormat = 'dd-MM-yyyy';
 export const supportedPatterns = ['.', '/', '-', ' ']; // RESTRICTED PATTERNS - ['@']
+
 export const patternChangeStr = '@';
 export const patternSplitStr = '@';
 export const INCONSTANT = 'INCONSTANT';