diff --git a/Examples/UIExplorer/js/UIExplorerApp.android.js b/Examples/UIExplorer/js/UIExplorerApp.android.js index bd9f03ab47d..d2331402aec 100644 --- a/Examples/UIExplorer/js/UIExplorerApp.android.js +++ b/Examples/UIExplorer/js/UIExplorerApp.android.js @@ -33,6 +33,7 @@ const React = require('react'); const StatusBar = require('StatusBar'); const StyleSheet = require('StyleSheet'); const ToolbarAndroid = require('ToolbarAndroid'); +const UIExplorerExampleContainer = require('./UIExplorerExampleContainer'); const UIExplorerExampleList = require('./UIExplorerExampleList'); const UIExplorerList = require('./UIExplorerList'); const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer'); @@ -146,7 +147,6 @@ class UIExplorerApp extends React.Component { if (stack && stack.routes[index]) { const {key} = stack.routes[index]; const ExampleModule = UIExplorerList.Modules[key]; - const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule); return ( - { this._exampleRef = example; }} /> diff --git a/Examples/UIExplorer/js/UIExplorerApp.ios.js b/Examples/UIExplorer/js/UIExplorerApp.ios.js index c0a42a70488..63ad5a38880 100644 --- a/Examples/UIExplorer/js/UIExplorerApp.ios.js +++ b/Examples/UIExplorer/js/UIExplorerApp.ios.js @@ -28,6 +28,7 @@ const Linking = require('Linking'); const React = require('react'); const ReactNative = require('react-native'); const UIExplorerList = require('./UIExplorerList.ios'); +const UIExplorerExampleContainer = require('./UIExplorerExampleContainer'); const UIExplorerExampleList = require('./UIExplorerExampleList'); const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer'); const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap'); @@ -177,10 +178,9 @@ class UIExplorerApp extends React.Component { const Example = UIExplorerList.Modules[state.key]; if (Example) { - const Component = UIExplorerExampleList.makeRenderable(Example); return ( - + ); } @@ -207,10 +207,9 @@ UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Exa if (ExampleModule.displayName) { class Snapshotter extends React.Component { render() { - const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule); return ( - + ); } diff --git a/Examples/UIExplorer/js/UIExplorerExampleContainer.js b/Examples/UIExplorer/js/UIExplorerExampleContainer.js new file mode 100644 index 00000000000..f59a3f110ca --- /dev/null +++ b/Examples/UIExplorer/js/UIExplorerExampleContainer.js @@ -0,0 +1,67 @@ +/** + * Copyright (c) 2013-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. + * + * 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. + * + * @providesModule UIExplorerExampleContainer + */ +'use strict'; + +const React = require('react'); +const { + Platform, +} = require('react-native'); +const UIExplorerBlock = require('./UIExplorerBlock'); +const UIExplorerPage = require('./UIExplorerPage'); + +const invariant = require('fbjs/lib/invariant'); + +class UIExplorerExampleContainer extends React.Component { + renderExample(example, i) { + // Filter platform-specific examples + var {title, description, platform} = example; + if (platform) { + if (Platform.OS !== platform) { + return null; + } + title += ' (' + platform + ' only)'; + } + return ( + + {example.render()} + + ); + } + + render(): ReactElement { + if (!this.props.module.examples) { + return ; + } + + return ( + + {this.props.module.examples.map(this.renderExample)} + + ); + } +} + +module.exports = UIExplorerExampleContainer; diff --git a/Examples/UIExplorer/js/UIExplorerExampleList.js b/Examples/UIExplorer/js/UIExplorerExampleList.js index b8207ee9f1f..dc7434502e0 100644 --- a/Examples/UIExplorer/js/UIExplorerExampleList.js +++ b/Examples/UIExplorer/js/UIExplorerExampleList.js @@ -31,8 +31,6 @@ const TouchableHighlight = require('TouchableHighlight'); const View = require('View'); const UIExplorerActions = require('./UIExplorerActions'); -const createExamplePage = require('./createExamplePage'); - import type { UIExplorerExample, } from './UIExplorerList.ios'; @@ -59,12 +57,6 @@ class UIExplorerExampleList extends React.Component { super(props); } - static makeRenderable(example: any): ReactClass { - return example.examples ? - createExamplePage(null, example) : - example; - } - render(): ?ReactElement { const filterText = this.state.filter || ''; const filterRegex = new RegExp(String(filterText), 'i'); diff --git a/Examples/UIExplorer/js/createExamplePage.js b/Examples/UIExplorer/js/createExamplePage.js index 7bb3e94c310..4b04edd95ad 100644 --- a/Examples/UIExplorer/js/createExamplePage.js +++ b/Examples/UIExplorer/js/createExamplePage.js @@ -23,71 +23,18 @@ */ 'use strict'; -var React = require('react'); -var ReactNative = require('react-native'); -var { - Platform, -} = ReactNative; -var UIExplorerBlock = require('./UIExplorerBlock'); -var UIExplorerPage = require('./UIExplorerPage'); +const React = require('react'); -var invariant = require('fbjs/lib/invariant'); +const UIExplorerExampleContainer = require('./UIExplorerExampleContainer'); import type { Example, ExampleModule } from 'ExampleTypes'; var createExamplePage = function(title: ?string, exampleModule: ExampleModule) : ReactClass { - invariant(!!exampleModule.examples, 'The module must have examples'); class ExamplePage extends React.Component { - static title = exampleModule.title; - static description = exampleModule.description; - - getBlock = (example: Example, i) => { - // Filter platform-specific examples - var {title, description, platform} = example; - if (platform) { - if (Platform.OS !== platform) { - return null; - } - title += ' (' + platform + ' only)'; - } - // Hack warning: This is a hack because the www UI explorer used to - // require render to be called. It should just return elements now. - var originalRender = React.render; - var originalIOSRender = ReactNative.render; - var renderedComponent; - // TODO remove typecasts when Flow bug #6560135 is fixed - // and workaround is removed from react-native.js - (React: Object).render = - (ReactNative: Object).render = - function(element, container) { - renderedComponent = element; - }; - var result = example.render(null); - if (result) { - renderedComponent = React.cloneElement(result, { - navigator: this.props.navigator, - }); - } - (React: Object).render = originalRender; - (ReactNative: Object).render = originalIOSRender; - return ( - - {renderedComponent} - - ); - }; - render() { - return ( - - {exampleModule.examples.map(this.getBlock)} - - ); + return ; } }