diff --git a/src/common/SmartUrlInput.js b/src/common/SmartUrlInput.js index d2486c59c98..4b6d9dedbfb 100644 --- a/src/common/SmartUrlInput.js +++ b/src/common/SmartUrlInput.js @@ -1,14 +1,12 @@ /* @flow strict-local */ import React, { useState, useRef, useCallback, useContext } from 'react'; import type { Node } from 'react'; -import { Platform, TextInput, TouchableWithoutFeedback, View, Keyboard } from 'react-native'; +import { Platform, TextInput, View, Keyboard } from 'react-native'; import { useFocusEffect } from '@react-navigation/native'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { AppNavigationProp } from '../nav/AppNavigator'; import { ThemeContext, createStyleSheet } from '../styles'; -import { autocompleteRealmPieces, autocompleteRealm, fixRealmUrl } from '../utils/url'; -import ZulipText from './ZulipText'; const styles = createStyleSheet({ wrapper: { @@ -16,15 +14,10 @@ const styles = createStyleSheet({ opacity: 0.8, }, realmInput: { + flex: 1, padding: 0, fontSize: 20, }, - realmPlaceholder: { - opacity: 0.75, - }, - realmInputEmpty: { - width: 1, - }, }); type Props = $ReadOnly<{| @@ -32,6 +25,7 @@ type Props = $ReadOnly<{| // `navigation` prop we pass to a `SmartUrlInput` instance is the // one from a component on AppNavigator. navigation: AppNavigationProp<>, + style?: ViewStyleProp, onChangeText: (value: string) => void, onSubmitEditing: () => Promise, @@ -93,8 +87,11 @@ export default function SmartUrlInput(props: Props): Node { /** * The actual input string, exactly as entered by the user, * without modifications by autocomplete. + * + * Prepopulates with "https://", because not everyone has memorized that + * sequence of characters. */ - const [value, setValue] = useState(''); + const [value, setValue] = useState('https://'); const themeContext = useContext(ThemeContext); @@ -113,26 +110,11 @@ export default function SmartUrlInput(props: Props): Node { const handleChange = useCallback( (_value: string) => { setValue(_value); - - onChangeText( - fixRealmUrl(autocompleteRealm(_value, { protocol: 'https://', domain: 'zulipchat.com' })), - ); + onChangeText(_value); }, [onChangeText], ); - // When the "placeholder parts" are pressed, i.e., the parts of the URL - // line that aren't the TextInput itself, we still want to focus the - // TextInput. - // TODO(?): Is it a confusing UX to have a line that looks and acts like - // a text input, but parts of it aren't really? - const urlPress = useCallback(() => { - if (textInputRef.current) { - // `.current` is not type-checked; see definition. - textInputRef.current.focus(); - } - }, []); - if (Platform.OS === 'android') { // (This eslint-disable is fine; the relevant rule is not to call Hooks // conditionally. But this conditional won't vary in its behavior @@ -141,29 +123,11 @@ export default function SmartUrlInput(props: Props): Node { useRn19366Workaround(textInputRef); } - const renderPlaceholderPart = (text: string) => ( - - - - ); - - const [prefix, , suffix] = autocompleteRealmPieces(value, { - domain: 'zulipchat.com', - protocol: 'https://', - }); - return ( - {prefix !== null && renderPlaceholderPart(prefix)} - {!value && renderPlaceholderPart('your-org')} - {suffix !== null && renderPlaceholderPart(suffix)} ); }