import React from 'react'; import { StyleSheet, TextInput, View, Switch } from 'react-native'; import { ListItem } from '@rneui/themed'; import { useTheme } from './themes'; import loc from '../loc'; interface SettingsBlockExplorerCustomUrlItemProps { isCustomEnabled: boolean; onSwitchToggle: (value: boolean) => void; customUrl: string; onCustomUrlChange: (url: string) => void; onSubmitCustomUrl: () => void; inputRef?: React.RefObject<TextInput>; } const SettingsBlockExplorerCustomUrlItem: React.FC<SettingsBlockExplorerCustomUrlItemProps> = ({ isCustomEnabled, onSwitchToggle, customUrl, onCustomUrlChange, onSubmitCustomUrl, inputRef, }) => { const { colors } = useTheme(); return ( <> <ListItem containerStyle={[styles.container, { backgroundColor: colors.background }]} bottomDivider> <ListItem.Content> <ListItem.Title style={[styles.title, { color: colors.text }]}>{loc.settings.block_explorer_preferred}</ListItem.Title> </ListItem.Content> <Switch accessible accessibilityRole="switch" accessibilityState={{ checked: isCustomEnabled }} onValueChange={onSwitchToggle} value={isCustomEnabled} /> </ListItem> {isCustomEnabled && ( <View style={[styles.uriContainer, { borderColor: colors.formBorder, backgroundColor: colors.inputBackgroundColor }]}> <TextInput ref={inputRef} value={customUrl} placeholder={loc._.enter_url} onChangeText={onCustomUrlChange} numberOfLines={1} style={[styles.uriText, { color: colors.text }]} placeholderTextColor={colors.placeholderTextColor} textContentType="URL" clearButtonMode="while-editing" autoCapitalize="none" autoCorrect={false} underlineColorAndroid="transparent" onSubmitEditing={onSubmitCustomUrl} editable={isCustomEnabled} /> </View> )} </> ); }; export default SettingsBlockExplorerCustomUrlItem; const styles = StyleSheet.create({ container: { minHeight: 60, paddingVertical: 10, }, title: { fontSize: 16, fontWeight: '500', }, uriContainer: { flexDirection: 'row', borderWidth: 1, borderRadius: 4, marginHorizontal: 15, marginVertical: 10, paddingHorizontal: 10, alignItems: 'center', }, uriText: { flex: 1, minHeight: 36, }, });