|
| 1 | +import { countries as countryList } from 'countries-list'; |
| 2 | +import * as React from 'react'; |
| 3 | +import { FlatList, View } from 'react-native'; |
| 4 | +import { Toggle } from 'react-powerplug'; |
| 5 | +import { DeepPartial } from 'ts-essentials'; |
| 6 | + |
| 7 | +import { Icon } from '../../icons'; |
| 8 | +import { Theme, withTheme } from '../../theme'; |
| 9 | +import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles'; |
| 10 | +import { Button } from '../Button'; |
| 11 | +import { Spacing } from '../Layout'; |
| 12 | +import { ListItem } from '../ListItem'; |
| 13 | +import { Modal } from '../Modal'; |
| 14 | +import ModalContent from '../Modal/ModalContent'; |
| 15 | +import { Heading } from '../Typography'; |
| 16 | +import { |
| 17 | + GetPhoneNumberInputStyles, |
| 18 | + getPhoneNumberInputStyles, |
| 19 | + PhoneNumberInputStyles, |
| 20 | +} from './PhoneNumberInput.styles'; |
| 21 | +import TextInput from './TextInput'; |
| 22 | + |
| 23 | +export interface PhoneNumberInputProps { |
| 24 | + countryCode?: string; |
| 25 | + onChangeCountryCode?: (countryCode: string) => void; |
| 26 | + phoneNumber?: string; |
| 27 | + onChangePhoneNumber?: (phoneNumber: string) => void; |
| 28 | + theme: Theme; |
| 29 | + /** Label displayed when showing country selection */ |
| 30 | + label?: string; |
| 31 | + placeholder?: string; |
| 32 | + getStyles?: ReplaceReturnType< |
| 33 | + GetPhoneNumberInputStyles, |
| 34 | + DeepPartial<PhoneNumberInputStyles> |
| 35 | + >; |
| 36 | +} |
| 37 | + |
| 38 | +const countries = (() => { |
| 39 | + return Object.keys(countryList).map(countryCode => ({ |
| 40 | + countryCode, |
| 41 | + key: countryCode, |
| 42 | + ...countryList[countryCode], |
| 43 | + })); |
| 44 | +})(); |
| 45 | + |
| 46 | +const PhoneNumberInputBase = (props: PhoneNumberInputProps) => { |
| 47 | + const { |
| 48 | + countryCode = 'US', |
| 49 | + phoneNumber, |
| 50 | + onChangeCountryCode, |
| 51 | + onChangePhoneNumber, |
| 52 | + placeholder, |
| 53 | + label, |
| 54 | + theme, |
| 55 | + getStyles, |
| 56 | + } = props; |
| 57 | + |
| 58 | + const { containerStyle } = mergeStyles(getPhoneNumberInputStyles, getStyles)( |
| 59 | + {}, |
| 60 | + theme, |
| 61 | + ); |
| 62 | + |
| 63 | + return ( |
| 64 | + <View style={containerStyle}> |
| 65 | + <Toggle initial={false}> |
| 66 | + {({ on, set }) => { |
| 67 | + return ( |
| 68 | + <> |
| 69 | + <Button |
| 70 | + onPress={() => set(true)} |
| 71 | + appearance="outline" |
| 72 | + getStyles={() => ({ |
| 73 | + buttonStyle: { |
| 74 | + borderBottomRightRadius: 0, |
| 75 | + borderColor: theme.colors.border.muted, |
| 76 | + borderTopRightRadius: 0, |
| 77 | + borderWidth: 1, |
| 78 | + }, |
| 79 | + })} |
| 80 | + iconAfter={ |
| 81 | + <Icon |
| 82 | + size={20} |
| 83 | + color={theme.colors.text.default} |
| 84 | + name="chevron-down" |
| 85 | + /> |
| 86 | + } |
| 87 | + title={`+${countryList[countryCode].phone}`} |
| 88 | + /> |
| 89 | + <Modal visible={on}> |
| 90 | + <ModalContent onClose={() => set(false)}> |
| 91 | + <FlatList |
| 92 | + ListHeaderComponent={ |
| 93 | + label ? ( |
| 94 | + <Spacing marginBottom={3}> |
| 95 | + <Heading size="xxxlarge">{label}</Heading> |
| 96 | + </Spacing> |
| 97 | + ) : null |
| 98 | + } |
| 99 | + keyExtractor={item => item.key} |
| 100 | + getItemLayout={(data, index) => ({ |
| 101 | + index, |
| 102 | + length: theme.controlHeights.medium, |
| 103 | + offset: theme.controlHeights.medium * index, |
| 104 | + })} |
| 105 | + data={countries} |
| 106 | + renderItem={({ item: country }) => { |
| 107 | + return ( |
| 108 | + <ListItem |
| 109 | + key={country.countryCode} |
| 110 | + label={country.name} |
| 111 | + onPress={() => { |
| 112 | + if (onChangeCountryCode) { |
| 113 | + onChangeCountryCode(country.countryCode); |
| 114 | + } |
| 115 | + set(false); |
| 116 | + }} |
| 117 | + /> |
| 118 | + ); |
| 119 | + }} |
| 120 | + /> |
| 121 | + </ModalContent> |
| 122 | + </Modal> |
| 123 | + </> |
| 124 | + ); |
| 125 | + }} |
| 126 | + </Toggle> |
| 127 | + <TextInput |
| 128 | + getStyles={() => ({ |
| 129 | + containerStyle: { |
| 130 | + flex: 1, |
| 131 | + }, |
| 132 | + inputStyle: { |
| 133 | + borderBottomLeftRadius: 0, |
| 134 | + borderTopLeftRadius: 0, |
| 135 | + }, |
| 136 | + })} |
| 137 | + keyboardType="number-pad" |
| 138 | + value={phoneNumber} |
| 139 | + onChangeText={onChangePhoneNumber} |
| 140 | + placeholder={placeholder} |
| 141 | + /> |
| 142 | + </View> |
| 143 | + ); |
| 144 | +}; |
| 145 | + |
| 146 | +export const PhoneNumberInput = withTheme(PhoneNumberInputBase); |
| 147 | +export default PhoneNumberInput; |
0 commit comments