diff --git a/README.md b/README.md index 2992404b..57d96157 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,6 @@ Exported modules: * [`ActivityIndicator`](docs/components/ActivityIndicator.md) * [`Image`](docs/components/Image.md) * [`ListView`](docs/components/ListView.md) - * [`Portal`](docs/components/Portal.md) * [`ScrollView`](docs/components/ScrollView.md) * [`Text`](docs/components/Text.md) * [`TextInput`](docs/components/TextInput.md) diff --git a/src/apis/AppRegistry/ReactNativeApp.js b/src/apis/AppRegistry/ReactNativeApp.js index 8f9c9d76..09bc47fb 100644 --- a/src/apis/AppRegistry/ReactNativeApp.js +++ b/src/apis/AppRegistry/ReactNativeApp.js @@ -1,4 +1,3 @@ -import Portal from '../../components/Portal' import React, { Component, PropTypes } from 'react' import ReactDOM from 'react-dom' import StyleSheet from '../StyleSheet' @@ -16,25 +15,15 @@ class ReactNativeApp extends Component { return ( - - + ) } - - _createRootRef = (component) => { - this._root = component - } - - _handleModalVisibilityChange = (modalVisible) => { - ReactDOM.findDOMNode(this._root).setAttribute('aria-hidden', `${modalVisible}`) - } } const styles = StyleSheet.create({ /** - * Ensure that the application covers the whole screen. This prevents the - * Portal content from being clipped. + * Ensure that the application covers the whole screen. */ appContainer: { position: 'absolute', diff --git a/src/components/Portal/index.js b/src/components/Portal/index.js deleted file mode 100644 index ba81ea1c..00000000 --- a/src/components/Portal/index.js +++ /dev/null @@ -1,153 +0,0 @@ -/** - * Copyright 2015-present, Nicolas Gallagher - * Copyright 2004-present, Facebook Inc. - * All Rights Reserved. - * - * @flow - */ - -import Platform from '../../apis/Platform' -import React, { Component, PropTypes } from 'react' -import StyleSheet from '../../apis/StyleSheet' -import View from '../View' - -let _portalRef: any -// unique identifiers for modals -let lastUsedTag = 0 - -/** - * A container that renders all the modals on top of everything else in the application. - */ -class Portal extends Component { - static propTypes = { - onModalVisibilityChanged: PropTypes.func.isRequired - }; - - /** - * Create a new unique tag. - */ - static allocateTag(): string { - return `__modal_${++lastUsedTag}` - } - - /** - * Render a new modal. - */ - static showModal(tag: string, component: any) { - if (!_portalRef) { - console.error('Calling showModal but no "Portal" has been rendered.') - return - } - _portalRef._showModal(tag, component) - } - - /** - * Remove a modal from the collection of modals to be rendered. - */ - static closeModal(tag: string) { - if (!_portalRef) { - console.error('Calling closeModal but no "Portal" has been rendered.') - return - } - _portalRef._closeModal(tag) - } - - /** - * Get an array of all the open modals, as identified by their tag string. - */ - static getOpenModals(): Array { - if (!_portalRef) { - console.error('Calling getOpenModals but no "Portal" has been rendered.') - return [] - } - return _portalRef._getOpenModals() - } - - static notifyAccessibilityService() { - if (!_portalRef) { - console.error('Calling closeModal but no "Portal" has been rendered.') - return - } - _portalRef._notifyAccessibilityService() - } - - constructor(props) { - super(props) - this.state = { modals: {} } - this._closeModal = this._closeModal.bind(this) - this._getOpenModals = this._getOpenModals.bind(this) - this._showModal = this._showModal.bind(this) - } - - render() { - _portalRef = this - if (!this.state.modals) { return null } - const modals = [] - for (const tag in this.state.modals) { - modals.push(this.state.modals[tag]) - } - if (modals.length === 0) { return null } - - return ( - - {modals} - - ) - } - - _closeModal(tag: string) { - if (!this.state.modals.hasOwnProperty(tag)) { - return - } - // We are about to close last modal, so Portal will disappear. - // Let's enable accessibility for application view. - if (this._getOpenModals().length === 1) { - this.props.onModalVisibilityChanged(false) - } - // This way state is chained through multiple calls to - // _showModal, _closeModal correctly. - this.setState((state) => { - const modals = state.modals - delete modals[tag] - return { modals } - }) - } - - _getOpenModals(): Array { - return Object.keys(this.state.modals) - } - - _notifyAccessibilityService() { - if (Platform.OS === 'web') { - // We need to send accessibility event in a new batch, as otherwise - // TextViews have no text set at the moment of populating event. - } - } - - _showModal(tag: string, component: any) { - // We are about to open first modal, so Portal will appear. - // Let's disable accessibility for background view on Android. - if (this._getOpenModals().length === 0) { - this.props.onModalVisibilityChanged(true) - } - // This way state is chained through multiple calls to - // _showModal, _closeModal correctly. - this.setState((state) => { - const modals = state.modals - modals[tag] = component - return { modals } - }) - } -} - -const styles = StyleSheet.create({ - root: { - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0 - } -}) - -module.exports = Portal diff --git a/src/index.js b/src/index.js index d2daef2b..907eb6ab 100644 --- a/src/index.js +++ b/src/index.js @@ -23,7 +23,6 @@ import UIManager from './apis/UIManager' import ActivityIndicator from './components/ActivityIndicator' import Image from './components/Image' import ListView from './components/ListView' -import Portal from './components/Portal' import ScrollView from './components/ScrollView' import Text from './components/Text' import TextInput from './components/TextInput' @@ -71,7 +70,6 @@ const ReactNative = { ActivityIndicator, Image, ListView, - Portal, ScrollView, Text, TextInput,