@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/ColorSelect/_shared/ColoredTag/ColoredTag.js

@@ -0,0 +1,35 @@
+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, { useMemo } from 'react';
+import { propTypes } from "./props/propTypes";
+import Tag from "../../../Tag/Tag";
+import { DUMMY_OBJECT } from "../../../utils/Common.js";
+
+function ColoredTag(props) {
+  const {
+    colorConfig,
+    customAttributes,
+    isActive,
+    ...rest
+  } = props;
+  const {
+    textColor,
+    backgroundColor,
+    borderColor
+  } = colorConfig || DUMMY_OBJECT;
+  const style = useMemo(() => ({
+    '--tag_bg_color': backgroundColor,
+    '--tag_text_color': textColor,
+    '--tag_border_color': borderColor
+  }), [backgroundColor, textColor, borderColor]);
+  const composedAttributes = useMemo(() => ({ ...customAttributes,
+    style
+  }), [customAttributes, style]);
+  return /*#__PURE__*/React.createElement(Tag, _extends({}, rest, {
+    active: isActive,
+    customAttributes: composedAttributes
+  }));
+}
+
+ColoredTag.propTypes = propTypes;
+export default ColoredTag;

package/es/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColoredTag from "../ColoredTag";
+describe('ColoredTag', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with isActive true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with colorConfig', () => {
+    const colorConfig = {
+      backgroundColor: 'lightsteelblue',
+      textColor: 'dodgerblue',
+      borderColor: 'dodgerblue'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      colorConfig: colorConfig
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      text: 'Colored Tag'
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredTag rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="1"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with colorConfig 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="3"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    style="--tag_bg_color: lightsteelblue; --tag_text_color: dodgerblue; --tag_border_color: dodgerblue;"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="3"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with customAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="4"
+    class="container effect    medium lgRadius default   "
+    data-custom-attribute="true"
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="4"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with isActive true 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="2"
+    class="container effect selected activedefault   medium lgRadius default   "
+    data-id="tag_TagSelected"
+    data-selector-id="tag"
+    data-test-id="tag_TagSelected"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="2"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with text 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="5"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    data-title="Colored Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="5"
+    >
+      Colored Tag
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ColorSelect/_shared/ColoredTag/props/propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { propTypes as tagPropTypes } from "../../../../Tag/props/propTypes";
+export const propTypes = { ...tagPropTypes,
+  isActive: PropTypes.bool,
+  colorConfig: PropTypes.shape({
+    textColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    borderColor: PropTypes.string
+  })
+};

package/es/ColorSelect/_shared/helpers/renderHelpers.js

@@ -0,0 +1,45 @@
+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 ColoredTag from "../ColoredTag/ColoredTag";
+import ColorIndicator from "../ColorIndicator/ColorIndicator";
+import { DUMMY_OBJECT } from "../../../utils/Common";
+export function renderColoredTag(data) {
+  const {
+    option,
+    ...otherData
+  } = data || DUMMY_OBJECT;
+  const {
+    colorConfig,
+    value,
+    id
+  } = option || DUMMY_OBJECT;
+  const {
+    text,
+    background,
+    border
+  } = colorConfig || DUMMY_OBJECT;
+
+  function getColorConfig() {
+    return {
+      backgroundColor: background,
+      textColor: text,
+      borderColor: border
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(ColoredTag, _extends({
+    text: value,
+    id: id
+  }, otherData, {
+    colorConfig: getColorConfig()
+  }));
+}
+export function renderColorIndicator(data) {
+  const {
+    colorConfig
+  } = data;
+  return /*#__PURE__*/React.createElement(ColorIndicator, {
+    colorConfig: colorConfig
+  });
+}

package/es/ColorSelect/props/defaultProps.js

@@ -0,0 +1,12 @@
+import { MultiSelect_defaultProps } from "../../MultiSelect/props/defaultProps";
+import { Select_defaultProps } from "../../Select/props/defaultProps";
+export const ColorSingleSelect_defaultProps = { ...Select_defaultProps,
+  className: '',
+  options: [],
+  customProps: {},
+  customClass: {}
+};
+export const ColorMultiSelect_defaultProps = { ...MultiSelect_defaultProps,
+  options: [],
+  customProps: {}
+};

package/es/ColorSelect/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import { Select_propTypes } from "../../Select/props/propTypes";
+import { MultiSelect_propTypes } from "../../MultiSelect/props/propTypes";
+export const propTypes = {
+  renderCustomColorIndicator: PropTypes.element
+};
+export const ColorSingleSelect_propTypes = { ...Select_propTypes,
+  ...propTypes,
+  placeholder: PropTypes.string,
+  customClass: PropTypes.shape({
+    selectClass: PropTypes.string
+  }),
+  renderRightPlaceholderNode: PropTypes.node
+};
+export const ColorMultiSelect_propTypes = { ...MultiSelect_propTypes,
+  ...propTypes
+};

package/es/DateTime/CalendarView.js

@@ -0,0 +1,223 @@
+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.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,
+      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 < 8; i++) {
+          isSelectedDay = false;
+          let tdclass = `${style.datesStr} ${style.grid}`;
+
+          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
+            });
+            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: `${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; // console.log('last dates',incremleti, monthEnd,'nextDate',nextDate,'monthEnd',monthEnd,'userSeeDay',userSeeDay)
+            // 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: `${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,
+      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
+    } = 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;