Page MenuHomePhabricator
Files F3515972

D9725.diff
No OneTemporary
Actions

D9725.diff
View Options

diff --git a/native/profile/keyserver-selection-list-item.react.js b/native/profile/keyserver-selection-list-item.react.js
new file mode 100644
--- /dev/null
+++ b/native/profile/keyserver-selection-list-item.react.js
@@ -0,0 +1,122 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
+
+import CommIcon from '../components/comm-icon.react.js';
+import Pill from '../components/pill.react.js';
+import { useStyles, useColors } from '../themes/colors.js';
+
+type Props = {
+ +keyserverAdminUsername: string,
+ +keyserverInfo: KeyserverInfo,
+};
+
+function KeyserverSelectionListItem(props: Props): React.Node {
+ const { keyserverAdminUsername, keyserverInfo } = props;
+
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const cloudIcon = React.useMemo(
+ () => (
+ <CommIcon
+ name="cloud-filled"
+ size={12}
+ color={colors.panelForegroundLabel}
+ />
+ ),
+ [colors.panelForegroundLabel],
+ );
+
+ const isConnected = keyserverInfo.connection.status === 'connected';
+
+ const { connectionIndicatorOuterStyle, connectionIndicatorInnerStyle } =
+ React.useMemo(() => {
+ const outerStyle = isConnected
+ ? styles.onlineIndicatorOuter
+ : styles.offlineIndicatorOuter;
+
+ const innerStyle = isConnected
+ ? styles.onlineIndicatorInner
+ : styles.offlineIndicatorInner;
+
+ return {
+ connectionIndicatorOuterStyle: outerStyle,
+ connectionIndicatorInnerStyle: innerStyle,
+ };
+ }, [
+ isConnected,
+ styles.offlineIndicatorInner,
+ styles.offlineIndicatorOuter,
+ styles.onlineIndicatorInner,
+ styles.onlineIndicatorOuter,
+ ]);
+
+ const keyserverListItem = React.useMemo(
+ () => (
+ <View style={styles.keyserverListItemContainer}>
+ <Pill
+ label={keyserverAdminUsername}
+ backgroundColor={colors.codeBackground}
+ icon={cloudIcon}
+ />
+ <View style={connectionIndicatorOuterStyle}>
+ <View style={connectionIndicatorInnerStyle} />
+ </View>
+ </View>
+ ),
+ [
+ cloudIcon,
+ colors.codeBackground,
+ connectionIndicatorInnerStyle,
+ connectionIndicatorOuterStyle,
+ keyserverAdminUsername,
+ styles.keyserverListItemContainer,
+ ],
+ );
+
+ return keyserverListItem;
+}
+
+const unboundStyles = {
+ keyserverListItemContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 24,
+ paddingVertical: 10,
+ },
+ onlineIndicatorOuter: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'greenIndicatorOuter',
+ width: 18,
+ height: 18,
+ borderRadius: 9,
+ },
+ onlineIndicatorInner: {
+ backgroundColor: 'greenIndicatorInner',
+ width: 9,
+ height: 9,
+ borderRadius: 4.5,
+ },
+ offlineIndicatorOuter: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'redIndicatorOuter',
+ width: 18,
+ height: 18,
+ borderRadius: 9,
+ },
+ offlineIndicatorInner: {
+ backgroundColor: 'redIndicatorInner',
+ width: 9,
+ height: 9,
+ borderRadius: 4.5,
+ },
+};
+
+export default KeyserverSelectionListItem;
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
@@ -6,72 +6,25 @@
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 KeyserverSelectionListItem from './keyserver-selection-list-item.react.js';
import { useSelector } from '../redux/redux-utils.js';
-import { useStyles, useColors } from '../themes/colors.js';
+import { useStyles } from '../themes/colors.js';
function keyExtractor(item: SelectedKeyserverInfo) {
return `${item.keyserverAdminUsername}${item.keyserverInfo.urlPrefix}`;
}
+function renderKeyserverListItem({ item }) {
+ return <KeyserverSelectionListItem {...item} />;
+}
+
// eslint-disable-next-line no-unused-vars
function KeyserverSelectionList(props: { ... }): React.Node {
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, keyserverInfo } = item;
-
- const isConnected = keyserverInfo.connection.status === 'connected';
-
- const connectionIndicatorOuterStyle = isConnected
- ? styles.onlineIndicatorOuter
- : styles.offlineIndicatorOuter;
-
- const connectionIndicatorInnerStyle = isConnected
- ? styles.onlineIndicatorInner
- : styles.offlineIndicatorInner;
-
- return (
- <View style={styles.keyserverListItemContainer}>
- <Pill
- label={keyserverAdminUsername}
- backgroundColor={colors.codeBackground}
- icon={cloudIcon}
- />
- <View style={connectionIndicatorOuterStyle}>
- <View style={connectionIndicatorInnerStyle} />
- </View>
- </View>
- );
- },
- [
- cloudIcon,
- colors.codeBackground,
- styles.keyserverListItemContainer,
- styles.offlineIndicatorInner,
- styles.offlineIndicatorOuter,
- styles.onlineIndicatorInner,
- styles.onlineIndicatorOuter,
- ],
- );
-
const keyserverListSeparatorComponent = React.useCallback(
() => <View style={styles.separator} />,
[styles.separator],
@@ -92,7 +45,6 @@
),
[
keyserverListSeparatorComponent,
- renderKeyserverListItem,
selectedKeyserverInfos,
styles.container,
styles.header,

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 11:24 AM (18 h, 43 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2694569
Default Alt Text
D9725.diff (6 KB)

Event Timeline