Page MenuHomePhabricator
Files F3246629

D9642.id32640.diff
No OneTemporary
Actions

D9642.id32640.diff
View Options

diff --git a/native/profile/keyserver-selection-list.react.js b/native/profile/keyserver-selection-list.react.js
--- a/native/profile/keyserver-selection-list.react.js
+++ b/native/profile/keyserver-selection-list.react.js
@@ -1,10 +1,120 @@
// @flow
import * as React from 'react';
+import { Text, View, FlatList } from 'react-native';
+
+import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js';
+import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js';
+
+import CommIcon from '../components/comm-icon.react.js';
+import Pill from '../components/pill.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+import { useStyles, useColors } from '../themes/colors.js';
+
+function keyExtractor(item: SelectedKeyserverInfo) {
+ return `${item.keyserverAdminUsername}${item.keyserverInfo.urlPrefix}`;
+}
// eslint-disable-next-line no-unused-vars
function KeyserverSelectionList(props: { ... }): React.Node {
- return null;
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const selectedKeyserverInfos: $ReadOnlyArray<SelectedKeyserverInfo> =
+ useSelector(selectedKeyserversSelector);
+
+ const cloudIcon = React.useMemo(
+ () => (
+ <CommIcon
+ name="cloud-filled"
+ size={12}
+ color={colors.panelForegroundLabel}
+ />
+ ),
+ [colors.panelForegroundLabel],
+ );
+
+ const renderKeyserverListItem = React.useCallback(
+ ({ item }) => {
+ const { keyserverAdminUsername } = item;
+
+ return (
+ <View style={styles.keyserverListItemContainer}>
+ <Pill
+ label={keyserverAdminUsername}
+ backgroundColor={colors.codeBackground}
+ icon={cloudIcon}
+ />
+ </View>
+ );
+ },
+ [cloudIcon, colors.codeBackground, styles.keyserverListItemContainer],
+ );
+
+ const keyserverListSeparatorComponent = React.useCallback(
+ () => <View style={styles.separator} />,
+ [styles.separator],
+ );
+
+ const keyserverSelectionList = React.useMemo(
+ () => (
+ <View style={styles.container}>
+ <Text style={styles.header}>CONNECTED KEYSERVERS</Text>
+ <FlatList
+ data={selectedKeyserverInfos}
+ renderItem={renderKeyserverListItem}
+ keyExtractor={keyExtractor}
+ contentContainerStyle={styles.keyserverListContentContainer}
+ ItemSeparatorComponent={keyserverListSeparatorComponent}
+ />
+ </View>
+ ),
+ [
+ keyserverListSeparatorComponent,
+ renderKeyserverListItem,
+ selectedKeyserverInfos,
+ styles.container,
+ styles.header,
+ styles.keyserverListContentContainer,
+ ],
+ );
+
+ return keyserverSelectionList;
}
+const unboundStyles = {
+ container: {
+ flex: 1,
+ backgroundColor: 'panelBackground',
+ paddingTop: 24,
+ },
+ header: {
+ color: 'panelBackgroundLabel',
+ fontSize: 12,
+ fontWeight: '400',
+ paddingBottom: 3,
+ paddingHorizontal: 24,
+ },
+ keyserverListContentContainer: {
+ backgroundColor: 'panelForeground',
+ borderBottomWidth: 1,
+ borderColor: 'panelForegroundBorder',
+ borderTopWidth: 1,
+ marginBottom: 24,
+ paddingVertical: 2,
+ },
+ keyserverListItemContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 24,
+ paddingVertical: 10,
+ },
+ separator: {
+ backgroundColor: 'panelForegroundBorder',
+ height: 1,
+ marginHorizontal: 16,
+ },
+};
+
export default KeyserverSelectionList;
diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js
--- a/native/profile/profile.react.js
+++ b/native/profile/profile.react.js
@@ -67,7 +67,7 @@
headerRight: () => <LinkedDevicesHeaderRightButton />,
};
const keyserverSelectionListOptions = {
- headerTitle: 'Keyserver selection',
+ headerTitle: 'Keyservers',
// eslint-disable-next-line react/display-name
headerRight: () => <KeyserverSelectionListHeaderRightButton />,
};

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 1:03 AM (21 h, 37 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495949
Default Alt Text
D9642.id32640.diff (3 KB)

Event Timeline