@alfalab/core-components-international-phone-input 1.0.0

package/components/base-international-phone-input/Component.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var core = require('@maskito/core');
+var react = require('@maskito/react');
+var shared = require('@alfalab/core-components-select/shared');
+var utils_index = require('../../utils/index.js');
+var components_countrySelect_Component = require('../country-select/Component.js');
+require('@alfalab/core-components-shared');
+require('../../consts.js');
+require('../../data/country-data.js');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('../flag-icon/component.js');
+require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../select-field/component.js');
+require('@alfalab/hooks');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+
+var styles = {"component":"international-phone-input__component_18u8d","addons":"international-phone-input__addons_18u8d"};
+require('./index.css')
+
+var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
+    var clearableCountryCode = _a.clearableCountryCode, value = _a.value, country = _a.country, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps; _a.countries; var defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 'm' : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, bottomSheetHeaderAddonsProps = _a.bottomSheetHeaderAddonsProps, countriesData = _a.countriesData, clear = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "bottomSheetHeaderAddonsProps", "countriesData", "clear"]);
+    var inputRef = React.useRef(null);
+    var inputWrapperRef = React.useRef(null);
+    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
+    var maskRef = react.useMaskito({ options: maskOptions });
+    var changeNumber = function (e, phone) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: phone });
+    };
+    var updatePhoneData = function (phone, e) {
+        var _a = utils_index.getPhoneData(phone, countriesData, defaultIso2), nextCountry = _a.nextCountry, nextPhone = _a.nextPhone;
+        if (nextCountry !== country) {
+            onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+        }
+        changeNumber(e, nextPhone);
+    };
+    var handleSelectCountry = function (_a) {
+        var selected = _a.selected;
+        var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
+        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+        if (nextCountry) {
+            changeNumber(null, "+".concat(nextCountry.dialCode));
+        }
+        requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    };
+    var handleOptionSelect = function (payload) {
+        var _a;
+        updatePhoneData(core.maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions), null);
+    };
+    var handleInput = function (e) {
+        updatePhoneData(e.target.value, e);
+    };
+    var handleClear = function () {
+        if (clearableCountryCode) {
+            changeNumber(null, '');
+        }
+        else {
+            changeNumber(null, "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+        }
+    };
+    React.useEffect(function () {
+        if (value) {
+            var newValue = core.maskitoTransform(value, maskOptions);
+            if (value !== newValue) {
+                updatePhoneData(newValue, null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, maskOptions]);
+    var inputProps = {
+        className: styles.component,
+        ref: mergeRefs__default.default([maskRef, ref, inputRef]),
+        wrapperRef: inputWrapperRef,
+        addonsClassName: styles.addons,
+        type: 'tel',
+    };
+    var renderCountrySelect = function () {
+        var _a;
+        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
+    };
+    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: options, value: value, onChange: handleOptionSelect, bottomSheetHeaderAddonsProps: tslib.__assign(tslib.__assign({}, bottomSheetHeaderAddonsProps), inputProps), inputProps: tslib.__assign(tslib.__assign({}, inputProps), { clear: clear, onClear: handleClear, leftAddons: renderCountrySelect(), onInput: handleInput }), fieldProps: {
+            className: inputProps.className,
+            addonsClassName: inputProps.addonsClassName,
+            leftAddons: renderCountrySelect(),
+        } }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: clear ? handleClear : undefined, clear: clear, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+});
+
+exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

package/components/base-international-phone-input/index.css

@@ -0,0 +1,5 @@
+/* hash: oxfst */
+
+    .international-phone-input__component_18u8d .international-phone-input__addons_18u8d {
+        padding-left: 0;
+    }

package/components/base-international-phone-input/index.d.ts

@@ -0,0 +1 @@
+export { BaseInternationalPhoneInput } from "./Component";

package/components/base-international-phone-input/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseInternationalPhoneInput_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-merge-refs');
+require('@maskito/core');
+require('@maskito/react');
+require('@alfalab/core-components-select/shared');
+require('../../utils/index.js');
+require('@alfalab/core-components-shared');
+require('../../consts.js');
+require('../../data/country-data.js');
+require('../country-select/Component.js');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('../flag-icon/component.js');
+require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../select-field/component.js');
+require('@alfalab/hooks');
+
+
+
+exports.BaseInternationalPhoneInput = components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput;

package/components/country-select/Component.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import React from 'react';
+import { ElementType } from "react";
+import { BaseSelectProps } from "../../shared-4cd3936b";
+import { Country } from "../../types";
+type SharedCountrySelectProps = Omit<BaseSelectProps, 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: Record<string, unknown>;
+    hideCountrySelect?: boolean;
+};
+type CountrySelectProps = SharedCountrySelectProps & {
+    countries?: Country[][];
+    country?: Country;
+    fieldWidth?: number;
+    view: 'desktop' | 'mobile';
+    SelectComponent: ElementType;
+};
+declare const CountrySelect: React.FC<CountrySelectProps>;
+export { SharedCountrySelectProps, CountrySelect };

package/components/country-select/Component.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var shared = require('@alfalab/core-components-select/shared');
+var coreComponentsShared = require('@alfalab/core-components-shared');
+var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var components_flagIcon_component = require('../flag-icon/component.js');
+var components_selectField_component = require('../select-field/component.js');
+require('classnames');
+require('../flag-icon/flagSprite.js');
+require('react-merge-refs');
+require('@alfalab/hooks');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"component":"international-phone-input__component_g8rhr","option":"international-phone-input__option_g8rhr","flag":"international-phone-input__flag_g8rhr","countryName":"international-phone-input__countryName_g8rhr","dialCode":"international-phone-input__dialCode_g8rhr","flagIconWrapper":"international-phone-input__flagIconWrapper_g8rhr","emptyCountryIcon":"international-phone-input__emptyCountryIcon_g8rhr"};
+require('./index.css')
+
+var CountrySelect = function (_a) {
+    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
+    var options = React.useMemo(function () {
+        return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
+            var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
+            return {
+                key: iso2,
+                value: areas[0],
+                content: (React__default.default.createElement("span", { className: styles.option },
+                    React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles.flag }),
+                    React__default.default.createElement("span", { className: styles.optionTextWrap },
+                        React__default.default.createElement("span", { className: styles.countryName }, name),
+                        React__default.default.createElement("span", { className: styles.dialCode },
+                            "+",
+                            dialCode)))),
+            };
+        })) || [];
+    }, [countries]);
+    var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
+        React__default.default.createElement(shared.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
+    var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
+    var renderCountrySelect = function () {
+        var _a;
+        var selected = (_a = options.find(function (c) { return c.key === (country === null || country === void 0 ? void 0 : country.iso2); })) === null || _a === void 0 ? void 0 : _a.key;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        React__default.default.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
+            React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: view === 'mobile' ? shared.VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
+                bottomSheetProps: {
+                    title: 'Выберите страну',
+                },
+            })))));
+    };
+    return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();
+};
+
+exports.CountrySelect = CountrySelect;

