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

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

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

import { Icon } from '@zohodesk/icons';
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";

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

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

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

  function focusInput(e) {
    textBoxElem.current.focus();
  }

  function handleFocus() {
    setActive(true);
    onFocus && onFocus();
  }

  function handleBlur() {
    setActive(false);
    onBlur && onBlur();
  }

  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, {
    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, {
    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;
const MemoizedPhoneField = /*#__PURE__*/memo(PhoneField);
MemoizedPhoneField.propTypes = propTypes;
MemoizedPhoneField.defaultProps = defaultProps;
MemoizedPhoneField.displayName = 'PhoneField';
export default MemoizedPhoneField;