Page MenuHomePhabricator
Differential D7895 Diff 26714 native/account/registration/keyserver-selection.react.js

Changeset View

Standalone View

View Options

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 Linesfunction 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 Linesconst 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;