@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-252

package/es/Card/Card.js

@@ -4,6 +4,7 @@ import { Card_defaultProps, CardContent_defaultProps } from './props/defaultProp
 import { Container, Box } from '../Layout';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Card.module.css';
+
 /* eslint-disable react/forbid-component-props */
 
 /*
@@ -13,24 +14,20 @@ scroll logic move to virtualizer list
 */
 
 /* performance handling pending in card component moving to ref instead of setState */
-
 export class CardHeader extends Component {
   constructor(props) {
     super(props);
     this.getCardHeaderDom = this.getCardHeaderDom.bind(this);
     this.cardHeader = null;
   }
-
   getCardHeaderDom(ele) {
     this.cardHeader = ele;
   }
-
   setScrollClassName() {
     if (!this.cardHeader) {
       return null;
     }
   }
-
   render() {
     let {
       isScroll,
@@ -44,7 +41,6 @@ export class CardHeader extends Component {
       dataId: dataId
     }, children);
   }
-
 }
 CardHeader.propTypes = CardHeader_propTypes;
 export class CardContent extends Component {
@@ -72,7 +68,6 @@ export class CardContent extends Component {
       className: customClass
     }, children);
   }
-
 }
 CardContent.propTypes = CardContent_propTypes;
 CardContent.defaultProps = CardContent_defaultProps;
@@ -91,7 +86,8 @@ export default class Card extends Component {
     this.to = from + 3 * limit;
     this.isFetching = false;
     this.lastScrollTop = 0;
-    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    this.onScroll = this.onScroll.bind(this);
+    //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
   }
 
@@ -100,7 +96,6 @@ export default class Card extends Component {
       this.from = nextProps.from;
     }
   }
-
   onScroll(e) {
     let scrollContainerObj = e.currentTarget;
     let {
@@ -124,20 +119,16 @@ export default class Card extends Component {
       // isScrollShadow,
       isPercentageScroll
     } = this.props;
-
     if (scrollTop > this.lastScrollTop) {
       this.scrollDirection = 'down';
     } else {
       this.scrollDirection = 'up';
     }
-
     this.lastScrollTop = scrollTop;
-
     if (fetchData && !this.isFetching) {
       if (this.scrollDirection === 'down' && !noMoreData) {
         const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
         const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
-
         if (prefetch) {
           this.isFetching = true;
           fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(() => {
@@ -159,18 +150,19 @@ export default class Card extends Component {
         }
       }
     }
-
     if (fetchData && !noNeedUpScroll) {
       if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
         scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
       } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
         scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
       }
-    } // if (isScrollShadow) {
+    }
+    // if (isScrollShadow) {
     //   this.onSetScroll();
     // }
+  }
 
-  } // setScroll(isScroll) {
+  // setScroll(isScroll) {
   //   let { isScroll: stateIsScroll } = this.state;
   //   if (isScroll && !stateIsScroll) {
   //     this.setState({ isScroll: true }, () => {
@@ -181,7 +173,6 @@ export default class Card extends Component {
   //   }
   // }
 
-
   render() {
     let {
       onClick,
@@ -209,7 +200,6 @@ export default class Card extends Component {
       if (!child) {
         return child;
       }
-
       if (child.type === CardHeader || this.props.childTypes && child.type === this.props.childTypes.cardHeader) {
         return /*#__PURE__*/React.cloneElement(child, {
           isScroll
@@ -229,15 +219,12 @@ export default class Card extends Component {
           className: child.props.customClass
         }, child.props.children);
       }
-
       return child;
     }));
   }
-
 }
 Card.propTypes = Card_propTypes;
 Card.defaultProps = Card_defaultProps;
