on mouse right click, show up context menu

[jacoolee]

🚀 Feature Proposal

on mouse right click

Motivation

it's obvious right click is a critical feature for desktop-oriented apps, so I wonder if it's supported already or can it be supported.

Example

on mouse right click, a context menu would show up.

[aleclarson]

Every <View> has a contextMenu prop for this.

const contextMenu = [
  { key: 'foo', title: 'Foo' },
  { isSeparator: true },
  { key: 'bar', title: 'Bar' },
]

<View
  contextMenu={contextMenu}
  onContextMenuItemClick={event => {
    console.log(event.nativeEvent)
  }} />

Here is the source code:

react-native-macos/React/Views/RCTViewManager.m

Lines 233 to 259 in 77580c1

	RCT_CUSTOM_VIEW_PROPERTY(contextMenu, NSArray*<NSDictionary *>, __unused RCTView)
	{
	if ([view respondsToSelector:@selector(setMenu:)] && json) {
	NSArray *menuList = [RCTConvert NSArray:json];
	if (menuList.count > 0) {
	NSMenu *menu = [[NSMenu alloc] init];
	for (NSUInteger i = 0; i < menuList.count; i++)
	{
	if (menuList[i][@"isSeparator"]) {
	[menu addItem:[NSMenuItem separatorItem]];
	} else {
	NSMenuItem *menuItem = [[NSMenuItem alloc] init];
	[menuItem setTarget:view];
	[menuItem setAction:@selector(contextMenuItemClicked:)];
	if (menuList[i][@"key"]) {
	[menuItem setKeyEquivalent:menuList[i][@"key"]];
	}
	[menuItem setRepresentedObject:menuList[i]];
	menuItem.title = menuList[i][@"title"];
	[menu addItem:menuItem];
	}
	}
	[view setMenu:menu];
	}
	}
	}

react-native-macos/React/Views/RCTView.m

Lines 730 to 738 in 77580c1

	- (void)contextMenuItemClicked:(NSMenuItem *)sender
	{
	NSDictionary *menuItem = (NSDictionary *)sender.representedObject;
	if (_onContextMenuItemClick) {
	_onContextMenuItemClick(@{@"menuItem": menuItem});
	} else {
	RCTLogWarn(@"Set onContextMenuItemClick to handle this event");
	}
	}

[aleclarson]

Also, #228 adds an onContextMenu prop, in case you want to implement a custom right-click menu.

[aleclarson]

If you have any ideas on how to improve this API, please open a new issue. Thanks!