From e24c49a568527b453e3ec3303ecf73c2adb8d9b4 Mon Sep 17 00:00:00 2001
From: Stanislav Miklik <stanislav.miklik@gmail.com>
Date: Tue, 31 May 2016 10:02:02 +0200
Subject: [PATCH] test + demo for user defined menu options

---
 __tests__/MenuOptions-test.js | 17 +++++++++++++++++
 examples/Demo.js              |  2 ++
 examples/ExtensionExample.js  | 27 +++++++++++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 examples/ExtensionExample.js

diff --git a/__tests__/MenuOptions-test.js b/__tests__/MenuOptions-test.js
index 40e0e0e..51c82ce 100644
--- a/__tests__/MenuOptions-test.js
+++ b/__tests__/MenuOptions-test.js
@@ -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);
+  });
+
 });
diff --git a/examples/Demo.js b/examples/Demo.js
index bb32ffe..df1c5fb 100644
--- a/examples/Demo.js
+++ b/examples/Demo.js
@@ -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.
diff --git a/examples/ExtensionExample.js b/examples/ExtensionExample.js
new file mode 100644
index 0000000..cf7031e
--- /dev/null
+++ b/examples/ExtensionExample.js
@@ -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;