Changeset View
Changeset View
Standalone View
Standalone View
native/account/registration/keyserver-selection.react.js
// @flow | // @flow | ||||
import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { Text, TextInput } from 'react-native'; | import { Text } from 'react-native'; | ||||
import RegistrationButtonContainer from './registration-button-container.react.js'; | import RegistrationButtonContainer from './registration-button-container.react.js'; | ||||
import RegistrationButton from './registration-button.react.js'; | import RegistrationButton from './registration-button.react.js'; | ||||
import RegistrationContainer from './registration-container.react.js'; | import RegistrationContainer from './registration-container.react.js'; | ||||
import RegistrationContentContainer from './registration-content-container.react.js'; | import RegistrationContentContainer from './registration-content-container.react.js'; | ||||
import type { RegistrationNavigationProp } from './registration-navigator.react.js'; | import type { RegistrationNavigationProp } from './registration-navigator.react.js'; | ||||
import RegistrationTextInput from './registration-text-input.react.js'; | |||||
import { | import { | ||||
RegistrationTile, | RegistrationTile, | ||||
RegistrationTileHeader, | RegistrationTileHeader, | ||||
} from './registration-tile.react.js'; | } from './registration-tile.react.js'; | ||||
import type { CoolOrNerdMode } from './registration-types.js'; | import type { CoolOrNerdMode } from './registration-types.js'; | ||||
import CommIcon from '../../components/comm-icon.react.js'; | import CommIcon from '../../components/comm-icon.react.js'; | ||||
import { | import { | ||||
type NavigationRoute, | type NavigationRoute, | ||||
Show All 25 Lines | function KeyserverSelection(props: Props): React.Node { | ||||
}, []); | }, []); | ||||
const customKeyserverEmpty = !customKeyserver; | const customKeyserverEmpty = !customKeyserver; | ||||
const selectCustom = React.useCallback(() => { | const selectCustom = React.useCallback(() => { | ||||
setCurrentSelection('custom'); | setCurrentSelection('custom'); | ||||
if (customKeyserverEmpty) { | if (customKeyserverEmpty) { | ||||
customKeyserverTextInputRef.current?.focus(); | customKeyserverTextInputRef.current?.focus(); | ||||
} | } | ||||
}, [customKeyserverEmpty]); | }, [customKeyserverEmpty]); | ||||
const [customKeyserverInputFocused, setCustomKeyserverInputFocused] = | |||||
React.useState(false); | |||||
const onCustomKeyserverFocus = React.useCallback(() => { | const onCustomKeyserverFocus = React.useCallback(() => { | ||||
setCurrentSelection('custom'); | setCurrentSelection('custom'); | ||||
setCustomKeyserverInputFocused(true); | |||||
}, []); | |||||
const onCustomKeyserverBlur = React.useCallback(() => { | |||||
setCustomKeyserverInputFocused(false); | |||||
}, []); | }, []); | ||||
let keyserverUsername; | let keyserverUsername; | ||||
if (currentSelection === 'ashoat') { | if (currentSelection === 'ashoat') { | ||||
keyserverUsername = 'ashoat'; | keyserverUsername = 'ashoat'; | ||||
} else if (currentSelection === 'custom' && customKeyserver) { | } else if (currentSelection === 'custom' && customKeyserver) { | ||||
keyserverUsername = customKeyserver; | keyserverUsername = customKeyserver; | ||||
} | } | ||||
Show All 9 Lines | const onSubmit = React.useCallback(() => { | ||||
); | ); | ||||
navigate<'ConnectEthereum'>({ | navigate<'ConnectEthereum'>({ | ||||
name: ConnectEthereumRouteName, | name: ConnectEthereumRouteName, | ||||
params: { userSelections: { coolOrNerdMode, keyserverUsername } }, | params: { userSelections: { coolOrNerdMode, keyserverUsername } }, | ||||
}); | }); | ||||
}, [navigate, coolOrNerdMode, keyserverUsername]); | }, [navigate, coolOrNerdMode, keyserverUsername]); | ||||
const styles = useStyles(unboundStyles); | const styles = useStyles(unboundStyles); | ||||
const keyserverInputStyle = React.useMemo( | |||||
() => | |||||
customKeyserverInputFocused | |||||
? [styles.keyserverInput, styles.focusedKeyserverInput] | |||||
: styles.keyserverInput, | |||||
[ | |||||
customKeyserverInputFocused, | |||||
styles.keyserverInput, | |||||
styles.focusedKeyserverInput, | |||||
], | |||||
); | |||||
const colors = useColors(); | const colors = useColors(); | ||||
return ( | return ( | ||||
<RegistrationContainer> | <RegistrationContainer> | ||||
<RegistrationContentContainer> | <RegistrationContentContainer> | ||||
<Text style={styles.header}>Select a keyserver to join</Text> | <Text style={styles.header}>Select a keyserver to join</Text> | ||||
<Text style={styles.body}> | <Text style={styles.body}> | ||||
Chat communities on Comm are hosted on keyservers, which are | Chat communities on Comm are hosted on keyservers, which are | ||||
user-operated backends. | user-operated backends. | ||||
Show All 22 Lines | <RegistrationContainer> | ||||
</RegistrationTile> | </RegistrationTile> | ||||
<RegistrationTile | <RegistrationTile | ||||
selected={currentSelection === 'custom'} | selected={currentSelection === 'custom'} | ||||
onSelect={selectCustom} | onSelect={selectCustom} | ||||
> | > | ||||
<RegistrationTileHeader> | <RegistrationTileHeader> | ||||
<Text style={styles.tileTitleText}>Enter a keyserver</Text> | <Text style={styles.tileTitleText}>Enter a keyserver</Text> | ||||
</RegistrationTileHeader> | </RegistrationTileHeader> | ||||
<TextInput | <RegistrationTextInput | ||||
value={customKeyserver} | value={customKeyserver} | ||||
onChangeText={setCustomKeyserver} | onChangeText={setCustomKeyserver} | ||||
style={keyserverInputStyle} | |||||
placeholderTextColor={colors.panelSecondaryForegroundBorder} | |||||
placeholder="Keyserver" | placeholder="Keyserver" | ||||
onFocus={onCustomKeyserverFocus} | onFocus={onCustomKeyserverFocus} | ||||
onBlur={onCustomKeyserverBlur} | |||||
ref={customKeyserverTextInputRef} | ref={customKeyserverTextInputRef} | ||||
/> | /> | ||||
</RegistrationTile> | </RegistrationTile> | ||||
</RegistrationContentContainer> | </RegistrationContentContainer> | ||||
<RegistrationButtonContainer> | <RegistrationButtonContainer> | ||||
<RegistrationButton | <RegistrationButton | ||||
onPress={onSubmit} | onPress={onSubmit} | ||||
label="Next" | label="Next" | ||||
Show All 23 Lines | const unboundStyles = { | ||||
}, | }, | ||||
tileBody: { | tileBody: { | ||||
fontSize: 13, | fontSize: 13, | ||||
color: 'panelForegroundSecondaryLabel', | color: 'panelForegroundSecondaryLabel', | ||||
}, | }, | ||||
cloud: { | cloud: { | ||||
marginRight: 8, | marginRight: 8, | ||||
}, | }, | ||||
keyserverInput: { | |||||
color: 'panelForegroundLabel', | |||||
borderColor: 'panelSecondaryForegroundBorder', | |||||
borderWidth: 1, | |||||
borderRadius: 4, | |||||
padding: 12, | |||||
}, | |||||
focusedKeyserverInput: { | |||||
borderColor: 'panelForegroundLabel', | |||||
}, | |||||
}; | }; | ||||
export default KeyserverSelection; | export default KeyserverSelection; |