Create `ConnectionInfo` component

1 files changed, 105 insertions, 0 deletions

diff --git a/gui/packages/components/src/ConnectionInfo.tsx b/gui/packages/components/src/ConnectionInfo.tsx
new file mode 100644
index 0000000000..b22c510c23
--- /dev/null
+++ b/gui/packages/components/src/ConnectionInfo.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Component, Styles, Text, View } from 'reactxp';
+import { default as Accordion } from './Accordion';
+
+const styles = {
+  toggle: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 14,
+    fontWeight: '800',
+    color: 'rgb(255, 255, 255, 0.4)',
+    paddingBottom: 2,
+  }),
+  content: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 16,
+    fontWeight: '800',
+    color: 'rgb(255, 255, 255)',
+    paddingBottom: 2,
+  }),
+};
+
+interface IInAddress {
+  ip: string;
+  port: number;
+  protocol: string;
+}
+
+interface IOutAddress {
+  ipv4: string | null;
+  ipv6: string | null;
+}
+
+interface IProps {
+  inAddress: IInAddress;
+  outAddress: IOutAddress;
+  startExpanded: boolean;
+  onToggle: (expanded: boolean) => void;
+}
+
+interface IState {
+  expanded: boolean;
+}
+
+export default class ConnectionInfo extends Component<IProps, IState> {
+  public static defaultProps = {
+    inAddress: {
+      ip: null,
+      port: null,
+      protocol: null,
+    },
+    outAddress: null,
+    startExpanded: false,
+    onToggle: (_: boolean) => {},
+  };
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      expanded: props.startExpanded,
+    };
+  }
+
+  public render() {
+    return (
+      <View>
+        <Accordion height={this.state.expanded ? 'auto' : 0}>
+          <Text style={styles.content}>{this.inAddress()}</Text>
+          <Text style={styles.content}>{this.outAddress()}</Text>
+        </Accordion>
+        <Text style={styles.toggle} onPress={() => this.toggle()}>
+          {this.state.expanded ? 'LESS' : 'MORE'}
+        </Text>
+      </View>
+    );
+  }
+
+  private toggle() {
+    this.setState((state, props) => {
+      const expanded = !state.expanded;
+
+      props.onToggle(expanded);
+
+      return { expanded };
+    });
+  }
+
+  private inAddress() {
+    const { ip, port, protocol } = this.props.inAddress;
+
+    return (
+      'IN: ' + (ip || '<unknown>') + (port ? `:${port}` : '') + (protocol ? ` - ${protocol}` : '')
+    );
+  }
+
+  private outAddress() {
+    const { ipv4, ipv6 } = this.props.outAddress;
+
+    if (ipv4 || ipv6) {
+      return `OUT: ${ipv4}` + (ipv6 ? ` / ${ipv6}` : '');
+    } else {
+      return '';
+    }
+  }
+}