@rh-support/components 2.0.5 → 2.0.7-beta.1

package/lib/esm/PhoneInput/PhoneInput.js

@@ -0,0 +1,257 @@
+import './PhoneInput.scss';
+import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } from '@patternfly/react-core';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { canadaAreaCodes, COUNTRY_DATA } from './CountryData';
+const PREFIX = '+';
+const DEFAULT_MASK = '... ... ... ... ..';
+const ALWAYS_DEFAULT_MASK = false;
+// Getting Country phone format
+function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
+    if (!predefinedMask || alwaysDefaultMask) {
+        return prefix + ''.padEnd(dialCode.length, '.') + ' ' + defaultMask;
+    }
+    else {
+        return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
+    }
+}
+const initializedCountries = COUNTRY_DATA.map((country) => {
+    const countryItem = {
+        name: country[0],
+        regions: country[1],
+        iso2: country[2],
+        countryCode: country[3],
+        dialCode: country[3],
+        format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
+        priority: country[5] || 0,
+        areaCode: country[6] || [],
+    };
+    return countryItem;
+});
+// Formatting phone numbers according to country
+const formatNumber = (fullPhoneNumber, localFormat) => {
+    if (isEmpty(fullPhoneNumber))
+        return '';
+    let localPhone = fullPhoneNumber.replace(PREFIX, '');
+    if (isEmpty(localPhone))
+        return '';
+    // Formatting inputted number
+    let phone = '';
+    [...fullPhoneNumber].forEach((ele) => {
+        if (ele >= '0' && ele <= '9') {
+            phone = phone.concat(ele);
+        }
+    });
+    let pattern = '';
+    let i = 0;
+    for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < phone.length; j++) {
+        if (localFormat[j] === '.') {
+            pattern += phone[i];
+            i++;
+        }
+        else {
+            pattern += localFormat[j];
+        }
+    }
+    return pattern;
+};
+// return phoneline and countrycode for any given phone
+export const getPhoneObj = (phoneNumber) => {
+    let localPhone = phoneNumber.replace(/[^0-9]/g, '');
+    let countryCode = '';
+    // Guessing countries according to user input
+    const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
+    const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
+    if (!isEmpty(exactCountry)) {
+        countryCode = exactCountry[0].dialCode.toString();
+    }
+    else if (!isEmpty(possibleCountries)) {
+        countryCode = possibleCountries[0].dialCode.toString();
+    }
+    return {
+        countryCode: PREFIX + countryCode,
+        phoneLine: localPhone.substring(countryCode.length, localPhone.length),
+    };
+};
+export function PhoneInput(props) {
+    const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const [iso2, setIso2] = useState('');
+    const [formattedNumber, setFormattedNumber] = useState('');
+    const [format, setFormat] = useState('');
+    const [countryObj, setCountryObj] = useState({
+        name: '',
+        regions: [''],
+        iso2: '',
+        countryCode: '',
+        dialCode: '',
+        format: '',
+        priority: 0,
+        areaCode: [''], // Area codes of a country
+    });
+    const setLocalFormat = (phoneNumber) => {
+        let localPhone = phoneNumber.replace(PREFIX, '').trim();
+        localPhone = localPhone.replace('(', '').trim();
+        localPhone = localPhone.replace(/ +/g, '');
+        // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
+        if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
+            return countryObj.format;
+        }
+        let localFormat;
+        // Guessing countries according to user input
+        const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
+        const canadaDialCode = '1';
+        const canadaCountryPhone = canadaAreaCodes.map((areaCode) => canadaDialCode + areaCode);
+        const isCountryCanada = canadaCountryPhone.filter((phone) => localPhone.startsWith(phone)); // checks if phone is Canadian
+        const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
+        if (!isEmpty(isCountryCanada)) {
+            const canadaCountryObj = initializedCountries.filter((country) => country.iso2.toString() === 'ca');
+            setIso2(canadaCountryObj[0].iso2.toString());
+            localFormat = canadaCountryObj[0].format.toString();
+            onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
+            setFormat(localFormat);
+        }
+        else if (!isEmpty(exactCountry)) {
+            const localExactCountry = exactCountry.filter((country) => isEqual(country.priority, 0));
+            if (isEqual(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
+                setIso2(countryObj.iso2);
+                onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
+                return countryObj.format;
+            }
+            setIso2(localExactCountry[0].iso2.toString());
+            localFormat = localExactCountry[0].format.toString();
+            onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
+            setFormat(localFormat);
+        }
+        else if (!isEmpty(possibleCountries)) {
+            const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
+            if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
+                setIso2(countryObj.iso2);
+                onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
+                return countryObj.format;
+            }
+            setIso2(localPossibleCountry[0].iso2.toString());
+            localFormat = localPossibleCountry[0].format.toString();
+            onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
+            setFormat(localFormat);
+        }
+        else {
+            // if the exact and possible are not the
+            setIso2('');
+            localFormat = format;
+            onCountryCodeChange && onCountryCodeChange('');
+        }
+        return localFormat;
+    };
+    const onPhoneChange = (phone) => {
+        if (isEmpty(phone.trim()) || isEmpty(phone.replace(PREFIX, '').trim())) {
+            setFormattedNumber('');
+            onPhoneValueChange('');
+            setInvalid && setInvalid(false);
+        }
+        const regex = /^[\d ()+-]+$/;
+        if (setInvalid)
+            regex.test(phone) ? setInvalid(false) : setInvalid(true);
+        const localFormat = setLocalFormat(phone);
+        const _formattedNumber = formatNumber(phone, localFormat);
+        setFormattedNumber(_formattedNumber);
+        if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
+            onPhoneValueChange(PREFIX + phone.trim());
+        }
+        else {
+            // to allow users to edit phone from between but not from right end, 5 is max length of any country code used when local format is empty
+            onPhoneValueChange(phone.slice(0, localFormat.length || 5));
+        }
+    };
+    const onToggle = (isOpen) => {
+        setIsOpen(isOpen);
+    };
+    const onCountrySelect = (event, selection) => {
+        setCountryObj(selection);
+        setIsOpen(!isOpen);
+    };
+    const getOptions = (options) => {
+        return options.map((country) => (React.createElement(SelectOption, { key: country.iso2, value: country },
+            React.createElement("div", { className: "pf-u-display-inline-flex" },
+                React.createElement("div", { className: `flag ${country.iso2}`, style: { marginRight: '8px' } }),
+                country.name,
+                " (+",
+                country.dialCode,
+                ")"))));
+    };
+    const onFilter = (_, value) => {
+        if (!value)
+            return getOptions(initializedCountries);
+        const newOptions = initializedCountries.filter((country) => {
+            const countryStr = `${country.name.toString()} (+${country.countryCode.toString()})`.toLowerCase();
+            return countryStr.includes(value.toLowerCase());
+        });
+        return getOptions(newOptions);
+    };
+    const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
+        React.createElement("div", { className: "pf-u-display-inline-flex" },
+            React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
+            iso2.toUpperCase())));
+    useEffect(() => {
+        if (isEmpty(phoneValue)) {
+            setInvalid && setInvalid(false);
+            return;
+        }
+        if (isEmpty(iso2)) {
+            const localFormat = setLocalFormat(phoneValue);
+            const _formattedNumber = formatNumber(phoneValue, localFormat);
+            setFormattedNumber(_formattedNumber);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (!isEmpty(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
+            setIso2(countryObj.iso2);
+            setFormat(countryObj.format);
+            onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
+            setFormattedNumber(`${PREFIX}${countryObj.dialCode}`);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [countryObj]);
+    useEffect(() => {
+        // when user types +, it will be replaced by empty string
+        if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
+            onPhoneValueChange('');
+            setFormattedNumber('');
+            return;
+        }
+        if (isEmpty(phoneValue) && isEmpty(iso2)) {
+            setCountryObj({
+                name: '',
+                regions: [''],
+                iso2: '',
+                countryCode: '',
+                dialCode: '',
+                format: '',
+                priority: 0,
+                areaCode: [''],
+            });
+        }
+        if (isEmpty(phoneValue)) {
+            setIso2('');
+            setInvalid && setInvalid(false);
+            setFormattedNumber('');
+            onPhoneValueChange('');
+        }
+        else {
+            onPhoneValueChange(phoneValue);
+            const localFormat = setLocalFormat(phoneValue);
+            const _formattedNumber = formatNumber(phoneValue, localFormat);
+            setFormattedNumber(_formattedNumber);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [phoneValue]);
+    return (React.createElement(InputGroup, { className: "phone-number-input" },
+        React.createElement("div", null,
+            React.createElement(Select, { variant: SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled }, getOptions(initializedCountries))),
+        React.createElement(TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onPhoneChange, validated: validations, isDisabled: props.isDisabled }),
+        props.isLoading && React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
+}