@zohodesk/components 1.2.3 → 1.2.5

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;