@zohodesk/dot/es/v1/form/fields/DateField/DateField.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React, { memo, useEffect, useRef } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import Label from '@zohodesk/components/es/v1/Label/Label';
import DateWidget from '@zohodesk/components/es/v1/DateTime/DateWidget';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
import FieldContainer from "../FieldContainer/FieldContainer";
/**** CSS ****/

import style from "../../../../form/fields/Fields.module.css";

function DateField(props) {
  let {
    labelName,
    isMandatory,
    isDateTime,
    validationMessage,
    validationPalette,
    textBoxSize,
    textBoxVariant,
    isReadOnly,
    value,
    errorType,
    isDisabled,
    title,
    popupGroup,
    dataId,
    dataSelectorId,
    validationRuleMessage,
    validationRulePalette,
    onKeyDown,
    infoText,
    borderColor,
    fieldSize,
    datePattern,
    isLocked,
    lockedInfoText,
    lockedValueText,
    labelPalette,
    labelCustomClass,
    htmlId,
    timeZone,
    i18nKeys,
    iconOnHover,
    customProps,
    renderLabelProps,
    onChange,
    id,
    getRef,
    openPopupOnMount,
    isFocusOnLabelClick
  } = props;
  const {
    LabelProps = {},
    DateWidgetProps = {},
    ValidationMessageProps1 = {},
    ValidationMessageProps2 = {}
  } = customProps;
  const dateField = useRef(null);
  const getNextId = useUniqueId();
  let getAriaId = htmlId ? htmlId : getNextId();

  function handleChange(value) {
    onChange && onChange(id, value);
  }

  function handleGetRef(el) {
    dateField.current = el;
    getRef && getRef(el, id);
  }

  function openPopup() {
    if (openPopupOnMount) {
      setTimeout(() => {
        dateField.current && dateField.current.click && dateField.current.click();
        handleLabelClick();
      }, 100);
    }
  }

  useEffect(() => {
    openPopup();
  }, [openPopupOnMount]);

  function handleLabelClick() {
    if (isFocusOnLabelClick && dateField.current && dateField.current.focus) {
      dateField.current.focus();
    }
  }

  return /*#__PURE__*/React.createElement("div", {
    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
    "data-title": isDisabled ? title : null,
    "data-selector-id": dataSelectorId
  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
    infoText: infoText,
    isLocked: isLocked,
    lockedInfoText: lockedInfoText,
    renderProps: renderLabelProps
  }, /*#__PURE__*/React.createElement(Label, {
    text: labelName,
    htmlFor: getAriaId,
    size: fieldSize === 'small' ? 'small' : 'medium',
    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
    onClick: isDisabled || isReadOnly ? null : handleLabelClick,
    customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
    ...LabelProps,
    id: labelName
  })), /*#__PURE__*/React.createElement("div", {
    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
  }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {
    className: style.lockText
  }, lockedValueText) : /*#__PURE__*/React.createElement(DateWidget, {
    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
    textBoxVariant: textBoxVariant,
    isDateTime: isDateTime,
    onSelect: handleChange,
    timeZone: timeZone,
    getRef: handleGetRef,
    isReadOnly: isReadOnly,
    value: value,
    popupGroup: popupGroup,
    dataId: `${dataId}(formatted_${labelName})`,
    onKeyDown: onKeyDown,
    borderColor: borderColor,
    isDisabled: isDisabled,
    dateFormat: datePattern,
    isEditable: true,
    htmlId: getAriaId,
    i18nKeys: i18nKeys,
    iconOnHover: iconOnHover,
    ...DateWidgetProps,
    a11y: {
      ariaLabelledby: labelName
    }
  }), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationMessage,
    palette: validationPalette,
    type: errorType,
    htmlFor: getAriaId,
    dataId: `${dataId}_ValidationMessage`,
    ...ValidationMessageProps1
  }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationRuleMessage,
    palette: validationRulePalette,
    type: errorType,
    htmlFor: getAriaId,
    dataId: `${dataId}_ValidationRuleMessage`,
    ...ValidationMessageProps2
  })));
}

DateField.propTypes = propTypes;
DateField.defaultProps = defaultProps;
const MemoizedDateField = /*#__PURE__*/memo(DateField);
MemoizedDateField.propTypes = propTypes;
MemoizedDateField.defaultProps = defaultProps;
MemoizedDateField.displayName = 'DateField';
export default MemoizedDateField;