intl-tel-input 19.1.1 → 19.2.1
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/build/css/demo.css +5 -0
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput-jquery.js +2 -2
- package/build/js/intlTelInput-jquery.min.js +2 -2
- package/build/js/intlTelInput.js +2 -2
- package/build/js/intlTelInput.min.js +2 -2
- package/composer.json +1 -1
- package/grunt/jasmine.js +0 -2
- package/index.js +0 -3
- package/package.json +11 -5
- package/react/build/IntlTelInput.cjs.js +3 -0
- package/react/build/IntlTelInput.cjs.js.map +7 -0
- package/react/build/IntlTelInput.esm.js +3 -0
- package/react/build/IntlTelInput.esm.js.map +7 -0
- package/react/build.js +26 -0
- package/react/demo/DemoApp.js +50 -0
- package/react/demo/demo-bundle.js +25029 -0
- package/react/demo/index.html +18 -0
- package/react/src/IntlTelInput.js +94 -0
- package/src/css/demo.scss +6 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>IntlTelInput React Component</title>
|
|
8
|
+
<link rel="stylesheet" href="../../build/css/intlTelInput.css" />
|
|
9
|
+
<link rel="stylesheet" href="../../build/css/demo.css" />
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<h1>IntlTelInput React Component</h1>
|
|
14
|
+
<div id="app"></div>
|
|
15
|
+
<script src="./demo-bundle.js"></script>
|
|
16
|
+
</body>
|
|
17
|
+
|
|
18
|
+
</html>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/* eslint-disable react/jsx-filename-extension */
|
|
2
|
+
import React, { useRef, useEffect } from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import intlTelInput from "../../build/js/intlTelInput";
|
|
5
|
+
|
|
6
|
+
const IntlTelInput = ({
|
|
7
|
+
initialValue,
|
|
8
|
+
setCountryIso,
|
|
9
|
+
setNumber,
|
|
10
|
+
setIsValid,
|
|
11
|
+
setErrorCode,
|
|
12
|
+
initOptions,
|
|
13
|
+
}) => {
|
|
14
|
+
const inputRef = useRef(null);
|
|
15
|
+
const itiRef = useRef(null);
|
|
16
|
+
|
|
17
|
+
const update = () => {
|
|
18
|
+
const num = itiRef.current.getNumber();
|
|
19
|
+
const countryIso = itiRef.current.getSelectedCountryData().iso2;
|
|
20
|
+
// note: this number will be in standard E164 format, but any container component can use
|
|
21
|
+
// intlTelInputUtils.formatNumber() to convert this to another format
|
|
22
|
+
// as well as intlTelInputUtils.getNumberType() etc. if need be
|
|
23
|
+
setNumber(num);
|
|
24
|
+
setCountryIso(countryIso);
|
|
25
|
+
|
|
26
|
+
if (itiRef.current.isValidNumber()) {
|
|
27
|
+
setIsValid(true);
|
|
28
|
+
setErrorCode(null);
|
|
29
|
+
} else {
|
|
30
|
+
const errorCode = itiRef.current.getValidationError();
|
|
31
|
+
setIsValid(false);
|
|
32
|
+
setErrorCode(errorCode);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
itiRef.current = intlTelInput(inputRef.current, initOptions);
|
|
38
|
+
inputRef.current.addEventListener("countrychange", update);
|
|
39
|
+
return () => {
|
|
40
|
+
inputRef.current.removeEventListener("countrychange", update);
|
|
41
|
+
itiRef.current.destroy();
|
|
42
|
+
}
|
|
43
|
+
}, []);
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<input
|
|
47
|
+
type="phone"
|
|
48
|
+
ref={inputRef}
|
|
49
|
+
onInput={update}
|
|
50
|
+
defaultValue={initialValue}
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
IntlTelInput.propTypes = {
|
|
56
|
+
initialValue: PropTypes.string,
|
|
57
|
+
setNumber: PropTypes.func.isRequired,
|
|
58
|
+
setCountryIso: PropTypes.func,
|
|
59
|
+
setIsValid: PropTypes.func.isRequired,
|
|
60
|
+
setErrorCode: PropTypes.func.isRequired,
|
|
61
|
+
initOptions: PropTypes.shape({
|
|
62
|
+
allowDropdown: PropTypes.bool,
|
|
63
|
+
autoInsertDialCode: PropTypes.bool,
|
|
64
|
+
autoPlaceholder: PropTypes.string,
|
|
65
|
+
containerClass: PropTypes.string,
|
|
66
|
+
countrySearch: PropTypes.bool,
|
|
67
|
+
customPlaceholder: PropTypes.func,
|
|
68
|
+
dropdownContainer: PropTypes.node,
|
|
69
|
+
excludeCountries: PropTypes.arrayOf(PropTypes.string),
|
|
70
|
+
fixDropdownWidth: PropTypes.bool,
|
|
71
|
+
formatAsYouType: PropTypes.bool,
|
|
72
|
+
formatOnDisplay: PropTypes.bool,
|
|
73
|
+
geoIpLookup: PropTypes.func,
|
|
74
|
+
hiddenInput: PropTypes.func,
|
|
75
|
+
i18n: PropTypes.objectOf(PropTypes.string),
|
|
76
|
+
initialCountry: PropTypes.string,
|
|
77
|
+
nationalMode: PropTypes.bool,
|
|
78
|
+
onlyCountries: PropTypes.arrayOf(PropTypes.string),
|
|
79
|
+
placeholderNumberType: PropTypes.string,
|
|
80
|
+
preferredCountries: PropTypes.arrayOf(PropTypes.string),
|
|
81
|
+
showFlags: PropTypes.bool,
|
|
82
|
+
showSelectedDialCode: PropTypes.bool,
|
|
83
|
+
useFullscreenPopup: PropTypes.bool,
|
|
84
|
+
utilsScript: PropTypes.string,
|
|
85
|
+
}),
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
IntlTelInput.defaultProps = {
|
|
89
|
+
initialValue: "",
|
|
90
|
+
setCountryIso: () => {},
|
|
91
|
+
initOptions: {},
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export default IntlTelInput;
|
package/src/css/demo.scss
CHANGED
|
@@ -41,9 +41,15 @@ button {
|
|
|
41
41
|
color: #fff;
|
|
42
42
|
background-color: #428bca;
|
|
43
43
|
border: 1px solid #357ebd;
|
|
44
|
+
margin-left: 5px;
|
|
44
45
|
&:hover {
|
|
45
46
|
background-color: #3276b1;
|
|
46
47
|
border-color: #285e8e;
|
|
47
48
|
cursor: pointer;
|
|
48
49
|
}
|
|
49
50
|
}
|
|
51
|
+
|
|
52
|
+
// for react demo
|
|
53
|
+
.notice {
|
|
54
|
+
margin-top: 15px;
|
|
55
|
+
}
|