license import React from 'react' ; import { StyleSheet } from 'react-native' ; import { ChildrenWithProps , Overwrite , } from '../../devsupport' ; import { styled , StyleType , } from '../../theme' ; import { Menu , MenuElement , MenuProps , } from '../menu/menu.component' ; import { MenuItemProps } from '../menu/menuItem.component' ; import { Popover , PopoverElement , PopoverProps , } from '../popover/popover.component' ; type OverflowMenuPopoverProps = Overwrite < PopoverProps , { children ? : ChildrenWithProps < MenuItemProps > ; } > ; export type OverflowMenuProps = MenuProps & OverflowMenuPopoverProps ; export type OverflowMenuElement = React . ReactElement < OverflowMenuProps > ; extends React . Component method method property property property property property property property property property overview-example overview-example overview-example overview-example overview-example overview-example overview-example overview-example example @ styled ( 'OverflowMenu' ) export class OverflowMenu extends React . Component < OverflowMenuProps > { private popoverRef = React . createRef < Popover > ( ) ; private get itemsCount ( ) : number { return React . Children . count ( this . props . children ) ; } public show = ( ) : void => { this . popoverRef . current ?. show ( ) ; } ; public hide = ( ) : void => { this . popoverRef . current ?. hide ( ) ; } ; private getComponentStyle = ( source ) => { const { indicatorBackgroundColor , ... containerParameters } = source ; return { container : containerParameters , indicator : { backgroundColor : indicatorBackgroundColor , } , } ; } ; private renderPopoverContentElement = ( ) : MenuElement => { const { eva , children , style , ... menuProps } = this . props ; return ( < Menu { ... menuProps } style = { styles . menu } initialNumToRender = { this . itemsCount } showsVerticalScrollIndicator = { false } bounces = { false } > { this . props . children } < /Menu>); } ; public render ( ) { const { eva , style , children , appearance , ... popoverProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; const contentElement = this . renderPopoverContentElement ( ) ; return ( < Popover { ... popoverProps } ref = { this . popoverRef } style = { [ styles . popover , evaStyle . container , style ] } > { contentElement } < /Popover>); } } const styles = StyleSheet . create ( { popover : { overflow : 'hidden' , } , menu : { flexGrow : 0 , } , } ) ;