Page MenuHomePhabricator
Files F2752804

D7577.id25584.diff
No OneTemporary
Actions

D7577.id25584.diff
View Options

diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -13,12 +13,22 @@
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles, useColors } from '../../themes/colors.js';
+type Selection = 'ashoat' | 'custom';
+
type Props = {
+navigation: RegistrationNavigationProp<'KeyserverSelection'>,
+route: NavigationRoute<'KeyserverSelection'>,
};
// eslint-disable-next-line no-unused-vars
function KeyserverSelection(props: Props): React.Node {
+ const [currentSelection, setCurrentSelection] = React.useState<?Selection>();
+ const selectAshoat = React.useCallback(() => {
+ setCurrentSelection('ashoat');
+ }, []);
+ const selectCustom = React.useCallback(() => {
+ setCurrentSelection('custom');
+ }, []);
+
const styles = useStyles(unboundStyles);
const colors = useColors();
return (
@@ -32,7 +42,10 @@
Keyservers allow Comm to offer strong privacy guarantees without
sacrificing functionality.
</Text>
- <RegistrationTile>
+ <RegistrationTile
+ selected={currentSelection === 'ashoat'}
+ onSelect={selectAshoat}
+ >
<RegistrationTileHeader>
<CommIcon
name="cloud-filled"
@@ -47,7 +60,10 @@
the communities on Comm.
</Text>
</RegistrationTile>
- <RegistrationTile>
+ <RegistrationTile
+ selected={currentSelection === 'custom'}
+ onSelect={selectCustom}
+ >
<RegistrationTileHeader>
<Text style={styles.tileTitleText}>Enter a keyserver</Text>
</RegistrationTileHeader>
diff --git a/native/account/registration/registration-tile.react.js b/native/account/registration/registration-tile.react.js
--- a/native/account/registration/registration-tile.react.js
+++ b/native/account/registration/registration-tile.react.js
@@ -1,15 +1,24 @@
// @flow
import * as React from 'react';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
import { useStyles } from '../../themes/colors.js';
+type RegistrationTileContextType = { +selected: boolean };
+const defaultRegistrationTileContext = { selected: false };
+const RegistrationTileContext =
+ React.createContext<RegistrationTileContextType>(
+ defaultRegistrationTileContext,
+ );
+
type TileProps = {
+children: React.Node,
+ +selected: boolean,
+ +onSelect: () => mixed,
};
function RegistrationTile(props: TileProps): React.Node {
- const { children } = props;
+ const { children, selected, onSelect } = props;
const [body, header] = React.useMemo(() => {
let registrationBody = children;
@@ -27,12 +36,28 @@
return [registrationBody, registrationHeader];
}, [children]);
+ const registrationTileContext = React.useMemo(
+ () => ({ selected }),
+ [selected],
+ );
+
const styles = useStyles(unboundStyles);
+ const tileStyle = React.useMemo(
+ () => (selected ? [styles.tile, styles.selectedTile] : styles.tile),
+ [styles, selected],
+ );
+
return (
- <View style={styles.tile}>
- {header}
- {body}
- </View>
+ <RegistrationTileContext.Provider value={registrationTileContext}>
+ <TouchableOpacity
+ onPress={onSelect}
+ activeOpacity={0.6}
+ style={tileStyle}
+ >
+ {header}
+ {body}
+ </TouchableOpacity>
+ </RegistrationTileContext.Provider>
);
}
@@ -41,23 +66,42 @@
};
function RegistrationTileHeader(props: HeaderProps): React.Node {
const { children } = props;
+ const { selected } = React.useContext(RegistrationTileContext);
const styles = useStyles(unboundStyles);
+ const tileRadioStyle = React.useMemo(
+ () =>
+ selected
+ ? [styles.tileRadio, styles.selectedTileRadio]
+ : styles.tileRadio,
+ [styles, selected],
+ );
+ const tileRadioInnerStyle = React.useMemo(
+ () => (selected ? styles.tileRadioInner : undefined),
+ [styles, selected],
+ );
+
return (
<View style={styles.tileTitle}>
{children}
- <View style={styles.tileRadio} />
+ <View style={tileRadioStyle}>
+ <View style={tileRadioInnerStyle} />
+ </View>
</View>
);
}
const unboundStyles = {
tile: {
- backgroundColor: 'panelForeground',
paddingHorizontal: 16,
paddingVertical: 20,
borderRadius: 8,
marginTop: 24,
+ borderWidth: 1,
+ backgroundColor: 'panelForeground',
+ },
+ selectedTile: {
+ borderColor: 'panelForegroundLabel',
},
tileTitle: {
paddingBottom: 16,
@@ -70,6 +114,17 @@
height: 24,
width: 24,
borderRadius: 12,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ tileRadioInner: {
+ backgroundColor: 'panelForegroundLabel',
+ height: 16,
+ width: 16,
+ borderRadius: 8,
+ },
+ selectedTileRadio: {
+ borderColor: 'panelForegroundLabel',
},
};

File Metadata

Mime Type
text/plain
Expires
Thu, Sep 19, 4:21 PM (7 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2140607
Default Alt Text
D7577.id25584.diff (4 KB)

Event Timeline