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: 1px 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); } }