@rh-support/components 2.0.10 → 2.0.12-beta.0

package/lib/cjs/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import './PhoneInput.scss';
+interface IProps {
+    phoneValue: string;
+    countryCode?: string;
+    onPhoneValue?: (string: any) => void;
+    validations?: 'default' | 'success' | 'warning' | 'error' | undefined;
+    onCountryCode?: (string: any) => void;
+    invalid?: boolean;
+    setInvalid: (boolean: any) => void;
+}
+export declare function PhoneInput(props: IProps): JSX.Element;
+export {};
+//# sourceMappingURL=PhoneInput.d.ts.map

package/lib/cjs/PhoneInput/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,aAAa,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAyNvC"}

package/lib/cjs/PhoneInput/PhoneInput.js

@@ -0,0 +1,199 @@
+"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 = void 0;
+require("./PhoneInput.scss");
+const react_core_1 = require("@patternfly/react-core");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const CountryData_1 = __importDefault(require("./CountryData"));
+function PhoneInput(props) {
+    const { phoneValue, countryCode, onCountryCode, onPhoneValue, 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 prefix = '+';
+    const defaultMask = '... ... ... ... ..';
+    const alwaysDefaultMask = false;
+    const [selected, setSelected] = react_1.useState({
+        name: '',
+        regions: [''],
+        iso2: '',
+        countryCode: '',
+        dialCode: '',
+        format: '', // Number Format (For US, '(...) ...-....' )
+    });
+    react_1.useEffect(() => {
+        if (lodash_1.isEmpty(iso2) && !lodash_1.isEmpty(phoneValue)) {
+            let localCountryCode = countryCode === null || countryCode === void 0 ? void 0 : countryCode.replace(prefix, '');
+            const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localCountryCode);
+            let localFormat = exactCountry[0].format.toString();
+            setFormat(localFormat);
+            formatNumber(countryCode + phoneValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    react_1.useEffect(() => {
+        if (!lodash_1.isEmpty(selected.iso2) && `${prefix}${selected.dialCode}` !== countryCode) {
+            setIso2(selected.iso2);
+            setFormat(selected.format);
+            onPhoneValue && onPhoneValue(`${prefix}${selected.dialCode}`);
+            setFormattedNumber(`${prefix}${selected.dialCode}`);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected]);
+    react_1.useEffect(() => {
+        if (lodash_1.isEmpty(phoneValue)) {
+            setIso2('');
+            setInvalid(false);
+            setFormattedNumber('');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [phoneValue]);
+    // 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.default.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 onChange = (phone) => {
+        if (lodash_1.isEmpty(phone)) {
+            setFormattedNumber('');
+        }
+        const regex = /^[\d ()+-]+$/;
+        regex.test(phone) ? setInvalid(false) : setInvalid(true);
+        formatNumber(phone);
+        if (!phoneValue.startsWith(prefix) && regex.test(phone) && !lodash_1.isEqual(phone, '-')) {
+            onPhoneValue && onPhoneValue(prefix + phone);
+        }
+        else if (phone.length <= formattedNumber.length) {
+            onPhoneValue && onPhoneValue(phone);
+        }
+    };
+    const onToggle = (isOpen) => {
+        setIsOpen(isOpen);
+    };
+    const onSelect = (event, selection) => {
+        setSelected(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 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 = (phoneNumber) => {
+        if (lodash_1.isEmpty(phoneNumber)) {
+            return;
+        }
+        let localPhone = phoneNumber.replace(prefix, '');
+        if (lodash_1.isEmpty(localPhone)) {
+            setFormattedNumber('');
+            return;
+        }
+        // Guessing countries according to user input
+        const possibleCountries = initializedCountries.filter((country) => localPhone.startsWith(country.dialCode.toString()));
+        const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
+        let localFormat;
+        if (!lodash_1.isEmpty(exactCountry)) {
+            setIso2(exactCountry[0].iso2.toString());
+            localFormat = exactCountry[0].format.toString();
+            setFormat(localFormat);
+            onCountryCode && onCountryCode(prefix + exactCountry[0].dialCode.toString());
+        }
+        else if (!lodash_1.isEmpty(possibleCountries)) {
+            setIso2(possibleCountries[0].iso2.toString());
+            localFormat = possibleCountries[0].format.toString();
+            setFormat(localFormat);
+            onCountryCode && onCountryCode(prefix + possibleCountries[0].dialCode.toString());
+        }
+        else {
+            setIso2('');
+            localFormat = format;
+        }
+        if (lodash_1.isEmpty(localFormat)) {
+            setFormattedNumber('');
+            return;
+        }
+        // Formatting inputted number
+        let phone = '';
+        [...phoneNumber].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];
+            }
+        }
+        setFormattedNumber(pattern);
+    };
+    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())));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        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: onSelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search') }, 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: onChange, validated: validations }))));
+}
+exports.PhoneInput = PhoneInput;