@zohodesk/components 1.4.15 → 1.4.16

package/es/v1/CheckBox/props/propTypes.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  activeStyle: PropTypes.oneOf(['tick', 'minus']),
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disabled: PropTypes.bool,
+  disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  id: PropTypes.string,
+  isFilled: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'danger']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.shape({
+    customCheckBox: PropTypes.string,
+    customLabel: PropTypes.string,
+    customCBoxSize: PropTypes.string,
+    customTickSize: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaHidden: PropTypes.bool,
+    ariaChecked: PropTypes.bool
+  }),
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/v1/DateTime/CalendarView.js

@@ -0,0 +1,254 @@
+import React from 'react';
+import { Span_propTypes, CalendarView_propTypes } from "./props/propTypes";
+import { CalendarView_defaultProps, Span_defaultProps } from "./props/defaultProps";
+import { Container, Box } from "../Layout";
+import style from "../../DateTime/DateTime.module.css";
+import { getMonthEnd } from "../../utils/datetime/common";
+import { getYearDetails } from "../../DateTime/dateFormatUtils/index";
+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,
+      startDate,
+      endDate,
+      weekStartDay,
+      holidays
+    } = this.props;
+    const userSeeDate = new Date(year, month, 1);
+    const userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 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 <= 7; i++) {
+          let tdclass = `${style.datesStr} ${style.grid}`; // if (i === 1) {
+
+          if (holidays.includes(i - 1)) {
+            tdclass += ` ${style.holiday}`;
+          }
+
+          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,
+              startDate: startDate,
+              endDate: endDate
+            });
+            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}
+              ,
+              startDate: startDate,
+              endDate: endDate
+            });
+          } 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}
+              ,
+              startDate: startDate,
+              endDate: endDate
+            });
+          } 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,
+      holidays: holidays
+    }), /*#__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,
+      userSeeMonth,
+      userSeeYear,
+      startDate,
+      endDate
+    } = this.props;
+    const userSeeDate = new Date(userSeeYear, userSeeMonth, incremday);
+    let startDateRange, endDateRange;
+
+    if (startDate && endDate) {
+      startDateRange = new Date(startDate);
+      endDateRange = new Date(endDate);
+    } else if (!startDate && endDate) {
+      startDateRange = new Date(getYearDetails(4).startPoint, 0, 1);
+      endDateRange = new Date(endDate);
+    } else if (!endDate && startDate) {
+      startDateRange = new Date(startDate);
+      endDateRange = new Date(getYearDetails(4).endPoint, 11, 31);
+    } else {
+      startDateRange = new Date(getYearDetails(4).startPoint, 0, 1);
+      endDateRange = new Date(getYearDetails(4).endPoint, 11, 31);
+    }
+
+    startDateRange = new Date(startDateRange.getFullYear(), startDateRange.getMonth(), startDateRange.getDate());
+    endDateRange = new Date(endDateRange.getFullYear(), endDateRange.getMonth(), endDateRange.getDate());
+    const isActiveDate = startDateRange <= userSeeDate && endDateRange >= userSeeDate;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: dataId,
+      className: `${tdclass} ${isActive && isActiveDate ? style.active : ''} ${isToday ? style.today : ''} ${!isActiveDate ? style.inActiveDate : ''}`,
+      key: i,
+      onClick: isActiveDate ? this.handleSelectChild : undefined,
+      "aria-label": incremday
+    }, incremday);
+  }
+
+}
+Span.propTypes = Span_propTypes;
+Span.defaultProps = Span_defaultProps;