@zohodesk/components 1.2.11 → 1.2.13

package/es/v1/DateTime/Time.js

@@ -2,8 +2,8 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { Time_propTypes } from '../../DateTime/props/propTypes';
-import { Time_defaultProps } from '../../DateTime/props/defaultProps';
+import { Time_propTypes } from './props/propTypes';
+import { Time_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { Container, Box } from '../Layout';

package/es/v1/DateTime/YearView.js

@@ -1,7 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import { YearView_propTypes } from '../../DateTime/props/propTypes';
-import { YearView_defaultProps } from '../../DateTime/props/defaultProps';
+import { YearView_propTypes } from './props/propTypes';
+import { YearView_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { Virtualizer } from '@zohodesk/virtualizer';

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
+};

package/es/v1/DropDown/DropDown.js

@@ -3,71 +3,50 @@ import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTyp
 import { DropDownItemContainer_defaultProps } from '../../DropDown/props/defaultProps';
 import style from '../../DropDown/DropDown.module.css';
 import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
-export default class DropDown extends React.Component {
-  render() {
-    let {
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
-  }
-
+export default function DropDown(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(PopOver, props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
 }
 DropDown.propTypes = DropDown_propTypes;
-export class DropDownTarget extends React.Component {
-  render() {
-    let {
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", null, children);
-  }
-
+export function DropDownTarget(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, children);
 }
 DropDownTarget.propTypes = DropDownTarget_propTypes;
-export class DropDownContainer extends React.Component {
-  render() {
-    let {
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
-  }
-
+export function DropDownContainer(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
 }
 DropDownContainer.propTypes = DropDownContainer_propTypes;
-export class DropDownItemContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getRef = this.getRef.bind(this);
-    this.onScroll = this.onScroll.bind(this);
-  }
+export function DropDownItemContainer(props) {
+  let {
+    children,
+    dataId,
+    getRef,
+    onScroll
+  } = props;
 
-  onScroll(e) {
-    let {
-      onScroll
-    } = this.props;
+  function handleScroll(e) {
     onScroll && onScroll(e);
   }
 
-  getRef(ele) {
-    let {
-      getRef
-    } = this.props;
+  function getReference(ele) {
     getRef && getRef(ele);
   }
 
-  render() {
-    let {
-      children,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.listGroup,
-      onScroll: this.onScroll,
-      ref: this.getRef,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, children);
-  }
-
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.listGroup,
+    onScroll: handleScroll,
+    ref: getReference,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children);
 }
 DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
 DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/v1/DropDown/DropDownHeading.js

@@ -2,43 +2,35 @@ import React from 'react';
 import { DropDownHeading_propTypes } from '../../DropDown/props/propTypes';
 import { DropDownHeading_defaultProps } from '../../DropDown/props/defaultProps';
 import style from '../../DropDown/DropDownHeading.module.css';
-export default class DropDownHeading extends React.Component {
-  render() {
-    let {
-      text,
-      title = text,
-      children,
-      customClass,
-      palette,
-      htmlId,
-      a11y,
-      dataId,
-      dataSelectorId
-    } = this.props;
-    let {
-      role,
-      ariaLabelledby,
-      ariaLabel
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style[palette]} ${customClass}`,
-      "data-title": title,
-      role: role,
-      "aria-labelledby": ariaLabelledby,
-      "aria-label": ariaLabel,
-      id: htmlId,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      "data-selector-id": dataSelectorId // tabindex='0'
-
-    }, text, children);
-  }
+export default function DropDownHeading(props) {
+  let {
+    text,
+    title = text,
+    children,
+    customClass,
+    palette,
+    htmlId,
+    a11y,
+    dataId,
+    dataSelectorId
+  } = props;
+  let {
+    role,
+    ariaLabelledby,
+    ariaLabel
+  } = a11y;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style[palette]} ${customClass}`,
+    "data-title": title,
+    role: role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-label": ariaLabel,
+    id: htmlId,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId // tabindex='0'
 
+  }, text, children);
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
-DropDownHeading.defaultProps = DropDownHeading_defaultProps; // if (__DOCS__) {
-//   DropDownHeading.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+DropDownHeading.defaultProps = DropDownHeading_defaultProps;

package/es/v1/DropDown/DropDownItem.js

@@ -1,76 +1,56 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { DropDownItem_propTypes } from '../../DropDown/props/propTypes';
 import { DropDownItem_defaultProps } from '../../DropDown/props/defaultProps';
 import style from '../../DropDown/DropDownItem.module.css';
-export default class DropDownItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onClick = this.onClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-    this.getSelectedElement = this.getSelectedElement.bind(this);
-    this.onHover = this.onHover.bind(this);
-  }
+export default function DropDownItem(props) {
+  let {
+    value,
+    active,
+    children,
+    hightlight,
+    dataId,
+    customClass = '',
+    index,
+    getRef,
+    onClick,
+    id,
+    onHover
+  } = props;
+  const eleRef = useRef(null);
 
-  getRef(ele) {
-    this.ele = ele;
-    let {
-      index,
-      getRef
-    } = this.props;
+  function getReference(ele) {
+    eleRef.current = ele;
     getRef && getRef(ele, index);
   }
 
-  getSelectedElement() {
-    return this.ele ? this.ele : null;
+  function getSelectedElement() {
+    return eleRef.current ? eleRef.current : null;
   }
 
-  onClick(e) {
-    let {
-      onClick,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
 
-  onHover(e) {
-    let {
-      onHover,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleHover(e) {
     onHover && onHover(id, value, index, e);
   }
 
-  render() {
-    let {
-      value,
-      active,
-      children,
-      hightlight,
-      dataId,
-      customClass = ''
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
-      onClick: this.onClick,
-      onMouseOver: this.onHover,
-      ref: this.getRef,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
-    }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
-    }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
-      className: style.value
-    }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
-      className: style.user
-    }, " ", children[1], " ") : '');
-  }
-
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+    onClick: handleClick,
+    onMouseOver: handleHover,
+    ref: getReference,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
+    className: style.value
+  }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
+    className: style.user
+  }, " ", children[1], " ") : '');
 }
 DropDownItem.propTypes = DropDownItem_propTypes;
 DropDownItem.defaultProps = DropDownItem_defaultProps;

package/es/v1/DropDown/DropDownSearch.js

@@ -1,63 +1,55 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DropDownSearch_propTypes } from '../../DropDown/props/propTypes';
 import { DropDownSearch_defaultProps } from '../../DropDown/props/defaultProps';
 import TextBox from '../TextBox/TextBox';
 import style from '../../DropDown/DropDownSearch.module.css';
-export default class DropDownSearch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getRef = this.getRef.bind(this);
-  }
+export default function DropDownSearch(props) {
+  let {
+    name,
+    id,
+    maxLength,
+    onKeyDown,
+    onChange,
+    value,
+    onBlur,
+    size,
+    textBoxSize,
+    placeHolder,
+    customClass,
+    getRef
+  } = props;
+  let {
+    searchClass = '',
+    customTextBox = ''
+  } = customClass;
+  const inputRef = useRef(null); // eslint-disable-next-line func-call-spacing
 
-  componentDidMount() {
-    this.input && this.input.focus({
+  useEffect(() => {
+    inputRef.current && input.current.focus({
       preventScroll: true
     });
-  }
+  }, []);
 
-  getRef(ele) {
-    let {
-      getRef
-    } = this.props;
-    this.input = ele;
+  function getReference(ele) {
+    inputRef.current = ele;
     getRef && getRef(ele);
   }
 
-  render() {
-    let {
-      name,
-      id,
-      maxLength,
-      onKeyDown,
-      onChange,
-      value,
-      onBlur,
-      size,
-      textBoxSize,
-      placeHolder,
-      customClass
-    } = this.props;
-    let {
-      searchClass = '',
-      customTextBox = ''
-    } = customClass;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[`${size}Search`]} ${searchClass}`
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      id: id,
-      inputRef: this.getRef,
-      maxLength: maxLength,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      onKeyDown: onKeyDown,
-      size: textBoxSize,
-      value: value,
-      placeHolder: placeHolder,
-      customClass: customTextBox
-    }));
-  }
-
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.search} ${style[`${size}Search`]} ${searchClass}`
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    inputRef: getReference,
+    maxLength: maxLength,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    size: textBoxSize,
+    value: value,
+    placeHolder: placeHolder,
+    customClass: customTextBox
+  }));
 }
 DropDownSearch.defaultProps = DropDownSearch_defaultProps;
 DropDownSearch.propTypes = DropDownSearch_propTypes;