declarative menu implementation

examples/Demo.js

@@ -5,11 +5,13 @@ import Menu from 'react-native-popup-menu';
 import Example from './Example';
 import BasicExample from './BasicExample';
 import OriginalExample from './OriginalExample';
+import ControlledExample from './ControlledExample';
 
 const demos = [
   { Component: BasicExample, name: 'Basic example' },
   { Component: Example, name: 'Advanced example' },
   { Component: OriginalExample, name: 'Original example' },
+  { Component: ControlledExample, name: 'Controlled example' },
 ];
 
 // show debug messages for demos.

src/Menu.js

@@ -32,8 +32,8 @@ export default class Menu extends Component {
     this.context.menuActions._notify();
   }
 
-  getName() {
-    return this._name;
+  componentDidUpdate() {
+    this.context.menuActions._notify();
   }
 
   componentWillUnmount() {
@@ -45,6 +45,10 @@ export default class Menu extends Component {
     this.context.menuRegistry.unsubscribe(this);
   }
 
+  getName() {
+    return this._name;
+  }
+
   render() {
     const { style } = this.props;
     const children = this._reduceChildren();
@@ -118,12 +122,15 @@ Menu.propTypes = {
   onSelect: React.PropTypes.func,
   onOpen: React.PropTypes.func,
   onClose: React.PropTypes.func,
+  opened: React.PropTypes.bool,
+  onBackdropPress: React.PropTypes.func,
 };
 
 Menu.defaultProps = {
   onSelect: () => {},
   onOpen: () => {},
   onClose: () => {},
+  onBackdropPress: () => {},
 };
 
 Menu.contextTypes = {

src/MenuContext.js

@@ -93,7 +93,7 @@ export default class MenuContext extends Component {
           { this.props.children }
         </View>
         {shouldRenderMenu &&
-          <Backdrop onPress={() => this.closeMenu()} />
+          <Backdrop onPress={() => this._onBackdropPress()} />
         }
         {shouldRenderMenu &&
           this._makeOptions(this.state.openedMenu)
@@ -102,6 +102,11 @@ export default class MenuContext extends Component {
     );
   }
 
+  _onBackdropPress() {
+    this.state.openedMenu.instance.props.onBackdropPress();
+    this.closeMenu();
+  }
+
   _isInitialized() {
     return !!this._ownLayout;
   }

src/MenuTrigger.js

@@ -3,14 +3,18 @@ import { View, TouchableWithoutFeedback, Text } from 'react-native';
 
 export default class MenuTrigger extends Component {
 
-  _openMenu() {
+  _onPress() {
+    if (this.props.onPress) {
+      return this.props.onPress();
+    }
     this.context.menuActions.openMenu(this.props.menuName);
   }
 
   render() {
     const { disabled, onRef, text, children } = this.props;
+    // TODO: omit props
     return (
-      <TouchableWithoutFeedback onPress={() => !disabled && this._openMenu()}>
+      <TouchableWithoutFeedback onPress={() => !disabled && this._onPress()}>
         <View {...this.props} ref={onRef} collapsable={false}>
           {text ? <Text>{text}</Text> : children}
         </View>
@@ -23,6 +27,7 @@ export default class MenuTrigger extends Component {
 MenuTrigger.propTypes = {
   disabled: React.PropTypes.bool,
   text: React.PropTypes.string,
+  onPress: React.PropTypes.func,
 };
 
 MenuTrigger.defaultProps = {