Skip to content

Commit 4b9ab10

Browse files
christophpurrerappden
christophpurrer
and
appden
authored
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 c3e847a commit 4b9ab10

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
@@ -1573,177 +1573,38 @@ - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender
15731573
#pragma mark - Keyboard Events
15741574

15751575
#if TARGET_OS_OSX
1576-
NSString* const leftArrowPressKey = @"ArrowLeft";
1577-
NSString* const rightArrowPressKey = @"ArrowRight";
1578-
NSString* const upArrowPressKey = @"ArrowUp";
1579-
NSString* const downArrowPressKey = @"ArrowDown";
1580-
1581-
- (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event downPress:(BOOL)downPress {
1582-
// modifiers
1583-
BOOL capsLockKey = NO;
1584-
BOOL shiftKey = NO;
1585-
BOOL controlKey = NO;
1586-
BOOL optionKey = NO;
1587-
BOOL commandKey = NO;
1588-
BOOL numericPadKey = NO;
1589-
BOOL helpKey = NO;
1590-
BOOL functionKey = NO;
1591-
// commonly used key short-cuts
1592-
BOOL leftArrowKey = NO;
1593-
BOOL rightArrowKey = NO;
1594-
BOOL upArrowKey = NO;
1595-
BOOL downArrowKey = NO;
1596-
BOOL tabKeyPressed = NO;
1597-
BOOL escapeKeyPressed = NO;
1598-
NSString *key = event.charactersIgnoringModifiers;
1599-
if ([key length] == 0) {
1600-
return nil;
1601-
}
1602-
unichar const code = [key characterAtIndex:0];
1603-
1604-
// detect arrow key presses
1605-
if (code == NSLeftArrowFunctionKey) {
1606-
leftArrowKey = YES;
1607-
} else if (code == NSRightArrowFunctionKey) {
1608-
rightArrowKey = YES;
1609-
} else if (code == NSUpArrowFunctionKey) {
1610-
upArrowKey = YES;
1611-
} else if (code == NSDownArrowFunctionKey) {
1612-
downArrowKey = YES;
1613-
}
1614-
1615-
// detect special key presses via the key code
1616-
switch (event.keyCode) {
1617-
case 48: // Tab
1618-
tabKeyPressed = YES;
1619-
break;
1620-
case 53: // Escape
1621-
escapeKeyPressed = YES;
1622-
break;
1623-
default:
1624-
break;
1576+
- (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event {
1577+
BOOL keyDown = event.type == NSEventTypeKeyDown;
1578+
NSArray<NSString *> *validKeys = keyDown ? self.validKeysDown : self.validKeysUp;
1579+
NSString *key = [RCTViewKeyboardEvent keyFromEvent:event];
1580+
1581+
// Only post events for keys we care about
1582+
if (![validKeys containsObject:key]) {
1583+
return nil;
16251584
}
16261585

1627-
// detect modifier flags
1628-
if (event.modifierFlags & NSEventModifierFlagCapsLock) {
1629-
capsLockKey = YES;
1630-
} else if (event.modifierFlags & NSEventModifierFlagShift) {
1631-
shiftKey = YES;
1632-
} else if (event.modifierFlags & NSEventModifierFlagControl) {
1633-
controlKey = YES;
1634-
} else if (event.modifierFlags & NSEventModifierFlagOption) {
1635-
optionKey = YES;
1636-
} else if (event.modifierFlags & NSEventModifierFlagCommand) {
1637-
commandKey = YES;
1638-
} else if (event.modifierFlags & NSEventModifierFlagNumericPad) {
1639-
numericPadKey = YES;
1640-
} else if (event.modifierFlags & NSEventModifierFlagHelp) {
1641-
helpKey = YES;
1642-
} else if (event.modifierFlags & NSEventModifierFlagFunction) {
1643-
functionKey = YES;
1644-
}
1645-
1646-
RCTViewKeyboardEvent *keyboardEvent = nil;
1647-
// only post events for keys we care about
1648-
if (downPress) {
1649-
NSString *keyToReturn = [self keyIsValid:key left:leftArrowKey right:rightArrowKey up:upArrowKey down:downArrowKey tabKey:tabKeyPressed escapeKey:escapeKeyPressed validKeys:[self validKeysDown]];
1650-
if (keyToReturn != nil) {
1651-
keyboardEvent = [RCTViewKeyboardEvent keyDownEventWithReactTag:self.reactTag
1652-
capsLockKey:capsLockKey
1653-
shiftKey:shiftKey
1654-
ctrlKey:controlKey
1655-
altKey:optionKey
1656-
metaKey:commandKey
1657-
numericPadKey:numericPadKey
1658-
helpKey:helpKey
1659-
functionKey:functionKey
1660-
leftArrowKey:leftArrowKey
1661-
rightArrowKey:rightArrowKey
1662-
upArrowKey:upArrowKey
1663-
downArrowKey:downArrowKey
1664-
key:keyToReturn];
1665-
}
1666-
} else {
1667-
NSString *keyToReturn = [self keyIsValid:key left:leftArrowKey right:rightArrowKey up:upArrowKey down:downArrowKey tabKey:tabKeyPressed escapeKey:escapeKeyPressed validKeys:[self validKeysUp]];
1668-
if (keyToReturn != nil) {
1669-
keyboardEvent = [RCTViewKeyboardEvent keyUpEventWithReactTag:self.reactTag
1670-
capsLockKey:capsLockKey
1671-
shiftKey:shiftKey
1672-
ctrlKey:controlKey
1673-
altKey:optionKey
1674-
metaKey:commandKey
1675-
numericPadKey:numericPadKey
1676-
helpKey:helpKey
1677-
functionKey:functionKey
1678-
leftArrowKey:leftArrowKey
1679-
rightArrowKey:rightArrowKey
1680-
upArrowKey:upArrowKey
1681-
downArrowKey:downArrowKey
1682-
key:keyToReturn];
1586+
return [RCTViewKeyboardEvent keyEventFromEvent:event reactTag:self.reactTag];
1587+
}
1588+
1589+
- (BOOL)handleKeyboardEvent:(NSEvent *)event {
1590+
if (event.type == NSEventTypeKeyDown ? self.onKeyDown : self.onKeyUp) {
1591+
RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event];
1592+
if (keyboardEvent) {
1593+
[_eventDispatcher sendEvent:keyboardEvent];
1594+
return YES;
16831595
}
16841596
}
1685-
return keyboardEvent;
1686-
}
1687-
1688-
// check if the user typed key matches a key we need to send an event for
1689-
// translate key codes over to JS compatible keys
1690-
- (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 {
1691-
NSString *keyToReturn = key;
1692-
1693-
// Allow the flexibility of defining special keys in multiple ways
1694-
BOOL enterKeyValidityCheck = [key isEqualToString:@"\r"] && ([validKeys containsObject:@"Enter"] || [validKeys containsObject:@"\r"]);
1695-
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
1696-
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
1697-
BOOL leftArrowValidityCheck = [validKeys containsObject:leftArrowPressKey] && leftArrowPressed;
1698-
BOOL rightArrowValidityCheck = [validKeys containsObject:rightArrowPressKey] && rightArrowPressed;
1699-
BOOL upArrowValidityCheck = [validKeys containsObject:upArrowPressKey] && upArrowPressed;
1700-
BOOL downArrowValidityCheck = [validKeys containsObject:downArrowPressKey] && downArrowPressed;
1701-
1702-
if (tabKeyValidityCheck) {
1703-
keyToReturn = @"Tab";
1704-
} else if (escapeKeyValidityCheck) {
1705-
keyToReturn = @"Escape";
1706-
} else if (enterKeyValidityCheck) {
1707-
keyToReturn = @"Enter";
1708-
} else if (leftArrowValidityCheck) {
1709-
keyToReturn = leftArrowPressKey;
1710-
} else if (rightArrowValidityCheck) {
1711-
keyToReturn = rightArrowPressKey;
1712-
} else if (upArrowValidityCheck) {
1713-
keyToReturn = upArrowPressKey;
1714-
} else if (downArrowValidityCheck) {
1715-
keyToReturn = downArrowPressKey;
1716-
} else if (![validKeys containsObject:key]) {
1717-
keyToReturn = nil;
1718-
}
1719-
1720-
return keyToReturn;
1597+
return NO;
17211598
}
17221599

17231600
- (void)keyDown:(NSEvent *)event {
1724-
if (self.onKeyDown == nil) {
1725-
[super keyDown:event];
1726-
return;
1727-
}
1728-
1729-
RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event downPress:YES];
1730-
if (keyboardEvent != nil) {
1731-
[_eventDispatcher sendEvent:keyboardEvent];
1732-
} else {
1601+
if (![self handleKeyboardEvent:event]) {
17331602
[super keyDown:event];
17341603
}
17351604
}
17361605

17371606
- (void)keyUp:(NSEvent *)event {
1738-
if (self.onKeyUp == nil) {
1739-
[super keyUp:event];
1740-
return;
1741-
}
1742-
1743-
RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event downPress:NO];
1744-
if (keyboardEvent != nil) {
1745-
[_eventDispatcher sendEvent:keyboardEvent];
1746-
} else {
1607+
if (![self handleKeyboardEvent:event]) {
17471608
[super keyUp:event];
17481609
}
17491610
}

‎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)