@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/CheckBox/CheckBox.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './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,
+    getContainerRef,
+    variant,
+    active,
+    dataId,
+    name,
+    activeStyle,
+    a11y,
+    customClass,
+    customProps,
+    dataSelectorId
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  function handleGetContainerRef(ele) {
+    getContainerRef && getContainerRef(ele, id);
+  }
+
+  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, {
+    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,
+    eleRef: handleGetContainerRef,
+    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, {
+    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/CheckBox/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  labelPalette: 'default',
+  labelSize: 'medium',
+  palette: 'primary',
+  size: 'medium',
+  isFilled: true,
+  variant: 'default',
+  dataId: 'checkBox',
+  activeStyle: 'tick',
+  customClass: {},
+  a11y: {},
+  isClipped: true,
+  customProps: {}
+};

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,251 @@
+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
+    } = 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 <= 7; 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,
+              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
+    }), /*#__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;