@rh-support/components 2.4.10-beta.6 → 2.5.0

package/lib/cjs/PhoneInput/PhoneInput.js

@@ -1,286 +0,0 @@
-"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;
-    }
-}
-// To map country data
-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 === null || phoneNumber === void 0 ? void 0 : phoneNumber.replace(PREFIX, '').trim();
-        localPhone = localPhone === null || localPhone === void 0 ? void 0 : localPhone.replace('(', '').trim();
-        localPhone = localPhone === null || localPhone === void 0 ? void 0 : 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)) {
-            onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
-            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 === null || phone === void 0 ? void 0 : phone.trim()) || isEmpty_1.default(phone === null || phone === void 0 ? void 0 : 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 === null || phoneValue === void 0 ? void 0 : 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;