@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

package/es/v1/Card/Card.js

@@ -0,0 +1,237 @@
+import React, { useRef, useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from '../../Card/props/propTypes';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from '../../Card/props/defaultProps';
+import { Container, Box } from '../Layout';
+import { getLibraryConfig } from '../../Provider/Config';
+import style from '../../Card/Card.module.css';
+/* eslint-disable react/forbid-component-props */
+
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
+*/
+
+/* performance handling pending in card component moving to ref instead of setState */
+
+export function CardHeader(props) {
+  let {
+    isScroll,
+    children,
+    dataId,
+    dataSelectorId,
+    customClass
+  } = props;
+  const cardHeader = useRef(null);
+
+  function getCardHeaderDom(ele) {
+    cardHeader.current = ele;
+  }
+
+  function setScrollClassName() {
+    if (!cardHeader.current) {
+      return null;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
+    eleRef: getCardHeaderDom,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, children);
+}
+CardHeader.propTypes = CardHeader_propTypes;
+CardHeader.defaultProps = CardHeader_defaultProps;
+export function CardContent(props) {
+  let {
+    onScroll,
+    eleRef,
+    children,
+    scroll,
+    isScrollAttribute,
+    dataId,
+    dataSelectorId,
+    shrink,
+    customClass,
+    preventParentScroll
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    onScroll: onScroll,
+    eleRef: eleRef,
+    scroll: scroll,
+    preventParentScroll: preventParentScroll,
+    isScrollAttribute: isScrollAttribute,
+    dataId: dataId,
+    shrink: shrink,
+    className: customClass,
+    dataSelectorId: dataSelectorId
+  }, children);
+}
+CardContent.propTypes = CardContent_propTypes;
+CardContent.defaultProps = CardContent_defaultProps;
+export default function Card(props) {
+  let {
+    onClick,
+    children,
+    isScrollAttribute,
+    dataId,
+    eleRef,
+    customClass = '',
+    htmlId,
+    a11y,
+    from,
+    limit,
+    fetchData,
+    noMoreData,
+    scrollAt,
+    noNeedUpScroll,
+    isPercentageScroll,
+    onScroll
+  } = props;
+  let {
+    role
+  } = a11y;
+  const [isScroll, setScroll] = useState(false);
+  const fromRef = useRef(from);
+  const limitRef = useRef(limit);
+  const to = useRef(from + 3 * limit);
+  const lastScrollTop = useRef(0);
+  const isFetching = useRef(false);
+  const scrollDirection = useRef(null);
+  useEffectCallOnlyAfterState(() => {
+    fromRef.current = from;
+  }, [from]);
+
+  function onCardScroll(e) {
+    let scrollContainerObj = e.currentTarget;
+    let {
+      scrollHeight
+    } = scrollContainerObj;
+    let {
+      scrollTop
+    } = scrollContainerObj;
+    let {
+      offsetHeight
+    } = scrollContainerObj;
+    onScroll && onScroll(e);
+
+    if (scrollTop > lastScrollTop.current) {
+      scrollDirection.current = 'down';
+    } else {
+      scrollDirection.current = 'up';
+    }
+
+    lastScrollTop.current = scrollTop;
+
+    if (fetchData && !isFetching.current) {
+      if (scrollDirection.current === 'down' && !noMoreData) {
+        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
+        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+
+        if (prefetch) {
+          isFetching.current = true;
+          fetchData(fromRef.current + limitRef.current, limitRef.current + to.current, scrollDirection.current).then(() => {
+            to.current = limitRef.current + to.current;
+            isFetching.current = false;
+          }, () => {
+            isFetching.current = false;
+          });
+        }
+      } else {
+        if (0 >= scrollTop - scrollAt && fromRef.current !== 0 && !noNeedUpScroll) {
+          isFetching.current = true;
+          fetchData(fromRef.current - limitRef.current, to.current - limitRef.current, scrollDirection.current).then(() => {
+            to.current = to.current - limitRef.current;
+            isFetching.current = false;
+          }, () => {
+            isFetching.current = false;
+          });
+        }
+      }
+    }
+
+    if (fetchData && !noNeedUpScroll) {
+      if (fromRef.current !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+        scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
+      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+        scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
+      }
+    } // if (isScrollShadow) {
+    //   this.onSetScroll();
+    // }
+
+  } // setScroll(isScroll) {
+  //   let { isScroll: stateIsScroll } = this.state;
+  //   if (isScroll && !stateIsScroll) {
+  //     this.setState({ isScroll: true }, () => {
+  //       this.onClearScroll();
+  //     });
+  //   } else if (!isScroll && stateIsScroll) {
+  //     this.setState({ isScroll: false });
+  //   }
+  // }
+
+
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${customClass}`,
+    isScrollAttribute: isScrollAttribute,
+    onClick: onClick,
+    dataId: dataId,
+    eleRef: eleRef
+  }, React.Children.map(children, child => {
+    if (!child) {
+      return child;
+    }
+
+    if (child.type === CardHeader || props.childTypes && child.type === props.childTypes.cardHeader) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        isScroll
+      });
+    } else if (child.type === CardContent || props.childTypes && child.type === props.childTypes.cardContent) {
+      return /*#__PURE__*/React.createElement(Box, {
+        id: htmlId,
+        role: role,
+        flexible: true,
+        scroll: child.props.scroll,
+        preventParentScroll: child.props.preventParentScroll,
+        onScroll: onCardScroll,
+        eleRef: child.props.eleRef,
+        isScrollAttribute: child.props.isScrollAttribute,
+        dataId: child.props.dataId,
+        shrink: child.props.shrink,
+        className: child.props.customClass,
+        dataSelectorId: child.props.dataSelectorId
+      }, child.props.children);
+    }
+
+    return child;
+  }));
+}
+Card.propTypes = Card_propTypes;
+Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
+//   Card.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }
+
+export function CardFooter(props) {
+  let {
+    children,
+    dataId,
+    customClass,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${customClass}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, children);
+}
+CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.defaultProps = CardFooter_defaultProps;

package/es/v1/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { CardHeader } from './Card';
+export { CardContent } from './Card';
+export { CardFooter } from './Card';

package/es/v1/CheckBox/CheckBox.js

@@ -0,0 +1,155 @@
+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 '../../CheckBox/props/propTypes';
+import { defaultProps } from '../../CheckBox/props/defaultProps';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../CheckBox/CheckBox.module.css';
+
+const CheckBox = props => {
+  let {
+    id,
+    checked,
+    disabled,
+    isReadOnly,
+    disabledTitle,
+    title,
+    palette,
+    text,
+    size,
+    labelPalette,
+    labelSize,
+    isFilled,
+    isClipped,
+    getRef,
+    variant,
+    active,
+    dataId,
+    name,
+    activeStyle,
+    a11y,
+    customClass,
+    customProps,
+    dataSelectorId
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  let {
+    CheckBoxProps = {},
+    LabelProps = {}
+  } = customProps;
+  let {
+    customCheckBox = '',
+    customLabel = '',
+    customCBoxSize = '',
+    customTickSize = ''
+  } = customClass;
+  let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+  let toolTip = disabled ? disabledTitle : title ? title : null;
+  let {
+    ariaLabel,
+    ariaLabelledby,
+    ariaHidden,
+    role = 'checkbox',
+    ariaChecked = checked
+  } = a11y;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    dataId: dataId,
+    isCover: false,
+    isInline: text ? false : true,
+    alignBox: "row",
+    align: "vertical",
+    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`} 
+      ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
+    "data-title": toolTip,
+    onClick: isReadOnly || disabled ? null : onChange,
+    tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+    "aria-checked": ariaChecked,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-hidden": ariaHidden,
+    "data-selector-id": dataSelectorId || id
+  }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    id: id,
+    ref: getRef,
+    name: name
+  }), /*#__PURE__*/React.createElement("label", {
+    className: `${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`
+  }, activeStyle == 'tick' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, checked ? /*#__PURE__*/React.createElement("path", {
+    xmlns: "http://www.w3.org/2000/svg",
+    d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
+    className: `${style.cbBox}`
+  }) : /*#__PURE__*/React.createElement("rect", {
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "1",
+    y: "1",
+    width: "38",
+    height: "38",
+    rx: "4",
+    className: `${style.cbBox}`
+  })), checked ? /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 44 44",
+    className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "12.56 19 19.61 26.06 40.39 5.28",
+    className: `${style.tickPath} ${style.checkedtickPath}`
+  })) : null) : /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("rect", {
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "1",
+    y: "1",
+    width: "38",
+    height: "38",
+    rx: "4",
+    className: `${style.cbBox}`
+  }), checked ? /*#__PURE__*/React.createElement("line", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `${style.linePath} ${style.cbBox}`,
+    x1: "11.47",
+    y1: "20",
+    x2: "28.53",
+    y2: "20"
+  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.text
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: text,
+    palette: disabled ? 'disable' : labelPalette,
+    id: id,
+    size: labelSize,
+    type: "title",
+    clipped: isClipped,
+    variant: variant,
+    customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
+                          ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
+                          ${accessMode} ${customLabel}`,
+    title: toolTip ? toolTip : text
+  }, LabelProps))));
+};
+
+export default CheckBox;
+CheckBox.defaultProps = defaultProps;
+CheckBox.propTypes = propTypes; // if (__DOCS__) {
+//   CheckBox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/DateTime/CalendarView.js

@@ -0,0 +1,218 @@
+import React from 'react';
+import { Span_propTypes, CalendarView_propTypes } from '../../DateTime/props/propTypes';
+import { CalendarView_defaultProps, Span_defaultProps } from '../../DateTime/props/defaultProps';
+import { Container, Box } from '../Layout';
+import style from '../../DateTime/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'] }] */
+
+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,
+      year,
+      month,
+      dataId,
+      needBorder,
+      dayNames,
+      dayNamesShort,
+      todayMonth,
+      todayDate,
+      todayYear
+    } = this.props;
+    const userSeeDate = new Date(year, month, 1);
+    const userSeeDay = userSeeDate.getDay() + 1;
+    const userSeeYear = userSeeDate.getFullYear();
+    const userSeeMonth = userSeeDate.getMonth();
+    const monthEnd = getMonthEnd(month, year);
+    const lastMonth = 11;
+    const firstMonth = 0; // let noOfRow = 5;
+    // if (
+    //   (monthEnd === 31 && userSeeDay >= 6) ||
+    //   (monthEnd === 30 && userSeeDay === 7)
+    // ) {
+    //   noOfRow = 6;
+    // } else if (monthEnd === 28 && userSeeDay === 1) {
+    //   noOfRow = 4;
+    // }
+
+    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 (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
+              isSelectedDay = true;
+            } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
+              isToday = true;
+              isSelectedDay = false;
+            } else {
+              isSelectedDay = false;
+              isToday = false;
+            }
+
+            output = /*#__PURE__*/React.createElement(Span, {
+              i: i,
+              isActive: isSelectedDay,
+              tdclass: tdclass,
+              handleSelect: this.handleSelect,
+              incremday: incremday,
+              userSeeMonth: userSeeMonth,
+              userSeeYear: userSeeYear,
+              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; // 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}
+              ,
+              tdclass: `${tdclass} ${style.invalidDate}`,
+              handleSelect: this.handleSelect,
+              incremday: prevDate,
+              userSeeMonth: prevMonth,
+              userSeeYear: prevYear,
+              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; // isSelectedDay =
+
+            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false; // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
+            output = /*#__PURE__*/React.createElement(Span, {
+              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}
+
+            });
+          } else {
+            output = /*#__PURE__*/React.createElement(Box, {
+              key: i,
+              className: `${style.grid}`
+            });
+          }
+
+          incremleti++;
+          dayArr.push(output);
+        }
+        /* eslint-disable react/forbid-component-props */
+
+
+        rowArr.push( /*#__PURE__*/React.createElement(Container, {
+          key: j,
+          alignBox: "row",
+          align: "center",
+          isCover: false,
+          className: style.dateRow
+        }, dayArr));
+      }
+
+      return rowArr;
+    })();
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      ariaLabel: dayNamesShort
+    }), /*#__PURE__*/React.createElement("div", {
+      "data-id": `${dataId}_dateContainer`,
+      "data-test-id": `${dataId}_dateContainer`,
+      className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
+    }, rows));
+  }
+
+}
+CalendarView.propTypes = CalendarView_propTypes;
+CalendarView.defaultProps = CalendarView_defaultProps;
+export class Span extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleSelectChild = this.handleSelectChild.bind(this);
+  }
+
+  handleSelectChild(e) {
+    const {
+      handleSelect,
+      incremday,
+      userSeeMonth,
+      userSeeYear
+    } = this.props;
+    handleSelect(incremday, userSeeMonth, userSeeYear, e);
+  }
+
+  render() {
+    const {
+      tdclass,
+      incremday,
+      i,
+      dataId,
+      isActive,
+      isToday
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: dataId,
+      className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
+      key: i,
+      onClick: this.handleSelectChild,
+      "aria-label": incremday
+    }, incremday);
+  }
+
+}
+Span.propTypes = Span_propTypes;
+Span.defaultProps = Span_defaultProps;