1 1
import * as React from 'react';
2 1
import {
3
	FormField,
4
	Input,
5
	InputLabel,
6
	SelectInput,
7
} from '../Amplify-UI/Amplify-UI-Components-React';
8 1
import AmplifyTheme from '../Amplify-UI/Amplify-UI-Theme';
9 1
import { countryDialCodes } from './common/country-dial-codes';
10 1
import { I18n } from '@aws-amplify/core';
11 1
import { auth } from '../Amplify-UI/data-test-attributes';
12

13
interface IPhoneFieldProps {
14
	defaultDialCode?: string;
15
	label?: string;
16
	onChangeText: (string) => void;
17
	placeholder?: string;
18
	required?: boolean;
19
	theme?: any;
20
}
21

22
interface IPhoneFieldState { }
23

24 1
class PhoneField extends React.Component<IPhoneFieldProps, IPhoneFieldState> {
25
	private inputs: any;
26

27
	constructor(props) {
28 1
		super(props);
29 1
		this.handleInputChange = this.handleInputChange.bind(this);
30 1
		this.composePhoneNumber = this.composePhoneNumber.bind(this);
31

32 1
		this.inputs = {
33 1
			dial_code: this.props.defaultDialCode || '+1',
34
			phone_line_number: '',
35
		};
36
	}
37

38 1
	composePhoneNumber(dial_code, phone_line_number) {
39 1
		return `${dial_code || '+1'}${phone_line_number.replace(/[-()]/g, '')}`;
40
	}
41

42 1
	handleInputChange(evt) {
43 1
		const { name, value } = evt.target;
44 1
		this.inputs[name] = value;
45

46 1
		if (this.props.onChangeText) {
47 1
			this.props.onChangeText(
48
				this.composePhoneNumber(
49
					this.inputs.dial_code,
50
					this.inputs.phone_line_number
51
				)
52
			);
53
		}
54
	}
55

56 1
	render() {
57 1
		const {
58 1
			theme = AmplifyTheme,
59 1
			required = true,
60 1
			defaultDialCode = '+1',
61 1
			label = 'Phone Number',
62 1
			placeholder = 'Enter your phone number',
63
		} = this.props;
64

65 1
		return (
66
			<FormField theme={theme} key="phone_number">
67
				{required ? (
68 1
					<InputLabel theme={theme}>{I18n.get(label)} *</InputLabel>
69
				) : (
70
						<InputLabel theme={theme}>{I18n.get(label)}</InputLabel>
71
					)}
72
				<SelectInput theme={theme}>
73
					<select
74
						name="dial_code"
75
						defaultValue={defaultDialCode}
76
						onChange={this.handleInputChange}
77
						data-test={auth.genericAttrs.dialCodeSelect}
78
					>
79 1
						{countryDialCodes.map(dialCode => (
80
							<option key={dialCode} value={dialCode}>
81
								{dialCode}
82
							</option>
83
						))}
84
					</select>
85
					<Input
86
						placeholder={I18n.get(placeholder)}
87
						theme={theme}
88
						type="tel"
89
						id="phone_line_number"
90
						key="phone_line_number"
91
						name="phone_line_number"
92
						onChange={this.handleInputChange}
93
						data-test={auth.genericAttrs.phoneNumberInput}
94
					/>
95
				</SelectInput>
96
			</FormField>
97
		);
98
	}
99 1
}
100

101 1
export { PhoneField };
102

103
/**
104
 * @deprecated use named import
105
 */
106 1
export default PhoneField;

Read our documentation on viewing source code .

Loading