test + demo for user defined menu options

This commit is contained in:
Stanislav Miklik 2016-05-31 10:02:02 +02:00
parent 0642c1b07b
commit e24c49a568
3 changed files with 46 additions and 0 deletions

View File

@ -44,4 +44,21 @@ describe('MenuOptions', () => {
expect(children[1].props.onSelect).toEqual(onSelect);
});
it('should work with user defined options', () => {
const UserOption = () => <MenuOption text='user-defined' />;
const onSelect = () => 0;
const { output } = render(
<MenuOptions onSelect={onSelect}>
<UserOption />
</MenuOptions>
);
expect(output.type).toEqual(View);
const children = output.props.children;
expect(children.length).toEqual(1);
const ch = children[0];
expect(ch.type).toBe(UserOption);
expect(ch.props.onSelect).toEqual(onSelect);
});
});

View File

@ -6,12 +6,14 @@ import Example from './Example';
import BasicExample from './BasicExample';
import OriginalExample from './OriginalExample';
import ControlledExample from './ControlledExample';
import ExtensionExample from './ExtensionExample';
const demos = [
{ Component: BasicExample, name: 'Basic example' },
{ Component: Example, name: 'Advanced example' },
{ Component: OriginalExample, name: 'Original example' },
{ Component: ControlledExample, name: 'Controlled example' },
{ Component: ExtensionExample, name: 'Extensions example' },
];
// show debug messages for demos.

View File

@ -0,0 +1,27 @@
import React from 'react';
import { Text } from 'react-native';
import Menu, {
MenuContext,
MenuOptions,
MenuOption,
MenuTrigger
} from 'react-native-popup-menu';
const CheckedOption = (props) => (
<MenuOption {...props} text={'\u2713 ' + props.text} />
)
const ExtensionExample = () => (
<MenuContext style={{flexDirection: 'column', padding: 30}}>
<Text>Extensible hello world!</Text>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption value={1} text='One' />
<CheckedOption value={2} text='Two' />
</MenuOptions>
</Menu>
</MenuContext>
);
export default ExtensionExample;