Permalink
Browse files

Add <Modal /> component

Summary:
Create Modal component that can be used to present content modally.
  • Loading branch information...
a2 committed Jul 28, 2015
1 parent f53c95c commit 7d19ff3dcb3f5e51cc8c3abe8f2638b2a394253c
@@ -0,0 +1,99 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+ Modal,
+ StyleSheet,
+ Text,
+ TouchableHighlight,
+ View,
+} = React;
+
+exports.displayName = (undefined: ?string);
+exports.framework = 'React';
+exports.title = '<Modal>';
+exports.description = 'Component for presenting modal views.';
+
+var ModalExample = React.createClass({
+ getInitialState: function() {
+ return {
+ openModal: null,
+ };
+ },
+
+ _closeModal: function() {
+ this.setState({openModal: null});
+ },
+
+ _openAnimatedModal: function() {
+ this.setState({openModal: 'animated'});
+ },
+
+ _openNotAnimatedModal: function() {
+ this.setState({openModal: 'not-animated'});
+ },
+
+ render: function() {
+ return (
+ <View>
+ <Modal animated={true} visible={this.state.openModal === 'animated'}>
+ <View style={styles.container}>
+ <Text>This modal was presented with animation.</Text>
+ <TouchableHighlight underlayColor="#a9d9d4" onPress={this._closeModal}>
+ <Text>Close</Text>
+ </TouchableHighlight>
+ </View>
+ </Modal>
+
+ <Modal visible={this.state.openModal === 'not-animated'}>
+ <View style={styles.container}>
+ <Text>This modal was presented immediately, without animation.</Text>
+ <TouchableHighlight underlayColor="#a9d9d4" onPress={this._closeModal}>
+ <Text>Close</Text>
+ </TouchableHighlight>
+ </View>
+ </Modal>
+
+ <TouchableHighlight underlayColor="#a9d9d4" onPress={this._openAnimatedModal}>
+ <Text>Present Animated</Text>
+ </TouchableHighlight>
+
+ <TouchableHighlight underlayColor="#a9d9d4" onPress={this._openNotAnimatedModal}>
+ <Text>Present Without Animation</Text>
+ </TouchableHighlight>
+ </View>
+ );
+ },
+});
+
+exports.examples = [
+ {
+ title: 'Modal Presentation',
+ description: 'Modals can be presented with or without animation',
+ render: () => <ModalExample />,
+ },
+];
+
+var styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ backgroundColor: '#f5fcff',
+ flex: 1,
+ justifyContent: 'center',
+ },
+});
@@ -37,6 +37,7 @@ var COMPONENTS = [
require('./ListViewGridLayoutExample'),
require('./ListViewPagingExample'),
require('./MapViewExample'),
+ require('./ModalExample'),
require('./Navigator/NavigatorExample'),
require('./NavigatorIOSColorsExample'),
require('./NavigatorIOSExample'),
View
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Modal
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var requireNativeComponent = require('requireNativeComponent');
+var RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
+
+class Modal extends React.Component {
+ render(): ?ReactElement {
+ if (this.props.visible === false) {
+ return null;
+ }
+
+ return (
+ <RCTModalHostView animated={this.props.animated} style={styles.modal}>
+ <View style={styles.container}>
+ {this.props.children}
+ </View>
+ </RCTModalHostView>
+ );
+ }
+}
+
+var styles = StyleSheet.create({
+ modal: {
+ position: 'absolute',
+ },
+ container: {
+ left: 0,
+ position: 'absolute',
+ top: 0,
+ }
+});
+
+module.exports = Modal;
@@ -24,6 +24,7 @@ var ReactNative = Object.assign(Object.create(require('React')), {
Image: require('Image'),
ListView: require('ListView'),
MapView: require('MapView'),
+ Modal: require('Modal'),
Navigator: require('Navigator'),
NavigatorIOS: require('NavigatorIOS'),
PickerIOS: require('PickerIOS'),
View
@@ -261,7 +261,7 @@ - (void)setFrame:(CGRect)frame
{
super.frame = frame;
if (self.reactTag && _bridge.isValid) {
- [_bridge.uiManager setFrame:frame forRootView:self];
+ [_bridge.uiManager setFrame:frame forView:self];
}
}
@@ -40,10 +40,10 @@
- (UIView *)viewForReactTag:(NSNumber *)reactTag;
/**
- * Update the frame of a root view. This might be in response to a screen rotation
+ * Update the frame of a view. This might be in response to a screen rotation
* or some other layout event outside of the React-managed view hierarchy.
*/
-- (void)setFrame:(CGRect)frame forRootView:(UIView *)rootView;
+- (void)setFrame:(CGRect)frame forView:(UIView *)view;
/**
* Update the background color of a root view. This is usually triggered by
@@ -368,13 +368,11 @@ - (UIView *)viewForReactTag:(NSNumber *)reactTag
return _viewRegistry[reactTag];
}
-- (void)setFrame:(CGRect)frame forRootView:(UIView *)rootView
+- (void)setFrame:(CGRect)frame forView:(UIView *)view
{
RCTAssertMainThread();
- NSNumber *reactTag = rootView.reactTag;
- RCTAssert(RCTIsReactRootView(reactTag), @"Specified view %@ is not a root view", reactTag);
-
+ NSNumber *reactTag = view.reactTag;
dispatch_async(_shadowQueue, ^{
RCTShadowView *rootShadowView = _shadowViewRegistry[reactTag];
RCTAssert(rootShadowView != nil, @"Could not locate root view with tag #%@", reactTag);
@@ -67,6 +67,9 @@
63F014C01B02080B003B75D2 /* RCTPointAnnotation.m in Sources */ = {isa = PBXBuildFile; fileRef = 63F014BF1B02080B003B75D2 /* RCTPointAnnotation.m */; };
830A229E1A66C68A008503DA /* RCTRootView.m in Sources */ = {isa = PBXBuildFile; fileRef = 830A229D1A66C68A008503DA /* RCTRootView.m */; };
832348161A77A5AA00B55238 /* Layout.c in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FC71A68125100A75B9A /* Layout.c */; };
+ 83392EB31B6634E10013B15F /* RCTModalHostViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 83392EB21B6634E10013B15F /* RCTModalHostViewController.m */; };
+ 83A1FE8C1B62640A00BE0E65 /* RCTModalHostView.m in Sources */ = {isa = PBXBuildFile; fileRef = 83A1FE8B1B62640A00BE0E65 /* RCTModalHostView.m */; };
+ 83A1FE8F1B62643A00BE0E65 /* RCTModalHostViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 83A1FE8E1B62643A00BE0E65 /* RCTModalHostViewManager.m */; };
83CBBA511A601E3B00E9B192 /* RCTAssert.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CBBA4B1A601E3B00E9B192 /* RCTAssert.m */; };
83CBBA521A601E3B00E9B192 /* RCTLog.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CBBA4E1A601E3B00E9B192 /* RCTLog.m */; };
83CBBA531A601E3B00E9B192 /* RCTUtils.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CBBA501A601E3B00E9B192 /* RCTUtils.m */; };
@@ -218,6 +221,12 @@
830213F31A654E0800B993E6 /* RCTBridgeModule.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTBridgeModule.h; sourceTree = "<group>"; };
830A229C1A66C68A008503DA /* RCTRootView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRootView.h; sourceTree = "<group>"; };
830A229D1A66C68A008503DA /* RCTRootView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTRootView.m; sourceTree = "<group>"; };
+ 83392EB11B6634E10013B15F /* RCTModalHostViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTModalHostViewController.h; sourceTree = "<group>"; };
+ 83392EB21B6634E10013B15F /* RCTModalHostViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModalHostViewController.m; sourceTree = "<group>"; };
+ 83A1FE8A1B62640A00BE0E65 /* RCTModalHostView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTModalHostView.h; sourceTree = "<group>"; };
+ 83A1FE8B1B62640A00BE0E65 /* RCTModalHostView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModalHostView.m; sourceTree = "<group>"; };
+ 83A1FE8D1B62643A00BE0E65 /* RCTModalHostViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTModalHostViewManager.h; sourceTree = "<group>"; };
+ 83A1FE8E1B62643A00BE0E65 /* RCTModalHostViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModalHostViewManager.m; sourceTree = "<group>"; };
83BEE46C1A6D19BC00B5863B /* RCTSparseArray.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSparseArray.h; sourceTree = "<group>"; };
83BEE46D1A6D19BC00B5863B /* RCTSparseArray.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSparseArray.m; sourceTree = "<group>"; };
83CBBA2E1A601D0E00E9B192 /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -317,6 +326,12 @@
14435CE21AAC4AE100FC20F4 /* RCTMap.m */,
14435CE31AAC4AE100FC20F4 /* RCTMapManager.h */,
14435CE41AAC4AE100FC20F4 /* RCTMapManager.m */,
+ 83A1FE8A1B62640A00BE0E65 /* RCTModalHostView.h */,
+ 83A1FE8B1B62640A00BE0E65 /* RCTModalHostView.m */,
+ 83392EB11B6634E10013B15F /* RCTModalHostViewController.h */,
+ 83392EB21B6634E10013B15F /* RCTModalHostViewController.m */,
+ 83A1FE8D1B62643A00BE0E65 /* RCTModalHostViewManager.h */,
+ 83A1FE8E1B62643A00BE0E65 /* RCTModalHostViewManager.m */,
13B0800C1A69489C00A75B9A /* RCTNavigator.h */,
13B0800D1A69489C00A75B9A /* RCTNavigator.m */,
13B0800E1A69489C00A75B9A /* RCTNavigatorManager.h */,
@@ -359,6 +374,7 @@
137327E41AA5CF210034F82E /* RCTTabBarItemManager.m */,
137327E51AA5CF210034F82E /* RCTTabBarManager.h */,
137327E61AA5CF210034F82E /* RCTTabBarManager.m */,
+ E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationLineType.h */,
13E0674F1A70F44B002CDEE1 /* RCTView.h */,
13E067501A70F44B002CDEE1 /* RCTView.m */,
13442BF41AA90E0B0037E5B0 /* RCTViewControllerProtocol.h */,
@@ -373,7 +389,6 @@
13B080241A694A8400A75B9A /* RCTWrapperViewController.m */,
13E067531A70F44B002CDEE1 /* UIView+React.h */,
13E067541A70F44B002CDEE1 /* UIView+React.m */,
- E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationLineType.h */,
);
path = Views;
sourceTree = "<group>";
@@ -607,19 +622,22 @@
13C156061AB1A2840079392D /* RCTWebViewManager.m in Sources */,
58114A161AAE854800E7D092 /* RCTPicker.m in Sources */,
137327E81AA5CF210034F82E /* RCTTabBarItem.m in Sources */,
+ 83A1FE8C1B62640A00BE0E65 /* RCTModalHostView.m in Sources */,
13E067551A70F44B002CDEE1 /* RCTShadowView.m in Sources */,
131B6AF51AF1093D00FFC3E0 /* RCTSegmentedControlManager.m in Sources */,
58114A171AAE854800E7D092 /* RCTPickerManager.m in Sources */,
13B0801A1A69489C00A75B9A /* RCTNavigator.m in Sources */,
137327E71AA5CF210034F82E /* RCTTabBar.m in Sources */,
00C1A2B31AC0B7E000E89A1C /* RCTDevMenu.m in Sources */,
63F014C01B02080B003B75D2 /* RCTPointAnnotation.m in Sources */,
+ 83392EB31B6634E10013B15F /* RCTModalHostViewController.m in Sources */,
14435CE51AAC4AE100FC20F4 /* RCTMap.m in Sources */,
134FCB3E1A6E7F0800051CC8 /* RCTWebViewExecutor.m in Sources */,
13B0801C1A69489C00A75B9A /* RCTNavItem.m in Sources */,
1385D0341B665AAE000A309B /* RCTModuleMap.m in Sources */,
1403F2B31B0AE60700C2A9A4 /* RCTPerfStats.m in Sources */,
83CBBA691A601EF300E9B192 /* RCTEventDispatcher.m in Sources */,
+ 83A1FE8F1B62643A00BE0E65 /* RCTModalHostViewManager.m in Sources */,
13E0674A1A70F434002CDEE1 /* RCTUIManager.m in Sources */,
138D6A141B53CD290074A87E /* RCTCache.m in Sources */,
13B0801B1A69489C00A75B9A /* RCTNavigatorManager.m in Sources */,
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+@class RCTBridge;
+
+@interface RCTModalHostView : UIView
+
+@property (nonatomic, assign, getter=isAnimated) BOOL animated;
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
+
+@end
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTModalHostView.h"
+
+#import "RCTAssert.h"
+#import "RCTBridge.h"
+#import "RCTModalHostViewController.h"
+#import "RCTTouchHandler.h"
+#import "RCTUIManager.h"
+#import "UIView+React.h"
+
+@implementation RCTModalHostView
+{
+ RCTBridge *_bridge;
+ BOOL _hasModalView;
+ RCTModalHostViewController *_modalViewController;
+ RCTTouchHandler *_touchHandler;
+}
+
+RCT_NOT_IMPLEMENTED(-initWithFrame:(CGRect)frame)
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+ if ((self = [super initWithFrame:CGRectZero])) {
+ _bridge = bridge;
+ _modalViewController = [[RCTModalHostViewController alloc] init];
+ _touchHandler = [[RCTTouchHandler alloc] initWithBridge:bridge];
+
+ __weak RCTModalHostView *weakSelf = self;
+ _modalViewController.boundsDidChangeBlock = ^(CGRect newBounds) {
+ [weakSelf notifyForBoundsChange:newBounds];
+ };
+ }
+
+ return self;
+}
+
+- (void)notifyForBoundsChange:(CGRect)newBounds
+{
+ if (_hasModalView) {
+ [_bridge.uiManager setFrame:newBounds forView:_modalViewController.view];
+ }
+}
+
+- (NSArray *)reactSubviews
+{
+ return _hasModalView ? @[_modalViewController.view] : @[];
+}
+
+- (void)insertReactSubview:(UIView *)subview atIndex:(__unused NSInteger)atIndex
+{
+ [subview addGestureRecognizer:_touchHandler];
+ _modalViewController.view = subview;
+ _hasModalView = YES;
+}
+
+- (void)removeReactSubview:(UIView *)subview
+{
+ RCTAssert(subview == _modalViewController.view, @"Cannot remove view other than modal view");
+ _modalViewController.view = nil;
+ _hasModalView = NO;
+}
+
+- (void)didMoveToSuperview
+{
+ [super didMoveToSuperview];
+
+ if (self.superview) {
+ [self.backingViewController presentViewController:_modalViewController animated:self.animated completion:nil];
+ } else {
+ [_modalViewController dismissViewControllerAnimated:self.animated completion:nil];
+ }
+}
+
+@end
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+@interface RCTModalHostViewController : UIViewController
+
+@property (nonatomic, copy) void (^boundsDidChangeBlock)(CGRect newBounds);
+
+@end
Oops, something went wrong.

0 comments on commit 7d19ff3

Please sign in to comment.