@invoicebox/ui 0.1.0-alpha.70 → 0.1.0-alpha.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/common/Flag/components/RusFlag/index.js +2 -2
- package/dist/components/common/Flag/components/UnknownFlag/index.d.ts +1 -0
- package/dist/components/common/Flag/components/UnknownFlag/index.js +26 -0
- package/dist/components/common/Flag/components/UnknownFlag/index.stories.d.ts +5 -0
- package/dist/components/common/Flag/components/UnknownFlag/index.stories.js +14 -0
- package/dist/components/common/Flag/index.d.ts +2 -2
- package/dist/components/common/Flag/index.js +4 -2
- package/dist/components/form/PhoneInput/constants.js +15 -0
- package/dist/components/form/PhoneInput/hooks/useValidateInitialValue.js +1 -1
- package/dist/components/form/PhoneInput/index.js +15 -19
- package/dist/components/form/PhoneInput/index.stories.d.ts +1 -0
- package/dist/components/form/PhoneInput/index.stories.js +22 -1
- package/dist/components/form/PhoneInput/phoneInputLogic.d.ts +13 -2
- package/dist/components/form/PhoneInput/phoneInputLogic.js +34 -5
- package/dist/components/form/PhoneInput/types.d.ts +4 -2
- package/dist/components/form/PhoneInput/types.js +3 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +7 -0
- package/package.json +1 -1
|
@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
9
|
var RusFlag = exports.RusFlag = function RusFlag() {
|
|
10
10
|
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
11
|
-
width: "
|
|
12
|
-
height: "
|
|
11
|
+
width: "100%",
|
|
12
|
+
height: "100%",
|
|
13
13
|
viewBox: "0 0 22 16",
|
|
14
14
|
fill: "none",
|
|
15
15
|
xmlns: "http://www.w3.org/2000/svg"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const UnknownFlag: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.UnknownFlag = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
var UnknownFlag = exports.UnknownFlag = function UnknownFlag() {
|
|
10
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
11
|
+
width: "100%",
|
|
12
|
+
height: "100%",
|
|
13
|
+
viewBox: "0 0 22 16",
|
|
14
|
+
fill: "none",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
16
|
+
}, /*#__PURE__*/_react["default"].createElement("rect", {
|
|
17
|
+
width: "22",
|
|
18
|
+
height: "16",
|
|
19
|
+
rx: "2",
|
|
20
|
+
fill: "#353F47",
|
|
21
|
+
fillOpacity: "0.4"
|
|
22
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
23
|
+
d: "M11.1816 9.59766H10.0918C10.0957 9.22266 10.1289 8.91602 10.1914 8.67773C10.2578 8.43555 10.3652 8.21484 10.5137 8.01562C10.6621 7.81641 10.8594 7.58984 11.1055 7.33594C11.2852 7.15234 11.4492 6.98047 11.5977 6.82031C11.75 6.65625 11.873 6.48047 11.9668 6.29297C12.0605 6.10156 12.1074 5.87305 12.1074 5.60742C12.1074 5.33789 12.0586 5.10547 11.9609 4.91016C11.8672 4.71484 11.7266 4.56445 11.5391 4.45898C11.3555 4.35352 11.127 4.30078 10.8535 4.30078C10.627 4.30078 10.4121 4.3418 10.209 4.42383C10.0059 4.50586 9.8418 4.63281 9.7168 4.80469C9.5918 4.97266 9.52734 5.19336 9.52344 5.4668H8.43945C8.44727 5.02539 8.55664 4.64648 8.76758 4.33008C8.98242 4.01367 9.27148 3.77148 9.63477 3.60352C9.99805 3.43555 10.4043 3.35156 10.8535 3.35156C11.3496 3.35156 11.7715 3.44141 12.1191 3.62109C12.4707 3.80078 12.7383 4.05859 12.9219 4.39453C13.1055 4.72656 13.1973 5.12109 13.1973 5.57812C13.1973 5.92969 13.125 6.25391 12.9805 6.55078C12.8398 6.84375 12.6582 7.11914 12.4355 7.37695C12.2129 7.63477 11.9766 7.88086 11.7266 8.11523C11.5117 8.31445 11.3672 8.53906 11.293 8.78906C11.2188 9.03906 11.1816 9.30859 11.1816 9.59766ZM10.0449 11.4551C10.0449 11.2793 10.0996 11.1309 10.209 11.0098C10.3184 10.8887 10.4766 10.8281 10.6836 10.8281C10.8945 10.8281 11.0547 10.8887 11.1641 11.0098C11.2734 11.1309 11.3281 11.2793 11.3281 11.4551C11.3281 11.623 11.2734 11.7676 11.1641 11.8887C11.0547 12.0098 10.8945 12.0703 10.6836 12.0703C10.4766 12.0703 10.3184 12.0098 10.209 11.8887C10.0996 11.7676 10.0449 11.623 10.0449 11.4551Z",
|
|
24
|
+
fill: "#FAFAFA"
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _ = require(".");
|
|
8
|
+
var meta = {
|
|
9
|
+
title: 'common/Flag/_components/UnknownFlag',
|
|
10
|
+
component: _.UnknownFlag,
|
|
11
|
+
tags: ['autodocs']
|
|
12
|
+
};
|
|
13
|
+
var _default = exports["default"] = meta;
|
|
14
|
+
var Default = exports.Default = {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const flagKeys: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP"];
|
|
1
|
+
declare const flagKeys: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP", "UNKNOWN"];
|
|
2
2
|
export type TFlagKey = (typeof flagKeys)[number];
|
|
3
3
|
export type TProps = {
|
|
4
4
|
flag: TFlagKey;
|
|
@@ -7,6 +7,6 @@ export type TProps = {
|
|
|
7
7
|
};
|
|
8
8
|
export declare const Flag: {
|
|
9
9
|
({ flag, width, height }: TProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
flags: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP"];
|
|
10
|
+
flags: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP", "UNKNOWN"];
|
|
11
11
|
};
|
|
12
12
|
export {};
|
|
@@ -19,10 +19,11 @@ var _UzbFlag = require("./components/UzbFlag");
|
|
|
19
19
|
var _ChnFlag = require("./components/ChnFlag");
|
|
20
20
|
var _EngFlag = require("./components/EngFlag");
|
|
21
21
|
var _EspFlag = require("./components/EspFlag");
|
|
22
|
+
var _UnknownFlag = require("./components/UnknownFlag");
|
|
22
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
23
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
24
25
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
-
var flagKeys = ['RUS', 'BLR', 'KAZ', 'AZE', 'ARM', 'KGZ', 'MDA', 'TJK', 'UZB', 'CHN', 'ENG', 'ESP'];
|
|
26
|
+
var flagKeys = ['RUS', 'BLR', 'KAZ', 'AZE', 'ARM', 'KGZ', 'MDA', 'TJK', 'UZB', 'CHN', 'ENG', 'ESP', 'UNKNOWN'];
|
|
26
27
|
var map = {
|
|
27
28
|
RUS: /*#__PURE__*/_react["default"].createElement(_RusFlag.RusFlag, null),
|
|
28
29
|
KAZ: /*#__PURE__*/_react["default"].createElement(_KazFlag.KazFlag, null),
|
|
@@ -35,7 +36,8 @@ var map = {
|
|
|
35
36
|
UZB: /*#__PURE__*/_react["default"].createElement(_UzbFlag.UzbFlag, null),
|
|
36
37
|
CHN: /*#__PURE__*/_react["default"].createElement(_ChnFlag.ChnFlag, null),
|
|
37
38
|
ENG: /*#__PURE__*/_react["default"].createElement(_EngFlag.EngFlag, null),
|
|
38
|
-
ESP: /*#__PURE__*/_react["default"].createElement(_EspFlag.EspFlag, null)
|
|
39
|
+
ESP: /*#__PURE__*/_react["default"].createElement(_EspFlag.EspFlag, null),
|
|
40
|
+
UNKNOWN: /*#__PURE__*/_react["default"].createElement(_UnknownFlag.UnknownFlag, null)
|
|
39
41
|
};
|
|
40
42
|
var Flag = exports.Flag = function Flag(_ref) {
|
|
41
43
|
var flag = _ref.flag,
|
|
@@ -41,6 +41,13 @@ var allCountriesPhoneRules = exports.allCountriesPhoneRules = {
|
|
|
41
41
|
regexp: /^(\+?7|8)?7\d{9}$/,
|
|
42
42
|
flag: 'KAZ'
|
|
43
43
|
},
|
|
44
|
+
KGZ: {
|
|
45
|
+
placeholder: '+996 XXX-XX-XX-XX',
|
|
46
|
+
mask: '+999 999-99-99-99',
|
|
47
|
+
startSubsequence: '996',
|
|
48
|
+
regexp: /\+?996\d{9}/,
|
|
49
|
+
flag: 'KGZ'
|
|
50
|
+
},
|
|
44
51
|
TJK: {
|
|
45
52
|
placeholder: '+992-XX-XXX-XXXX',
|
|
46
53
|
mask: '+999-99-999-9999',
|
|
@@ -54,5 +61,13 @@ var allCountriesPhoneRules = exports.allCountriesPhoneRules = {
|
|
|
54
61
|
startSubsequence: '998',
|
|
55
62
|
regexp: /\+?998\d{9}/,
|
|
56
63
|
flag: 'UZB'
|
|
64
|
+
},
|
|
65
|
+
// для всех непредусмотренных стран
|
|
66
|
+
UNKNOWN: {
|
|
67
|
+
placeholder: '',
|
|
68
|
+
mask: '+999999999999999999',
|
|
69
|
+
startSubsequence: '',
|
|
70
|
+
regexp: /^\d{7,}$/,
|
|
71
|
+
flag: 'UNKNOWN'
|
|
57
72
|
}
|
|
58
73
|
};
|
|
@@ -27,7 +27,7 @@ var useValidateInitialValue = exports.useValidateInitialValue = function useVali
|
|
|
27
27
|
return _phoneInputLogic.phoneInputLogic.getIsHaveStartSequenceInString(notFormattedValue, item[1].startSubsequence);
|
|
28
28
|
});
|
|
29
29
|
var _countryCode = currentCountry ? currentCountry[0] : _types.RUS_COUNTRY_CODE;
|
|
30
|
-
var isValidInputValue = _phoneInputLogic.phoneInputLogic.
|
|
30
|
+
var isValidInputValue = _phoneInputLogic.phoneInputLogic.getIsValidPhoneInputByCountry(notFormattedValue, currentCountry ? currentCountry[1] : _constants.allCountriesPhoneRules.RUS);
|
|
31
31
|
if (isValidInputValue) {
|
|
32
32
|
onValid(notFormattedValue, _countryCode);
|
|
33
33
|
} else {
|
|
@@ -76,47 +76,42 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
|
|
|
76
76
|
onCountryChange(countryCode);
|
|
77
77
|
}
|
|
78
78
|
}, [onCountryChange]);
|
|
79
|
-
var
|
|
79
|
+
var handleInitialValid = (0, _react.useCallback)(function (currentInputValue, countryCode) {
|
|
80
80
|
onChange(currentInputValue);
|
|
81
81
|
setIsHaveInputError(false);
|
|
82
82
|
setCountry(countryCode);
|
|
83
83
|
}, [onChange]);
|
|
84
|
-
var
|
|
84
|
+
var handleInitialUnValid = (0, _react.useCallback)(function (countryCode) {
|
|
85
85
|
onChange('');
|
|
86
86
|
setIsHaveInputError(true);
|
|
87
87
|
setCountry(countryCode);
|
|
88
88
|
}, [onChange]);
|
|
89
|
-
(0, _useValidateInitialValue.useValidateInitialValue)(value, currentCountriesPhoneRules,
|
|
90
|
-
|
|
91
|
-
// хак для того чтобы сдвигать каретку в случае если при вводе "9" надо заменить на "79", каретка не двигается сама и остаётся между "7" и "9" без этой функции
|
|
92
|
-
var moveCaretByValue = (0, _react.useCallback)(function (event) {
|
|
93
|
-
return function (positionCaret) {
|
|
94
|
-
setTimeout(function () {
|
|
95
|
-
event.target.setSelectionRange(positionCaret, positionCaret);
|
|
96
|
-
}, 0);
|
|
97
|
-
};
|
|
98
|
-
}, []);
|
|
99
|
-
var getIsValidValue = (0, _react.useCallback)(function (currentValue) {
|
|
89
|
+
(0, _useValidateInitialValue.useValidateInitialValue)(value, currentCountriesPhoneRules, handleInitialValid, handleInitialUnValid);
|
|
90
|
+
var getNewCountryByInputValue = (0, _react.useCallback)(function (currentValue) {
|
|
100
91
|
var currentCountry = currentCountriesPhoneRules[country];
|
|
101
92
|
var newCountry = Object.entries(currentCountriesPhoneRules).find(function (item) {
|
|
102
93
|
return _phoneInputLogic.phoneInputLogic.getIsHaveStartSequenceInString(currentValue, item[1].startSubsequence) && currentCountry.flag !== item[1].flag;
|
|
103
94
|
});
|
|
104
|
-
var isNeedChangeCountry =
|
|
95
|
+
var isNeedChangeCountry = _phoneInputLogic.phoneInputLogic.getIsNeedChangeCountry(currentValue, currentCountry, newCountry);
|
|
105
96
|
var isNeedAndCanChangeCountry = isNeedChangeCountry && !!newCountry;
|
|
106
97
|
if (isNeedAndCanChangeCountry) {
|
|
107
98
|
handleChangeCountry(newCountry[0]);
|
|
108
99
|
}
|
|
109
|
-
return
|
|
100
|
+
return isNeedAndCanChangeCountry ? newCountry[1] : currentCountry;
|
|
110
101
|
}, [country, currentCountriesPhoneRules, handleChangeCountry]);
|
|
102
|
+
var getIsValidValue = (0, _react.useCallback)(function (currentValue) {
|
|
103
|
+
var currentCountry = getNewCountryByInputValue(currentValue);
|
|
104
|
+
return _phoneInputLogic.phoneInputLogic.getIsValidPhoneInputByCountry(currentValue, currentCountry);
|
|
105
|
+
}, [getNewCountryByInputValue]);
|
|
111
106
|
var handleInputValueChange = (0, _react.useCallback)(function (currentInputValue, event) {
|
|
112
107
|
var notFormattedValue = _phoneInputLogic.phoneInputLogic.getOnlyNumbersFromString(currentInputValue);
|
|
113
|
-
var moveCaret = event ? moveCaretByValue(event) : undefined;
|
|
108
|
+
var moveCaret = event ? _phoneInputLogic.phoneInputLogic.moveCaretByValue(event) : undefined;
|
|
114
109
|
var intermediateValue = country === _types.RUS_COUNTRY_CODE ? _phoneInputLogic.phoneInputLogic.formatRusPhoneToUnifiedView(notFormattedValue, moveCaret) : notFormattedValue;
|
|
115
110
|
var isValidInputValue = getIsValidValue(intermediateValue);
|
|
116
111
|
setIsHaveInputError(!isValidInputValue);
|
|
117
112
|
onChange(isValidInputValue ? intermediateValue : '');
|
|
118
113
|
setInputValue(intermediateValue);
|
|
119
|
-
}, [country, getIsValidValue,
|
|
114
|
+
}, [country, getIsValidValue, onChange]);
|
|
120
115
|
var handleChange = (0, _react.useCallback)(function (event) {
|
|
121
116
|
handleInputValueChange(event.target.value, event);
|
|
122
117
|
}, [handleInputValueChange]);
|
|
@@ -129,14 +124,15 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
|
|
|
129
124
|
var handleCountryChange = (0, _react.useCallback)(function (countryValue) {
|
|
130
125
|
handleChangeCountry(countryValue);
|
|
131
126
|
var currentCountry = currentCountriesPhoneRules[countryValue];
|
|
132
|
-
var isValidInputValue = _phoneInputLogic.phoneInputLogic.
|
|
127
|
+
var isValidInputValue = _phoneInputLogic.phoneInputLogic.getIsValidPhoneInputByCountry(inputValue, currentCountry);
|
|
133
128
|
setIsFirstBlur(false);
|
|
134
129
|
setIsHaveInputError(!isValidInputValue);
|
|
130
|
+
onChange(isValidInputValue ? inputValue : '');
|
|
135
131
|
setTimeout(function () {
|
|
136
132
|
var _inputRef$current;
|
|
137
133
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
|
|
138
134
|
}, 0);
|
|
139
|
-
}, [currentCountriesPhoneRules, handleChangeCountry, inputValue]);
|
|
135
|
+
}, [currentCountriesPhoneRules, handleChangeCountry, inputValue, onChange]);
|
|
140
136
|
var handlePaste = (0, _react.useCallback)(function (event) {
|
|
141
137
|
event.preventDefault();
|
|
142
138
|
var pasteText = event.clipboardData.getData('Text').trim();
|
|
@@ -3,4 +3,5 @@ import { TProps, PhoneInput } from '.';
|
|
|
3
3
|
declare const meta: Meta<typeof PhoneInput>;
|
|
4
4
|
export default meta;
|
|
5
5
|
export declare const MultiCountry: StoryObj<TProps>;
|
|
6
|
+
export declare const MultiCountryWithUnknown: StoryObj<TProps>;
|
|
6
7
|
export declare const DefaultRusCountry: StoryObj<TProps>;
|
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.MultiCountry = exports.DefaultRusCountry = void 0;
|
|
7
|
+
exports["default"] = exports.MultiCountryWithUnknown = exports.MultiCountry = exports.DefaultRusCountry = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _ = require(".");
|
|
10
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -74,6 +74,9 @@ var MultiCountry = exports.MultiCountry = {
|
|
|
74
74
|
}, {
|
|
75
75
|
label: 'Казахстан',
|
|
76
76
|
value: 'KAZ'
|
|
77
|
+
}, {
|
|
78
|
+
label: 'Кыргызстан',
|
|
79
|
+
value: 'KGZ'
|
|
77
80
|
}, {
|
|
78
81
|
label: 'Азербайджан',
|
|
79
82
|
value: 'AZE'
|
|
@@ -87,6 +90,24 @@ var MultiCountry = exports.MultiCountry = {
|
|
|
87
90
|
}),
|
|
88
91
|
render: Component
|
|
89
92
|
};
|
|
93
|
+
var MultiCountryWithUnknown = exports.MultiCountryWithUnknown = {
|
|
94
|
+
args: _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
95
|
+
countries: [{
|
|
96
|
+
label: 'Россия',
|
|
97
|
+
value: 'RUS'
|
|
98
|
+
}, {
|
|
99
|
+
label: 'Армения',
|
|
100
|
+
value: 'ARM'
|
|
101
|
+
}, {
|
|
102
|
+
label: 'Белорусь',
|
|
103
|
+
value: 'BLR'
|
|
104
|
+
}, {
|
|
105
|
+
label: 'Другая',
|
|
106
|
+
value: 'UNKNOWN'
|
|
107
|
+
}]
|
|
108
|
+
}),
|
|
109
|
+
render: Component
|
|
110
|
+
};
|
|
90
111
|
var DefaultRusCountry = exports.DefaultRusCountry = {
|
|
91
112
|
args: commonProps,
|
|
92
113
|
render: Component
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { TCountryRule, TCountrySelectOption, TSupportedCountries } from './types';
|
|
2
|
+
import { ChangeEvent } from 'react';
|
|
2
3
|
declare class PhoneInputLogic {
|
|
3
4
|
private getCaretPositionByRusValue;
|
|
4
|
-
|
|
5
|
+
getIsValidPhoneInputByCountry(value: string, country: TCountryRule): boolean;
|
|
6
|
+
getIsValidPhone(value: string, countries?: Array<{
|
|
7
|
+
label: string;
|
|
8
|
+
value: TSupportedCountries;
|
|
9
|
+
}>): boolean;
|
|
5
10
|
getCountriesSelectOptions(countries?: Array<{
|
|
6
11
|
label: string;
|
|
7
12
|
value: TSupportedCountries;
|
|
8
13
|
}>): {
|
|
9
14
|
description: string;
|
|
10
|
-
flag: "RUS" | "BLR" | "KAZ" | "AZE" | "ARM" | "KGZ" | "MDA" | "TJK" | "UZB" | "CHN" | "ENG" | "ESP";
|
|
15
|
+
flag: "RUS" | "BLR" | "KAZ" | "AZE" | "ARM" | "KGZ" | "MDA" | "TJK" | "UZB" | "CHN" | "ENG" | "ESP" | "UNKNOWN";
|
|
11
16
|
label: string;
|
|
12
17
|
value: TSupportedCountries;
|
|
13
18
|
}[] | undefined;
|
|
@@ -18,6 +23,12 @@ declare class PhoneInputLogic {
|
|
|
18
23
|
getIsHaveStartSequenceInString(value: string, subsequence: string): boolean;
|
|
19
24
|
formatRusPhoneToUnifiedView(value: string, moveCaret?: (positionCaret: number) => void): string;
|
|
20
25
|
getOnlyNumbersFromString(value: string): string;
|
|
26
|
+
moveCaretByValue(event: ChangeEvent<HTMLInputElement>): (positionCaret: number) => void;
|
|
27
|
+
getIsNeedChangeCountry(inputValue: string, currentCountry: TCountryRule, newCountry?: [string, TCountryRule]): boolean | "" | undefined;
|
|
21
28
|
}
|
|
22
29
|
export declare const phoneInputLogic: PhoneInputLogic;
|
|
30
|
+
export declare const getIsValidPhone: (value: string, countries?: {
|
|
31
|
+
label: string;
|
|
32
|
+
value: TSupportedCountries;
|
|
33
|
+
}[] | undefined) => boolean;
|
|
23
34
|
export {};
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.phoneInputLogic = void 0;
|
|
6
|
+
exports.phoneInputLogic = exports.getIsValidPhone = void 0;
|
|
7
|
+
var _types = require("./types");
|
|
7
8
|
var _constants = require("./constants");
|
|
8
9
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
9
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -35,10 +36,21 @@ var PhoneInputLogic = /*#__PURE__*/function () {
|
|
|
35
36
|
return position;
|
|
36
37
|
}
|
|
37
38
|
}, {
|
|
38
|
-
key: "
|
|
39
|
-
value: function
|
|
39
|
+
key: "getIsValidPhoneInputByCountry",
|
|
40
|
+
value: function getIsValidPhoneInputByCountry(value, country) {
|
|
40
41
|
return !!value.match(country.regexp);
|
|
41
42
|
}
|
|
43
|
+
}, {
|
|
44
|
+
key: "getIsValidPhone",
|
|
45
|
+
value: function getIsValidPhone(value, countries) {
|
|
46
|
+
var notFormattedValue = this.getOnlyNumbersFromString(value);
|
|
47
|
+
var countrySelectOptions = this.getCountriesSelectOptions(countries);
|
|
48
|
+
var currentCountriesPhoneRules = this.getCountriesPhoneRules(countrySelectOptions);
|
|
49
|
+
var country = Object.entries(currentCountriesPhoneRules).find(function (item) {
|
|
50
|
+
return phoneInputLogic.getIsHaveStartSequenceInString(notFormattedValue, item[1].startSubsequence);
|
|
51
|
+
});
|
|
52
|
+
return this.getIsValidPhoneInputByCountry(notFormattedValue, country ? country[1] : _constants.allCountriesPhoneRules.RUS);
|
|
53
|
+
}
|
|
42
54
|
}, {
|
|
43
55
|
key: "getCountriesSelectOptions",
|
|
44
56
|
value: function getCountriesSelectOptions(countries) {
|
|
@@ -48,7 +60,7 @@ var PhoneInputLogic = /*#__PURE__*/function () {
|
|
|
48
60
|
return supportedCountries === null || supportedCountries === void 0 ? void 0 : supportedCountries.map(function (country) {
|
|
49
61
|
var countryRules = _constants.allCountriesPhoneRules[country.value];
|
|
50
62
|
return _objectSpread(_objectSpread({}, country), {}, {
|
|
51
|
-
description: "+".concat(countryRules.startSubsequence),
|
|
63
|
+
description: countryRules.startSubsequence ? "+".concat(countryRules.startSubsequence) : '',
|
|
52
64
|
flag: countryRules.flag
|
|
53
65
|
});
|
|
54
66
|
});
|
|
@@ -99,7 +111,24 @@ var PhoneInputLogic = /*#__PURE__*/function () {
|
|
|
99
111
|
var _value$match;
|
|
100
112
|
return ((_value$match = value.match(/\d/g)) === null || _value$match === void 0 ? void 0 : _value$match.join('')) || '';
|
|
101
113
|
}
|
|
114
|
+
|
|
115
|
+
// хак для того чтобы сдвигать каретку в случае если при вводе "9" надо заменить на "79", каретка не двигается сама и остаётся между "7" и "9" без этой функции
|
|
116
|
+
}, {
|
|
117
|
+
key: "moveCaretByValue",
|
|
118
|
+
value: function moveCaretByValue(event) {
|
|
119
|
+
return function (positionCaret) {
|
|
120
|
+
setTimeout(function () {
|
|
121
|
+
event.target.setSelectionRange(positionCaret, positionCaret);
|
|
122
|
+
}, 0);
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
}, {
|
|
126
|
+
key: "getIsNeedChangeCountry",
|
|
127
|
+
value: function getIsNeedChangeCountry(inputValue, currentCountry, newCountry) {
|
|
128
|
+
return newCountry && currentCountry.startSubsequence !== newCountry[1].startSubsequence && inputValue && (newCountry[0] === _types.UNKNOWN_COUNTRY_CODE ? !this.getIsHaveStartSequenceInString(inputValue, currentCountry.startSubsequence) : true);
|
|
129
|
+
}
|
|
102
130
|
}]);
|
|
103
131
|
return PhoneInputLogic;
|
|
104
132
|
}();
|
|
105
|
-
var phoneInputLogic = exports.phoneInputLogic = new PhoneInputLogic();
|
|
133
|
+
var phoneInputLogic = exports.phoneInputLogic = new PhoneInputLogic();
|
|
134
|
+
var getIsValidPhone = exports.getIsValidPhone = phoneInputLogic.getIsValidPhone;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
import { TFlagKey } from '../../common/Flag';
|
|
1
2
|
export declare const RUS_COUNTRY_CODE = "RUS";
|
|
2
|
-
export declare const
|
|
3
|
+
export declare const UNKNOWN_COUNTRY_CODE = "UNKNOWN";
|
|
4
|
+
export declare const supportedCountries: readonly ["RUS", "BLR", "AZE", "ARM", "KAZ", "TJK", "UZB", "KGZ", "UNKNOWN"];
|
|
3
5
|
export type TSupportedCountries = (typeof supportedCountries)[number];
|
|
4
6
|
export type TCountryRule = {
|
|
5
7
|
placeholder: string;
|
|
6
8
|
mask: string;
|
|
7
9
|
startSubsequence: string;
|
|
8
10
|
regexp: RegExp;
|
|
9
|
-
flag:
|
|
11
|
+
flag: TFlagKey;
|
|
10
12
|
};
|
|
11
13
|
export type TCountrySelectOption = {
|
|
12
14
|
description: string;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.supportedCountries = exports.RUS_COUNTRY_CODE = void 0;
|
|
6
|
+
exports.supportedCountries = exports.UNKNOWN_COUNTRY_CODE = exports.RUS_COUNTRY_CODE = void 0;
|
|
7
7
|
var RUS_COUNTRY_CODE = exports.RUS_COUNTRY_CODE = 'RUS';
|
|
8
|
-
var
|
|
8
|
+
var UNKNOWN_COUNTRY_CODE = exports.UNKNOWN_COUNTRY_CODE = 'UNKNOWN';
|
|
9
|
+
var supportedCountries = exports.supportedCountries = [RUS_COUNTRY_CODE, 'BLR', 'AZE', 'ARM', 'KAZ', 'TJK', 'UZB', 'KGZ', UNKNOWN_COUNTRY_CODE];
|
package/dist/index.d.ts
CHANGED
|
@@ -28,6 +28,7 @@ export type { TProps as TFlagProps, TFlagKey } from './components/common/Flag';
|
|
|
28
28
|
export { CountrySelect } from './components/form/CountrySelect';
|
|
29
29
|
export type { TProps as TCountrySelectProps } from './components/form/CountrySelect';
|
|
30
30
|
export { PhoneInput } from './components/form/PhoneInput';
|
|
31
|
+
export { getIsValidPhone } from './components/form/PhoneInput/phoneInputLogic';
|
|
31
32
|
export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
|
|
32
33
|
export { PaletteProvider } from './palette';
|
|
33
34
|
export type { TAbstractPalette } from './palette';
|
package/dist/index.js
CHANGED
|
@@ -129,6 +129,12 @@ Object.defineProperty(exports, "WarningIcon", {
|
|
|
129
129
|
return _WarningIcon.WarningIcon;
|
|
130
130
|
}
|
|
131
131
|
});
|
|
132
|
+
Object.defineProperty(exports, "getIsValidPhone", {
|
|
133
|
+
enumerable: true,
|
|
134
|
+
get: function get() {
|
|
135
|
+
return _phoneInputLogic.getIsValidPhone;
|
|
136
|
+
}
|
|
137
|
+
});
|
|
132
138
|
Object.defineProperty(exports, "useInputFocus", {
|
|
133
139
|
enumerable: true,
|
|
134
140
|
get: function get() {
|
|
@@ -161,6 +167,7 @@ var _SearchInput = require("./components/form/SearchInput");
|
|
|
161
167
|
var _Flag = require("./components/common/Flag");
|
|
162
168
|
var _CountrySelect = require("./components/form/CountrySelect");
|
|
163
169
|
var _PhoneInput = require("./components/form/PhoneInput");
|
|
170
|
+
var _phoneInputLogic = require("./components/form/PhoneInput/phoneInputLogic");
|
|
164
171
|
var _palette = require("./palette");
|
|
165
172
|
var _useOutsideClick = require("./hooks/useOutsideClick");
|
|
166
173
|
var _useInputFocus = require("./hooks/useInputFocus");
|