-
 if (false) {
   Card.docs = {
     componentGroup: 'Template',
@@ -246,7 +233,6 @@ if (false) {
     description: ' '
   };
 }
-
 export class CardFooter extends Component {
   render() {
     let {
@@ -259,6 +245,5 @@ export class CardFooter extends Component {
       dataId: dataId
     }, children);
   }
-
 }
 CardFooter.propTypes = CardFooter_propTypes;

package/es/Card/docs/Card__Custom.docs.js

@@ -21,9 +21,7 @@ export default class Card__Custom extends Component {
       customClass: style.customCardFooter
     }, /*#__PURE__*/React.createElement(Box, null, "Footer")))));
   }
-
 }
-
 if (false) {
   Card__Custom.docs = {
     componentGroup: 'Template',

package/es/Card/docs/Card__Default.docs.js

@@ -24,9 +24,7 @@ export default class Card__Default extends Component {
       }
     }, "Footer")))));
   }
-
 }
-
 if (false) {
   Card__Default.docs = {
     componentGroup: 'Template',

package/es/Card/docs/Card__Scroll.docs.js

@@ -13,7 +13,6 @@ export default class Card__Scroll extends Component {
       data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
     };
   }
-
   render() {
     let {
       from,
@@ -46,9 +45,7 @@ export default class Card__Scroll extends Component {
       }
     }, "Footer"))));
   }
-
 }
-
 if (false) {
   Card__Scroll.docs = {
     componentGroup: 'Template',

package/es/CheckBox/CheckBox.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { propTypes } from './props/propTypes';
 import { defaultProps } from './props/defaultProps';
@@ -12,7 +11,6 @@ export default class CheckBox extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
-
   onChange(e) {
     let {
       onChange,
@@ -20,7 +18,6 @@ export default class CheckBox extends React.Component {
     } = this.props;
     onChange && onChange(!checked, e);
   }
-
   render() {
     let {
       id,
@@ -148,11 +145,9 @@ export default class CheckBox extends React.Component {
       title: toolTip ? toolTip : text
     }, LabelProps))));
   }
-
 }
 CheckBox.defaultProps = defaultProps;
 CheckBox.propTypes = propTypes;
-
 if (false) {
   CheckBox.docs = {
     componentGroup: 'Form Elements',

package/es/CheckBox/CheckBox.module.css

@@ -13,9 +13,7 @@
   composes: varClass;
   stroke: var(--checkbox_stroke_color);
 }
-.container,
-.pointer,
-.readonly {
+.container, .pointer, .readonly {
   cursor: var(--checkbox_cursor);
 }
 .pointer {
@@ -56,37 +54,48 @@
   font-size: 0;
   display: block;
 }
-/*rtl:begin:ignore*/
 .tick {
   position: absolute;
   left: 0;
 }
-/*rtl:end:ignore*/
 .mediumtick {
   top: calc(var(--zd_size2) * -1);
   height: var(--zd_size20);
   width: var(--zd_size20);
 }
-/*rtl:begin:ignore*/
 .smalltick {
   top: calc(var(--zd_size3) * -1);
   height: var(--zd_size18);
   width: var(--zd_size18);
   left: calc(var(--zd_size1) * -1);
 }
-/*rtl:end:ignore*/
 
 .checkedtickPath {
   stroke-dashoffset: 40;
+}
+
+[dir=ltr] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+
+[dir=rtl] .checkedtickPath {
   animation: tickAnimate var(--zd_transition3) ease forwards;
 }
 .linePath {
   transform-origin: center;
+}
+[dir=ltr] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
-.text {
+[dir=ltr] .text {
   margin-left: var(--zd_size6);
 }
+[dir=rtl] .text {
+  margin-right: var(--zd_size6);
+}
 
 .checkedprimary,
 .checkeddanger {
@@ -129,8 +138,6 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
-
-/*rtl:begin:ignore*/
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;
@@ -148,4 +155,3 @@
     transform: scaleX(1);
   }
 }
-/*rtl:end:ignore*/

package/es/CheckBox/docs/CheckBox__custom.docs.js

@@ -11,33 +11,30 @@ export default class CheckBox__custom extends Component {
       selected: true
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   onSelect() {
     this.setState({
       selected: !this.state.selected
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -284,7 +281,6 @@ export default class CheckBox__custom extends Component {
       text: "Danger"
     }))));
   }
-
 }
 CheckBox__custom.docs = {
   componentGroup: 'Form Elements',

package/es/CheckBox/docs/CheckBox__default.docs.js

@@ -10,33 +10,30 @@ export default class CheckBox__default extends Component {
       selected: true
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   onSelect() {
     this.setState({
       selected: !this.state.selected
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -210,7 +207,6 @@ export default class CheckBox__default extends Component {
       text: "Danger"
     }))));
   }
