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

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

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

import { Icon } from '@zohodesk/icons';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import TextBoxField from "../TextBoxField/TextBoxField";
import Link from "../../../Link/Link";
/**** CSS ****/

import style from "../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);
  }

  handleChange(id, value) {
    let {
      onChange
    } = this.props;
    onChange && onChange(id, value);
  }

  handleGetRef(el) {
    let {
      getRef,
      id
    } = this.props;
    this.textBoxElem = el;
    getRef && getRef(el, id);
  }

  focusInput(e) {
    this.textBoxElem.focus();
  }

  onFocus() {
    let {
      onFocus
    } = this.props;
    this.setState({
      isActive: true
    });
    onFocus && onFocus();
  }

  onBlur() {
    let {
      onBlur
    } = this.props;
    this.setState({
      isActive: false
    });
    onBlur && onBlur();
  }

  render() {
    let {
      labelName,
      id,
      textBoxSize,
      textBoxVariant,
      textBoxType,
      isMandatory,
      validationMessage,
      maxLength,
      isReadOnly,
      value,
      errorType,
      isDisabled,
      title,
      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, {
      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, {
      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'
//   };
// }