jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity/' ; import { ANIMATION , DURATION , EASE } from '../Identity/motions' ; import { QueryKeys , media } from '../mediaQueries' ; import { OverlayBackgroundProps , OverlayWrapperProps , overlayBackgroundStyle } from '../Modal/Overlay' ; import { noop } from '../util' ; const menuModalWrapperStyle = props => ( { ... overlayBackgroundStyle ( props ) , alignItems : 'flex-end' , alignSelf : 'flex-end' , display : 'flex' , overflowY : 'hidden' , padding : 0 , } ) ; const MenuModalWrapper = ( props ) => < div css = { menuModalWrapperStyle } { ... props } />; const MenuModalBody = ( props ) => ( < div css = { theme => ( { animation : `${ ANIMATION . bottomUpMovement } ${ DURATION . DEFAULT }ms ${ EASE . EXPONENTIAL }` , backgroundColor : COLOR . tint ( theme . general . backgroundColor , 0.16 ) , boxShadow : '0 16px 64px 0 rgba(0, 0, 0, 0.16)' , display : 'flex' , flexDirection : 'column' , justifyContent : 'space-between' , marginLeft : 'auto' , marginRight : 'auto' , padding : '8px 16px' , position : 'relative' , width : '767px' , zIndex : 9999 , [ media [ QueryKeys . TABLET_DOWN ] ] : { width : '100%' , } , } ) } { ... props } />); const MenuModalContent = ( props ) => ( < ul css = { { li : { borderBottom : `1px solid ${ COLOR . GRAY_LIGHTEN_72 }` , } , 'li:last-child' : { borderBottom : 0 , } , margin : 0 , maxWidth : '100%' , minWidth : '100%' , padding : 0 , } } { ... props } />); const modalBackgroundStyle = props => ( { ... overlayBackgroundStyle ( props ) , background : 'rgba(50, 54, 57, 0.4)' , } ) ; const MenuModalBackground = ( props ) => < div css = { modalBackgroundStyle } { ... props } />; interface MenuModalProps < T = HTMLDivElement > extends React . HTMLProps < T > { onBackgroundClick ? : ( ) => void ; } export const MenuModal = ( { children = null , onBackgroundClick = noop , ... props } ) => ( < MenuModalWrapper { ... props } > < MenuModalBody > < MenuModalContent > { children } < /MenuModalContent> < /MenuModalBody> < MenuModalBackground onClick = { onBackgroundClick } data - uie - name = "menu-background" / > < /MenuModalWrapper>); export type MenuItemProps < T = HTMLLIElement > = React . HTMLProps < T > ; export const MenuItem = ( { children = null , ... props } ) => ( < li css = { theme => ( { alignItems : 'center' , color : theme . general . color , cursor : 'pointer' , display : 'flex' , height : '56px' , listStyleType : 'none' , maxWidth : '100%' , } ) } { ... props } > { children } < /li>);