react-phone-input-pro/dist/utils/stylingMethods.js

Phone number input component for react to format phone numbers according to selected countries in real time.

import { LIST_ITEM_BUTTON_CLASS, FORM_FOCUS_CLASS, DROPDOWN_BUTTON_FOCUS_CLASS, DROPDOWN_SEARCH_OFF_CLASS, DROPDOWN_BUTTON_CLASS, DROPDOWN_INPUT_CLASS, PHONE_INPUT_CLASS, SHOW_CLASS, } from './cssClassNames';
export const onClickOutside = (selector, input, drpButton, callBack) => {
    window.onclick = function (event) {
        if (event.target &&
            event.target.className !== DROPDOWN_BUTTON_CLASS &&
            event.target &&
            event.target.className !== DROPDOWN_INPUT_CLASS &&
            event.target &&
            event.target.className !== DROPDOWN_SEARCH_OFF_CLASS &&
            event.target &&
            event.target.className !== LIST_ITEM_BUTTON_CLASS &&
            event.target &&
            event.target.className !== PHONE_INPUT_CLASS) {
            selector.classList.remove(SHOW_CLASS);
            input.classList.remove(FORM_FOCUS_CLASS);
            drpButton.classList.remove(DROPDOWN_BUTTON_FOCUS_CLASS);
            callBack();
        }
    };
    window.ontouchstart = function (event) {
        if (event.target &&
            event.target.className !== LIST_ITEM_BUTTON_CLASS &&
            event.target &&
            event.target.className !== DROPDOWN_BUTTON_CLASS &&
            event.target &&
            event.target.className !== DROPDOWN_INPUT_CLASS &&
            event.target &&
            event.target.className !== PHONE_INPUT_CLASS &&
            event.target &&
            event.target.className !== DROPDOWN_SEARCH_OFF_CLASS &&
            event.target &&
            event.target.className !== LIST_ITEM_BUTTON_CLASS &&
            event.target.className !== DROPDOWN_SEARCH_OFF_CLASS) {
            selector.classList.remove(SHOW_CLASS);
            input.classList.remove(FORM_FOCUS_CLASS);
            drpButton.classList.remove(DROPDOWN_BUTTON_FOCUS_CLASS);
        }
    };
};
export const onInputFocus = (inputElm, parent, drpButton, list) => {
    inputElm.addEventListener('focus', () => {
        parent.classList.add(FORM_FOCUS_CLASS);
        list && list.classList.remove(SHOW_CLASS);
    });
    inputElm.addEventListener('focusout', () => {
        parent.classList.remove(FORM_FOCUS_CLASS);
        drpButton && drpButton.classList.remove(DROPDOWN_BUTTON_FOCUS_CLASS);
    });
};