From 0756c663bc88f8ed710fb2d0fdcf36e8d95de624 Mon Sep 17 00:00:00 2001 From: Eric Vicenti Date: Thu, 2 Mar 2017 13:02:27 -0800 Subject: [PATCH] Remove NavigationExperimental examples Summary: NavigationExperimental is deprecated, so we should avoid documenting it with examples Reviewed By: lacker, hramos Differential Revision: D4634484 fbshipit-source-id: 6c8b114d2a7b49c75ec548025384fa6ed75cb2d2 --- ...CardStack-NavigationHeader-Tabs-example.js | 486 ------------------ .../NavigationCardStack-NoGesture-example.js | 198 ------- .../NavigationCardStack-example.js | 196 ------- .../NavigationExampleRow.js | 74 --- .../NavigationExperimentalExample.js | 153 ------ ...gationTransitioner-AnimatedView-example.js | 256 --------- ...Transitioner-AnimatedView-pager-example.js | 265 ---------- .../UIExplorer/js/UIExplorerList.android.js | 4 - Examples/UIExplorer/js/UIExplorerList.ios.js | 5 - 9 files changed, 1637 deletions(-) delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js delete mode 100644 Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js deleted file mode 100644 index 8b6ca53ad82..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js +++ /dev/null @@ -1,486 +0,0 @@ -/** - * 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. -*/ -'use strict'; - -const NavigationExampleRow = require('./NavigationExampleRow'); -const React = require('react'); -const ReactNative = require('react-native'); - -/** - * Basic example that shows how to use to build - * an app with composite navigation system. - * @providesModule NavigationCardStack-NavigationHeader-Tabs-example - */ - -const { - Component, - PropTypes, -} = React; - -const { - NavigationExperimental, - ScrollView, - StyleSheet, - Text, - TouchableOpacity, - View, -} = ReactNative; - -const { - CardStack: NavigationCardStack, - Header: NavigationHeader, - PropTypes: NavigationPropTypes, - StateUtils: NavigationStateUtils, -} = NavigationExperimental; - -// First Step. -// Define what app navigation state will look like. -function createAppNavigationState(): Object { - return { - // Three tabs. - tabs: { - index: 0, - routes: [ - {key: 'apple'}, - {key: 'banana'}, - {key: 'orange'}, - ], - }, - // Scenes for the `apple` tab. - apple: { - index: 0, - routes: [{key: 'Apple Home'}], - }, - // Scenes for the `banana` tab. - banana: { - index: 0, - routes: [{key: 'Banana Home'}], - }, - // Scenes for the `orange` tab. - orange: { - index: 0, - routes: [{key: 'Orange Home'}], - }, - }; -} - -// Next step. -// Define what app navigation state shall be updated. -function updateAppNavigationState( - state: Object, - action: Object, -): Object { - let {type} = action; - if (type === 'BackAction') { - type = 'pop'; - } - - switch (type) { - case 'push': { - // Push a route into the scenes stack. - const route: Object = action.route; - const {tabs} = state; - const tabKey = tabs.routes[tabs.index].key; - const scenes = state[tabKey]; - const nextScenes = NavigationStateUtils.push(scenes, route); - if (scenes !== nextScenes) { - return { - ...state, - [tabKey]: nextScenes, - }; - } - break; - } - - case 'pop': { - // Pops a route from the scenes stack. - const {tabs} = state; - const tabKey = tabs.routes[tabs.index].key; - const scenes = state[tabKey]; - const nextScenes = NavigationStateUtils.pop(scenes); - if (scenes !== nextScenes) { - return { - ...state, - [tabKey]: nextScenes, - }; - } - break; - } - - case 'selectTab': { - // Switches the tab. - const tabKey: string = action.tabKey; - const tabs = NavigationStateUtils.jumpTo(state.tabs, tabKey); - if (tabs !== state.tabs) { - return { - ...state, - tabs, - }; - } - } - } - return state; -} - -// Next step. -// Defines a helper function that creates a HOC (higher-order-component) -// which provides a function `navigate` through component props. The -// `navigate` function will be used to invoke navigation changes. -// This serves a convenient way for a component to navigate. -function createAppNavigationContainer(ComponentClass) { - const key = '_yourAppNavigationContainerNavigateCall'; - - class Container extends Component { - static contextTypes = { - [key]: PropTypes.func, - }; - - static childContextTypes = { - [key]: PropTypes.func.isRequired, - }; - - static propTypes = { - navigate: PropTypes.func, - }; - - getChildContext(): Object { - return { - [key]: this.context[key] || this.props.navigate, - }; - } - - render(): React.Element { - const navigate = this.context[key] || this.props.navigate; - return ; - } - } - - return Container; -} - -// Next step. -// Define a component for your application that owns the navigation state. -class YourApplication extends Component { - - static propTypes = { - onExampleExit: PropTypes.func, - }; - - // This sets up the initial navigation state. - constructor(props, context) { - super(props, context); - // This sets up the initial navigation state. - this.state = createAppNavigationState(); - this._navigate = this._navigate.bind(this); - } - - render(): React.Element { - // User your own navigator (see next step). - return ( - - ); - } - - // This public method is optional. If exists, the UI explorer will call it - // the "back button" is pressed. Normally this is the cases for Android only. - handleBackAction(): boolean { - return this._navigate({type: 'pop'}); - } - - // This handles the navigation state changes. You're free and responsible - // to define the API that changes that navigation state. In this exmaple, - // we'd simply use a `updateAppNavigationState` to update the navigation - // state. - _navigate(action: Object): void { - if (action.type === 'exit') { - // Exits the example. `this.props.onExampleExit` is provided - // by the UI Explorer. - this.props.onExampleExit && this.props.onExampleExit(); - return; - } - - const state = updateAppNavigationState( - this.state, - action, - ); - - // `updateAppNavigationState` (which uses NavigationStateUtils) gives you - // back the same `state` if nothing has changed. You could use - // that to avoid redundant re-rendering. - if (this.state !== state) { - this.setState(state); - } - } -} - -// Next step. -// Define your own controlled navigator. -const YourNavigator = createAppNavigationContainer(class extends Component { - static propTypes = { - appNavigationState: PropTypes.shape({ - apple: NavigationPropTypes.navigationState.isRequired, - banana: NavigationPropTypes.navigationState.isRequired, - orange: NavigationPropTypes.navigationState.isRequired, - tabs: NavigationPropTypes.navigationState.isRequired, - }), - navigate: PropTypes.func.isRequired, - }; - - // This sets up the methods (e.g. Pop, Push) for navigation. - constructor(props: any, context: any) { - super(props, context); - this._back = this._back.bind(this); - this._renderHeader = this._renderHeader.bind(this); - this._renderScene = this._renderScene.bind(this); - } - - // Now use the `NavigationCardStack` to render the scenes. - render(): React.Element { - const {appNavigationState} = this.props; - const {tabs} = appNavigationState; - const tabKey = tabs.routes[tabs.index].key; - const scenes = appNavigationState[tabKey]; - - return ( - - - - - ); - } - - // Render the header. - // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition` - // as type `NavigationSceneRendererProps`. - _renderHeader(sceneProps: Object): React.Element { - return ( - - ); - } - - // Render a scene for route. - // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition` - // as type `NavigationSceneRendererProps`. - _renderScene(sceneProps: Object): React.Element { - return ( - - ); - } - - _back() { - this.props.navigate({type: 'pop'}); - } -}); - -// Next step. -// Define your own header. -const YourHeader = createAppNavigationContainer(class extends Component { - static propTypes = { - ...NavigationPropTypes.SceneRendererProps, - navigate: PropTypes.func.isRequired, - }; - - constructor(props: Object, context: any) { - super(props, context); - this._back = this._back.bind(this); - this._renderTitleComponent = this._renderTitleComponent.bind(this); - } - - render(): React.Element { - return ( - - ); - } - - _back(): void { - this.props.navigate({type: 'pop'}); - } - - _renderTitleComponent(props: Object): React.Element { - return ( - - {props.scene.route.key} - - ); - } -}); - -// Next step. -// Define your own scene. -const YourScene = createAppNavigationContainer(class extends Component { - static propTypes = { - ...NavigationPropTypes.SceneRendererProps, - navigate: PropTypes.func.isRequired, - }; - - constructor(props: Object, context: any) { - super(props, context); - this._exit = this._exit.bind(this); - this._popRoute = this._popRoute.bind(this); - this._pushRoute = this._pushRoute.bind(this); - } - - render(): React.Element { - return ( - - - - - - ); - } - - _pushRoute(): void { - // Just push a route with a new unique key. - const route = {key: '[' + this.props.scenes.length + ']-' + Date.now()}; - this.props.navigate({type: 'push', route}); - } - - _popRoute(): void { - this.props.navigate({type: 'pop'}); - } - - _exit(): void { - this.props.navigate({type: 'exit'}); - } -}); - -// Next step. -// Define your own tabs. -const YourTabs = createAppNavigationContainer(class extends Component { - static propTypes = { - navigationState: NavigationPropTypes.navigationState.isRequired, - navigate: PropTypes.func.isRequired, - }; - - constructor(props: Object, context: any) { - super(props, context); - } - - render(): React.Element { - return ( - - {this.props.navigationState.routes.map(this._renderTab, this)} - - ); - } - - _renderTab(route: Object, index: number): React.Element { - return ( - - ); - } -}); - -// Next step. -// Define your own Tab -const YourTab = createAppNavigationContainer(class extends Component { - - static propTypes = { - navigate: PropTypes.func.isRequired, - route: NavigationPropTypes.navigationRoute.isRequired, - selected: PropTypes.bool.isRequired, - }; - - constructor(props: Object, context: any) { - super(props, context); - this._onPress = this._onPress.bind(this); - } - - render(): React.Element { - const style = [styles.tabText]; - if (this.props.selected) { - style.push(styles.tabSelected); - } - return ( - - - {this.props.route.key} - - - ); - } - - _onPress() { - this.props.navigate({type: 'selectTab', tabKey: this.props.route.key}); - } -}); - -const styles = StyleSheet.create({ - navigator: { - flex: 1, - }, - navigatorCardStack: { - flex: 20, - }, - tabs: { - flex: 1, - flexDirection: 'row', - }, - tab: { - alignItems: 'center', - backgroundColor: '#fff', - flex: 1, - justifyContent: 'center', - }, - tabText: { - color: '#222', - fontWeight: '500', - }, - tabSelected: { - color: 'blue', - }, -}); - -module.exports = YourApplication; diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js deleted file mode 100644 index 4d62aaa9fbd..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js +++ /dev/null @@ -1,198 +0,0 @@ -/** - * 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 NavigationCardStack-NoGesture-example - */ -'use strict'; - -const NavigationExampleRow = require('./NavigationExampleRow'); -const React = require('react'); -const ReactNative = require('react-native'); - -/** - * Basic example that shows how to use to build - * an app with controlled navigation system but without gestures. - */ -const { - NavigationExperimental, - ScrollView, - StyleSheet, -} = ReactNative; - -const { - CardStack: NavigationCardStack, - StateUtils: NavigationStateUtils, -} = NavigationExperimental; - -// Step 1: -// Define a component for your application. -class YourApplication extends React.Component { - - // This sets up the initial navigation state. - constructor(props, context) { - super(props, context); - - this.state = { - // This defines the initial navigation state. - navigationState: { - index: 0, // starts with first route focused. - routes: [{key: 'Welcome'}], // starts with only one route. - }, - }; - - this._exit = this._exit.bind(this); - this._onNavigationChange = this._onNavigationChange.bind(this); - } - - // User your own navigator (see Step 2). - render(): React.Element { - return ( - - ); - } - - // This handles the navigation state changes. You're free and responsible - // to define the API that changes that navigation state. In this exmaple, - // we'd simply use a `function(type: string)` to update the navigation state. - _onNavigationChange(type: string): void { - let {navigationState} = this.state; - switch (type) { - case 'push': - // push a new route. - const route = {key: 'route-' + Date.now()}; - navigationState = NavigationStateUtils.push(navigationState, route); - break; - - case 'pop': - navigationState = NavigationStateUtils.pop(navigationState); - break; - } - - // NavigationStateUtils gives you back the same `navigationState` if nothing - // has changed. You could use that to avoid redundant re-rendering. - if (this.state.navigationState !== navigationState) { - this.setState({navigationState}); - } - } - - // Exits the example. `this.props.onExampleExit` is provided - // by the UI Explorer. - _exit(): void { - this.props.onExampleExit && this.props.onExampleExit(); - } - - // This public method is optional. If exists, the UI explorer will call it - // the "back button" is pressed. Normally this is the cases for Android only. - handleBackAction(): boolean { - return this._onNavigationChange('pop'); - } -} - -// Step 2: -// Define your own controlled navigator. -// -// +------------+ -// +-+ | -// +-+ | | -// | | | | -// | | | Active | -// | | | Scene | -// | | | | -// +-+ | | -// +-+ | -// +------------+ -// -class YourNavigator extends React.Component { - - // This sets up the methods (e.g. Pop, Push) for navigation. - constructor(props: any, context: any) { - super(props, context); - - this._onPushRoute = this.props.onNavigationChange.bind(null, 'push'); - this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop'); - - this._renderScene = this._renderScene.bind(this); - } - - // Now use the `NavigationCardStack` to render the scenes. - render(): React.Element { - return ( - - ); - } - - // Render a scene for route. - // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition` - // as type `NavigationSceneRendererProps`. - _renderScene(sceneProps: Object): React.Element { - return ( - - ); - } -} - -// Step 3: -// Define your own scene. -class YourScene extends React.Component { - render() { - return ( - - - - - - - ); - } -} - -const styles = StyleSheet.create({ - navigator: { - flex: 1, - }, -}); - -module.exports = YourApplication; diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js deleted file mode 100644 index 1029644a026..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js +++ /dev/null @@ -1,196 +0,0 @@ -/** - * 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 NavigationCardStack-example - */ -'use strict'; - -const NavigationExampleRow = require('./NavigationExampleRow'); -const React = require('react'); -const ReactNative = require('react-native'); - -/** - * Basic example that shows how to use to build - * an app with controlled navigation system. - */ -const { - NavigationExperimental, - ScrollView, - StyleSheet, -} = ReactNative; - -const { - CardStack: NavigationCardStack, - StateUtils: NavigationStateUtils, -} = NavigationExperimental; - -// Step 1: -// Define a component for your application. -class YourApplication extends React.Component { - - // This sets up the initial navigation state. - constructor(props, context) { - super(props, context); - - this.state = { - // This defines the initial navigation state. - navigationState: { - index: 0, // starts with first route focused. - routes: [{key: 'Welcome'}], // starts with only one route. - }, - }; - - this._exit = this._exit.bind(this); - this._onNavigationChange = this._onNavigationChange.bind(this); - } - - // User your own navigator (see Step 2). - render(): React.Element { - return ( - - ); - } - - // This handles the navigation state changes. You're free and responsible - // to define the API that changes that navigation state. In this exmaple, - // we'd simply use a `function(type: string)` to update the navigation state. - _onNavigationChange(type: string): void { - let {navigationState} = this.state; - switch (type) { - case 'push': - // push a new route. - const route = {key: 'route-' + Date.now()}; - navigationState = NavigationStateUtils.push(navigationState, route); - break; - - case 'pop': - navigationState = NavigationStateUtils.pop(navigationState); - break; - } - - // NavigationStateUtils gives you back the same `navigationState` if nothing - // has changed. You could use that to avoid redundant re-rendering. - if (this.state.navigationState !== navigationState) { - this.setState({navigationState}); - } - } - - // Exits the example. `this.props.onExampleExit` is provided - // by the UI Explorer. - _exit(): void { - this.props.onExampleExit && this.props.onExampleExit(); - } - - // This public method is optional. If exists, the UI explorer will call it - // the "back button" is pressed. Normally this is the cases for Android only. - handleBackAction(): boolean { - return this._onNavigationChange('pop'); - } -} - -// Step 2: -// Define your own controlled navigator. -// -// +------------+ -// +-+ | -// +-+ | | -// | | | | -// | | | Active | -// | | | Scene | -// | | | | -// +-+ | | -// +-+ | -// +------------+ -// -class YourNavigator extends React.Component { - - // This sets up the methods (e.g. Pop, Push) for navigation. - constructor(props: any, context: any) { - super(props, context); - - this._onPushRoute = this.props.onNavigationChange.bind(null, 'push'); - this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop'); - - this._renderScene = this._renderScene.bind(this); - } - - // Now use the `NavigationCardStack` to render the scenes. - render(): React.Element { - return ( - - ); - } - - // Render a scene for route. - // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition` - // as type `NavigationSceneRendererProps`. - _renderScene(sceneProps: Object): React.Element { - return ( - - ); - } -} - -// Step 3: -// Define your own scene. -class YourScene extends React.Component { - render() { - return ( - - - - - - - ); - } -} - -const styles = StyleSheet.create({ - navigator: { - flex: 1, - }, -}); - -module.exports = YourApplication; diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js deleted file mode 100644 index 5faf80427b6..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * 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 NavigationExampleRow - */ -'use strict'; - -var React = require('react'); -var ReactNative = require('react-native'); -var { - Text, - PixelRatio, - StyleSheet, - View, - TouchableHighlight, -} = ReactNative; - -class NavigationExampleRow extends React.Component { - render() { - if (this.props.onPress) { - return ( - - - {this.props.text} - - - ); - } - return ( - - - {this.props.text} - - - ); - } -} - -const styles = StyleSheet.create({ - row: { - padding: 15, - backgroundColor: 'white', - borderBottomWidth: 1 / PixelRatio.get(), - borderBottomColor: '#CDCDCD', - }, - rowText: { - fontSize: 17, - }, - buttonText: { - fontSize: 17, - fontWeight: '500', - }, -}); - -module.exports = NavigationExampleRow; diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js deleted file mode 100644 index 8b6da3af024..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js +++ /dev/null @@ -1,153 +0,0 @@ -/** - * 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 NavigationExperimentalExample - */ -'use strict'; - -const AsyncStorage = require('AsyncStorage'); -const NavigationExampleRow = require('./NavigationExampleRow'); -const React = require('react'); -const ScrollView = require('ScrollView'); -const StyleSheet = require('StyleSheet'); -const View = require('View'); - -/* - * Heads up! This file is not the real navigation example- only a utility to switch between them. - * - * To learn how to use the Navigation API, take a look at the following example files: - */ -const EXAMPLES = { - 'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'), - 'CardStack Example': require('./NavigationCardStack-example'), - 'CardStack Without Gestures Example': require('./NavigationCardStack-NoGesture-example'), - 'Transitioner + Animated View Example': require('./NavigationTransitioner-AnimatedView-example'), - 'Transitioner + Animated View Pager Example': require('./NavigationTransitioner-AnimatedView-pager-example'), -}; - -const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample'; - -class NavigationExperimentalExample extends React.Component { - static title = 'Navigation (Experimental)'; - static description = 'Upcoming navigation APIs and animated navigation views'; - static external = true; - - state = { - example: null, - }; - - componentDidMount() { - AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => { - if (err || !example || !EXAMPLES[example]) { - this.setState({ - example: 'menu', - }); - return; - } - this.setState({ - example, - }); - }); - } - - setExample = (example) => { - this.setState({ - example, - }); - AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example); - }; - - _renderMenu = () => { - let exitRow = null; - if (this.props.onExampleExit) { - exitRow = ( - - ); - } - return ( - - - {this._renderExampleList()} - {exitRow} - - - ); - }; - - _renderExampleList = () => { - return Object.keys(EXAMPLES).map(exampleName => ( - { - this.setExample(exampleName); - }} - /> - )); - }; - - _exitInnerExample = () => { - this.setExample('menu'); - }; - - handleBackAction = () => { - const wasHandledByExample = ( - this.exampleRef && - this.exampleRef.handleBackAction && - this.exampleRef.handleBackAction() - ); - if (wasHandledByExample) { - return true; - } - if (this.state.example && this.state.example !== 'menu') { - this._exitInnerExample(); - return true; - } - return false; - }; - - render() { - if (this.state.example === 'menu') { - return this._renderMenu(); - } - if (EXAMPLES[this.state.example]) { - const Component = EXAMPLES[this.state.example]; - return ( - { this.exampleRef = exampleRef; }} - /> - ); - } - return null; - } -} - -const styles = StyleSheet.create({ - menu: { - backgroundColor: '#E9E9EF', - flex: 1, - marginTop: 20, - }, -}); - -module.exports = NavigationExperimentalExample; diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js deleted file mode 100644 index b408251c0f7..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js +++ /dev/null @@ -1,256 +0,0 @@ -/** - * 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. - * - * @flow - * @providesModule NavigationTransitioner-AnimatedView-example - */ -'use strict'; - -const NavigationExampleRow = require('./NavigationExampleRow'); -const React = require('react'); -const ReactNative = require('react-native'); - -/** - * Basic example that shows how to use and - * to build a stack of animated scenes that render the - * navigation state. - */ - - -import type { - NavigationSceneRendererProps, - NavigationState, - NavigationTransitionProps, - NavigationTransitionSpec, -} from 'NavigationTypeDefinition'; - -const { - Component, - PropTypes, -} = React; - -const { - Animated, - Easing, - NavigationExperimental, - ScrollView, - StyleSheet, -} = ReactNative; - -const { - PropTypes: NavigationPropTypes, - StateUtils: NavigationStateUtils, - Transitioner: NavigationTransitioner, -} = NavigationExperimental; - -function reducer(state: ?NavigationState, action: any): NavigationState { - if (!state) { - return { - index: 0, - routes: [{key: 'route-1'}], - }; - } - - switch (action) { - case 'push': - const route = {key: 'route-' + (state.routes.length + 1)}; - return NavigationStateUtils.push(state, route); - case 'pop': - return NavigationStateUtils.pop(state); - } - return state; -} - -class Example extends Component { - state: NavigationState; - constructor(props: any, context: any) { - super(props, context); - this.state = reducer(); - } - - render(): React.Element { - return ( - this._navigate(action)} - /> - ); - } - - _navigate(action: any): boolean { - if (action === 'exit') { - // Exits the example. `this.props.onExampleExit` is provided - // by the UI Explorer. - this.props.onExampleExit && this.props.onExampleExit(); - return false; - } - - const state = reducer(this.state, action); - if (state === this.state) { - return false; - } - - this.setState(state); - return true; - } - - // This public method is optional. If exists, the UI explorer will call it - // the "back button" is pressed. Normally this is the cases for Android only. - handleBackAction(): boolean { - return this._navigate('pop'); - } -} - -class ExampleNavigator extends Component { - props: { - navigate: Function, - navigationState: NavigationState, - }; - - static propTypes: { - navigationState: NavigationPropTypes.navigationState.isRequired, - navigate: PropTypes.func.isRequired, - }; - - render(): React.Element { - return ( - this._render(transitionProps)} - configureTransition={this._configureTransition} - /> - ); - } - - _render( - transitionProps: NavigationTransitionProps, - ): Array> { - return transitionProps.scenes.map((scene) => { - const sceneProps = { - ...transitionProps, - scene, - }; - return this._renderScene(sceneProps); - }); - } - - _renderScene( - sceneProps: NavigationSceneRendererProps, - ): React.Element { - return ( - - ); - } - - _configureTransition(): NavigationTransitionSpec { - const easing: any = Easing.inOut(Easing.ease); - return { - duration: 500, - easing, - }; - } -} - -class ExampleScene extends Component { - props: NavigationSceneRendererProps & { - navigate: Function, - }; - - static propTypes = { - ...NavigationPropTypes.SceneRendererProps, - navigate: PropTypes.func.isRequired, - }; - - render(): React.Element { - const {scene, navigate} = this.props; - return ( - - - - navigate('push')} - /> - navigate('pop')} - /> - navigate('exit')} - /> - - - ); - } - - _getAnimatedStyle(): Object { - const { - layout, - position, - scene, - } = this.props; - - const { - index, - } = scene; - - const inputRange = [index - 1, index, index + 1]; - const width = layout.initWidth; - const translateX = position.interpolate({ - inputRange, - outputRange: ([width, 0, -10]: Array), - }); - - return { - transform: [ - { translateX }, - ], - }; - } -} - -const styles = StyleSheet.create({ - scene: { - backgroundColor: '#E9E9EF', - bottom: 0, - flex: 1, - left: 0, - position: 'absolute', - right: 0, - shadowColor: 'black', - shadowOffset: {width: 0, height: 0}, - shadowOpacity: 0.4, - shadowRadius: 10, - top: 0, - }, - scrollView: { - flex: 1, - }, -}); - -module.exports = Example; diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js deleted file mode 100644 index 755a9b2df0c..00000000000 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js +++ /dev/null @@ -1,265 +0,0 @@ -/** - * 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. - * - * @flow - * @providesModule NavigationTransitioner-AnimatedView-pager-example - */ -'use strict'; - -const NavigationExampleRow = require('./NavigationExampleRow'); -const React = require('react'); -const ReactNative = require('react-native'); - -/** - * Basic example that shows how to use and - * to build a list of animated scenes that render the - * navigation state. - */ - -import type { - NavigationSceneRendererProps, - NavigationState, - NavigationTransitionProps, -} from 'NavigationTypeDefinition'; - -const { - Component, - PropTypes, -} = React; - -const { - Animated, - NavigationExperimental, - StyleSheet, - Text, - View, -} = ReactNative; - -const { - PropTypes: NavigationPropTypes, - StateUtils: NavigationStateUtils, - Transitioner: NavigationTransitioner, - Card: NavigationCard, -} = NavigationExperimental; - -const { - PagerPanResponder: NavigationPagerPanResponder, - PagerStyleInterpolator: NavigationPagerStyleInterpolator, -} = NavigationCard; - -function reducer(state: ?NavigationState, action: any): NavigationState { - if (!state) { - return { - index: 0, - routes: [ - {key: 'Step 1', color: '#ff0000'}, - {key: 'Step 2', color: '#ff7f00'}, - {key: 'Step 3', color: '#ffff00'}, - {key: 'Step 4', color: '#00ff00'}, - {key: 'Step 5', color: '#0000ff'}, - {key: 'Step 6', color: '#4b0082'}, - {key: 'Step 7', color: '#8f00ff'}, - ], - }; - } - - switch (action) { - case 'back': - return NavigationStateUtils.back(state); - case 'forward': - return NavigationStateUtils.forward(state); - } - return state; -} - -class Example extends Component { - state: NavigationState; - constructor(props: any, context: any) { - super(props, context); - this.state = reducer(); - } - - render(): React.Element { - return ( - - this._navigate(action)} - /> - this._navigate('exit')} - /> - - ); - } - - _navigate(action: string): boolean { - if (action === 'exit') { - // Exits the example. `this.props.onExampleExit` is provided - // by the UI Explorer. - this.props.onExampleExit && this.props.onExampleExit(); - return false; - } - - const state = reducer(this.state, action); - if (state === this.state) { - return false; - } - - this.setState(state); - return true; - } - - // This public method is optional. If exists, the UI explorer will call it - // the "back button" is pressed. Normally this is the cases for Android only. - handleBackAction(): boolean { - return this._navigate('back'); - } -} - -class ExampleNavigator extends Component { - _render: Function; - _renderScene: Function; - - props: { - navigate: Function, - navigationState: NavigationState, - }; - - static propTypes: { - navigationState: NavigationPropTypes.navigationState.isRequired, - navigate: PropTypes.func.isRequired, - }; - - constructor(props, context) { - super(props, context); - this._render = this._render.bind(this); - this._renderScene = this._renderScene.bind(this); - } - - render(): React.Element { - return ( - - ); - } - - _render( - transitionProps: NavigationTransitionProps, - ): React.Element { - const scenes = transitionProps.scenes.map((scene) => { - const sceneProps = { - ...transitionProps, - scene, - }; - return this._renderScene(sceneProps); - }); - return ( - - {scenes} - - ); - } - - _renderScene( - sceneProps: NavigationSceneRendererProps, - ): React.Element { - return ( - - ); - } -} - -class ExampleScene extends Component { - props: NavigationSceneRendererProps & { - navigate: Function, - }; - - static propTypes = { - ...NavigationPropTypes.SceneRendererProps, - navigate: PropTypes.func.isRequired, - }; - - render(): React.Element { - const {scene, navigate} = this.props; - - const panHandlers = NavigationPagerPanResponder.forHorizontal({ - ...this.props, - onNavigateBack: () => navigate('back'), - onNavigateForward: () => navigate('forward'), - }); - - const route: any = scene.route; - const style = [ - styles.scene, - {backgroundColor: route.color}, - NavigationPagerStyleInterpolator.forHorizontal(this.props), - ]; - - return ( - - - - {scene.route.key} - - - - ); - } -} - -const styles = StyleSheet.create({ - example: { - flex: 1, - }, - navigator: { - flex: 1, - }, - scene: { - backgroundColor: '#000', - bottom: 0, - flex: 1, - left: 0, - position: 'absolute', - right: 0, - top: 0, - }, - heading: { - alignItems : 'center', - flex: 1, - justifyContent: 'center', - }, - headingText: { - color: '#222', - fontSize: 24, - fontWeight: 'bold', - }, -}); - -module.exports = Example; diff --git a/Examples/UIExplorer/js/UIExplorerList.android.js b/Examples/UIExplorer/js/UIExplorerList.android.js index a5ac35b1a33..09d81eb19c4 100644 --- a/Examples/UIExplorer/js/UIExplorerList.android.js +++ b/Examples/UIExplorer/js/UIExplorerList.android.js @@ -192,10 +192,6 @@ const APIExamples: Array = [ key: 'NativeAnimationsExample', module: require('./NativeAnimationsExample'), }, - { - key: 'NavigationExperimentalExample', - module: require('./NavigationExperimental/NavigationExperimentalExample'), - }, { key: 'NetInfoExample', module: require('./NetInfoExample'), diff --git a/Examples/UIExplorer/js/UIExplorerList.ios.js b/Examples/UIExplorer/js/UIExplorerList.ios.js index 0c130d74fff..e628c5fe6e0 100644 --- a/Examples/UIExplorer/js/UIExplorerList.ios.js +++ b/Examples/UIExplorer/js/UIExplorerList.ios.js @@ -298,11 +298,6 @@ const APIExamples: Array = [ module: require('./NativeAnimationsExample'), supportsTVOS: true, }, - { - key: 'NavigationExperimentalExample', - module: require('./NavigationExperimental/NavigationExperimentalExample'), - supportsTVOS: true, - }, { key: 'NetInfoExample', module: require('./NetInfoExample'),