@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/DateTime/DaysRow.js

@@ -0,0 +1,31 @@
+/* eslint-disable react/forbid-component-props */
+
+/** ** Libraries *** */
+import React, { PureComponent } from 'react';
+import { DaysRow_propTypes } from './props/propTypes';
+/** ** CSS *** */
+
+import style from '../../DateTime/DateTime.module.css';
+/** ** Components *** */
+
+import { Container, Box } from '../Layout';
+export default class DaysRow extends PureComponent {
+  render() {
+    const {
+      dayNames,
+      dayNamesShort
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center",
+      className: style.days
+    }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
+      key: dayName,
+      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
+      "data-title": dayName,
+      "aria-label": dayName
+    }, dayNamesShort[index])));
+  }
+
+}
+DaysRow.propTypes = DaysRow_propTypes;

package/es/v1/DateTime/Time.js

@@ -0,0 +1,166 @@
+/* eslint-disable react/forbid-component-props */
+
+/** ** Libraries *** */
+import React, { PureComponent } from 'react';
+import { Time_propTypes } from './props/propTypes';
+import { Time_defaultProps } from './props/defaultProps';
+/**** Components ****/
+
+import { Container, Box } from '../Layout';
+import Select from '../Select/Select';
+/** ** CSS *** */
+
+import style from '../../DateTime/DateTime.module.css';
+export default class Time extends PureComponent {
+  render() {
+    const {
+      timeText,
+      dataId,
+      hourSuggestions,
+      onHourSelect,
+      hours,
+      hourEmptyText,
+      needResponsive,
+      minSuggestions,
+      onMinutesSelect,
+      mins,
+      minuteEmptyText,
+      ampmSuggestions,
+      onAmPmSelect,
+      amPm,
+      is24Hour
+    } = this.props;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: style.text
+    }, timeText), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.timesection,
+      isCover: false,
+      dataId: `${dataId}_timeContainer`
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.dropDownContainer
+    }, /*#__PURE__*/React.createElement(Hour, {
+      hourSuggestions: hourSuggestions,
+      onHourSelect: onHourSelect,
+      hours: hours,
+      needResponsive: needResponsive,
+      hourEmptyText: hourEmptyText
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.dropDownContainer
+    }, /*#__PURE__*/React.createElement(Minute, {
+      minSuggestions: minSuggestions,
+      onMinutesSelect: onMinutesSelect,
+      mins: mins,
+      minuteEmptyText: minuteEmptyText,
+      needResponsive: needResponsive
+    })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.dropDownContainer
+    }, /*#__PURE__*/React.createElement(AmPm, {
+      ampmSuggestions: ampmSuggestions,
+      onAmPmSelect: onAmPmSelect,
+      amPm: amPm,
+      needResponsive: needResponsive
+    })) : null));
+  }
+
+}
+Time.propTypes = Time_propTypes;
+Time.defaultProps = Time_defaultProps;
+
+class Hour extends React.PureComponent {
+  render() {
+    const {
+      hourSuggestions,
+      onHourSelect,
+      hours,
+      needResponsive,
+      hourEmptyText
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      options: hourSuggestions,
+      onChange: onHourSelect,
+      selectedValue: hours,
+      needSearch: true,
+      emptyMessage: hourEmptyText,
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      searchBoxPlaceHolder: "",
+      maxLength: "2",
+      popupGroup: "calender",
+      size: "small",
+      dataId: "hourField",
+      needResponsive: needResponsive,
+      needListBorder: true,
+      needTick: false,
+      listItemSize: "small"
+    });
+  }
+
+}
+
+class Minute extends React.PureComponent {
+  render() {
+    const {
+      minSuggestions,
+      onMinutesSelect,
+      mins,
+      minuteEmptyText,
+      needResponsive
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      options: minSuggestions,
+      onChange: onMinutesSelect,
+      selectedValue: mins,
+      needSearch: true,
+      emptyMessage: minuteEmptyText,
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      searchBoxPlaceHolder: "",
+      maxLength: "2",
+      popupGroup: "calender",
+      size: "small",
+      dataId: "minuteField",
+      needResponsive: needResponsive,
+      needListBorder: true,
+      needTick: false,
+      listItemSize: "small"
+    });
+  }
+
+}
+
+class AmPm extends React.PureComponent {
+  render() {
+    const {
+      ampmSuggestions,
+      onAmPmSelect,
+      amPm,
+      needResponsive
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      options: ampmSuggestions,
+      onChange: onAmPmSelect,
+      selectedValue: amPm,
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      maxLength: "2",
+      popupGroup: "calender",
+      size: "small",
+      dataId: "ampmField",
+      needResponsive: needResponsive,
+      needListBorder: true,
+      needTick: false,
+      listItemSize: "small"
+    });
+  }
+
+}

