@zohodesk/dot 1.2.3 → 1.3.0

package/es/v1/form/fields/CurrencyField/CurrencyField.js

@@ -1,183 +1,157 @@
 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); }
 
 /**** Libraries ****/
-import React, { PureComponent } from 'react';
+import React, { memo, useRef, useState } from 'react';
 import { defaultProps } from '../../../../form/fields/CurrencyField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/CurrencyField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class CurrencyField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: false
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    this.getNextId = getUniqueId(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
+
+function CurrencyField(props) {
+  let {
+    labelName,
+    id,
+    textBoxSize,
+    textBoxVariant,
+    textBoxType,
+    isMandatory,
+    validationMessage,
+    validationPalette,
+    maxLength,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    placeHolder,
+    infoText,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    dataSelectorId,
+    lockedInfoText,
+    isLocked,
+    needReadOnlyStyle,
+    isClickable,
+    userCurrencyType,
+    customProps,
+    formatCurrency,
+    renderLabelProps,
+    onBlur,
+    onFocus,
+    getRef,
+    onChange
+  } = props;
+  const {
+    LabelProps = {},
+    TextBoxProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  const [isActive, setActive] = useState(false);
+  const textBox = useRef(null);
+  let formatValue = value;
+
+  if (!isActive) {
+    formatValue = formatCurrency(value, userCurrencyType);
+  } else {
+    formatValue = value;
   }
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+  let uniqueId = htmlId ? htmlId : getNextId();
+
+  function handleChange(value) {
     onChange && onChange(id, value);
   }
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textBox = el;
+  function handleGetRef(el) {
+    textBox.current = el;
     getRef && getRef(el, id);
   }
 
-  onFocus() {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isActive: true
-    });
+  function handleonFocus() {
+    setActive(true);
     onFocus && onFocus();
   }
 
-  onBlur() {
-    let {
-      onBlur
-    } = this.props;
-    this.setState({
-      isActive: false
-    });
+  function handleonBlur() {
+    setActive(false);
     onBlur && onBlur();
   }
 
-  render() {
-    let {
-      labelName,
-      id,
-      textBoxSize,
-      textBoxVariant,
-      textBoxType,
-      isMandatory,
-      validationMessage,
-      validationPalette,
-      maxLength,
-      isReadOnly,
-      value,
-      errorType,
-      isDisabled,
-      title,
-      dataId,
-      validationRuleMessage,
-      validationRulePalette,
-      onKeyDown,
-      placeHolder,
-      infoText,
-      borderColor,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      htmlId,
-      dataSelectorId,
-      lockedInfoText,
-      isLocked,
-      needReadOnlyStyle,
-      isClickable,
-      userCurrencyType,
-      customProps,
-      formatCurrency,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      TextBoxProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    let {
-      isActive
-    } = this.state;
-    let formatValue = value;
+  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, _extends({
+    text: labelName,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+    htmlFor: uniqueId,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+  }, /*#__PURE__*/React.createElement(TextBox, _extends({
+    htmlId: uniqueId,
+    id: id,
+    type: textBoxType,
+    variant: textBoxVariant,
+    size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    inputRef: handleGetRef,
+    value: formatValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleonBlur,
+    onFocus: handleonFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    needEffect: isReadOnly || isDisabled ? false : true,
+    isClickable: isClickable,
+    needReadOnlyStyle: needReadOnlyStyle
+  }, TextBoxProps)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`,
+    htmlFor: uniqueId
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+} // const MomoizedCurrencyField = memo(CurrencyField);
+// export default MomoizedCurrencyField;
+// MomoizedCurrencyField.propTypes = propTypes;
+// MomoizedCurrencyField.defaultProps = defaultProps;
 
-    if (!isActive) {
-      formatValue = formatCurrency(value, userCurrencyType);
-    } else {
-      formatValue = value;
-    }
-
-    let uniqueId = htmlId ? htmlId : this.getNextId();
-    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, _extends({
-      text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(TextBox, _extends({
-      htmlId: uniqueId,
-      id: id,
-      type: textBoxType,
-      variant: textBoxVariant,
-      size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-      maxLength: maxLength,
-      isReadOnly: isReadOnly,
-      inputRef: this.handleGetRef,
-      value: formatValue,
-      onChange: this.handleChange,
-      dataId: dataId,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      onKeyDown: onKeyDown,
-      placeHolder: placeHolder,
-      borderColor: borderColor,
-      isDisabled: isDisabled,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      isClickable: isClickable,
-      needReadOnlyStyle: needReadOnlyStyle
-    }, TextBoxProps)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`,
-      htmlFor: uniqueId
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
-  }
 
-}
 CurrencyField.propTypes = propTypes;
-CurrencyField.defaultProps = defaultProps; // if (__DOCS__) {
-//   CurrencyField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+CurrencyField.defaultProps = defaultProps;
+export default CurrencyField;

package/es/v1/form/fields/DateField/DateField.js

@@ -1,195 +1,164 @@
 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); }
 
 /**** Libraries ****/
-import React, { PureComponent } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 import { defaultProps } from '../../../../form/fields/DateField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/DateField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import DateWidget from '@zohodesk/components/es/v1/DateTime/DateWidget';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class DateField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    this.handleLabelClick = this.handleLabelClick.bind(this);
-    this.getNextId = getUniqueId(this);
-    this.openPopup = this.openPopup.bind(this);
-  }
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+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);
   }
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.dateField = el;
+  function handleGetRef(el) {
+    dateField.current = el;
     getRef && getRef(el, id);
   }
 
