tweb-i2p/src/components/telInputField.ts

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import placeCaretAtEnd from "../helpers/dom/placeCaretAtEnd";
import { formatPhoneNumber } from "../helpers/formatPhoneNumber";
import { isApple, isAndroid, isAppleMobile } from "../helpers/userAgent";
import { HelpCountry, HelpCountryCode } from "../layer";
import InputField, { InputFieldOptions } from "./inputField";

export default class TelInputField extends InputField {
  private pasted = false;
  public lastValue = '';
  
  constructor(options: InputFieldOptions & {
    onInput?: (formatted: ReturnType<typeof formatPhoneNumber>) => void
  } = {}) {
    super({
      label: 'Contacts.PhoneNumber.Placeholder',
      //plainText: true,
      name: 'phone',
      ...options
    });

    this.container.classList.add('input-field-phone');

    let telEl = this.input;
    if(telEl instanceof HTMLInputElement) {
      telEl.type = 'tel';
      telEl.autocomplete = 'rr55RandomRR55';
    } else {
      telEl.inputMode = 'decimal';

      const pixelRatio = window.devicePixelRatio;
      if(pixelRatio > 1) {
        let letterSpacing: number;
        if(isApple) {
          letterSpacing = pixelRatio * -.16;
        } else if(isAndroid) {
          letterSpacing = 0;
        }

        telEl.style.setProperty('--letter-spacing', letterSpacing + 'px');
      }

      const originalFunc = this.setValueSilently.bind(this);
      this.setValueSilently = (value) => {
        originalFunc(value);
        placeCaretAtEnd(this.input, true);
      };
    }

    telEl.addEventListener('input', () => {
      //console.log('input', this.value);
      telEl.classList.remove('error');
  
      const value = this.value;
      const diff = Math.abs(value.length - this.lastValue.length);
      if(diff > 1 && !this.pasted && isAppleMobile) {
        this.setValueSilently(this.lastValue + value);
      }
  
      this.pasted = false;
  
      this.setLabel();
  
      let formattedPhoneNumber: ReturnType<typeof formatPhoneNumber>;
      let formatted: string, country: HelpCountry, countryCode: HelpCountryCode, leftPattern = '';
      if(this.value.replace(/\++/, '+') === '+') {
        this.setValueSilently('+');
      } else {
        formattedPhoneNumber = formatPhoneNumber(this.value);
        formatted = formattedPhoneNumber.formatted;
        country = formattedPhoneNumber.country;
        leftPattern = formattedPhoneNumber.leftPattern;
        countryCode = formattedPhoneNumber.code;
        this.setValueSilently(this.lastValue = formatted ? '+' + formatted : '');
      }
  
      telEl.dataset.leftPattern = leftPattern/* .replace(/X/g, '0') */;
  
      //console.log(formatted, country);

      options.onInput && options.onInput(formattedPhoneNumber);
    });
  
    telEl.addEventListener('paste', () => {
      this.pasted = true;
      //console.log('paste', telEl.value);
    });
  
    /* telEl.addEventListener('change', (e) => {
      console.log('change', telEl.value);
    }); */
  
    telEl.addEventListener('keypress', (e) => {
      //console.log('keypress', this.value);
      if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && e.key !== 'Backspace' && !(e.key === '+' && e.shiftKey/*  && !this.value */)) {
        e.preventDefault();
        return false;
      }
    });
  
    /* telEl.addEventListener('focus', function(this: typeof telEl, e) {
      this.removeAttribute('readonly'); // fix autocomplete
    });*/
  }
}