Files

58 lines
1.4 KiB
JavaScript
Raw Permalink Normal View History

2017-01-19 11:56:39 +01:00
import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import Menu, {
2017-12-19 11:08:34 +01:00
MenuProvider,
2017-01-19 11:56:39 +01:00
MenuOptions,
MenuOption,
2018-04-27 19:31:44 +02:00
MenuTrigger,
withMenuContext,
2017-01-19 11:56:39 +01:00
} from 'react-native-popup-menu';
2018-04-27 19:31:44 +02:00
const Openner = (props) => (
<TouchableOpacity style={{ paddingTop: 50 }}
onPress={() => props.ctx.menuActions.openMenu('menu-1')}>
<Text>Open menu from context</Text>
</TouchableOpacity>
);
const ContextOpenner = withMenuContext(Openner);
2017-01-19 11:56:39 +01:00
export default class ControlledExample extends Component {
onOptionSelect(value) {
alert(`Selected number: ${value}`);
if (value === 1) {
2017-05-12 14:53:55 +02:00
this.menu.close();
2017-01-19 11:56:39 +01:00
}
return false;
}
openMenu() {
2017-05-12 14:53:55 +02:00
this.menu.open();
}
onRef = r => {
this.menu = r;
2017-01-19 11:56:39 +01:00
}
render() {
return (
2017-12-19 11:08:34 +01:00
<MenuProvider style={{flexDirection: 'column', padding: 30}}>
2018-04-27 19:31:44 +02:00
<Menu onSelect={value => this.onOptionSelect(value)}
name="menu-1" ref={this.onRef}>
2017-01-19 11:56:39 +01:00
<MenuTrigger text='Select option'/>
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2} text='Two (not closing)' />
</MenuOptions>
</Menu>
<TouchableOpacity style={{ paddingTop: 50 }} onPress={() => this.openMenu()}>
<Text>Open menu from outside</Text>
</TouchableOpacity>
2018-04-27 19:31:44 +02:00
<ContextOpenner />
2017-12-19 11:08:34 +01:00
</MenuProvider>
2017-01-19 11:56:39 +01:00
);
}
}