-  componentDidMount() {
-    this.openPopup();
-  }
-
-  openPopup() {
-    let {
-      openPopupOnMount
-    } = this.props;
-
+  function openPopup() {
     if (openPopupOnMount) {
       setTimeout(() => {
-        this.dateField && this.dateField.click && this.dateField.click();
-        this.handleLabelClick();
+        dateField.current && dateField.current.click && dateField.current.click();
+        handleLabelClick();
       }, 100);
     }
   }
 
-  componentDidUpdate(prevProps) {
-    let {
-      openPopupOnMount: prevOpenPopupOnMount
-    } = prevProps;
-    let {
-      openPopupOnMount
-    } = this.props;
+  useEffect(() => {
+    openPopup();
+  }, [openPopupOnMount]);
 
-    if (openPopupOnMount !== prevOpenPopupOnMount) {
-      this.openPopup();
+  function handleLabelClick() {
+    if (isFocusOnLabelClick && dateField.current && dateField.current.focus) {
+      dateField.current.focus();
     }
   }
 
-  handleLabelClick() {
-    let {
-      isFocusOnLabelClick
-    } = this.props;
-
-    if (isFocusOnLabelClick && this.dateField && this.dateField.focus) {
-      this.dateField.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, _extends({
+    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, _extends({
+    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, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    htmlFor: getAriaId,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: getAriaId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+} // const MomoizedDateField = memo(DateField);
+// export default MomoizedDateField;
+// MomoizedDateField.propTypes = propTypes;
+// MomoizedDateField.defaultProps = defaultProps;
 
-  render() {
-    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
-    } = this.props;
-    const {
-      LabelProps = {},
-      DateWidgetProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    let getAriaId = htmlId ? htmlId : this.getNextId();
-    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, _extends({
-      text: labelName,
-      htmlFor: getAriaId,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      onClick: isDisabled || isReadOnly ? null : this.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, _extends({
-      textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-      textBoxVariant: textBoxVariant,
-      isDateTime: isDateTime,
-      onSelect: this.handleChange,
-      timeZone: timeZone,
-      getRef: this.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, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      htmlFor: getAriaId,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      htmlFor: getAriaId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
-  }
 
-}
 DateField.propTypes = propTypes;
-DateField.defaultProps = defaultProps; // if (__DOCS__) {
-//   DateField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+DateField.defaultProps = defaultProps;
+export default DateField;