From fc5426e15bcc1c0adaf9f86d34457cf551397ef5 Mon Sep 17 00:00:00 2001
From: Cheton Wu <cheton@gmail.com>
Date: Thu, 11 Jan 2018 17:31:41 +0800
Subject: [PATCH] example: dropdown in dropdown

---
 examples/DropdownButton.jsx     | 32 +++++++++++++--
 examples/DropdownInDropdown.jsx | 73 +++++++++++++++++++++++++++++++++
 examples/index.jsx              |  4 ++
 3 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 examples/DropdownInDropdown.jsx

diff --git a/examples/DropdownButton.jsx b/examples/DropdownButton.jsx
index bfbb501..118afbc 100644
--- a/examples/DropdownButton.jsx
+++ b/examples/DropdownButton.jsx
@@ -10,12 +10,38 @@ export default () => (
         <div className={styles.sectionGroup}>
             <div style={{ display: 'inline-block', marginRight: 20 }}>
                 <h5>General</h5>
-                <Dropdown>
-                    <Dropdown.Toggle btnSize="lg" btnStyle="flat">
+                <Dropdown
+                    onSelect={(eventKey, event) => {
+                    }}
+                >
+                    <Dropdown.Toggle
+                        btnSize="lg"
+                        btnStyle="flat"
+                    >
                         Large
                     </Dropdown.Toggle>
                     <Dropdown.Menu>
-                        <MenuItem eventKey="1">Action</MenuItem>
+                        <MenuItem eventKey="1">
+                            <Dropdown
+                                onClick={event => {
+                                    event.stopPropagation();
+                                }}
+                                onSelect={(eventKey, event) => {
+                                }}
+                            >
+                                <Dropdown.Toggle>
+                                    ...
+                                </Dropdown.Toggle>
+                                <Dropdown.Menu>
+                                    <MenuItem eventKey="1.1">
+                                        Another Action
+                                    </MenuItem>
+                                    <MenuItem eventKey="1.2">
+                                        Another Action
+                                    </MenuItem>
+                                </Dropdown.Menu>
+                            </Dropdown>
+                        </MenuItem>
                         <MenuItem eventKey="2">Another Action</MenuItem>
                         <MenuItem eventKey="3">Something else here</MenuItem>
                     </Dropdown.Menu>
diff --git a/examples/DropdownInDropdown.jsx b/examples/DropdownInDropdown.jsx
new file mode 100644
index 0000000..a4fa258
--- /dev/null
+++ b/examples/DropdownInDropdown.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import Section from './Section';
+import Dropdown, { MenuItem } from '../src';
+import styles from './index.styl';
+
+export default () => (
+    <Section className="row-md-5 row-xl-5">
+        <div className={styles.sectionGroup}>
+            <h3>Dropdown In Dropdown</h3>
+            <Dropdown>
+                <Dropdown.Toggle>
+                    Select an option
+                </Dropdown.Toggle>
+                <Dropdown.Menu style={{ minWidth: 150 }}>
+                    <MenuItem eventKey="1" className="clearfix">
+                        Menu item one
+                        <Dropdown
+                            style={{ float: 'right' }}
+                            onClick={event => {
+                                event.stopPropagation();
+                            }}
+                        >
+                            <Dropdown.Toggle
+                                noCaret
+                                btnStyle="flat"
+                                btnSize="sm"
+                                compact
+                                style={{
+                                    padding: 0,
+                                    minWidth: 24
+                                }}
+                            >
+                                <i className="fa fa-fw fa-ellipsis-h" />
+                            </Dropdown.Toggle>
+                            <Dropdown.Menu>
+                                <MenuItem header>Action</MenuItem>
+                                <MenuItem>Rename</MenuItem>
+                                <MenuItem>Delete</MenuItem>
+                            </Dropdown.Menu>
+                        </Dropdown>
+                    </MenuItem>
+                    <MenuItem eventKey="2" className="clearfix">
+                        Menu item two
+                        <Dropdown
+                            style={{ float: 'right' }}
+                            onClick={event => {
+                                event.stopPropagation();
+                            }}
+                        >
+                            <Dropdown.Toggle
+                                noCaret
+                                btnStyle="flat"
+                                btnSize="sm"
+                                compact
+                                style={{
+                                    padding: 0,
+                                    minWidth: 24
+                                }}
+                            >
+                                <i className="fa fa-fw fa-ellipsis-h" />
+                            </Dropdown.Toggle>
+                            <Dropdown.Menu>
+                                <MenuItem header>Action</MenuItem>
+                                <MenuItem>Rename</MenuItem>
+                                <MenuItem>Delete</MenuItem>
+                            </Dropdown.Menu>
+                        </Dropdown>
+                    </MenuItem>
+                </Dropdown.Menu>
+            </Dropdown>
+        </div>
+    </Section>
+);
diff --git a/examples/index.jsx b/examples/index.jsx
index cb603d9..fda7b03 100644
--- a/examples/index.jsx
+++ b/examples/index.jsx
@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import Nav from './Nav';
 import DropdownButton from './DropdownButton';
 import DropdownMenu from './DropdownMenu';
+import DropdownInDropdown from './DropdownInDropdown';
 import DropdownMenuWrapper from './DropdownMenuWrapper';
 import AutoOpen from './AutoOpen';
 import Disabled from './Disabled';
@@ -35,6 +36,9 @@ class App extends React.Component {
                         <div className="col-md-12 col-lg-6 col-xs-4">
                             <DropdownMenu />
                         </div>
+                        <div className="col-md-12 col-lg-6 col-xs-4">
+                            <DropdownInDropdown />
+                        </div>
                         <div className="col-md-12 col-lg-6 col-xs-4">
                             <DropdownMenuWrapper />
                         </div>