blob: 0b3602252b4722a0b5fbc217334e8e6c287bd261 (
plain)
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
|
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../../config.json';
import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
import * as Cell from './Cell';
import RelayStatusIndicator from './RelayStatusIndicator';
interface IProps {
location: RelayLocation;
active: boolean;
hostname: string;
selected: boolean;
onSelect?: (location: RelayLocation) => void;
}
const Button = styled(Cell.CellButton)((props: { selected: boolean }) => ({
paddingRight: 0,
paddingLeft: '50px',
backgroundColor: !props.selected ? colors.blue20 : undefined,
}));
const Label = styled(Cell.Label)({
fontFamily: 'Open Sans',
fontWeight: 'normal',
fontSize: '16px',
});
export default class RelayRow extends React.Component<IProps> {
public static compareProps(oldProps: IProps, nextProps: IProps) {
return (
oldProps.hostname === nextProps.hostname &&
oldProps.selected === nextProps.selected &&
oldProps.active === nextProps.active &&
compareRelayLocation(oldProps.location, nextProps.location)
);
}
public shouldComponentUpdate(nextProps: IProps) {
return !RelayRow.compareProps(this.props, nextProps);
}
public render() {
return (
<Button
onClick={this.handleClick}
selected={this.props.selected}
disabled={!this.props.active}>
<RelayStatusIndicator active={this.props.active} selected={this.props.selected} />
<Label>{this.props.hostname}</Label>
</Button>
);
}
private handleClick = () => {
if (this.props.onSelect) {
this.props.onSelect(this.props.location);
}
};
}
|