package/es/v1/DateTime/YearView.js

@@ -0,0 +1,264 @@
+/**** Libraries ****/
+import React from 'react';
+import { YearView_propTypes } from './props/propTypes';
+import { YearView_defaultProps } from './props/defaultProps';
+/**** Components ****/
+
+import { Virtualizer } from '@zohodesk/virtualizer';
+import { Container, Box } from '../Layout';
+import { Icon } from '@zohodesk/icons';
+import Heading from '../Heading/Heading';
+/**** CSS ****/
+
+import style from '../../DateTime/YearView.module.css';
+/**** Methods ****/
+
+import { getYearDetails } from '../../DateTime/dateFormatUtils';
+const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function getYears() {
+  const years = [];
+  const {
+    startPoint,
+    endPoint
+  } = getYearDetails();
+
+  for (let i = startPoint; i <= endPoint; i++) {
+    years.push(i);
+  }
+
+  return years;
+}
+
+class Year extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const {
+      year,
+      onClick
+    } = this.props;
+    onClick && onClick(year);
+  }
+
+  render() {
+    const {
+      year,
+      isActive,
+      isOpen
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: `${style.year} ${isActive ? style.isActive : ''}`,
+      onClick: this.handleClick,
+      dataId: isActive ? `yearAtv_${year}` : `year_${year}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.yearText,
+      title: year,
+      a11y: {
+        tabindex: '0'
+      },
+      tagName: "h4"
+    })), /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-arrowDownSingle",
+      size: "7",
+      isBold: true,
+      iconClass: isOpen ? `${style.arrow} ${style.arrowActive}` : style.arrow
+    })));
+  }
+
+}
+
+class Month extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const {
+      month,
+      onClick
+    } = this.props;
+    let monthIndex = monthNamesData.indexOf(month);
+    monthIndex = monthIndex === -1 ? 0 : monthIndex;
+    onClick && onClick(monthIndex);
+  }
+
+  render() {
+    const {
+      month,
+      isActive,
+      displayText,
+      hoverText
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: `month_${month}`,
+      className: `${style.month} ${isActive ? style.currentMonth : ''}`,
+      onClick: this.handleClick,
+      "data-title": hoverText,
+      "aria-label": month
+    }, displayText);
+  }
+
+}
+
+export default class YearView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.renderListItem = this.renderListItem.bind(this);
+    this.handleMonthClick = this.handleMonthClick.bind(this);
+    this.handleYearClick = this.handleYearClick.bind(this);
+    this.getPublicMethods = this.getPublicMethods.bind(this);
+    this.handleScrollToYear = this.handleScrollToYear.bind(this);
+    this.handleUpdateLocalYear = this.handleUpdateLocalYear.bind(this);
+    this.years = getYears();
+    this.state = {
+      localYear: ''
+    };
+  }
+
+  componentDidMount() {
+    this.handleScrollToYear(this.props);
+    this.handleUpdateLocalYear(this.props);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      viewedYear
+    } = this.props;
+    viewedYear = parseInt(viewedYear) || 0;
+    let {
+      viewedYear: oldViewedYear
+    } = prevProps;
+    oldViewedYear = parseInt(oldViewedYear) || 0;
+
+    if (viewedYear !== oldViewedYear) {
+      this.handleScrollToYear(this.props);
+      this.handleUpdateLocalYear(this.props);
+    }
+  }
+
+  handleUpdateLocalYear(props) {
+    let {
+      viewedYear
+    } = props;
+    viewedYear = parseInt(viewedYear) || 0;
+    setTimeout(() => {
+      this.setState({
+        localYear: viewedYear
+      });
+    }, 150);
+  }
+
+  handleScrollToYear(props) {
+    const {
+      years = [],
+      scrollToIndex
+    } = this;
+    let {
+      viewedYear
+    } = props;
+    viewedYear = parseInt(viewedYear) || 0;
+    const yearIndex = years.indexOf(viewedYear);
+    yearIndex >= 0 && scrollToIndex && scrollToIndex(yearIndex, 0, {
+      duration: 0
+    });
+  }
+
+  getPublicMethods(methods) {
+    const {
+      scrollToIndex
+    } = methods;
+    this.scrollToIndex = scrollToIndex;
+  }
+
+  handleMonthClick(month) {
+    const {
+      onSelectMonth
+    } = this.props;
+    onSelectMonth && onSelectMonth(month);
+  }
+
+  handleYearClick(year) {
+    const {
+      onSelectYear
+    } = this.props;
+    onSelectYear && onSelectYear(year);
+  }
+
+  renderListItem(_ref) {
+    let {
+      index,
+      style: virtualizerStyle,
+      ref
+    } = _ref;
+    const {
+      years
+    } = this;
+    const year = years[index];
+    let {
+      viewedYear,
+      viewedMonth,
+      monthNamesShort,
+      isMonthOpen
+    } = this.props;
+    viewedYear = parseInt(viewedYear) || 0;
+    let {
+      localYear
+    } = this.state;
+    localYear = parseInt(localYear) || 0;
+    return /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      className: style.yearBox,
+      eleRef: ref,
+      style: virtualizerStyle
+    }, /*#__PURE__*/React.createElement(Year, {
+      year: year,
+      onClick: this.handleYearClick,
+      isActive: viewedYear === year,
+      isOpen: isMonthOpen
+    }), viewedYear === year && isMonthOpen ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      wrap: "wrap",
+      align: "between",
+      className: `${style.yearContainer} ${viewedYear !== localYear && viewedYear === year ? style.toggleYear : ''}`
+    }, monthNamesData.map((month, index) => {
+      const monthIndex = monthNamesData.indexOf(month);
+      return /*#__PURE__*/React.createElement(Month, {
+        key: month,
+        month: month,
+        onClick: this.handleMonthClick,
+        isActive: monthIndex === viewedMonth,
+        displayText: monthNamesShort[index] // hoverText={monthNames[index]}
+
+      });
+    }))) : null);
+  }
+
+  render() {
+    const {
+      years = []
+    } = this;
+    return /*#__PURE__*/React.createElement(Virtualizer, {
+      elementRenderer: this.renderListItem,
+      elementsCount: years.length,
+      className: style.container,
+      getExposedPublicMethods: this.getPublicMethods,
+      isElementsFixedHeight: false,
+      dataId: "yearList"
+    });
+  }
+
+}
+YearView.propTypes = YearView_propTypes;
+YearView.defaultProps = YearView_defaultProps;

package/es/v1/DateTime/index.js

@@ -0,0 +1 @@
+export { default as DateWidget } from './DateWidget';

package/es/v1/DateTime/props/defaultProps.js

@@ -0,0 +1,57 @@
+export const CalendarView_defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
+export const Span_defaultProps = {
+  dataId: 'calendar-view'
+};
+export const DateTime_defaultProps = {
+  isDateTimeField: true,
+  dataId: 'dateTime',
+  needDefaultTime: true,
+  isAbsolute: true,
+  isAnimate: true,
+  needAction: true,
+  boxSize: 'large',
+  className: '',
+  innerClass: '',
+  dateFormat: 'dd/MM/yyyy',
+  isPadding: false,
+  i18nKeys: {},
+  is24Hour: false,
+  isDefaultPosition: false,
+  customDateFormat: null
+};
+export const DateWidget_defaultProps = {
+  borderColor: 'default',
+  dataId: 'dateWidget',
+  dateFormat: 'MM/dd/yyyy',
+  isDateTime: false,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needBorder: true,
+  needDefaultTime: true,
+  placeholder: '-None-',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  timeZone: null,
+  isPopupOpenOnClick: true,
+  isPopupCloseOnClick: false,
+  cantEditOnPopupOpen: true,
+  i18nKeys: {},
+  needErrorOnBlur: false,
+  isEditable: false,
+  iconOnHover: false,
+  is24Hour: false
+};
+export const YearView_defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
+export const DateTimePopupFooter_defaultProps = {
+  dataId: 'DateTimePopupFooter'
+};
+export const Time_defaultProps = {
+  dataId: 'Time'
+};

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

@@ -0,0 +1,195 @@
+import PropTypes from 'prop-types';
+import { dataFormatList } from '../../../DateTime/dateFormatUtils/dateFormats';
+export const CalendarView_propTypes = {
+  dataId: PropTypes.string,
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needBorder: PropTypes.bool,
+  onSelect: PropTypes.func,
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.array,
+  todayMonth: PropTypes.string,
+  todayDate: PropTypes.string,
+  todayYear: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const Span_propTypes = {
+  dataId: PropTypes.string,
+  handleSelect: PropTypes.func,
+  i: PropTypes.number,
+  incremday: PropTypes.number,
+  isActive: PropTypes.bool,
+  tdclass: PropTypes.string,
+  userSeeMonth: PropTypes.number,
+  userSeeYear: PropTypes.number,
+  isToday: PropTypes.bool,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const DateTime_propTypes = {
+  boxSize: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dateFormat: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  defaultTime: PropTypes.string,
+  getMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    timeText: PropTypes.string.isRequired,
+    submitText: PropTypes.string.isRequired,
+    cancelText: PropTypes.string.isRequired,
+    hourEmptyText: PropTypes.string.isRequired,
+    minuteEmptyText: PropTypes.string.isRequired,
+    nextMonthTitleText: PropTypes.string.isRequired,
+    prevMonthTitleText: PropTypes.string.isRequired
+  }),
+  innerClass: PropTypes.string,
+  isAbsolute: PropTypes.bool,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDateTimeField: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isReady: PropTypes.bool,
+  max: PropTypes.string,
+  maxErrorText: PropTypes.string,
+  min: PropTypes.string,
+  minErrorText: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  needAction: PropTypes.bool,
+  needDefaultTime: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onDateSelect: PropTypes.func,
+  onError: PropTypes.func,
+  onSelect: PropTypes.func,
+  position: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  is24Hour: PropTypes.bool,
+  isDefaultPosition: PropTypes.bool,
+  customDateFormat: PropTypes.string,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.string,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const DateWidget_propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  cantEditOnPopupOpen: PropTypes.bool,
+  children: PropTypes.object,
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  dateFormat: PropTypes.oneOf([...dataFormatList]),
+  defaultPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  defaultTime: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.object,
+  id: PropTypes.string,
+  isDateTime: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isPopupCloseOnClick: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnClick: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  max: PropTypes.string,
+  maxErrorText: PropTypes.string,
+  min: PropTypes.string,
+  minErrorText: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needDefaultTime: PropTypes.bool,
+  needErrorOnBlur: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onFailValidation: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onPassValidation: PropTypes.func,
+  onSelect: PropTypes.func,
+  placeholder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  togglePopup: PropTypes.func,
+  validation: PropTypes.shape({
+    validate: PropTypes.bool,
+    validateOn: PropTypes.string,
+    rulesOrder: PropTypes.arrayOf(PropTypes.string),
+    rules: PropTypes.object,
+    messages: PropTypes.object
+  }),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  htmlId: PropTypes.string,
+  iconOnHover: PropTypes.bool,
+  is24Hour: PropTypes.bool,
+  isHideCurrentYear: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  boxSize: PropTypes.string,
+  onError: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.array,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  a11y: PropTypes.object,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const YearView_propTypes = {
+  onSelectMonth: PropTypes.func,
+  onSelectYear: PropTypes.func,
+  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  viewedMonth: PropTypes.string,
+  monthNamesShort: PropTypes.array,
+  isMonthOpen: PropTypes.bool
+};
+export const DateTimePopupFooter_propTypes = {
+  submitText: PropTypes.string,
+  onSubmit: PropTypes.func,
+  cancelText: PropTypes.string,
+  onCancel: PropTypes.func,
+  dataId: PropTypes.string
+};
+export const DateTimePopupHeader_propTypes = {
+  onOpenYearView: PropTypes.func,
+  showMonthTxt: PropTypes.string,
+  isYearView: PropTypes.bool,
+  prevMonthTitleText: PropTypes.string,
+  nextMonthTitleText: PropTypes.string,
+  onModifyCalendar: PropTypes.func
+};
+export const DaysRow_propTypes = {
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.object
+};
+export const Time_propTypes = {
+  timeText: PropTypes.string,
+  dataId: PropTypes.string,
+  hourSuggestions: PropTypes.array,
+  onHourSelect: PropTypes.func,
+  hours: PropTypes.string,
+  hourEmptyText: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  minSuggestions: PropTypes.array,
+  onMinutesSelect: PropTypes.func,
+  mins: PropTypes.string,
+  minuteEmptyText: PropTypes.string,
+  ampmSuggestions: PropTypes.array,
+  onAmPmSelect: PropTypes.func,
+  amPm: PropTypes.string,
+  is24Hour: PropTypes.bool
+};