@zohodesk/dot 1.2.4 → 1.3.0-temp-158

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

@@ -1,189 +1,161 @@
 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, useState, useRef } from 'react';
 import { defaultProps } from '../../../../form/fields/PhoneField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/PhoneField/props/propTypes';
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import TextBoxField from '../TextBoxField/TextBoxField';
 import Link from '../../../Link/Link';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
 import { formatPhoneUrl } from '../../../../utils/General';
-export default class PhoneField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: false
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    this.focusInput = this.focusInput.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
+
+function PhoneField(props) {
+  let {
+    labelName,
+    id,
+    textBoxSize,
+    textBoxVariant,
+    textBoxType,
+    isMandatory,
+    validationMessage,
+    maxLength,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    onBlur,
+    dataId,
+    dataSelectorId,
+    onKeyDown,
+    placeHolder,
+    infoText,
+    isTelephony,
+    providerName,
+    ticketId,
+    contactId,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    i18nKeys,
+    onCall,
+    ePhiData,
+    type,
+    onFocus,
+    onChange,
+    getRef,
+    customProps
+  } = props;
+  const {
+    TextBoxFieldProps = {},
+    LinkProps = {}
+  } = customProps;
+  const [isActive, setActive] = useState(false);
+  const textBoxElem = useRef(null);
+  let {
+    callTitle
+  } = i18nKeys;
+  let callBackparam = {
+    contact_id: contactId ? contactId : '',
+    request_id: ticketId,
+    activity_id: '',
+    entity_module: 'Requests'
+  };
+  let phoneValue = value;
+
+  if (isActive) {
+    phoneValue = value;
+  } else {
+    phoneValue = formatPhoneUrl(value);
   }
 
-  handleChange(id, value) {
-    let {
-      onChange
-    } = this.props;
+  function handleChange(id, value) {
     onChange && onChange(id, value);
   }
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textBoxElem = el;
+  function handleGetRef(el) {
+    textBoxElem.current = el;
     getRef && getRef(el, id);
   }
 
-  focusInput(e) {
-    this.textBoxElem.focus();
+  function focusInput(e) {
+    textBoxElem.current.focus();
   }
 
-  onFocus() {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isActive: true
-    });
+  function handleFocus() {
+    setActive(true);
     onFocus && onFocus();
   }
 
-  onBlur() {
-    let {
-      onBlur
-    } = this.props;
-    this.setState({
-      isActive: false
-    });
+  function handleBlur() {
+    setActive(false);
     onBlur && onBlur();
   }
 
-  render() {
-    let {
-      labelName,
-      id,
-      textBoxSize,
-      textBoxVariant,
-      textBoxType,
-      isMandatory,
-      validationMessage,
-      maxLength,
-      isReadOnly,
-      value,
-      errorType,
-      isDisabled,
-      title,
-      onBlur,
-      dataId,
-      dataSelectorId,
-      onKeyDown,
-      placeHolder,
-      infoText,
-      isTelephony,
-      providerName,
-      ticketId,
-      contactId,
-      borderColor,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      i18nKeys,
-      onCall,
-      ePhiData,
-      type,
-      customProps
-    } = this.props;
-    const {
-      TextBoxFieldProps = {},
-      LinkProps = {}
-    } = customProps;
-    let {
-      isActive
-    } = this.state;
-    let {
-      callTitle
-    } = i18nKeys;
-    let callBackparam = {
-      contact_id: contactId ? contactId : '',
-      request_id: ticketId,
-      activity_id: '',
-      entity_module: 'Requests'
-    };
-    let phoneValue = value;
-
-    if (isActive) {
-      phoneValue = value;
-    } else {
-      phoneValue = formatPhoneUrl(value);
-    }
-
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : null,
-      dataSelectorId: dataSelectorId
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(TextBoxField, _extends({
-      labelName: labelName,
-      id: id,
-      palette: isMandatory ? 'mandatory' : 'default',
-      onClick: this.focusInput,
-      infoText: infoText,
-      type: textBoxType,
-      textBoxVariant: textBoxVariant,
-      size: textBoxSize,
-      maxLength: maxLength,
-      isReadOnly: isReadOnly,
-      getRef: this.handleGetRef,
-      value: phoneValue,
-      onChange: this.handleChange,
-      dataId: dataId,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      onKeyDown: onKeyDown,
-      placeHolder: placeHolder,
-      validationMessage: validationMessage,
-      borderColor: borderColor,
-      isDisabled: isDisabled,
-      fieldSize: fieldSize,
-      isMandatory: isMandatory,
-      labelPalette: labelPalette,
-      labelCustomClass: labelCustomClass,
-      errorType: errorType,
-      ePhiData: ePhiData
-    }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
-      className: style.phoneIcon,
-      callfrom: "phone",
-      pbxname: providerName,
-      phonenum: value,
-      module: "RequestDetailsView",
-      title: callTitle,
-      callBackParam: JSON.stringify(callBackparam),
-      callto: 'RequestPhoneNumber',
-      href: true,
-      onClick: onCall,
-      type: type
-    }, LinkProps), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-phone",
-      size: "14"
-    })) : null));
-  }
-
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+    "data-title": isDisabled ? title : null,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBoxField, _extends({
+    labelName: labelName,
+    id: id,
+    palette: isMandatory ? 'mandatory' : 'default',
+    onClick: focusInput,
+    infoText: infoText,
+    type: textBoxType,
+    textBoxVariant: textBoxVariant,
+    size: textBoxSize,
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    getRef: handleGetRef,
+    value: phoneValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    validationMessage: validationMessage,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    fieldSize: fieldSize,
+    isMandatory: isMandatory,
+    labelPalette: labelPalette,
+    labelCustomClass: labelCustomClass,
+    errorType: errorType,
+    ePhiData: ePhiData
+  }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
+    className: style.phoneIcon,
+    callfrom: "phone",
+    pbxname: providerName,
+    phonenum: value,
+    module: "RequestDetailsView",
+    title: callTitle,
+    callBackParam: JSON.stringify(callBackparam),
+    callto: 'RequestPhoneNumber',
+    href: true,
+    onClick: onCall,
+    type: type
+  }, LinkProps), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-phone",
+    size: "14"
+  })) : null));
 }
