import React from 'react' ; import styled from 'styled-components' ; import PropTypes from 'prop-types' ; import { Text } from 'design' ; import TopNavItem from '../TopNavItem' ; import Menu from '../../Menu/Menu' ; class TopNavUserMenu extends React . Component { static displayName = 'TopNavMenu' ; static defaultProps = { menuListCss : ( ) => { } , open : false , } ; static propTypes = { /** Callback fired when the component requests to be closed. */ onClose : PropTypes . func , /** Callback fired when the component requests to be open. */ onShow : PropTypes . func , /** If true the menu is visible */ open : PropTypes . bool , } ; setRef = e => { this . btnRef = e ; } ; render ( ) { const { user , onShow , onClose , open , anchorOrigin , transformOrigin , children , menuListCss , } = this . props ; const initial = user && user . length ? user . trim ( ) . charAt ( 0 ) . toUpperCase ( ) : '' ; const anchorEl = open ? this . btnRef : null ; return ( < > < TopNavItem ml = "auto" maxWidth = "250px" ref = { this . setRef } onClick = { onShow } > < Text fontSize = "12px" bold > { user } < /Text> < StyledAvatar > { initial } < /StyledAvatar> < /TopNavItem> < Menu menuListCss = { menuListCss } anchorOrigin = { anchorOrigin } transformOrigin = { transformOrigin } anchorEl = { anchorEl } open = { Boolean ( anchorEl ) } onClose = { onClose } > { children } < /Menu> < />); } } const StyledAvatar = styled . div `
  align-items: center;
  background: ${ props => props . theme . colors . accent };
  border-radius: 50%;
  display: flex;
  font-size: 14px;
  font-weight: bold;
  justify-content: center;
  height: 32px;
  margin-left: 16px;
  width: 100%;
  max-width: 32px;
  min-width: 32px;
` ; export default TopNavUserMenu ;