2025-03-07 19:07:15 -04:00
|
|
|
import React from 'react';
|
|
|
|
import { StyleProp, StyleSheet, TextInput, View, ViewStyle } from 'react-native';
|
2024-05-20 10:54:13 +01:00
|
|
|
import loc from '../loc';
|
2024-09-23 21:36:45 -04:00
|
|
|
import { AddressInputScanButton } from './AddressInputScanButton';
|
2024-10-22 14:02:53 -04:00
|
|
|
import { useTheme } from './themes';
|
2021-02-25 19:13:34 +03:00
|
|
|
|
2024-01-06 04:04:23 -04:00
|
|
|
interface AddressInputProps {
|
|
|
|
isLoading?: boolean;
|
|
|
|
address?: string;
|
|
|
|
placeholder?: string;
|
|
|
|
onChangeText: (text: string) => void;
|
|
|
|
editable?: boolean;
|
|
|
|
inputAccessoryViewID?: string;
|
2024-09-23 21:36:45 -04:00
|
|
|
onFocus?: () => void;
|
2025-02-08 22:23:03 -04:00
|
|
|
onBlur?: () => void;
|
2024-09-26 19:21:47 -04:00
|
|
|
testID?: string;
|
2024-11-15 22:32:50 +00:00
|
|
|
style?: StyleProp<ViewStyle>;
|
2024-01-06 04:04:23 -04:00
|
|
|
keyboardType?:
|
|
|
|
| 'default'
|
|
|
|
| 'numeric'
|
|
|
|
| 'email-address'
|
|
|
|
| 'ascii-capable'
|
|
|
|
| 'numbers-and-punctuation'
|
|
|
|
| 'url'
|
|
|
|
| 'number-pad'
|
|
|
|
| 'phone-pad'
|
|
|
|
| 'name-phone-pad'
|
|
|
|
| 'decimal-pad'
|
|
|
|
| 'twitter'
|
|
|
|
| 'web-search'
|
|
|
|
| 'visible-password';
|
|
|
|
}
|
2021-02-25 19:13:34 +03:00
|
|
|
|
|
|
|
const AddressInput = ({
|
|
|
|
isLoading = false,
|
|
|
|
address = '',
|
2024-09-26 19:21:47 -04:00
|
|
|
testID = 'AddressInput',
|
2021-02-25 19:13:34 +03:00
|
|
|
placeholder = loc.send.details_address,
|
|
|
|
onChangeText,
|
2021-09-09 12:00:11 +01:00
|
|
|
editable = true,
|
|
|
|
inputAccessoryViewID,
|
2024-09-23 21:36:45 -04:00
|
|
|
onFocus = () => {},
|
2025-02-08 22:23:03 -04:00
|
|
|
onBlur = () => {},
|
2021-10-15 10:52:25 -04:00
|
|
|
keyboardType = 'default',
|
2024-11-15 22:32:50 +00:00
|
|
|
style,
|
2024-01-06 04:04:23 -04:00
|
|
|
}: AddressInputProps) => {
|
2021-02-25 19:13:34 +03:00
|
|
|
const { colors } = useTheme();
|
|
|
|
const stylesHook = StyleSheet.create({
|
|
|
|
root: {
|
|
|
|
borderColor: colors.formBorder,
|
|
|
|
borderBottomColor: colors.formBorder,
|
|
|
|
backgroundColor: colors.inputBackgroundColor,
|
|
|
|
},
|
2024-09-23 21:36:45 -04:00
|
|
|
input: {
|
|
|
|
color: colors.foregroundColor,
|
2021-02-25 19:13:34 +03:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2024-11-15 22:32:50 +00:00
|
|
|
<View style={[styles.root, stylesHook.root, style]}>
|
2021-02-25 19:13:34 +03:00
|
|
|
<TextInput
|
2024-09-26 19:21:47 -04:00
|
|
|
testID={testID}
|
2021-02-25 19:13:34 +03:00
|
|
|
onChangeText={onChangeText}
|
|
|
|
placeholder={placeholder}
|
|
|
|
placeholderTextColor="#81868e"
|
|
|
|
value={address}
|
2024-09-23 21:36:45 -04:00
|
|
|
style={[styles.input, stylesHook.input]}
|
2021-09-09 12:00:11 +01:00
|
|
|
editable={!isLoading && editable}
|
|
|
|
multiline={!editable}
|
|
|
|
inputAccessoryViewID={inputAccessoryViewID}
|
|
|
|
clearButtonMode="while-editing"
|
2024-09-23 21:36:45 -04:00
|
|
|
onFocus={onFocus}
|
2021-09-07 10:18:25 -04:00
|
|
|
autoCapitalize="none"
|
2021-09-02 14:18:58 -04:00
|
|
|
autoCorrect={false}
|
2021-10-15 10:52:25 -04:00
|
|
|
keyboardType={keyboardType}
|
2025-03-07 19:07:15 -04:00
|
|
|
onBlur={onBlur}
|
2021-02-25 19:13:34 +03:00
|
|
|
/>
|
2025-02-17 15:24:05 -04:00
|
|
|
{editable ? <AddressInputScanButton isLoading={isLoading} onChangeText={onChangeText} /> : null}
|
2021-02-25 19:13:34 +03:00
|
|
|
</View>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
root: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
borderWidth: 1.0,
|
|
|
|
borderBottomWidth: 0.5,
|
|
|
|
minHeight: 44,
|
|
|
|
height: 44,
|
|
|
|
alignItems: 'center',
|
|
|
|
borderRadius: 4,
|
|
|
|
},
|
|
|
|
input: {
|
|
|
|
flex: 1,
|
2024-10-27 22:05:14 -04:00
|
|
|
paddingHorizontal: 8,
|
2021-02-25 19:13:34 +03:00
|
|
|
minHeight: 33,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export default AddressInput;
|