package/components/country-select/index.css

@@ -0,0 +1,47 @@
+/* hash: 1hqzw */
+:root {
+} /* deprecated */ :root {
+    --color-light-graphic-secondary: #86868a;
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+} :root {
+} :root {
+    --text-secondary-color: var(--color-light-text-secondary);
+} .international-phone-input__component_g8rhr {
+    position: static;
+    display: flex;
+    min-width: initial;
+    height: 100%;
+} .international-phone-input__option_g8rhr {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--gap-s);
+} .international-phone-input__flag_g8rhr {
+    flex-shrink: 0;
+    margin-right: var(--gap-xs);
+} .international-phone-input__countryName_g8rhr {
+    margin-right: var(--gap-xs);
+} .international-phone-input__dialCode_g8rhr {
+    color: var(--text-secondary-color);
+} .international-phone-input__flagIconWrapper_g8rhr {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-s);
+} .international-phone-input__emptyCountryIcon_g8rhr {
+    color: var(--color-light-graphic-secondary);
+}

package/components/country-select/index.d.ts

@@ -0,0 +1 @@
+export { CountrySelect, SharedCountrySelectProps } from "./Component";

package/components/country-select/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_countrySelect_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('@alfalab/core-components-select/shared');
+require('@alfalab/core-components-shared');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('../flag-icon/component.js');
+require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../select-field/component.js');
+require('react-merge-refs');
+require('@alfalab/hooks');
+
+
+
+exports.CountrySelect = components_countrySelect_Component.CountrySelect;

package/components/flag-icon/component.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+type FlagIconProps = {
+    /**
+     * Код страны из <a href="https://ru.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank">ISO 3166-1 alpha-2</a>
+     */
+    country?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+/**
+ * Компонент флага в виде иконки.
+ */
+declare const FlagIcon: FC<FlagIconProps>;
+export { FlagIconProps, FlagIcon };

package/components/flag-icon/component.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var components_flagIcon_flagSprite = require('./flagSprite.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"flagIcon":"international-phone-input__flagIcon_1xrmt","flagPlaceholder":"international-phone-input__flagPlaceholder_1xrmt"};
+require('./index.css')
+
+/**
+ * Компонент флага в виде иконки.
+ */
+var FlagIcon = function (_a) {
+    var _b = _a.country, country = _b === void 0 ? '' : _b, className = _a.className;
+    return components_flagIcon_flagSprite.flagSprite[country] ? (React__default.default.createElement("span", { className: cn__default.default(styles.flagIcon, className), "data-test-id": "flag-icon-".concat(country), 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: components_flagIcon_flagSprite.flagSprite[country] } })) : (React__default.default.createElement("div", { className: cn__default.default(styles.flagPlaceholder, className) }));
+};
+
+exports.FlagIcon = FlagIcon;

package/components/flag-icon/flagSprite.d.ts

@@ -0,0 +1,2 @@
+declare const flagSprite: Record<string, string>;
+export { flagSprite };