albinasoft-ui-package 1.1.11 → 1.1.12
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.
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
id?: string;
|
|
4
|
+
name?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
value: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
placeholderWhenUnselectedCountryCode?: string;
|
|
9
|
+
placeholderForCountryCode?: string;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
submitted?: boolean;
|
|
12
|
+
errorMessage?: string;
|
|
13
|
+
conditionalErrorVisible?: boolean;
|
|
14
|
+
conditionalErrorMessage?: string;
|
|
15
|
+
conditionalErrorVisibleForCountryCode?: boolean;
|
|
16
|
+
conditionalErrorMessageForCountryCode?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
readOnly?: boolean;
|
|
19
|
+
description?: string | null;
|
|
20
|
+
descriptionForCountryCode?: string | null;
|
|
21
|
+
tooltip?: string;
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
mainClass?: string;
|
|
24
|
+
className?: string;
|
|
25
|
+
countryCodeText?: string;
|
|
26
|
+
onChange: (full: string) => void;
|
|
27
|
+
}
|
|
28
|
+
declare const CustomPhoneInput: React.FC<Props>;
|
|
29
|
+
export default CustomPhoneInput;
|
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
26
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
27
|
+
if (ar || !(i in from)) {
|
|
28
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
29
|
+
ar[i] = from[i];
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
|
+
};
|
|
34
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
35
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
|
+
};
|
|
37
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var react_bootstrap_1 = require("react-bootstrap");
|
|
40
|
+
var react_input_mask_1 = __importDefault(require("react-input-mask"));
|
|
41
|
+
var fa_1 = require("react-icons/fa");
|
|
42
|
+
var CustomSelect_1 = __importDefault(require("./CustomSelect"));
|
|
43
|
+
var countries = [
|
|
44
|
+
{ id: 'TR', code: '90', label: 'Türkiye (+90)', mask: '(999) 999 99 99' },
|
|
45
|
+
{ id: 'AZ', code: '994', label: 'Azerbaijan (+994)', mask: '(99) 999-9999' },
|
|
46
|
+
// North America (NANP)
|
|
47
|
+
{ id: 'US', code: '1', label: 'United States (+1)', mask: '(999) 999-9999' },
|
|
48
|
+
{ id: 'CA', code: '1', label: 'Canada (+1)', mask: '(999) 999-9999' },
|
|
49
|
+
{ id: 'BS', code: '1242', label: 'Bahamas (+1242)', mask: '999-9999' },
|
|
50
|
+
{ id: 'BB', code: '1246', label: 'Barbados (+1246)', mask: '999-9999' },
|
|
51
|
+
{ id: 'AI', code: '1264', label: 'Anguilla (+1264)', mask: '999-9999' },
|
|
52
|
+
{ id: 'AG', code: '1268', label: 'Antigua & Barbuda (+1268)', mask: '999-9999' },
|
|
53
|
+
{ id: 'VG', code: '1284', label: 'British Virgin Islands (+1284)', mask: '999-9999' },
|
|
54
|
+
{ id: 'VI', code: '1340', label: 'U.S. Virgin Islands (+1340)', mask: '999-9999' },
|
|
55
|
+
{ id: 'BM', code: '1441', label: 'Bermuda (+1441)', mask: '999-9999' },
|
|
56
|
+
{ id: 'GD', code: '1473', label: 'Grenada (+1473)', mask: '999-9999' },
|
|
57
|
+
{ id: 'KY', code: '1649', label: 'Cayman Islands (+1649)', mask: '999-9999' },
|
|
58
|
+
{ id: 'MS', code: '1664', label: 'Montserrat (+1664)', mask: '999-9999' },
|
|
59
|
+
{ id: 'AS', code: '1684', label: 'American Samoa (+1684)', mask: '999-9999' },
|
|
60
|
+
{ id: 'LC', code: '1758', label: 'St. Lucia (+1758)', mask: '999-9999' },
|
|
61
|
+
{ id: 'DM', code: '1767', label: 'Dominica (+1767)', mask: '999-9999' },
|
|
62
|
+
{ id: 'VC', code: '1784', label: 'St. Vincent & Grenadines (+1784)', mask: '999-9999' },
|
|
63
|
+
{ id: 'DO', code: '1809', label: 'Dominican Republic (+1809)', mask: '999-9999' },
|
|
64
|
+
{ id: 'TT', code: '1868', label: 'Trinidad & Tobago (+1868)', mask: '999-9999' },
|
|
65
|
+
{ id: 'KN', code: '1869', label: 'St. Kitts & Nevis (+1869)', mask: '999-9999' },
|
|
66
|
+
{ id: 'JM', code: '1876', label: 'Jamaica (+1876)', mask: '999-9999' },
|
|
67
|
+
// Russia & neighbors
|
|
68
|
+
{ id: 'RU', code: '7', label: 'Russia (+7)', mask: '(999) 999-99-99' },
|
|
69
|
+
{ id: 'KZ', code: '7', label: 'Kazakhstan (+7)', mask: '(999) 999-99-99' },
|
|
70
|
+
// North Africa & Middle East
|
|
71
|
+
{ id: 'EG', code: '20', label: 'Egypt (+20)', mask: '(99) 9999 9999' },
|
|
72
|
+
{ id: 'MA', code: '212', label: 'Morocco (+212)', mask: '(99) 9999 9999' },
|
|
73
|
+
{ id: 'TN', code: '216', label: 'Tunisia (+216)', mask: '(99) 999 9999' },
|
|
74
|
+
{ id: 'LY', code: '218', label: 'Libya (+218)', mask: '(99) 999 9999' },
|
|
75
|
+
{ id: 'SD', code: '249', label: 'Sudan (+249)', mask: '(99) 999 9999' },
|
|
76
|
+
{ id: 'PS', code: '970', label: 'Palestine (+970)', mask: '5999 999999' },
|
|
77
|
+
{ id: 'JO', code: '962', label: 'Jordan (+962)', mask: '7999 999999' },
|
|
78
|
+
{ id: 'LB', code: '961', label: 'Lebanon (+961)', mask: '3 999 999' },
|
|
79
|
+
{ id: 'SY', code: '963', label: 'Syria (+963)', mask: '11 999 9999' },
|
|
80
|
+
{ id: 'IQ', code: '964', label: 'Iraq (+964)', mask: '1 9999 99999' },
|
|
81
|
+
{ id: 'KW', code: '965', label: 'Kuwait (+965)', mask: '9999 9999' },
|
|
82
|
+
{ id: 'SA', code: '966', label: 'Saudi Arabia (+966)', mask: '5 9999 9999' },
|
|
83
|
+
{ id: 'YE', code: '967', label: 'Yemen (+967)', mask: '7 999 999 999' },
|
|
84
|
+
{ id: 'OM', code: '968', label: 'Oman (+968)', mask: '9 9999 9999' },
|
|
85
|
+
{ id: 'AE', code: '971', label: 'United Arab Emirates (+971)', mask: '5 999 9999' },
|
|
86
|
+
{ id: 'IL', code: '972', label: 'Israel (+972)', mask: '5-999-9999' },
|
|
87
|
+
{ id: 'BH', code: '973', label: 'Bahrain (+973)', mask: '3999 9999' },
|
|
88
|
+
{ id: 'QA', code: '974', label: 'Qatar (+974)', mask: '3 999 9999' },
|
|
89
|
+
{ id: 'BT', code: '975', label: 'Bhutan (+975)', mask: '17-99-9999' },
|
|
90
|
+
{ id: 'MN', code: '976', label: 'Mongolia (+976)', mask: '99-999-999' },
|
|
91
|
+
{ id: 'NP', code: '977', label: 'Nepal (+977)', mask: '1-9999999' },
|
|
92
|
+
// Sub-Saharan Africa
|
|
93
|
+
{ id: 'NG', code: '234', label: 'Nigeria (+234)', mask: '(999) 999-9999' },
|
|
94
|
+
{ id: 'GH', code: '233', label: 'Ghana (+233)', mask: '(99) 999 9999' },
|
|
95
|
+
{ id: 'CI', code: '225', label: 'Côte d’Ivoire (+225)', mask: '(99) 9999 9999' },
|
|
96
|
+
{ id: 'SN', code: '221', label: 'Senegal (+221)', mask: '(99) 999 9999' },
|
|
97
|
+
{ id: 'CM', code: '237', label: 'Cameroon (+237)', mask: '(99) 99 99 99' },
|
|
98
|
+
{ id: 'KE', code: '254', label: 'Kenya (+254)', mask: '(999) 999 9999' },
|
|
99
|
+
{ id: 'TZ', code: '255', label: 'Tanzania (+255)', mask: '(999) 999 999' },
|
|
100
|
+
{ id: 'UG', code: '256', label: 'Uganda (+256)', mask: '(999) 999 999' },
|
|
101
|
+
{ id: 'ET', code: '251', label: 'Ethiopia (+251)', mask: '(99) 999 9999' },
|
|
102
|
+
{ id: 'DZ', code: '213', label: 'Algeria (+213)', mask: '(999) 999 9999' },
|
|
103
|
+
// Europe
|
|
104
|
+
{ id: 'GR', code: '30', label: 'Greece (+30)', mask: '(999) 9999999' },
|
|
105
|
+
{ id: 'NL', code: '31', label: 'Netherlands (+31)', mask: '(99) 999 9999' },
|
|
106
|
+
{ id: 'BE', code: '32', label: 'Belgium (+32)', mask: '(99) 999 99 99' },
|
|
107
|
+
{ id: 'FR', code: '33', label: 'France (+33)', mask: '(9) 99 99 99 99' },
|
|
108
|
+
{ id: 'ES', code: '34', label: 'Spain (+34)', mask: '(99) 999 99 99' },
|
|
109
|
+
{ id: 'HU', code: '36', label: 'Hungary (+36)', mask: '(99) 999 9999' },
|
|
110
|
+
{ id: 'IT', code: '39', label: 'Italy (+39)', mask: '9 9999 99999' },
|
|
111
|
+
{ id: 'RO', code: '40', label: 'Romania (+40)', mask: '(99) 999 9999' },
|
|
112
|
+
{ id: 'CH', code: '41', label: 'Switzerland (+41)', mask: '(99) 999 99 99' },
|
|
113
|
+
{ id: 'AT', code: '43', label: 'Austria (+43)', mask: '(999) 999 9999' },
|
|
114
|
+
{ id: 'GB', code: '44', label: 'United Kingdom (+44)', mask: '9999 999999' },
|
|
115
|
+
{ id: 'DK', code: '45', label: 'Denmark (+45)', mask: '99 99 99 99' },
|
|
116
|
+
{ id: 'SE', code: '46', label: 'Sweden (+46)', mask: '99-999 99 99' },
|
|
117
|
+
{ id: 'NO', code: '47', label: 'Norway (+47)', mask: '99 99 99 99' },
|
|
118
|
+
{ id: 'PL', code: '48', label: 'Poland (+48)', mask: '99 999 99 99' },
|
|
119
|
+
{ id: 'DE', code: '49', label: 'Germany (+49)', mask: '(999) 9999 9999' },
|
|
120
|
+
{ id: 'PT', code: '351', label: 'Portugal (+351)', mask: '99 999 9999' },
|
|
121
|
+
{ id: 'IE', code: '353', label: 'Ireland (+353)', mask: '99 999 9999' },
|
|
122
|
+
{ id: 'IS', code: '354', label: 'Iceland (+354)', mask: '999 9999' },
|
|
123
|
+
{ id: 'AL', code: '355', label: 'Albania (+355)', mask: '99 999 9999' },
|
|
124
|
+
{ id: 'MT', code: '356', label: 'Malta (+356)', mask: '9999 9999' },
|
|
125
|
+
{ id: 'CY', code: '357', label: 'Cyprus (+357)', mask: '99 999 999' },
|
|
126
|
+
{ id: 'FI', code: '358', label: 'Finland (+358)', mask: '99 999 9999' },
|
|
127
|
+
{ id: 'BG', code: '359', label: 'Bulgaria (+359)', mask: '(99) 999 9999' },
|
|
128
|
+
{ id: 'LT', code: '370', label: 'Lithuania (+370)', mask: '6 999 9999' },
|
|
129
|
+
{ id: 'LV', code: '371', label: 'Latvia (+371)', mask: '29999999' },
|
|
130
|
+
{ id: 'EE', code: '372', label: 'Estonia (+372)', mask: '5 999 9999' },
|
|
131
|
+
{ id: 'MD', code: '373', label: 'Moldova (+373)', mask: '79 999 999' },
|
|
132
|
+
{ id: 'AM', code: '374', label: 'Armenia (+374)', mask: '99 999999' },
|
|
133
|
+
{ id: 'BY', code: '375', label: 'Belarus (+375)', mask: '29 999 99 99' },
|
|
134
|
+
{ id: 'AD', code: '376', label: 'Andorra (+376)', mask: '3 999 999' },
|
|
135
|
+
{ id: 'MC', code: '377', label: 'Monaco (+377)', mask: '99 99 99 99' },
|
|
136
|
+
{ id: 'SM', code: '378', label: 'San Marino (+378)', mask: '9999 99999' },
|
|
137
|
+
{ id: 'Va', code: '379', label: 'Vatican City (+379)', mask: '999 999999' },
|
|
138
|
+
{ id: 'UA', code: '380', label: 'Ukraine (+380)', mask: '(99) 999 99 99' },
|
|
139
|
+
{ id: 'RS', code: '381', label: 'Serbia (+381)', mask: '(9) 999 999 999' },
|
|
140
|
+
{ id: 'ME', code: '382', label: 'Montenegro (+382)', mask: '(99) 999 999' },
|
|
141
|
+
{ id: 'XK', code: '383', label: 'Kosovo (+383)', mask: '(49) 999 999' },
|
|
142
|
+
{ id: 'HR', code: '385', label: 'Croatia (+385)', mask: '(99) 999 9999' },
|
|
143
|
+
{ id: 'SI', code: '386', label: 'Slovenia (+386)', mask: '31 999 999' },
|
|
144
|
+
{ id: 'BA', code: '387', label: 'Bosnia & Herzegovina (+387)', mask: '(99) 999 999' },
|
|
145
|
+
{ id: 'MK', code: '389', label: 'North Macedonia (+389)', mask: '7 999 9999' },
|
|
146
|
+
{ id: 'CZ', code: '420', label: 'Czech Republic (+420)', mask: '999 999 999' },
|
|
147
|
+
{ id: 'SK', code: '421', label: 'Slovakia (+421)', mask: '999 999 999' },
|
|
148
|
+
{ id: 'LI', code: '423', label: 'Liechtenstein (+423)', mask: '799 9999' },
|
|
149
|
+
// Asia & Pacific
|
|
150
|
+
{ id: 'AF', code: '93', label: 'Afghanistan (+93)', mask: '70 999 9999' },
|
|
151
|
+
{ id: 'PK', code: '92', label: 'Pakistan (+92)', mask: '300 9999999' },
|
|
152
|
+
{ id: 'IN', code: '91', label: 'India (+91)', mask: '99999 99999' },
|
|
153
|
+
{ id: 'BD', code: '880', label: 'Bangladesh (+880)', mask: '999 999 9999' },
|
|
154
|
+
{ id: 'LK', code: '94', label: 'Sri Lanka (+94)', mask: '11 2 345 678' },
|
|
155
|
+
{ id: 'MV', code: '960', label: 'Maldives (+960)', mask: '9 99 9999' },
|
|
156
|
+
{ id: 'MM', code: '95', label: 'Myanmar (+95)', mask: '9 999 999 99' },
|
|
157
|
+
{ id: 'KH', code: '855', label: 'Cambodia (+855)', mask: '(99) 999 999' },
|
|
158
|
+
{ id: 'LA', code: '856', label: 'Laos (+856)', mask: '20 999 9999' },
|
|
159
|
+
{ id: 'TH', code: '66', label: 'Thailand (+66)', mask: '9 9999 9999' },
|
|
160
|
+
{ id: 'VN', code: '84', label: 'Vietnam (+84)', mask: '99 999 9999' },
|
|
161
|
+
{ id: 'MY', code: '60', label: 'Malaysia (+60)', mask: '19-999 9999' },
|
|
162
|
+
{ id: 'SG', code: '65', label: 'Singapore (+65)', mask: '9999 9999' },
|
|
163
|
+
{ id: 'ID', code: '62', label: 'Indonesia (+62)', mask: '(+62) 812-3456-7890' },
|
|
164
|
+
{ id: 'PH', code: '63', label: 'Philippines (+63)', mask: '(99) 999 9999' },
|
|
165
|
+
{ id: 'AU', code: '61', label: 'Australia (+61)', mask: '4 9999 9999' },
|
|
166
|
+
{ id: 'NZ', code: '64', label: 'New Zealand (+64)', mask: '21 234 5678' },
|
|
167
|
+
{ id: 'JP', code: '81', label: 'Japan (+81)', mask: '90-1234-5678' },
|
|
168
|
+
{ id: 'KR', code: '82', label: 'South Korea (+82)', mask: '10-1234-5678' },
|
|
169
|
+
{ id: 'CN', code: '86', label: 'China (+86)', mask: '10 1234 5678' },
|
|
170
|
+
{ id: 'TW', code: '886', label: 'Taiwan (+886)', mask: '912-345-678' },
|
|
171
|
+
{ id: 'HK', code: '852', label: 'Hong Kong (+852)', mask: '9123 4567' },
|
|
172
|
+
{ id: 'MO', code: '853', label: 'Macao (+853)', mask: '6234 5678' },
|
|
173
|
+
];
|
|
174
|
+
var CustomPhoneInput = function (_a) {
|
|
175
|
+
var id = _a.id, name = _a.name, label = _a.label, value = _a.value, _b = _a.placeholder, placeholder = _b === void 0 ? 'Telefon numaranızı giriniz.' : _b, _c = _a.placeholderWhenUnselectedCountryCode, placeholderWhenUnselectedCountryCode = _c === void 0 ? 'Önce ülke kodunu seçiniz.' : _c, _d = _a.placeholderForCountryCode, placeholderForCountryCode = _d === void 0 ? "Seçiniz..." : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.submitted, submitted = _f === void 0 ? false : _f, errorMessage = _a.errorMessage, _g = _a.conditionalErrorVisible, conditionalErrorVisible = _g === void 0 ? false : _g, conditionalErrorMessage = _a.conditionalErrorMessage, _h = _a.conditionalErrorVisibleForCountryCode, conditionalErrorVisibleForCountryCode = _h === void 0 ? false : _h, _j = _a.conditionalErrorMessageForCountryCode, conditionalErrorMessageForCountryCode = _j === void 0 ? '' : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, _l = _a.readOnly, readOnly = _l === void 0 ? false : _l, description = _a.description, descriptionForCountryCode = _a.descriptionForCountryCode, tooltip = _a.tooltip, style = _a.style, mainClass = _a.mainClass, className = _a.className, _m = _a.countryCodeText, countryCodeText = _m === void 0 ? 'Ülke Kodu' : _m, onChange = _a.onChange;
|
|
176
|
+
var _o = (0, react_1.useState)(null), country = _o[0], setCountry = _o[1];
|
|
177
|
+
var _p = (0, react_1.useState)(''), national = _p[0], setNational = _p[1];
|
|
178
|
+
var _q = (0, react_1.useState)(''), countryId = _q[0], setCountryId = _q[1];
|
|
179
|
+
var showInvalidCountry = submitted && required && !countryId;
|
|
180
|
+
var skipParse = (0, react_1.useRef)(false);
|
|
181
|
+
var sorted = (0, react_1.useMemo)(function () { return __spreadArray([], countries, true).sort(function (a, b) { return b.code.length - a.code.length; }); }, []);
|
|
182
|
+
(0, react_1.useEffect)(function () {
|
|
183
|
+
if (!value) {
|
|
184
|
+
setCountryId('');
|
|
185
|
+
setNational('');
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
for (var _i = 0, sorted_1 = sorted; _i < sorted_1.length; _i++) {
|
|
189
|
+
var c = sorted_1[_i];
|
|
190
|
+
if (value.startsWith(c.code)) {
|
|
191
|
+
setCountry(c);
|
|
192
|
+
setNational(value.slice(c.code.length));
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
setCountry(sorted[0]);
|
|
197
|
+
setNational(value);
|
|
198
|
+
}, [value, sorted]);
|
|
199
|
+
var handleNationalChange = function (e) {
|
|
200
|
+
skipParse.current = true;
|
|
201
|
+
var raw = e.target.value.replace(/\D/g, '');
|
|
202
|
+
setNational(raw);
|
|
203
|
+
onChange((country === null || country === void 0 ? void 0 : country.code) + raw);
|
|
204
|
+
};
|
|
205
|
+
// validation için
|
|
206
|
+
var showInvalid = submitted && required && !value;
|
|
207
|
+
return (react_1.default.createElement("div", { className: mainClass, style: style },
|
|
208
|
+
react_1.default.createElement("div", { className: "form-group" },
|
|
209
|
+
react_1.default.createElement("div", { className: "row" },
|
|
210
|
+
react_1.default.createElement("div", { className: "col-12 col-md-3" },
|
|
211
|
+
react_1.default.createElement(CustomSelect_1.default, { id: id && "".concat(id, "-country"), name: name && "".concat(name, "-country"), label: countryCodeText, options: countries.map(function (c) { return ({
|
|
212
|
+
id: c.id,
|
|
213
|
+
label: c.label,
|
|
214
|
+
value: c.id
|
|
215
|
+
}); }), value: (country === null || country === void 0 ? void 0 : country.id) || '', onChange: function (val) {
|
|
216
|
+
var selId = Array.isArray(val) ? val[0] : val;
|
|
217
|
+
setCountryId(selId);
|
|
218
|
+
setNational('');
|
|
219
|
+
onChange(selId ? countries.find(function (c) { return c.id === selId; }).code : '');
|
|
220
|
+
}, disabled: disabled, searchable: true, multiple: false, placeholder: placeholderForCountryCode, className: "h-100 ".concat(showInvalidCountry ? 'is-invalid' : ''), required: required }),
|
|
221
|
+
conditionalErrorVisibleForCountryCode && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
|
|
222
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
223
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
|
224
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
225
|
+
react_1.default.createElement("span", null, conditionalErrorMessageForCountryCode)))),
|
|
226
|
+
descriptionForCountryCode && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
|
|
227
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
228
|
+
react_1.default.createElement(fa_1.FaInfoCircle, null)),
|
|
229
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
230
|
+
react_1.default.createElement("span", null, descriptionForCountryCode))))),
|
|
231
|
+
react_1.default.createElement("div", { className: "col-12 col-md-9" },
|
|
232
|
+
react_1.default.createElement("label", { className: "form-label" }, label),
|
|
233
|
+
tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tt-".concat(tooltip) }, tooltip) },
|
|
234
|
+
react_1.default.createElement(react_input_mask_1.default, { id: id, name: name, mask: (country === null || country === void 0 ? void 0 : country.mask) || '', value: national, onChange: handleNationalChange, className: "form-control ".concat(className || '', " ").concat(showInvalid ? 'is-invalid' : ''), placeholder: countryId === '' ? placeholderWhenUnselectedCountryCode : placeholder || (country === null || country === void 0 ? void 0 : country.mask) || '', disabled: countryId === '' || disabled, readOnly: readOnly, autoComplete: "tel", required: required }))) : (react_1.default.createElement(react_input_mask_1.default, { id: id, name: name, mask: (country === null || country === void 0 ? void 0 : country.mask) || '', value: national, onChange: handleNationalChange, className: "form-control ".concat(className || '', " ").concat(showInvalid ? 'is-invalid' : ''), placeholder: countryId === '' ? placeholderWhenUnselectedCountryCode : placeholder || (country === null || country === void 0 ? void 0 : country.mask) || '', disabled: countryId === '' || disabled, readOnly: readOnly, autoComplete: "tel", required: required })),
|
|
235
|
+
react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
|
|
236
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
237
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
|
238
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
239
|
+
react_1.default.createElement("span", null, errorMessage || "Bu alan boş bırakılamaz."))),
|
|
240
|
+
conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
|
|
241
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
242
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
|
243
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
244
|
+
react_1.default.createElement("span", null, conditionalErrorMessage)))),
|
|
245
|
+
description && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
|
|
246
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
247
|
+
react_1.default.createElement(fa_1.FaInfoCircle, null)),
|
|
248
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
249
|
+
react_1.default.createElement("span", null, description)))))))));
|
|
250
|
+
};
|
|
251
|
+
exports.default = CustomPhoneInput;
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import CustomDivider from './components/CustomDivider';
|
|
|
6
6
|
import CustomForm from './components/CustomForm';
|
|
7
7
|
import CustomInput from './components/CustomInput';
|
|
8
8
|
import CustomModal from './components/CustomModal';
|
|
9
|
+
import CustomPhoneInput from './components/CustomPhoneInput';
|
|
9
10
|
import CustomRadioButton from './components/CustomRadioButton';
|
|
10
11
|
import CustomRichTextbox from './components/CustomRichTextbox';
|
|
11
12
|
import CustomSelect from './components/CustomSelect';
|
|
@@ -17,4 +18,4 @@ import CustomAutocompleteInput from './components/CustomAutocompleteInput';
|
|
|
17
18
|
import CustomProgressBar from './components/CustomProgressBar';
|
|
18
19
|
import CustomTimeline from './components/CustomTimeline';
|
|
19
20
|
import CustomDatatable from './components/CustomDatatable';
|
|
20
|
-
export { AlbinaForm, CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };
|
|
21
|
+
export { AlbinaForm, CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomPhoneInput, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = exports.AlbinaForm = void 0;
|
|
6
|
+
exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomPhoneInput = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = exports.AlbinaForm = void 0;
|
|
7
7
|
var AlbinaForm_1 = __importDefault(require("./components/AlbinaForm"));
|
|
8
8
|
exports.AlbinaForm = AlbinaForm_1.default;
|
|
9
9
|
var CustomButton_1 = __importDefault(require("./components/CustomButton"));
|
|
@@ -20,6 +20,8 @@ var CustomInput_1 = __importDefault(require("./components/CustomInput"));
|
|
|
20
20
|
exports.CustomInput = CustomInput_1.default;
|
|
21
21
|
var CustomModal_1 = __importDefault(require("./components/CustomModal"));
|
|
22
22
|
exports.CustomModal = CustomModal_1.default;
|
|
23
|
+
var CustomPhoneInput_1 = __importDefault(require("./components/CustomPhoneInput"));
|
|
24
|
+
exports.CustomPhoneInput = CustomPhoneInput_1.default;
|
|
23
25
|
var CustomRadioButton_1 = __importDefault(require("./components/CustomRadioButton"));
|
|
24
26
|
exports.CustomRadioButton = CustomRadioButton_1.default;
|
|
25
27
|
var CustomRichTextbox_1 = __importDefault(require("./components/CustomRichTextbox"));
|