Remove NavExperimental from UIExplorer

Summary: Simplify the UIExplorer setup, and remove dependency on NavigationExperimental, which is being phased out in favor of React Navigation. Reviewed By: mkonicek Differential Revision: D4627131 fbshipit-source-id: 6294623a885074a73c831b0d817770fbe8a90221
dudeinthemirror · Mar 1, 2017 · f2c53ad · f2c53ad
1 parent 38e4c08
commit f2c53ad
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 339 deletions.
diff --git a/Examples/UIExplorer/js/UIExplorerActions.js b/Examples/UIExplorer/js/UIExplorerActions.js
@@ -23,22 +23,35 @@
  */
 'use strict';
 
-export type UIExplorerListWithFilterAction = {
-  type: 'UIExplorerListWithFilterAction',
-  filter: ?string;
+export type UIExplorerBackAction = {
+  type: 'UIExplorerBackAction',
+};
+
+export type UIExplorerListAction = {
+  type: 'UIExplorerListAction',
 };
 
 export type UIExplorerExampleAction = {
   type: 'UIExplorerExampleAction',
-  openExample: string;
+  openExample: string,
 };
 
-export type UIExplorerAction = UIExplorerListWithFilterAction | UIExplorerExampleAction;
+export type UIExplorerAction = (
+  UIExplorerBackAction |
+  UIExplorerListAction |
+  UIExplorerExampleAction
+);
+
+
+function Back(): UIExplorerBackAction {
+  return {
+    type: 'UIExplorerBackAction',
+  };
+}
 
-function ExampleListWithFilter(filter: ?string): UIExplorerListWithFilterAction {
+function ExampleList(): UIExplorerListAction {
   return {
-    type: 'UIExplorerListWithFilterAction',
-    filter,
+    type: 'UIExplorerListAction',
   };
 }
 
@@ -50,7 +63,8 @@ function ExampleAction(openExample: string): UIExplorerExampleAction {
 }
 
 const UIExplorerActions = {
-  ExampleListWithFilter,
+  Back,
+  ExampleList,
   ExampleAction,
 };
 

diff --git a/Examples/UIExplorer/js/UIExplorerApp.android.js b/Examples/UIExplorer/js/UIExplorerApp.android.js
@@ -33,18 +33,18 @@ const React = require('react');
 const StatusBar = require('StatusBar');
 const StyleSheet = require('StyleSheet');
 const ToolbarAndroid = require('ToolbarAndroid');
+const UIExplorerActions = require('./UIExplorerActions');
 const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerList = require('./UIExplorerList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
-const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
 const UIManager = require('UIManager');
 const URIActionMap = require('./URIActionMap');
 const View = require('View');
 
 const nativeImageSource = require('nativeImageSource');
 
-import type {UIExplorerNavigationState} from './UIExplorerNavigationReducer';
+import type { UIExplorerNavigationState } from './UIExplorerNavigationReducer';
 
 UIManager.setLayoutAnimationEnabledExperimental(true);
 
@@ -54,27 +54,31 @@ type Props = {
   exampleFromAppetizeParams: string,
 };
 
-type State = UIExplorerNavigationState & {
-  externalExample: ?string,
-};
+const APP_STATE_KEY = 'UIExplorerAppState.v2';
+
+const HEADER_LOGO_ICON = nativeImageSource({
+  android: 'launcher_icon',
+  width: 132,
+  height: 144
+});
+
+const HEADER_NAV_ICON = nativeImageSource({
+  android: 'ic_menu_black_24dp',
+  width: 48,
+  height: 48
+});
 
 class UIExplorerApp extends React.Component {
-  _handleAction: Function;
-  _renderDrawerContent: Function;
-  state: State;
-  constructor(props: Props) {
-    super(props);
-    this._handleAction = this._handleAction.bind(this);
-    this._renderDrawerContent = this._renderDrawerContent.bind(this);
-  }
+  props: Props;
+  state: UIExplorerNavigationState;
 
   componentWillMount() {
-    BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress.bind(this));
+    BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress);
   }
 
   componentDidMount() {
     Linking.getInitialURL().then((url) => {
-      AsyncStorage.getItem('UIExplorerAppState', (err, storedString) => {
+      AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
         const exampleAction = URIActionMap(this.props.exampleFromAppetizeParams);
         const urlAction = URIActionMap(url);
         const launchAction = exampleAction || urlAction;
@@ -116,7 +120,7 @@ class UIExplorerApp extends React.Component {
     );
   }
 
-  _renderDrawerContent() {
+  _renderDrawerContent = () => {
     return (
       <View style={styles.drawerContentWrapper}>
         <UIExplorerExampleList
@@ -127,47 +131,33 @@ class UIExplorerApp extends React.Component {
         />
       </View>
     );
-  }
+  };
 
   _renderApp() {
     const {
-      externalExample,
-      stack,
+      openExample,
     } = this.state;
-    if (externalExample) {
-      const Component = UIExplorerList.Modules[externalExample];
-      return (
-        <Component
-          onExampleExit={() => {
-            this._handleAction({ type: 'BackAction' });
-          }}
-          ref={(example) => { this._exampleRef = example; }}
-        />
-      );
-    }
-    const title = UIExplorerStateTitleMap(stack.routes[stack.index]);
-    const index = stack.routes.length <= 1 ?  1 : stack.index;
 
-    if (stack && stack.routes[index]) {
-      const {key} = stack.routes[index];
-      const ExampleModule = UIExplorerList.Modules[key];
-      if (ExampleModule) {
+    if (openExample) {
+      const ExampleModule = UIExplorerList.Modules[openExample];
+      if (ExampleModule.external) {
+        return (
+          <ExampleModule
+            onExampleExit={() => {
+              this._handleAction(UIExplorerActions.Back());
+            }}
+            ref={(example) => { this._exampleRef = example; }}
+          />
+        );
+      } else if (ExampleModule) {
         return (
           <View style={styles.container}>
             <ToolbarAndroid
-              logo={nativeImageSource({
-                android: 'launcher_icon',
-                width: 132,
-                height: 144
-              })}
-              navIcon={nativeImageSource({
-                android: 'ic_menu_black_24dp',
-                width: 48,
-                height: 48
-              })}
+              logo={HEADER_LOGO_ICON}
+              navIcon={HEADER_NAV_ICON}
               onIconClicked={() => this.drawer.openDrawer()}
               style={styles.toolbar}
-              title={title}
+              title={ExampleModule.title}
             />
             <UIExplorerExampleContainer
               module={ExampleModule}
@@ -177,46 +167,38 @@ class UIExplorerApp extends React.Component {
         );
       }
     }
+
     return (
       <View style={styles.container}>
         <ToolbarAndroid
-          logo={nativeImageSource({
-            android: 'launcher_icon',
-            width: 132,
-            height: 144
-          })}
-          navIcon={nativeImageSource({
-            android: 'ic_menu_black_24dp',
-            width: 48,
-            height: 48
-          })}
+          logo={HEADER_LOGO_ICON}
+          navIcon={HEADER_NAV_ICON}
           onIconClicked={() => this.drawer.openDrawer()}
           style={styles.toolbar}
-          title={title}
+          title="UIExplorer"
         />
         <UIExplorerExampleList
           onNavigate={this._handleAction}
           list={UIExplorerList}
-          {...stack.routes[0]}
         />
       </View>
     );
   }
 
-  _handleAction(action: Object): boolean {
+  _handleAction = (action: Object): boolean => {
     this.drawer && this.drawer.closeDrawer();
     const newState = UIExplorerNavigationReducer(this.state, action);
     if (this.state !== newState) {
       this.setState(
         newState,
-        () => AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state))
+        () => AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(this.state))
       );
       return true;
     }
     return false;
-  }
+  };
 
-  _handleBackButtonPress() {
+  _handleBackButtonPress = () => {
     if (this._overrideBackPressForDrawerLayout) {
       // This hack is necessary because drawer layout provides an imperative API
       // with open and close methods. This code would be cleaner if the drawer
@@ -231,8 +213,8 @@ class UIExplorerApp extends React.Component {
     ) {
       return true;
     }
-    return this._handleAction({ type: 'BackAction' });
-  }
+    return this._handleAction(UIExplorerActions.Back());
+  };
 }
 
 const styles = StyleSheet.create({