diff --git a/examples/Demo.js b/examples/Demo.js index e18006e..bb32ffe 100644 --- a/examples/Demo.js +++ b/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. diff --git a/src/Menu.js b/src/Menu.js index 94b73ba..eaf18d8 100644 --- a/src/Menu.js +++ b/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 = { diff --git a/src/MenuContext.js b/src/MenuContext.js index 1ef49b1..4c4fe17 100644 --- a/src/MenuContext.js +++ b/src/MenuContext.js @@ -93,7 +93,7 @@ export default class MenuContext extends Component { { this.props.children } {shouldRenderMenu && - this.closeMenu()} /> + 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; } diff --git a/src/MenuTrigger.js b/src/MenuTrigger.js index 0aadf6d..3d83709 100644 --- a/src/MenuTrigger.js +++ b/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 ( - !disabled && this._openMenu()}> + !disabled && this._onPress()}> {text ? {text} : children} @@ -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 = {