Page MenuHomePhabricator
Files F3509810

D9753.id33020.diff
No OneTemporary
Actions

D9753.id33020.diff
View Options

diff --git a/native/components/status-indicator.react.js b/native/components/status-indicator.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/status-indicator.react.js
@@ -0,0 +1,81 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { ConnectionInfo } from 'lib/types/socket-types.js';
+
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+ +connectionInfo: ConnectionInfo,
+};
+
+function StatusIndicator(props: Props): React.Node {
+ const { connectionInfo } = props;
+
+ const styles = useStyles(unboundStyles);
+
+ const isConnected = connectionInfo.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,
+ ]);
+
+ return (
+ <View style={connectionIndicatorOuterStyle}>
+ <View style={connectionIndicatorInnerStyle} />
+ </View>
+ );
+}
+
+const unboundStyles = {
+ 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 StatusIndicator;
diff --git a/native/profile/keyserver-selection-list-item.react.js b/native/profile/keyserver-selection-list-item.react.js
--- a/native/profile/keyserver-selection-list-item.react.js
+++ b/native/profile/keyserver-selection-list-item.react.js
@@ -7,6 +7,7 @@
import CommIcon from '../components/comm-icon.react.js';
import Pill from '../components/pill.react.js';
+import StatusIndicator from '../components/status-indicator.react.js';
import { useStyles, useColors } from '../themes/colors.js';
type Props = {
@@ -31,30 +32,6 @@
[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}>
@@ -63,17 +40,14 @@
backgroundColor={colors.codeBackground}
icon={cloudIcon}
/>
- <View style={connectionIndicatorOuterStyle}>
- <View style={connectionIndicatorInnerStyle} />
- </View>
+ <StatusIndicator connectionInfo={keyserverInfo.connection} />
</View>
),
[
cloudIcon,
colors.codeBackground,
- connectionIndicatorInnerStyle,
- connectionIndicatorOuterStyle,
keyserverAdminUsername,
+ keyserverInfo.connection,
styles.keyserverListItemContainer,
],
);
@@ -89,34 +63,6 @@
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;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 8:32 AM (7 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2681515
Default Alt Text
D9753.id33020.diff (4 KB)

Event Timeline