Skip to content

Commit 81ed9fd

Browse files
christophpurrerappden
authored and
Saadnajmi
committed
Refactor handling of keyDown/keyUp (microsoft#1338)
This refactors / simplifies certain keyUp|Down event handling. It will make a later change (adding textInput handling for textInput fields) easier (to review) Co-authored-by: Scott Kyle <[email protected]>
1 parent 25a0b9b commit 81ed9fd

File tree

5 files changed

+89
-249
lines changed

5 files changed

+89
-249
lines changed

‎React/Views/RCTView.h‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
2525

2626
- (BOOL)becomeFirstResponder;
2727
- (BOOL)resignFirstResponder;
28+
29+
#if TARGET_OS_OSX
30+
- (BOOL)handleKeyboardEvent:(NSEvent *)event;
31+
#endif
2832
// ]TODO(OSS Candidate ISS#2710739)
2933

3034
/**

‎React/Views/RCTView.m‎

Lines changed: 20 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1619,177 +1619,38 @@ - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender
16191619
#pragma mark - Keyboard Events
16201620

16211621
#if TARGET_OS_OSX
1622-
NSString* const leftArrowPressKey = @"ArrowLeft";
1623-
NSString* const rightArrowPressKey = @"ArrowRight";
1624-
NSString* const upArrowPressKey = @"ArrowUp";
1625-
NSString* const downArrowPressKey = @"ArrowDown";
1626-
1627-
- (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event downPress:(BOOL)downPress {
1628-
// modifiers
1629-
BOOL capsLockKey = NO;
1630-
BOOL shiftKey = NO;
1631-
BOOL controlKey = NO;
1632-
BOOL optionKey = NO;
1633-
BOOL commandKey = NO;
1634-
BOOL numericPadKey = NO;
1635-
BOOL helpKey = NO;
1636-
BOOL functionKey = NO;
1637-
// commonly used key short-cuts
1638-
BOOL leftArrowKey = NO;
1639-
BOOL rightArrowKey = NO;
1640-
BOOL upArrowKey = NO;
1641-
BOOL downArrowKey = NO;
1642-
BOOL tabKeyPressed = NO;
1643-
BOOL escapeKeyPressed = NO;
1644-
NSString *key = event.charactersIgnoringModifiers;
1645-
if ([key length] == 0) {
1646-
return nil;
1647-
}
1648-
unichar const code = [key characterAtIndex:0];
1649-
1650-
// detect arrow key presses
1651-
if (code == NSLeftArrowFunctionKey) {
1652-
leftArrowKey = YES;
1653-
} else if (code == NSRightArrowFunctionKey) {
1654-
rightArrowKey = YES;
1655-
} else if (code == NSUpArrowFunctionKey) {
1656-
upArrowKey = YES;
1657-
} else if (code == NSDownArrowFunctionKey) {
1658-
downArrowKey = YES;
1659-
}
1660-
1661-
// detect special key presses via the key code
1662-
switch (event.keyCode) {
1663-
case 48: // Tab
1664-
tabKeyPressed = YES;
1665-
break;
1666-
case 53: // Escape
1667-
escapeKeyPressed = YES;
1668-
break;
1669-
default:
1670-
break;
1622+
- (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event {
1623+
BOOL keyDown = event.type == NSEventTypeKeyDown;
1624+
NSArray<NSString *> *validKeys = keyDown ? self.validKeysDown : self.validKeysUp;
1625+
NSString *key = [RCTViewKeyboardEvent keyFromEvent:event];
1626+
1627+
// Only post events for keys we care about
1628+
if (![validKeys containsObject:key]) {
1629+
return nil;
16711630
}
16721631

1673-
// detect modifier flags
1674-
if (event.modifierFlags & NSEventModifierFlagCapsLock) {
1675-
capsLockKey = YES;
1676-
} else if (event.modifierFlags & NSEventModifierFlagShift) {
1677-
shiftKey = YES;
1678-
} else if (event.modifierFlags & NSEventModifierFlagControl) {
1679-
controlKey = YES;
1680-
} else if (event.modifierFlags & NSEventModifierFlagOption) {
1681-
optionKey = YES;
1682-
} else if (event.modifierFlags & NSEventModifierFlagCommand) {
1683-
commandKey = YES;
1684-
} else if (event.modifierFlags & NSEventModifierFlagNumericPad) {
1685-
numericPadKey = YES;
1686-
} else if (event.modifierFlags & NSEventModifierFlagHelp) {
1687-
helpKey = YES;
1688-
} else if (event.modifierFlags & NSEventModifierFlagFunction) {
1689-
functionKey = YES;
1690-
}
1691-
1692-
RCTViewKeyboardEvent *keyboardEvent = nil;
1693-
// only post events for keys we care about
1694-
if (downPress) {
1695-
NSString *keyToReturn = [self keyIsValid:key left:leftArrowKey right:rightArrowKey up:upArrowKey down:downArrowKey tabKey:tabKeyPressed escapeKey:escapeKeyPressed validKeys:[self validKeysDown]];
1696-
if (keyToReturn != nil) {
1697-
keyboardEvent = [RCTViewKeyboardEvent keyDownEventWithReactTag:self.reactTag
1698-
capsLockKey:capsLockKey
1699-
shiftKey:shiftKey
1700-
ctrlKey:controlKey
1701-
altKey:optionKey
1702-
metaKey:commandKey
1703-
numericPadKey:numericPadKey
1704-
helpKey:helpKey
1705-
functionKey:functionKey
1706-
leftArrowKey:leftArrowKey
1707-
rightArrowKey:rightArrowKey
1708-
upArrowKey:upArrowKey
1709-
downArrowKey:downArrowKey
1710-
key:keyToReturn];
1711-
}
1712-
} else {
1713-
NSString *keyToReturn = [self keyIsValid:key left:leftArrowKey right:rightArrowKey up:upArrowKey down:downArrowKey tabKey:tabKeyPressed escapeKey:escapeKeyPressed validKeys:[self validKeysUp]];
1714-
if (keyToReturn != nil) {
1715-
keyboardEvent = [RCTViewKeyboardEvent keyUpEventWithReactTag:self.reactTag
1716-
capsLockKey:capsLockKey
1717-
shiftKey:shiftKey
1718-
ctrlKey:controlKey
1719-
altKey:optionKey
1720-
metaKey:commandKey
1721-
numericPadKey:numericPadKey
1722-
helpKey:helpKey
1723-
functionKey:functionKey
1724-
leftArrowKey:leftArrowKey
1725-
rightArrowKey:rightArrowKey
1726-
upArrowKey:upArrowKey
1727-
downArrowKey:downArrowKey
1728-
key:keyToReturn];
1632+
return [RCTViewKeyboardEvent keyEventFromEvent:event reactTag:self.reactTag];
1633+
}
1634+
1635+
- (BOOL)handleKeyboardEvent:(NSEvent *)event {
1636+
if (event.type == NSEventTypeKeyDown ? self.onKeyDown : self.onKeyUp) {
1637+
RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event];
1638+
if (keyboardEvent) {
1639+
[_eventDispatcher sendEvent:keyboardEvent];
1640+
return YES;
17291641
}
17301642
}
1731-
return keyboardEvent;
1732-
}
1733-
1734-
// check if the user typed key matches a key we need to send an event for
1735-
// translate key codes over to JS compatible keys
1736-
- (NSString*)keyIsValid:(NSString*)key left:(BOOL)leftArrowPressed right:(BOOL)rightArrowPressed up:(BOOL)upArrowPressed down:(BOOL)downArrowPressed tabKey:(BOOL)tabKeyPressed escapeKey:(BOOL)escapeKeyPressed validKeys:(NSArray<NSString*>*)validKeys {
1737-
NSString *keyToReturn = key;
1738-
1739-
// Allow the flexibility of defining special keys in multiple ways
1740-
BOOL enterKeyValidityCheck = [key isEqualToString:@"\r"] && ([validKeys containsObject:@"Enter"] || [validKeys containsObject:@"\r"]);
1741-
BOOL tabKeyValidityCheck = tabKeyPressed && ([validKeys containsObject:@"Tab"]); // tab has to be checked via a key code so we can't just use the key itself here
1742-
BOOL escapeKeyValidityCheck = escapeKeyPressed && ([validKeys containsObject:@"Esc"] || [validKeys containsObject:@"Escape"]); // escape has to be checked via a key code so we can't just use the key itself here
1743-
BOOL leftArrowValidityCheck = [validKeys containsObject:leftArrowPressKey] && leftArrowPressed;
1744-
BOOL rightArrowValidityCheck = [validKeys containsObject:rightArrowPressKey] && rightArrowPressed;
1745-
BOOL upArrowValidityCheck = [validKeys containsObject:upArrowPressKey] && upArrowPressed;
1746-
BOOL downArrowValidityCheck = [validKeys containsObject:downArrowPressKey] && downArrowPressed;
1747-
1748-
if (tabKeyValidityCheck) {
1749-
keyToReturn = @"Tab";
1750-
} else if (escapeKeyValidityCheck) {
1751-
keyToReturn = @"Escape";
1752-
} else if (enterKeyValidityCheck) {
1753-
keyToReturn = @"Enter";
1754-
} else if (leftArrowValidityCheck) {
1755-
keyToReturn = leftArrowPressKey;
1756-
} else if (rightArrowValidityCheck) {
1757-
keyToReturn = rightArrowPressKey;
1758-
} else if (upArrowValidityCheck) {
1759-
keyToReturn = upArrowPressKey;
1760-
} else if (downArrowValidityCheck) {
1761-
keyToReturn = downArrowPressKey;
1762-
} else if (![validKeys containsObject:key]) {
1763-
keyToReturn = nil;
1764-
}
1765-
1766-
return keyToReturn;
1643+
return NO;
17671644
}
17681645

17691646
- (void)keyDown:(NSEvent *)event {
1770-
if (self.onKeyDown == nil) {
1771-
[super keyDown:event];
1772-
return;
1773-
}
1774-
1775-
RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event downPress:YES];
1776-
if (keyboardEvent != nil) {
1777-
[_eventDispatcher sendEvent:keyboardEvent];
1778-
} else {
1647+
if (![self handleKeyboardEvent:event]) {
17791648
[super keyDown:event];
17801649
}
17811650
}
17821651

17831652
- (void)keyUp:(NSEvent *)event {
1784-
if (self.onKeyUp == nil) {
1785-
[super keyUp:event];
1786-
return;
1787-
}
1788-
1789-
RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event downPress:NO];
1790-
if (keyboardEvent != nil) {
1791-
[_eventDispatcher sendEvent:keyboardEvent];
1792-
} else {
1653+
if (![self handleKeyboardEvent:event]) {
17931654
[super keyUp:event];
17941655
}
17951656
}

‎React/Views/RCTViewKeyboardEvent.h‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,11 @@
77
#import <React/RCTComponentEvent.h>
88

99
@interface RCTViewKeyboardEvent : RCTComponentEvent
10-
+ (instancetype)keyDownEventWithReactTag:(NSNumber *)reactTag
11-
capsLockKey:(BOOL)capsLockKey
12-
shiftKey:(BOOL)shiftKey
13-
ctrlKey:(BOOL)controlKey
14-
altKey:(BOOL)optionKey
15-
metaKey:(BOOL)commandKey
16-
numericPadKey:(BOOL)numericPadKey
17-
helpKey:(BOOL)helpKey
18-
functionKey:(BOOL)functionKey
19-
leftArrowKey:(BOOL)leftArrowKey
20-
rightArrowKey:(BOOL)rightArrowKey
21-
upArrowKey:(BOOL)upArrowKey
22-
downArrowKey:(BOOL)downArrowKey
23-
key:(NSString *)key;
2410

25-
+ (instancetype)keyUpEventWithReactTag:(NSNumber *)reactTag
26-
capsLockKey:(BOOL)capsLockKey
27-
shiftKey:(BOOL)shiftKey
28-
ctrlKey:(BOOL)controlKey
29-
altKey:(BOOL)optionKey
30-
metaKey:(BOOL)commandKey
31-
numericPadKey:(BOOL)numericPadKey
32-
helpKey:(BOOL)helpKey
33-
functionKey:(BOOL)functionKey
34-
leftArrowKey:(BOOL)leftArrowKey
35-
rightArrowKey:(BOOL)rightArrowKey
36-
upArrowKey:(BOOL)upArrowKey
37-
downArrowKey:(BOOL)downArrowKey
38-
key:(NSString *)key;
11+
#if TARGET_OS_OSX // TODO(macOS GH#774)
12+
+ (NSDictionary *)bodyFromEvent:(NSEvent *)event;
13+
+ (NSString *)keyFromEvent:(NSEvent *)event;
14+
+ (instancetype)keyEventFromEvent:(NSEvent *)event reactTag:(NSNumber *)reactTag;
15+
#endif // TODO(macOS GH#774)
16+
3917
@end

‎React/Views/RCTViewKeyboardEvent.m‎

Lines changed: 58 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,69 +9,66 @@
99
#import <React/RCTAssert.h>
1010

1111
@implementation RCTViewKeyboardEvent
12-
// Keyboard mappings are aligned cross-platform as much as possible as per this doc https://github.com/microsoft/react-native-windows/blob/master/vnext/proposals/active/keyboard-reconcile-desktop.md
13-
+ (instancetype)keyDownEventWithReactTag:(NSNumber *)reactTag
14-
capsLockKey:(BOOL)capsLockKey
15-
shiftKey:(BOOL)shiftKey
16-
ctrlKey:(BOOL)controlKey
17-
altKey:(BOOL)optionKey
18-
metaKey:(BOOL)commandKey
19-
numericPadKey:(BOOL)numericPadKey
20-
helpKey:(BOOL)helpKey
21-
functionKey:(BOOL)functionKey
22-
leftArrowKey:(BOOL)leftArrowKey
23-
rightArrowKey:(BOOL)rightArrowKey
24-
upArrowKey:(BOOL)upArrowKey
25-
downArrowKey:(BOOL)downArrowKey
26-
key:(NSString *)key {
27-
RCTViewKeyboardEvent *event = [[self alloc] initWithName:@"keyDown"
28-
viewTag:reactTag
29-
body:@{ @"capsLockKey" : @(capsLockKey),
30-
@"shiftKey" : @(shiftKey),
31-
@"ctrlKey" : @(controlKey),
32-
@"altKey" : @(optionKey),
33-
@"metaKey" : @(commandKey),
34-
@"numericPadKey" : @(numericPadKey),
35-
@"helpKey" : @(helpKey),
36-
@"functionKey" : @(functionKey),
37-
@"ArrowLeft" : @(leftArrowKey),
38-
@"ArrowRight" : @(rightArrowKey),
39-
@"ArrowUp" : @(upArrowKey),
40-
@"ArrowDown" : @(downArrowKey),
41-
@"key" : key }];
42-
return event;
12+
13+
#if TARGET_OS_OSX // TODO(macOS GH#774)
14+
+ (NSDictionary *)bodyFromEvent:(NSEvent *)event
15+
{
16+
NSString *key = [self keyFromEvent:event];
17+
NSEventModifierFlags modifierFlags = event.modifierFlags;
18+
19+
return @{
20+
@"key" : key,
21+
@"capsLockKey" : (modifierFlags & NSEventModifierFlagCapsLock) ? @YES : @NO,
22+
@"shiftKey" : (modifierFlags & NSEventModifierFlagShift) ? @YES : @NO,
23+
@"ctrlKey" : (modifierFlags & NSEventModifierFlagControl) ? @YES : @NO,
24+
@"altKey" : (modifierFlags & NSEventModifierFlagOption) ? @YES : @NO,
25+
@"metaKey" : (modifierFlags & NSEventModifierFlagCommand) ? @YES : @NO,
26+
@"numericPadKey" : (modifierFlags & NSEventModifierFlagNumericPad) ? @YES : @NO,
27+
@"helpKey" : (modifierFlags & NSEventModifierFlagHelp) ? @YES : @NO,
28+
@"functionKey" : (modifierFlags & NSEventModifierFlagFunction) ? @YES : @NO,
29+
};
4330
}
4431

45-
+(instancetype)keyUpEventWithReactTag:(NSNumber *)reactTag
46-
capsLockKey:(BOOL)capsLockKey
47-
shiftKey:(BOOL)shiftKey
48-
ctrlKey:(BOOL)controlKey
49-
altKey:(BOOL)optionKey
50-
metaKey:(BOOL)commandKey
51-
numericPadKey:(BOOL)numericPadKey
52-
helpKey:(BOOL)helpKey
53-
functionKey:(BOOL)functionKey
54-
leftArrowKey:(BOOL)leftArrowKey
55-
rightArrowKey:(BOOL)rightArrowKey
56-
upArrowKey:(BOOL)upArrowKey
57-
downArrowKey:(BOOL)downArrowKey
58-
key:(NSString *)key {
59-
RCTViewKeyboardEvent *event = [[self alloc] initWithName:@"keyUp"
60-
viewTag:reactTag
61-
body:@{ @"capsLockKey" : @(capsLockKey),
62-
@"shiftKey" : @(shiftKey),
63-
@"ctrlKey" : @(controlKey),
64-
@"altKey" : @(optionKey),
65-
@"metaKey" : @(commandKey),
66-
@"numericPadKey" : @(numericPadKey),
67-
@"helpKey" : @(helpKey),
68-
@"functionKey" : @(functionKey),
69-
@"ArrowLeft" : @(leftArrowKey),
70-
@"ArrowRight" : @(rightArrowKey),
71-
@"ArrowUp" : @(upArrowKey),
72-
@"ArrowDown" : @(downArrowKey),
73-
@"key" : key }];
74-
return event;
32+
+ (NSString *)keyFromEvent:(NSEvent *)event
33+
{
34+
NSString *key = event.charactersIgnoringModifiers;
35+
unichar const code = key.length > 0 ? [key characterAtIndex:0] : 0;
36+
37+
if (event.keyCode == 48) {
38+
return @"Tab";
39+
} else if (event.keyCode == 53) {
40+
return @"Escape";
41+
} else if (code == NSEnterCharacter || code == NSNewlineCharacter || code == NSCarriageReturnCharacter) {
42+
return @"Enter";
43+
} else if (code == NSLeftArrowFunctionKey) {
44+
return @"ArrowLeft";
45+
} else if (code == NSRightArrowFunctionKey) {
46+
return @"ArrowRight";
47+
} else if (code == NSUpArrowFunctionKey) {
48+
return @"ArrowUp";
49+
} else if (code == NSDownArrowFunctionKey) {
50+
return @"ArrowDown";
51+
} else if (code == NSBackspaceCharacter || code == NSDeleteCharacter) {
52+
return @"Backspace";
53+
} else if (code == NSDeleteFunctionKey) {
54+
return @"Delete";
55+
}
56+
57+
return key;
58+
}
59+
60+
// Keyboard mappings are aligned cross-platform as much as possible as per this doc https://github.com/microsoft/react-native-windows/blob/master/vnext/proposals/active/keyboard-reconcile-desktop.md
61+
+ (instancetype)keyEventFromEvent:(NSEvent *)event reactTag:(NSNumber *)reactTag
62+
{
63+
// Ignore "dead keys" (key press that waits for another key to make a character)
64+
if (!event.charactersIgnoringModifiers.length) {
65+
return nil;
66+
}
67+
68+
return [[self alloc] initWithName:(event.type == NSEventTypeKeyDown ? @"keyDown" : @"keyUp")
69+
viewTag:reactTag
70+
body:[self bodyFromEvent:event]];
7571
}
72+
#endif // TODO(macOS GH#774)
7673

7774
@end

‎packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ class KeyEventExample extends React.Component<{}, State> {
5353
{Platform.OS === 'macos' ? (
5454
<View
5555
focusable={true}
56-
validKeysDown={['g', 'Tab', 'Esc', 'Enter', 'ArrowLeft']}
56+
validKeysDown={['g', 'Tab', 'Escape', 'Enter', 'ArrowLeft']}
5757
onKeyDown={this.onKeyDownEvent}
5858
validKeysUp={['c', 'd']}
5959
onKeyUp={this.onKeyUpEvent}>

0 commit comments

Comments
 (0)