import React from 'react' ; import styled from 'styled-components' ; import { NavLink } from 'react-router-dom' ; import Menu , { MenuItem } from 'design/Menu' ; import { space } from 'design/system' ; import { MenuSshLoginProps } from './types' ; import { ButtonBorder } from 'design' ; import { CarrotDown } from 'design/Icon' ; class MenuSshLogin extends React . Component < MenuSshLoginProps > { static displayName = 'MenuSshLogin' ; anchorEl = React . createRef ( ) ; state = { logins : [ ] , open : false , anchorEl : null , } ; onOpen = ( ) => { const logins = this . props . onOpen ( ) ; this . setState ( { logins , open : true , } ) ; } ; onItemClick = ( e , login ) => { this . onClose ( ) ; this . props . onSelect ( e , login ) ; } ; onClose = ( ) => { this . setState ( { open : false } ) ; } ; onKeyPress = ( e ) => { if ( e . key === 'Enter' && e . currentTarget . value ) { this . onClose ( ) ; this . props . onSelect ( e , e . currentTarget . value ) ; } } ; render ( ) { const { anchorOrigin , transformOrigin } = this . props ; const { open , logins } = this . state ; return ( < React . Fragment > < ButtonBorder height = "24px" size = "small" setRef = { e => ( this . anchorEl = e ) } onClick = { this . onOpen } > CONNECT < CarrotDown ml = { 2 } mr = { - 2 } fontSize = "2" color = "text.secondary" / > < /ButtonBorder> < Menu anchorOrigin = { anchorOrigin } transformOrigin = { transformOrigin } anchorEl = { this . anchorEl } open = { open } onClose = { this . onClose } getContentAnchorEl = { null } > < LoginItemList logins = { logins } onKeyPress = { this . onKeyPress } onClick = { this . onItemClick } / > < /Menu> < /React.Fragment>); } } export const LoginItemList = ( { logins , onClick , onKeyPress } ) => { logins = logins || [ ] ; const $menuItems = logins . map ( ( item , key ) => { const { login , url } = item ; return ( < StyledMenuItem key = { key } px = "2" mx = "2" as = { NavLink } to = { url } onClick = { ( e ) => { onClick ( e , login ) ; } } > { login } < /StyledMenuItem>); } ) ; return ( < React . Fragment > < Input p = "2" m = "2" onKeyPress = { onKeyPress } type = "text" autoFocus placeholder = "Enter login name..." / > { $menuItems } < /React.Fragment>); } ; const StyledMenuItem = styled ( MenuItem ) ( ( { theme } ) => `
  color: ${ theme . colors . grey [ 400 ] };
  font-size: 12px;
  border-bottom: 1px solid ${ theme . colors . subtle };
  min-height: 32px;
  &:hover {
    color: ${ theme . colors . link };
  }

  :last-child {
    border-bottom: none;
    margin-bottom: 8px;
  }
` ) ; const Input = styled . input ( ( { theme } ) => `
  background: ${ theme . colors . subtle };
  border: 1px solid ${ theme . colors . subtle };
  border-radius: 4px;
  box-sizing: border-box;
  color: #263238;
  height: 32px;
  outline: none;

  &:focus {
    background: ${ theme . colors . light };
    border 1px solid ${ theme . colors . link };
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .24);
  }

  ::placeholder {
    color: ${ theme . colors . grey [ 100 ] };
  }
` , space ) ; export default MenuSshLogin ;