@rh-support/components 2.0.12 → 2.0.13

package/lib/esm/PhoneInput/PhoneInput.js

@@ -0,0 +1,178 @@
+import './PhoneInput.scss';
+import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } from '@patternfly/react-core';
+import { isEmpty, isEqual } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+// import { usePrevious } from '../hooks/usePrevious';
+import CountryData from './CountryData';
+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 prefix = '+';
+    const defaultMask = '... ... ... ... ..';
+    const alwaysDefaultMask = false;
+    const [countryObj, setCountryObj] = useState({
+        name: '',
+        regions: [''],
+        iso2: '',
+        countryCode: '',
+        dialCode: '',
+        format: '', // Number Format (For US, '(...) ...-....' )
+    });
+    // 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 = CountryData.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], defaultMask, alwaysDefaultMask),
+            priority: country[5] || 0,
+        };
+        return countryItem;
+    });
+    const setLocalFormat = (phoneNumber) => {
+        let localPhone = phoneNumber.replace(prefix, '');
+        // 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);
+        let localFormat;
+        if (!isEmpty(exactCountry)) {
+            setIso2(exactCountry[0].iso2.toString());
+            localFormat = exactCountry[0].format.toString();
+            onCountryCodeChange && onCountryCodeChange(prefix + exactCountry[0].dialCode.toString());
+            setFormat(localFormat);
+        }
+        else if (!isEmpty(possibleCountries)) {
+            setIso2(possibleCountries[0].iso2.toString());
+            localFormat = possibleCountries[0].format.toString();
+            onCountryCodeChange && onCountryCodeChange(prefix + possibleCountries[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.replace(prefix, ''))) {
+            setFormattedNumber('');
+            onPhoneValueChange('');
+        }
+        const regex = /^[\d ()+-]+$/;
+        if (setInvalid)
+            regex.test(phone) ? setInvalid(false) : setInvalid(true);
+        const localFormat = setLocalFormat(phone);
+        const _formattedNumber = formatNumber(phone, localFormat);
+        setFormattedNumber(_formattedNumber);
+        if (!phoneValue.startsWith(prefix) && regex.test(phone) && !isEqual(phone, '-')) {
+            onPhoneValueChange(prefix + phone);
+        }
+        else if (phone.length <= _formattedNumber.length) {
+            onPhoneValueChange(phone);
+        }
+    };
+    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 input = new RegExp(value, 'i');
+        const newOptions = initializedCountries.filter((country) => input.test(country.name.toString()));
+        return getOptions(newOptions);
+    };
+    // 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.length && i < phone.length; j++) {
+            if (localFormat[j] === '.') {
+                pattern += phone[i];
+                i++;
+            }
+            else {
+                pattern += localFormat[j];
+            }
+        }
+        return pattern;
+    };
+    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))
+            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(() => {
+        if (isEmpty(phoneValue)) {
+            setIso2('');
+            setInvalid && setInvalid(false);
+            setFormattedNumber('');
+        }
+        // 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" })));
+}