react-phone-number-input/modules/InputBasic.js

Telephone number input React component

function _extends() { _extends = Object.assign || 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); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { parseIncompletePhoneNumber, formatIncompletePhoneNumber } from 'libphonenumber-js/core';
import { getInputValuePrefix, removeInputValuePrefix } from './helpers/inputValuePrefix';
export function createInput(defaultMetadata) {
  /**
   * `InputBasic`'s caret is not as "smart" as the default `inputComponent`'s
   * but still works good enough. When erasing or inserting digits in the middle
   * of a phone number the caret usually jumps to the end: this is the expected
   * behaviour and it's the workaround for the [Samsung Galaxy smart caret positioning bug](https://github.com/catamphetamine/react-phone-number-input/issues/75).
   */
  function InputBasic(_ref, ref) {
    var value = _ref.value,
        onChange = _ref.onChange,
        country = _ref.country,
        international = _ref.international,
        withCountryCallingCode = _ref.withCountryCallingCode,
        metadata = _ref.metadata,
        Input = _ref.inputComponent,
        rest = _objectWithoutProperties(_ref, ["value", "onChange", "country", "international", "withCountryCallingCode", "metadata", "inputComponent"]);

    var prefix = getInputValuePrefix({
      country: country,
      international: international,
      withCountryCallingCode: withCountryCallingCode,
      metadata: metadata
    });

    var _onChange = useCallback(function (event) {
      var newValue = parseIncompletePhoneNumber(event.target.value); // By default, if a value is something like `"(123)"`
      // then Backspace would only erase the rightmost brace
      // becoming something like `"(123"`
      // which would give the same `"123"` value
      // which would then be formatted back to `"(123)"`
      // and so a user wouldn't be able to erase the phone number.
      // Working around this issue with this simple hack.

      if (newValue === value) {
        var newValueFormatted = format(prefix, newValue, country, metadata);

        if (newValueFormatted.indexOf(event.target.value) === 0) {
          // Trim the last digit (or plus sign).
          newValue = newValue.slice(0, -1);
        }
      }

      onChange(newValue);
    }, [prefix, value, onChange, country, metadata]);

    return React.createElement(Input, _extends({}, rest, {
      ref: ref,
      value: format(prefix, value, country, metadata),
      onChange: _onChange
    }));
  }

  InputBasic = React.forwardRef(InputBasic);
  InputBasic.propTypes = {
    /**
     * The parsed phone number.
     * "Parsed" not in a sense of "E.164"
     * but rather in a sense of "having only
     * digits and possibly a leading plus character".
     * Examples: `""`, `"+"`, `"+123"`, `"123"`.
     */
    value: PropTypes.string.isRequired,

    /**
     * Updates the `value`.
     */
    onChange: PropTypes.func.isRequired,

    /**
     * A two-letter country code for formatting `value`
     * as a national phone number (e.g. `(800) 555 35 35`).
     * E.g. "US", "RU", etc.
     * If no `country` is passed then `value`
     * is formatted as an international phone number.
     * (e.g. `+7 800 555 35 35`)
     * Perhaps the `country` property should have been called `defaultCountry`
     * because if `value` is an international number then `country` is ignored.
     */
    country: PropTypes.string,

    /**
     * If `country` property is passed along with `international={true}` property
     * then the phone number will be input in "international" format for that `country`
     * (without "country calling code").
     * For example, if `country="US"` property is passed to "without country select" input
     * then the phone number will be input in the "national" format for `US` (`(213) 373-4253`).
     * But if both `country="US"` and `international={true}` properties are passed then
     * the phone number will be input in the "international" format for `US` (`213 373 4253`)
     * (without "country calling code" `+1`).
     */
    international: PropTypes.bool,

    /**
     * If `country` and `international` properties are set,
     * then by default it won't include "country calling code" in the input field.
     * To change that, pass `withCountryCallingCode` property,
     * and it will include "country calling code" in the input field.
     */
    withCountryCallingCode: PropTypes.bool,

    /**
     * `libphonenumber-js` metadata.
     */
    metadata: PropTypes.object.isRequired,

    /**
     * The `<input/>` component.
     */
    inputComponent: PropTypes.elementType.isRequired
  };
  InputBasic.defaultProps = {
    metadata: defaultMetadata,
    inputComponent: 'input'
  };
  return InputBasic;
}
export default createInput();

function format(prefix, value, country, metadata) {
  return removeInputValuePrefix(formatIncompletePhoneNumber(prefix + value, country, metadata), prefix);
}
//# sourceMappingURL=InputBasic.js.map