31 | {
32 | country
33 | ?
34 |
47 | )
48 | }
49 |
50 | CountryIcon.propTypes = {
51 | country: PropTypes.string,
52 | label: PropTypes.string.isRequired,
53 | aspectRatio: PropTypes.number
54 | }
55 |
56 | return CountryIcon
57 | }
58 |
59 | export default createCountryIconComponent({
60 | // Must be equal to `defaultProps.flagUrl` in `./PhoneInputWithCountry.js`.
61 | flagUrl: 'https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg',
62 | flagComponent: Flag,
63 | internationalIcon: DefaultInternationalIcon
64 | })
--------------------------------------------------------------------------------
/source/react-native/PhoneTextInput.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { TextInput } from 'react-native'
4 |
5 | /**
6 | * This is an _experimental_ React Native component.
7 | * Feedback thread: https://github.com/catamphetamine/react-phone-number-input/issues/296
8 | */
9 | function PhoneTextInput({
10 | onChange,
11 | // By default, shows phone number suggestion(s) when the user focuses the input field.
12 | autoCompleteType = 'tel',
13 | // By default, uses the default React Native `TextInput` component.
14 | TextInputComponent = TextInput,
15 | ...rest
16 | }, ref) {
17 | // Instead of `onChangeText(value: string)` it could use
18 | // `onChange(nativeEvent: Event)` and get `value` from `nativeEvent.text`.
19 | const onChangeText = useCallback((value) => {
20 | onChange({
21 | preventDefault() { this.defaultPrevented = true },
22 | target: { value }
23 | })
24 | }, [onChange])
25 |
26 | // React Native `
96 |
121 | )
122 | }
123 |
124 | CountrySelectWithIcon.propTypes = {
125 | // Country flag component.
126 | iconComponent: PropTypes.elementType,
127 |
128 | // Select arrow component.
129 | arrowComponent: PropTypes.elementType,
130 |
131 | // Set to `true` to render Unicode flag icons instead of SVG images.
132 | unicodeFlags: PropTypes.bool
133 | }
134 |
135 | function DefaultArrowComponent() {
136 | return
137 | }
138 |
139 | function getSelectedOption(options, value) {
140 | for (const option of options) {
141 | if (!option.divider) {
142 | if (isSameOptionValue(option.value, value)) {
143 | return option
144 | }
145 | }
146 | }
147 | }
148 |
149 | function isSameOptionValue(value1, value2) {
150 | // `undefined` is identical to `null`: both mean "no country selected".
151 | if (value1 === undefined || value1 === null) {
152 | return value2 === undefined || value2 === null
153 | }
154 | return value1 === value2
155 | }
--------------------------------------------------------------------------------
/website/lib/prism.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.14.0
2 | http://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript */
3 | /**
4 | * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
5 | * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
6 | * @author Tim Shedor
7 | */
8 |
9 | code[class*="language-"],
10 | pre[class*="language-"] {
11 | color: black;
12 | background: none;
13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14 | text-align: left;
15 | white-space: pre;
16 | word-spacing: normal;
17 | word-break: normal;
18 | word-wrap: normal;
19 | line-height: 1.5;
20 |
21 | -moz-tab-size: 4;
22 | -o-tab-size: 4;
23 | tab-size: 4;
24 |
25 | -webkit-hyphens: none;
26 | -moz-hyphens: none;
27 | -ms-hyphens: none;
28 | hyphens: none;
29 | }
30 |
31 | /* Code blocks */
32 | pre[class*="language-"] {
33 | position: relative;
34 | margin: .5em 0;
35 | overflow: visible;
36 | padding: 0.7em 1em;
37 | }
38 | pre[class*="language-"]>code {
39 | position: relative;
40 | background-color: #fdfdfd;
41 | background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
42 | background-size: 3em 3em;
43 | background-origin: content-box;
44 | background-attachment: local;
45 | }
46 |
47 | code[class*="language"] {
48 | max-height: inherit;
49 | height: inherit;
50 | padding: 0 1em;
51 | display: block;
52 | overflow: auto;
53 | }
54 |
55 | /* Margin bottom to accomodate shadow */
56 | :not(pre) > code[class*="language-"],
57 | pre[class*="language-"] {
58 | background-color: #fdfdfd;
59 | -webkit-box-sizing: border-box;
60 | -moz-box-sizing: border-box;
61 | box-sizing: border-box;
62 | margin-bottom: 1em;
63 | }
64 |
65 | /* Inline code */
66 | :not(pre) > code[class*="language-"] {
67 | position: relative;
68 | padding: .2em;
69 | border-radius: 0.3em;
70 | color: #c92c2c;
71 | border: 1px solid rgba(0, 0, 0, 0.1);
72 | display: inline;
73 | white-space: normal;
74 | }
75 |
76 | :not(pre) > code[class*="language-"]:after,
77 | pre[class*="language-"]:after {
78 | right: 0.75em;
79 | left: auto;
80 | -webkit-transform: rotate(2deg);
81 | -moz-transform: rotate(2deg);
82 | -ms-transform: rotate(2deg);
83 | -o-transform: rotate(2deg);
84 | transform: rotate(2deg);
85 | }
86 |
87 | .token.comment,
88 | .token.block-comment,
89 | .token.prolog,
90 | .token.doctype,
91 | .token.cdata {
92 | color: #7D8B99;
93 | }
94 |
95 | .token.punctuation {
96 | color: #5F6364;
97 | }
98 |
99 | .token.property,
100 | .token.tag,
101 | .token.boolean,
102 | .token.number,
103 | .token.function-name,
104 | .token.constant,
105 | .token.symbol,
106 | .token.deleted {
107 | color: #c92c2c;
108 | }
109 |
110 | .token.selector,
111 | .token.attr-name,
112 | .token.string,
113 | .token.char,
114 | .token.function,
115 | .token.builtin,
116 | .token.inserted {
117 | color: #2f9c0a;
118 | }
119 |
120 | .token.operator,
121 | .token.entity,
122 | .token.url,
123 | .token.variable {
124 | color: #a67f59;
125 | background: rgba(255, 255, 255, 0.5);
126 | }
127 |
128 | .token.atrule,
129 | .token.attr-value,
130 | .token.keyword,
131 | .token.class-name {
132 | color: #1990b8;
133 | }
134 |
135 | .token.regex,
136 | .token.important {
137 | color: #e90;
138 | }
139 |
140 | .language-css .token.string,
141 | .style .token.string {
142 | color: #a67f59;
143 | background: rgba(255, 255, 255, 0.5);
144 | }
145 |
146 | .token.important {
147 | font-weight: normal;
148 | }
149 |
150 | .token.bold {
151 | font-weight: bold;
152 | }
153 | .token.italic {
154 | font-style: italic;
155 | }
156 |
157 | .token.entity {
158 | cursor: help;
159 | }
160 |
161 | .namespace {
162 | opacity: .7;
163 | }
164 |
165 | @media screen and (max-width: 767px) {
166 | pre[class*="language-"]:before,
167 | pre[class*="language-"]:after {
168 | bottom: 14px;
169 | box-shadow: none;
170 | }
171 |
172 | }
173 |
174 | /* Plugin styles */
175 | .token.tab:not(:empty):before,
176 | .token.cr:before,
177 | .token.lf:before {
178 | color: #e0d7d1;
179 | }
180 |
181 | /* Plugin styles: Line Numbers */
182 | pre[class*="language-"].line-numbers {
183 | padding-left: 0;
184 | }
185 |
186 | pre[class*="language-"].line-numbers code {
187 | padding-left: 3.8em;
188 | }
189 |
190 | pre[class*="language-"].line-numbers .line-numbers-rows {
191 | left: 0;
192 | }
193 |
194 | /* Plugin styles: Line Highlight */
195 | pre[class*="language-"][data-line] {
196 | padding-top: 0;
197 | padding-bottom: 0;
198 | padding-left: 0;
199 | }
200 | pre[data-line] code {
201 | position: relative;
202 | padding-left: 4em;
203 | }
204 | pre .line-highlight {
205 | margin-top: 0;
206 | }
207 |
208 |
--------------------------------------------------------------------------------
/source/PhoneInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import usePhoneDigits from './usePhoneDigits.js'
5 |
6 | import { metadata as metadataType } from './PropTypes.js'
7 |
8 | function PhoneInput({
9 | Component,
10 | country,
11 | defaultCountry,
12 | useNationalFormatForDefaultCountryValue = true,
13 | value,
14 | onChange,
15 | metadata,
16 | international,
17 | withCountryCallingCode,
18 | ...rest
19 | }, ref) {
20 | // "Phone digits" includes not only "digits" but also a `+` sign.
21 | const {
22 | phoneDigits,
23 | setPhoneDigits,
24 | inputFormat
25 | } = usePhoneDigits({
26 | value,
27 | onChange,
28 | country,
29 | defaultCountry,
30 | international,
31 | withCountryCallingCode,
32 | useNationalFormatForDefaultCountryValue,
33 | metadata
34 | })
35 |
36 | // * Passing `international` property is deprecated.
37 | // * Passing `withCountryCallingCode` property is deprecated.
38 | // * Passing `country` property: it should've been called `defaultCountry` instead
39 | // because it only applies when the user inputs a phone number in a national format
40 | // and is completely ignored when the user inputs a phone number in an international format.
41 |
42 | return (
43 |
107 | {getUnicodeFlagIcon(value)}
108 |
109 | ) : (
110 |