diff --git a/src/components/ui/menu/menu.component.tsx b/src/components/ui/menu/menu.component.tsx index 4587e4595..69d3a4a0e 100644 --- a/src/components/ui/menu/menu.component.tsx +++ b/src/components/ui/menu/menu.component.tsx @@ -136,13 +136,18 @@ export class Menu extends React.Component { private cloneItemWithProps = (element: React.ReactElement, props: MenuItemProps): React.ReactElement => { const nestedElements = React.Children.map(element.props.children, (el: MenuItemElement, index: number) => { - const descriptor = this.service.createDescriptorForNestedElement(el, props.descriptor, index); + const descriptor = this.service.createDescriptorForNestedElement(props.descriptor, index); const selected: boolean = this.isItemSelected(descriptor); return this.cloneItemWithProps(el, { ...props, selected, descriptor }); }); - return React.cloneElement(element, { ...props, ...element.props }, nestedElements); + const onPress = (event, descriptor) => { + element.props.onPress && element.props.onPress(); + props.onPress(event, descriptor); + }; + + return React.cloneElement(element, { ...element.props, ...props, onPress }, nestedElements); }; private renderItem = (info: ListRenderItemInfo): React.ReactElement => { @@ -164,4 +169,4 @@ export class Menu extends React.Component { /> ); } -} +} \ No newline at end of file diff --git a/src/components/ui/menu/menu.service.ts b/src/components/ui/menu/menu.service.ts index b225e2e4d..61a2a9414 100644 --- a/src/components/ui/menu/menu.service.ts +++ b/src/components/ui/menu/menu.service.ts @@ -16,9 +16,7 @@ export class MenuService { return { groupIndices, index: new IndexPath(index) }; }; - public createDescriptorForNestedElement = (element: React.ReactElement, - groupDescriptor: MenuItemDescriptor, - index: number): MenuItemDescriptor => { + public createDescriptorForNestedElement = (groupDescriptor: MenuItemDescriptor, index: number): MenuItemDescriptor => { return { index: new IndexPath(index, groupDescriptor.index.row), diff --git a/src/components/ui/menu/menu.spec.tsx b/src/components/ui/menu/menu.spec.tsx index 8503fc676..00f666162 100644 --- a/src/components/ui/menu/menu.spec.tsx +++ b/src/components/ui/menu/menu.spec.tsx @@ -31,6 +31,8 @@ import { import { IndexPath } from '../../devsupport'; import { MenuGroup } from './menuGroup.component'; +jest.useFakeTimers(); + describe('@menu-item: component checks', () => { const TestMenuItem = (props?: MenuItemProps) => ( @@ -180,6 +182,72 @@ describe('@menu: component checks', () => { fireEvent.press(component.queryByText('Option 2.1')); }); + + it('should fire onPress on group with row = 0, section = undefined', () => { + const onSelect = jest.fn((index: IndexPath) => { + expect(index.row).toEqual(0); + expect(index.section).toBeFalsy(); + }); + + const component = render( + + + + + + + + ); + + fireEvent.press(component.queryByText('Group 1')); + }); + + it('should fire onPress on group with row = 1, section = undefined', () => { + const onSelect = jest.fn((index: IndexPath) => { + expect(index.row).toEqual(1); + expect(index.section).toBeFalsy(); + }); + + const component = render( + + + + + + + + + ); + + fireEvent.press(component.queryByText('Group 2')); + }); + + it('should fire onPress event for group & item separately', () => { + const onGroupPress = jest.fn(); + const onItemPress = jest.fn(); + const onSelect = jest.fn(); + + const component = render( + + + + + + + + + + , + ); + + fireEvent.press(component.queryByText('Group 1')); + expect(onGroupPress).toBeCalledTimes(1); + + fireEvent.press(component.queryByText('Option 1.1')); + expect(onItemPress).toBeCalledTimes(1); + + expect(onSelect).toBeCalledTimes(2); + }); }); diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx index 2262f1119..807f1b2fd 100644 --- a/src/components/ui/menu/menuGroup.component.tsx +++ b/src/components/ui/menu/menuGroup.component.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Animated, + GestureResponderEvent, ImageProps, StyleSheet, ViewProps, @@ -19,6 +20,7 @@ import { MenuItemElement, MenuItemProps, } from './menuItem.component'; +import { MenuItemDescriptor } from './menu.service'; export interface MenuGroupProps extends MenuItemProps { children?: ChildrenWithProps; @@ -97,10 +99,11 @@ export class MenuGroup extends React.Component { return { appearance: 'grouped' }; } - private onPress = (): void => { + private onPress = (descriptor: MenuItemDescriptor, event: GestureResponderEvent): void => { if (this.hasSubmenu) { const expandValue: number = this.expandAnimationValue > 0 ? 0 : this.state.submenuHeight; this.createExpandAnimation(expandValue).start(); + this.props.onPress && this.props.onPress(descriptor, event); } };