React Native collapsible OnDeviceUI navigation

app/react-native/src/preview/components/OnDeviceUI/index.js

@@ -1,24 +1,116 @@
-import React, { PropTypes } from 'react';
-import { View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
+import { Animated, Easing, View, TouchableWithoutFeedback, Image, Text } from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 
-export default function OnDeviceUI(props) {
-  const { stories, events, url } = props;
+export default class OnDeviceUI extends Component {
+  constructor(props, ...args) {
+    super(props, ...args);
 
-  return (
-    <View style={style.main}>
-      <View style={style.leftPanel}>
-        <StoryListView stories={stories} events={events} />
-      </View>
-      <View style={style.rightPanel}>
-        <View style={style.preview}>
-          <StoryView url={url} events={events} />
+    this.state = {
+      menuAnimation: new Animated.Value(0),
+      isMenuOpen: false,
+      selectedKind: null,
+      selectedStory: null,
+    };
+
+    this.storyChangedHandler = this.handleStoryChanged.bind(this);
+    this.handleToggleMenu = this.handleToggleMenu.bind(this);
+
+    this.props.events.on('story', this.storyChangedHandler);
+  }
+
+  componentWillUnmount() {
+    this.props.events.removeListener('story', this.storyChangedHandler);
+  }
+
+  handleStoryChanged(storyFn, selection) {
+    const { kind, story } = selection;
+    this.setState({
+      selectedKind: kind,
+      selectedStory: story,
+    });
+  }
+
+  handleToggleMenu() {
+    const isMenuOpen = !this.state.isMenuOpen;
+
+    Animated.timing(this.state.menuAnimation, {
+      toValue: isMenuOpen ? 1 : 0,
+      duration: 150,
+      easing: Easing.linear,
+    }).start();
+
+    this.setState({
+      isMenuOpen,
+    });
+  }
+
+  render() {
+    const { stories, events, url } = this.props;
+    const { isMenuOpen, menuAnimation, selectedKind, selectedStory } = this.state;
+
+    const overlayStyles = [style.overlayContainer, { opacity: menuAnimation }];
+
+    const menuStyles = [
+      style.menuContainer,
+      {
+        transform: [
+          {
+            translateX: menuAnimation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 250],
+            }),
+          },
+        ],
+      },
+    ];
+
+    /* eslint-disable global-require */
+    const openMenuImage = require('./menu_open.png');
+    const closeMenuImage = require('./menu_close.png');
+    /* eslint-enable global-require */
+
+    return (
+      <View style={style.main}>
+        <View style={style.previewContainer}>
+          <View style={style.headerContainer}>
+            <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+              <View>
+                <Image source={openMenuImage} style={style.icon} />
+              </View>
+            </TouchableWithoutFeedback>
+            <Text style={style.headerText} numberOfLines={1}>
+              {selectedKind} / {selectedStory}
+            </Text>
+          </View>
+          <View style={style.previewWrapper}>
+            <View style={style.preview}>
+              <StoryView url={url} events={events} />
+            </View>
+          </View>
         </View>
+        {isMenuOpen &&
+          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+            <Animated.View style={overlayStyles} />
+          </TouchableWithoutFeedback>}
+        <Animated.View style={menuStyles}>
+          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+            <View style={style.closeButton}>
+              <Image source={closeMenuImage} style={style.icon} />
+            </View>
+          </TouchableWithoutFeedback>
+          <StoryListView
+            stories={stories}
+            events={events}
+            selectedKind={selectedKind}
+            selectedStory={selectedStory}
+          />
+        </Animated.View>
       </View>
-    </View>
-  );
+    );
+  }
 }
 
 OnDeviceUI.propTypes = {

app/react-native/src/preview/components/OnDeviceUI/style.js

@@ -3,24 +3,51 @@ import { StyleSheet } from 'react-native';
 export default {
   main: {
     flex: 1,
+    paddingTop: 20,
+    backgroundColor: 'rgba(255, 255, 255, 1)',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    opacity: 0.5,
+  },
+  headerContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  headerText: {
+    marginLeft: 5,
+    fontSize: 14,
+    color: 'rgba(0, 0, 0, 0.5)',
+  },
+  overlayContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  menuContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: -250,
+    width: 250,
+    paddingHorizontal: 8,
     paddingTop: 20,
+    paddingBottom: 8,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },
-  leftPanel: {
+  previewContainer: {
     flex: 1,
-    maxWidth: 250,
-    paddingHorizontal: 8,
-    paddingBottom: 8,
   },
-  rightPanel: {
+  previewWrapper: {
     flex: 1,
-    backgroundColor: 'rgba(255, 255, 255, 1)',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(236, 236, 236, 1)',
-    borderRadius: 4,
-    marginBottom: 8,
-    marginHorizontal: 8,
+  },
+  closeButton: {
+    marginVertical: 5,
   },
   preview: {
     ...StyleSheet.absoluteFillObject,

app/react-native/src/preview/components/StoryListView/index.js

@@ -32,16 +32,12 @@ export default class StoryListView extends Component {
     super(props, ...args);
     this.state = {
       sections: [],
-      selectedKind: null,
-      selectedStory: null,
     };
 
     this.storyAddedHandler = this.handleStoryAdded.bind(this);
-    this.storyChangedHandler = this.handleStoryChanged.bind(this);
     this.changeStoryHandler = this.changeStory.bind(this);
 
     this.props.stories.on('storyAdded', this.storyAddedHandler);
-    this.props.events.on('story', this.storyChangedHandler);
   }
 
   componentDidMount() {
@@ -54,8 +50,7 @@ export default class StoryListView extends Component {
   }
 
   componentWillUnmount() {
-    this.props.stories.removeListener('storyAdded', this.storiesHandler);
-    this.props.events.removeListener('story', this.storyChangedHandler);
+    this.props.stories.removeListener('storyAdded', this.storyAddedHandler);
   }
 
   handleStoryAdded() {
@@ -75,14 +70,6 @@ export default class StoryListView extends Component {
     }
   }
 
-  handleStoryChanged(storyFn, selection) {
-    const { kind, story } = selection;
-    this.setState({
-      selectedKind: kind,
-      selectedStory: story,
-    });
-  }
-
   changeStory(kind, story) {
     this.props.events.emit('setCurrentStory', { kind, story });
   }
@@ -95,14 +82,14 @@ export default class StoryListView extends Component {
           <ListItem
             title={item.name}
             selected={
-              item.kind === this.state.selectedKind && item.name === this.state.selectedStory
+              item.kind === this.props.selectedKind && item.name === this.props.selectedStory
             }
             onPress={() => this.changeStory(item.kind, item.name)}
           />}
         renderSectionHeader={({ section }) =>
           <SectionHeader
             title={section.title}
-            selected={section.title === this.state.selectedKind}
+            selected={section.title === this.props.selectedKind}
           />}
         sections={this.state.sections}
         stickySectionHeadersEnabled={false}
@@ -123,4 +110,11 @@ StoryListView.propTypes = {
     emit: PropTypes.func.isRequired,
     removeListener: PropTypes.func.isRequired,
   }).isRequired,
+  selectedKind: PropTypes.string,
+  selectedStory: PropTypes.string,
+};
+
+StoryListView.defaultProps = {
+  selectedKind: null,
+  selectedStory: null,
 };

app/react-native/src/preview/components/StoryListView/style.js

@@ -4,7 +4,7 @@ export default {
     maxWidth: 250,
   },
   header: {
-    paddingTop: 24,
+    paddingTop: 4,
     paddingBottom: 4,
   },
   headerText: {