import React from 'react' ; import styled from 'styled-components' ; import 'react-day-picker/lib/style.css' ; import { ButtonOutlined } from 'design' ; import { CarrotDown } from 'design/Icon' ; import Menu from 'design/Menu' ; import defaultTheme from 'design/theme' ; type Props = { title : string ; disabled : boolean ; children : React . ReactElement [ ] ; [ index ] : any ; } ; type State = { open : boolean ; anchorEl : HTMLElement ; } ; export default class ButtonOptions extends React . Component < Props , State > { anchorEl : HTMLElement ; constructor ( props ) { super ( props ) ; this . setState ( { open : props . open , } ) ; } onOpen = e => { e . stopPropagation ( ) ; this . setState ( { open : true } ) ; } ; onClose = ( ) => { this . setState ( { open : false } ) ; } ; render ( ) { const props = this . props ; return ( < > < StyledButton size = "small" width = "180px" disabled = { props . disabled } ml = { props . ml } setRef = { e => ( this . anchorEl = e ) } onClick = { this . onOpen } > { props . title } < CarrotDown ml = { 2 } style = { { position : 'absolute' , top : '6px' , right : '16px' } } fontSize = "3" color = "primary.lighter" / > < /StyledButton> < Menu menuListCss = { menuListCss } anchorEl = { this . state . anchorEl } open = { open } onClose = { this . onClose } anchorOrigin = { { vertical : 'center' , horizontal : 'center' , } } transformOrigin = { { vertical : 'top' , horizontal : 'center' , } } > { open && this . renderItems ( props . children ) } < /Menu> < />); } renderItems ( children ) { const filtered = React . Children . toArray ( children ) ; const cloned = filtered . map ( ( child ) => { return React . cloneElement ( child , { onClick : this . makeOnClick ( child . props . onClick ) , } ) ; } ) ; return cloned ; } makeOnClick ( cb ) { return e => { e . stopPropagation ( ) ; this . onClose ( ) ; cb && cb ( e ) ; } ; } } const menuListCss = ( ) => `
  min-width: 100px;
` ; const StyledButton = styled ( ButtonOutlined ) `
  border-color: ${ props => props . theme . colors . primary . lighter };
  height: 32px;
  padding: 0 40px 0 24px;
  width: auto;
` ; StyledButton . defaultProps = { theme : defaultTheme , } ;