test + demo for user defined menu options
This commit is contained in:
parent
0642c1b07b
commit
e24c49a568
|
@ -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);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue