import { Platform , FlatList } from 'react-native' ; import { Box , BoxTouchable } from '../Box' ; import { Text } from '../Text' ; import { styled } from '../styled' ; import { getFontStyles } from '../utils/getFontStyles' ; import { borderRadius , palette , space , theme } from '../utils/theme' ; import { MenuItem as _MenuItem } from './MenuItem' ; export const Menu = styled ( Box ) `
  background-color: ${ palette ( 'white' ) };
  border-radius: ${ borderRadius ( 'default' ) };
  overflow: hidden;

  ${ theme ( 'native.Menu' , 'styles.base' ) };
` as any ; export const MenuOptionList = styled ( FlatList ) `
  background-color: ${ palette ( 'white' ) };
  border-radius: ${ borderRadius ( 'default' ) };
  overflow: hidden;

  ${ theme ( 'native.Menu.OptionList' , 'styles.base' ) };
` as any ; export const MenuOptionGroup = styled ( Box ) `
  ${ theme ( 'native.Menu.OptionGroup' , 'styles.base' ) };
` as any ; export const MenuOptionItem = styled ( _MenuItem ) `
  ${ theme ( 'native.Menu.OptionItem' , 'styles.base' ) };
` as any ; export const MenuItem = styled ( BoxTouchable ) `
  flex-direction: row;
  width: 100%;
  ${ ( props ) => ( ! props . disableLeftPadding ? `padding-left: ${ space ( 4 ) ( props ) }px` : '' ) };

  ${ getInteractiveProperties }

  ${ ( props ) => props . isStatic && Platform . OS === 'web' ? `
    cursor: unset;
  ` : '' }

  ${ theme ( 'native.Menu.Item' , 'styles.base' ) };
` as any ; export const MenuItemBeforeWrapper = styled ( Box ) `
  align-items: center;
  justify-content: center;
  margin-right: ${ ( props ) => `${ space ( 4 ) ( props ) }px` };

  ${ theme ( 'native.Menu.Item' , 'BeforeWrapper.styles.base' ) };
` as any ; export const MenuItemAfterWrapper = styled ( Box ) `
  align-items: center;
  justify-content: center;
  margin-left: ${ ( props ) => `${ space ( 4 ) ( props ) }px` };

  ${ theme ( 'native.Menu.Item' , 'AfterWrapper.styles.base' ) };
` as any ; export const MenuItemContent = styled ( Box ) `
  flex-direction: row;
  justify-content: space-between;
  padding: ${ ( props ) => `${ space ( 4 ) ( props ) }px 0px` };
  padding-right: ${ ( props ) => `${ space ( 4 ) ( props ) }px` };
  flex: 1;
  ${ ( props ) => ( props . disableLeftPadding ? `padding-left: ${ space ( 4 ) ( props ) }px` : '' ) };

  ${ ( props ) => props . hasDivider ? `
        border-bottom-width: 1px;
        border-bottom-color: ${ palette ( 'white800' ) ( props ) };
      ` : '' }

  ${ getInteractiveProperties }

  ${ ( props ) => props . disabled ? `
    opacity: 0.5;
  ` : '' }

  ${ theme ( 'native.Menu.Item' , 'Content.styles.base' ) };
` as any ; export const MenuItemContentText = styled ( Text ) `
  ${ getFontStyles ( { fontWeight : '500' } ) }

  ${ theme ( 'native.Menu.Item' , 'ContentText.styles.base' ) };
` as any ; export function isInteractive ( props ) { return ! props . isLoading && ! props . disabled && ! props . isStatic ; } export function getInteractiveProperties ( props ) { if ( ! isInteractive ( props ) ) return `` ; return `
    ${ props . hover ? `
          background-color: ${ palette ( 'white600' ) ( props ) };

          ${ theme ( 'native.Menu.Item' , 'styles.hover' ) ( props ) };
        ` : '' }

    ${ props . hoveractive ? `
          background-color: ${ palette ( 'white700' ) ( props ) };

          ${ theme ( 'native.Menu.Item' , 'styles.hoveractive' ) ( props ) };
        ` : '' }
  ` ; }