react-native/React/Views/RCTModalHostView.m

263 lines
7.8 KiB
Mathematica
Raw Permalink Normal View History

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTModalHostView.h"
#import <UIKit/UIKit.h>
#import "RCTAssert.h"
#import "RCTBridge.h"
#import "RCTModalHostViewController.h"
#import "RCTTouchHandler.h"
#import "RCTUIManager.h"
#import "RCTUtils.h"
#import "UIView+React.h"
#if TARGET_OS_TV
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
#import "RCTTVRemoteHandler.h"
#endif
@implementation RCTModalHostView
{
__weak RCTBridge *_bridge;
BOOL _isPresented;
RCTModalHostViewController *_modalViewController;
RCTTouchHandler *_touchHandler;
UIView *_reactSubview;
#if TARGET_OS_TV
UITapGestureRecognizer *_menuButtonGestureRecognizer;
#else
UIInterfaceOrientation _lastKnownOrientation;
#endif
}
RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:coder)
- (instancetype)initWithBridge:(RCTBridge *)bridge
{
if ((self = [super initWithFrame:CGRectZero])) {
_bridge = bridge;
_modalViewController = [RCTModalHostViewController new];
UIView *containerView = [UIView new];
containerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
_modalViewController.view = containerView;
_touchHandler = [[RCTTouchHandler alloc] initWithBridge:bridge];
#if TARGET_OS_TV
_menuButtonGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(menuButtonPressed:)];
_menuButtonGestureRecognizer.allowedPressTypes = @[@(UIPressTypeMenu)];
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
self.tvRemoteHandler = [RCTTVRemoteHandler new];
#endif
_isPresented = NO;
__weak typeof(self) weakSelf = self;
_modalViewController.boundsDidChangeBlock = ^(CGRect newBounds) {
[weakSelf notifyForBoundsChange:newBounds];
};
}
return self;
}
#if TARGET_OS_TV
- (void)menuButtonPressed:(__unused UIGestureRecognizer *)gestureRecognizer
{
if (_onRequestClose) {
_onRequestClose(nil);
}
}
- (void)setOnRequestClose:(RCTDirectEventBlock)onRequestClose
{
_onRequestClose = onRequestClose;
if (_reactSubview) {
if (_onRequestClose && _menuButtonGestureRecognizer) {
[_reactSubview addGestureRecognizer:_menuButtonGestureRecognizer];
} else {
[_reactSubview removeGestureRecognizer:_menuButtonGestureRecognizer];
}
}
}
#endif
- (void)notifyForBoundsChange:(CGRect)newBounds
{
if (_reactSubview && _isPresented) {
[_bridge.uiManager setSize:newBounds.size forView:_reactSubview];
[self notifyForOrientationChange];
}
}
- (void)notifyForOrientationChange
{
#if !TARGET_OS_TV
if (!_onOrientationChange) {
return;
}
UIInterfaceOrientation currentOrientation = [RCTSharedApplication() statusBarOrientation];
if (currentOrientation == _lastKnownOrientation) {
return;
}
_lastKnownOrientation = currentOrientation;
BOOL isPortrait = currentOrientation == UIInterfaceOrientationPortrait || currentOrientation == UIInterfaceOrientationPortraitUpsideDown;
NSDictionary *eventPayload =
@{
@"orientation": isPortrait ? @"portrait" : @"landscape",
};
_onOrientationChange(eventPayload);
#endif
}
- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
{
RCTAssert(_reactSubview == nil, @"Modal view can only have one subview");
[super insertReactSubview:subview atIndex:atIndex];
[_touchHandler attachToView:subview];
#if TARGET_OS_TV
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
for (NSString *key in [self.tvRemoteHandler.tvRemoteGestureRecognizers allKeys]) {
if (![key isEqualToString:RCTTVRemoteEventMenu]) {
[subview addGestureRecognizer:self.tvRemoteHandler.tvRemoteGestureRecognizers[key]];
}
}
if (_onRequestClose) {
[subview addGestureRecognizer:_menuButtonGestureRecognizer];
}
#endif
subview.autoresizingMask = UIViewAutoresizingFlexibleHeight |
UIViewAutoresizingFlexibleWidth;
[_modalViewController.view insertSubview:subview atIndex:0];
_reactSubview = subview;
}
- (void)removeReactSubview:(UIView *)subview
{
RCTAssert(subview == _reactSubview, @"Cannot remove view other than modal view");
// Superclass (category) removes the `subview` from actual `superview`.
[super removeReactSubview:subview];
[_touchHandler detachFromView:subview];
#if TARGET_OS_TV
if (_menuButtonGestureRecognizer) {
[subview removeGestureRecognizer:_menuButtonGestureRecognizer];
}
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
for (UIGestureRecognizer *gr in self.tvRemoteHandler.tvRemoteGestureRecognizers) {
[subview removeGestureRecognizer:gr];
}
#endif
_reactSubview = nil;
}
- (void)didUpdateReactSubviews
{
// Do nothing, as subview (singular) is managed by `insertReactSubview:atIndex:`
}
- (void)dismissModalViewController
{
if (_isPresented) {
[_delegate dismissModalHostView:self withViewController:_modalViewController animated:[self hasAnimationType]];
_isPresented = NO;
}
}
- (void)didMoveToWindow
{
[super didMoveToWindow];
// In the case where there is a LayoutAnimation, we will be reinserted into the view hierarchy but only for aesthetic purposes.
// In such a case, we should NOT represent the <Modal>.
if (!self.userInteractionEnabled && ![self.superview.reactSubviews containsObject:self]) {
return;
}
if (!_isPresented && self.window) {
RCTAssert(self.reactViewController, @"Can't present modal view controller without a presenting view controller");
#if !TARGET_OS_TV
_modalViewController.supportedInterfaceOrientations = [self supportedOrientationsMask];
#endif
if ([self.animationType isEqualToString:@"fade"]) {
_modalViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
} else if ([self.animationType isEqualToString:@"slide"]) {
_modalViewController.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
}
if (self.presentationStyle != UIModalPresentationNone) {
_modalViewController.modalPresentationStyle = self.presentationStyle;
}
[_delegate presentModalHostView:self withViewController:_modalViewController animated:[self hasAnimationType]];
_isPresented = YES;
}
}
- (void)didMoveToSuperview
{
[super didMoveToSuperview];
if (_isPresented && !self.superview) {
[self dismissModalViewController];
}
}
- (void)invalidate
{
dispatch_async(dispatch_get_main_queue(), ^{
[self dismissModalViewController];
});
}
- (BOOL)isTransparent
{
return _modalViewController.modalPresentationStyle == UIModalPresentationOverFullScreen;
}
- (BOOL)hasAnimationType
{
return ![self.animationType isEqualToString:@"none"];
}
- (void)setTransparent:(BOOL)transparent
{
if (self.isTransparent != transparent) {
return;
}
_modalViewController.modalPresentationStyle = transparent ? UIModalPresentationOverFullScreen : UIModalPresentationFullScreen;
}
#if !TARGET_OS_TV
- (UIInterfaceOrientationMask)supportedOrientationsMask
{
if (_supportedOrientations.count == 0) {
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
return UIInterfaceOrientationMaskAll;
} else {
return UIInterfaceOrientationMaskPortrait;
}
}
UIInterfaceOrientationMask supportedOrientations = 0;
for (NSString *orientation in _supportedOrientations) {
if ([orientation isEqualToString:@"portrait"]) {
supportedOrientations |= UIInterfaceOrientationMaskPortrait;
} else if ([orientation isEqualToString:@"portrait-upside-down"]) {
supportedOrientations |= UIInterfaceOrientationMaskPortraitUpsideDown;
} else if ([orientation isEqualToString:@"landscape"]) {
supportedOrientations |= UIInterfaceOrientationMaskLandscape;
} else if ([orientation isEqualToString:@"landscape-left"]) {
supportedOrientations |= UIInterfaceOrientationMaskLandscapeLeft;
} else if ([orientation isEqualToString:@"landscape-right"]) {
supportedOrientations |= UIInterfaceOrientationMaskLandscapeRight;
}
}
return supportedOrientations;
}
#endif
@end