@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/DateTime/DaysRow.js

@@ -1,32 +0,0 @@
-/* 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,
-      holidays
-    } = 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} ${holidays.includes(index) ? style.holiday : ''}`,
-      "data-title": dayName,
-      "aria-label": dayName
-    }, dayNamesShort[index])));
-  }
-
-}
-DaysRow.propTypes = DaysRow_propTypes;

package/es/v1/DateTime/Time.js

@@ -1,181 +0,0 @@
-/* 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,
-      customProps = {}
-    } = this.props;
-    const {
-      HourSelectProps = {},
-      MinuteSelectProps = {},
-      AmPmSelectProps = {}
-    } = customProps;
-    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,
-      customProps: HourSelectProps
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(Minute, {
-      minSuggestions: minSuggestions,
-      onMinutesSelect: onMinutesSelect,
-      mins: mins,
-      minuteEmptyText: minuteEmptyText,
-      needResponsive: needResponsive,
-      customProps: MinuteSelectProps
-    })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(AmPm, {
-      ampmSuggestions: ampmSuggestions,
-      onAmPmSelect: onAmPmSelect,
-      amPm: amPm,
-      needResponsive: needResponsive,
-      customProps: AmPmSelectProps
-    })) : null));
-  }
-
-}
-Time.propTypes = Time_propTypes;
-Time.defaultProps = Time_defaultProps;
-
-class Hour extends React.PureComponent {
-  render() {
-    const {
-      hourSuggestions,
-      onHourSelect,
-      hours,
-      needResponsive,
-      hourEmptyText,
-      customProps
-    } = 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",
-      ...customProps
-    });
-  }
-
-}
-
-class Minute extends React.PureComponent {
-  render() {
-    const {
-      minSuggestions,
-      onMinutesSelect,
-      mins,
-      minuteEmptyText,
-      needResponsive,
-      customProps
-    } = 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",
-      ...customProps
-    });
-  }
-
-}
-
-class AmPm extends React.PureComponent {
-  render() {
-    const {
-      ampmSuggestions,
-      onAmPmSelect,
-      amPm,
-      needResponsive,
-      customProps
-    } = 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",
-      ...customProps
-    });
-  }
-
-}

package/es/v1/DateTime/YearView.js

@@ -1,264 +0,0 @@
-/**** 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

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

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

@@ -1,63 +0,0 @@
-export const CalendarView_defaultProps = {
-  dataId: 'dateContainer',
-  needBorder: true,
-  weekStartDay: 0,
-  holidays: [0]
-};
-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,
-  weekStartDay: 0,
-  holidays: [0]
-};
-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,
-  weekStartDay: 0,
-  holidays: [0]
-};
-export const YearView_defaultProps = {
-  dataId: 'dateContainer',
-  needBorder: true
-};
-export const DateTimePopupFooter_defaultProps = {
-  dataId: 'DateTimePopupFooter'
-};
-export const Time_defaultProps = {
-  dataId: 'Time'
-};