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

package/lib/cjs/PhoneInput/PhoneInput.js

@@ -0,0 +1,284 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneInput = exports.getPhoneObj = void 0;
+require("./PhoneInput.scss");
+const react_core_1 = require("@patternfly/react-core");
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const CountryData_1 = require("./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 = CountryData_1.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_1.default(fullPhoneNumber))
+        return '';
+    let localPhone = fullPhoneNumber.replace(PREFIX, '');
+    if (isEmpty_1.default(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
+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_1.default(exactCountry)) {
+        countryCode = exactCountry[0].dialCode.toString();
+    }
+    else if (!isEmpty_1.default(possibleCountries)) {
+        countryCode = possibleCountries[0].dialCode.toString();
+    }
+    return {
+        countryCode: PREFIX + countryCode,
+        phoneLine: localPhone.substring(countryCode.length, localPhone.length),
+    };
+};
+exports.getPhoneObj = getPhoneObj;
+function PhoneInput(props) {
+    const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
+    const { t } = react_i18next_1.useTranslation();
+    const [isOpen, setIsOpen] = react_1.useState(false);
+    const [iso2, setIso2] = react_1.useState('');
+    const [formattedNumber, setFormattedNumber] = react_1.useState('');
+    const [format, setFormat] = react_1.useState('');
+    const [countryObj, setCountryObj] = react_1.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_1.default(countryObj) && isEqual_1.default(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 = CountryData_1.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_1.default(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_1.default(exactCountry)) {
+            const localExactCountry = exactCountry.filter((country) => isEqual_1.default(country.priority, 0));
+            if (isEqual_1.default(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_1.default(possibleCountries)) {
+            const localPossibleCountry = possibleCountries.filter((country) => isEqual_1.default(country.priority, 0));
+            if (isEqual_1.default(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_1.default(phone.trim()) || isEmpty_1.default(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_1.default(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_1.default.createElement(react_core_1.SelectOption, { key: country.iso2, value: country },
+            react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
+                react_1.default.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_1.default.createElement("div", { className: "phone-number-select-placeholder" },
+        react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
+            react_1.default.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
+            iso2.toUpperCase())));
+    react_1.useEffect(() => {
+        if (isEmpty_1.default(phoneValue)) {
+            setInvalid && setInvalid(false);
+            return;
+        }
+        if (isEmpty_1.default(iso2)) {
+            const localFormat = setLocalFormat(phoneValue);
+            const _formattedNumber = formatNumber(phoneValue, localFormat);
+            setFormattedNumber(_formattedNumber);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    react_1.useEffect(() => {
+        if (!isEmpty_1.default(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]);
+    react_1.useEffect(() => {
+        // when user types +, it will be replaced by empty string
+        if (isEqual_1.default(phoneValue.trim(), PREFIX) && isEmpty_1.default(iso2)) {
+            onPhoneValueChange('');
+            setFormattedNumber('');
+            return;
+        }
+        if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
+            setCountryObj({
+                name: '',
+                regions: [''],
+                iso2: '',
+                countryCode: '',
+                dialCode: '',
+                format: '',
+                priority: 0,
+                areaCode: [''],
+            });
+        }
+        if (isEmpty_1.default(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_1.default.createElement(react_core_1.InputGroup, { className: "phone-number-input" },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(react_core_1.Select, { variant: react_core_1.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_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
+}
+exports.PhoneInput = PhoneInput;