1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
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;
isExpanded: boolean;
onToggle?: () => void;
}
export default class ConnectionInfo extends Component<IProps> {
public render() {
const { inAddress, outAddress } = this.props;
return (
<View>
<Accordion height={this.props.isExpanded ? 'auto' : 0}>
{inAddress && (
<Text style={styles.content}>{`IN: ${inAddress.ip}:${inAddress.port} - ${
inAddress.protocol
}`}</Text>
)}
{(outAddress.ipv4 || outAddress.ipv6) && (
<Text style={styles.content}>
{'OUT: ' +
[outAddress.ipv4, outAddress.ipv6]
.filter((a) => typeof a !== 'undefined')
.join(' / ')}
</Text>
)}
</Accordion>
<Text style={styles.toggle} onPress={this.toggle}>
{this.props.isExpanded ? 'LESS' : 'MORE'}
</Text>
</View>
);
}
private toggle = () => {
if (this.props.onToggle) {
this.props.onToggle();
}
};
}
|
