blob: a1c8b054768aa9dd2764678961f40745a9e97154 (
plain) (
blame)
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
75
76
77
78
79
80
|
import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
import { Text } from 'ts/components/ui/text';
import { styled } from 'ts/style/theme';
interface ActiveNodeProps {
className?: string;
selectedVersion: string;
}
const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
<Container className={className}>
<Container className="flex justify-center">
<Text fontColor={colors.grey700} fontSize="12px">
v {selectedVersion}
</Text>
<Container paddingLeft="6px">
<i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
</Container>
</Container>
</Container>
);
const ActiveNode = styled(PlainActiveNode)`
cursor: pointer;
border: 2px solid ${colors.beigeWhite};
border-radius: 4px;
padding: 4px 6px 4px 8px;
`;
interface VersionDropDownProps {
selectedVersion: string;
versions: string[];
onVersionSelected: (semver: string) => void;
}
interface VersionDropDownState {}
export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
public render(): React.ReactNode {
const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
return (
<DropDown
activateEvent={DropdownMouseEvent.Click}
activeNode={activeNode}
popoverContent={this._renderDropdownMenu()}
anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
popoverStyle={{ borderRadius: 4 }}
/>
);
}
private _renderDropdownMenu(): React.ReactNode {
const items = _.map(this.props.versions, version => {
const isSelected = version === this.props.selectedVersion;
return (
<Container key={`dropdown-items-${version}`}>
<Button
borderRadius="0px"
padding="0.8em 0em"
width="100%"
isDisabled={isSelected}
onClick={this._onClick.bind(this, version)}
>
v {version}
</Button>
</Container>
);
});
const dropdownMenu = <Container width="88px">{items}</Container>;
return dropdownMenu;
}
private _onClick(selectedVersion: string): void {
this.props.onVersionSelected(selectedVersion);
}
}
|