-
 }
 CheckBox__default.docs = {
   componentGroup: 'Form Elements',

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,
@@ -28,7 +26,10 @@ export default class CalendarView extends React.PureComponent {
       dataId,
       needBorder,
       dayNames,
-      dayNamesShort
+      dayNamesShort,
+      todayMonth,
+      todayDate,
+      todayYear
     } = this.props;
     const userSeeDate = new Date(year, month, 1);
     const userSeeDay = userSeeDate.getDay() + 1;
@@ -36,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)
@@ -48,82 +51,79 @@ export default class CalendarView extends React.PureComponent {
 
     let incremday = 1;
     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 (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
+              isSelectedDay = true;
+            } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
               isToday = true;
             } else {
+              isSelectedDay = false;
               isToday = false;
             }
-
             output = /*#__PURE__*/React.createElement(Span, {
               i: i,
-              isActive: isToday,
+              isActive: isSelectedDay,
               tdclass: tdclass,
               handleSelect: this.handleSelect,
               incremday: incremday,
               userSeeMonth: userSeeMonth,
               userSeeYear: userSeeYear,
-              dataId: isToday ? `${dataId}_dateSelected` : `${dataId}_date`
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_date`,
+              isToday: isToday
             });
             incremday++;
           } 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;
-            isToday = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+            isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
             output = /*#__PURE__*/React.createElement(Span, {
               i: i,
-              isActive: isToday,
+              isActive: isSelectedDay,
               tdclass: `${tdclass} ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: prevDate,
               userSeeMonth: prevMonth,
               userSeeYear: prevYear,
-              dataId: isToday ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              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;
-            isToday = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+            isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
             output = /*#__PURE__*/React.createElement(Span, {
               i: i,
-              isActive: isToday,
+              isActive: isSelectedDay,
               tdclass: `${tdclass}  ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
               userSeeYear: nextYear,
-              dataId: isToday ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
+              isToday: isToday
             });
           } else {
             output = /*#__PURE__*/React.createElement(Box, {
@@ -131,13 +131,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",
@@ -146,10 +143,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
@@ -158,7 +153,6 @@ export default class CalendarView extends React.PureComponent {
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
     }, rows));
   }
-
 }
 CalendarView.propTypes = CalendarView_propTypes;
 CalendarView.defaultProps = CalendarView_defaultProps;
@@ -167,7 +161,6 @@ export class Span extends React.PureComponent {
     super(props);
     this.handleSelectChild = this.handleSelectChild.bind(this);
   }
-
   handleSelectChild(e) {
     const {
       handleSelect,
@@ -177,23 +170,22 @@ export class Span extends React.PureComponent {
     } = this.props;
     handleSelect(incremday, userSeeMonth, userSeeYear, e);
   }
-
   render() {
     const {
       tdclass,
       incremday,
       i,
       dataId,
-      isActive
+      isActive,
+      isToday
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       dataId: dataId,
-      className: `${tdclass} ${isActive ? style.today : ''}`,
+      className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
       key: i,
       onClick: this.handleSelectChild
     }, incremday);
   }
-
 }
 Span.propTypes = Span_propTypes;
 Span.defaultProps = Span_defaultProps;