+
 PhoneField.propTypes = propTypes;
-PhoneField.defaultProps = defaultProps; // if (__DOCS__) {
-//   PhoneField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+PhoneField.defaultProps = defaultProps;
+const MemoizedPhoneField = /*#__PURE__*/memo(PhoneField);
+MemoizedPhoneField.propTypes = propTypes;
+MemoizedPhoneField.defaultProps = defaultProps;
+MemoizedPhoneField.displayName = 'PhoneField';
+export default MemoizedPhoneField;

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

@@ -1,116 +1,108 @@
 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 } from 'react';
 import { defaultProps } from '../../../../form/fields/RadioField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/RadioField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Radio from '@zohodesk/components/lib/Radio/Radio';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Radio from '@zohodesk/components/es/v1/Radio/Radio';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 /** Css */
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class RadioField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-  }
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+const RadioField = props => {
+  const {
+    labelName,
+    id,
+    isMandatory,
+    options,
+    validationMessage,
+    validationPalette,
+    errorType,
+    isDisabled,
+    title,
+    labelPalette,
+    labelSize,
+    size,
+    selectedValue,
+    isActive,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    isReadOnly,
+    variant,
+    customProps,
+    onChange
+  } = props;
+  const {
+    LabelProps = {},
+    RadioProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+
+  const handleChange = value => {
     onChange && onChange(id, value);
-  }
+  };
 
-  render() {
+  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(Label, _extends({
+    text: labelName,
+    size: "medium",
+    id: id,
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
+    customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps)), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+  }, options.map((option, index) => {
     let {
-      labelName,
-      id,
-      isMandatory,
-      options,
-      validationMessage,
-      validationPalette,
-      errorType,
-      isDisabled,
-      title,
-      labelPalette,
-      labelSize,
-      size,
-      selectedValue,
-      isActive,
-      dataId,
-      dataSelectorId,
-      validationRuleMessage,
-      validationRulePalette,
-      isReadOnly,
-      variant,
-      customProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      RadioProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    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(Label, _extends({
-      text: labelName,
-      size: "medium",
-      id: id,
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps)), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
-    }, options.map((option, index) => {
-      let {
-        text,
-        value
-      } = option;
-      return /*#__PURE__*/React.createElement("span", {
-        key: index,
-        className: `${style.radio}`
-      }, /*#__PURE__*/React.createElement(Radio, _extends({
-        id: index,
-        value: value,
-        name: id,
-        text: text,
-        labelPalette: labelPalette,
-        labelSize: labelSize,
-        active: isActive,
-        disabled: isDisabled,
-        onChange: this.handleChange,
-        size: size,
-        checked: selectedValue == value,
-        dataId: dataId,
-        isReadOnly: isReadOnly,
-        variant: variant
-      }, RadioProps)));
-    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2)));
-  }
+      text,
+      value
+    } = option;
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: `${style.radio}`
+    }, /*#__PURE__*/React.createElement(Radio, _extends({
+      id: index,
+      value: value,
+      name: id,
+      text: text,
+      labelPalette: labelPalette,
+      labelSize: labelSize,
+      active: isActive,
+      disabled: isDisabled,
+      onChange: handleChange,
+      size: size,
+      checked: selectedValue == value,
+      dataId: dataId,
+      isReadOnly: isReadOnly,
+      variant: variant
+    }, RadioProps)));
+  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2)));
+};
 
-}
 RadioField.propTypes = propTypes;
-RadioField.defaultProps = defaultProps; // if (__DOCS__) {
-//   RadioField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+RadioField.defaultProps = defaultProps;
+const MemoizedRadioField = /*#__PURE__*/memo(RadioField);
+MemoizedRadioField.propTypes = propTypes;
+MemoizedRadioField.defaultProps = defaultProps;
+MemoizedRadioField.displayName = 'RadioField';
+export default MemoizedRadioField;