supports overlay callback (#53)

* supports overlay callback

* add test for overlay callback

Author: rinick

examples/overlay-callback.html

@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+import Dropdown from 'rc-dropdown';
+import Menu, { Item as MenuItem, Divider } from 'rc-menu';
+import 'rc-dropdown/assets/index.less';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function onSelect({ key }) {
+  console.log(`${key} selected`);
+}
+
+function onVisibleChange(visible) {
+  console.log(visible);
+}
+
+const menuCallback = () => (
+  <Menu onSelect={onSelect}>
+    <MenuItem disabled>disabled</MenuItem>
+    <MenuItem key="1">one</MenuItem>
+    <Divider />
+    <MenuItem key="2">two</MenuItem>
+  </Menu>
+);
+
+ReactDOM.render(
+  <div style={{ margin: 20 }}>
+    <div style={{ height: 100 }}/>
+    <div>
+      <Dropdown
+        trigger={['click']}
+        overlay={menuCallback}
+        animation="slide-up"
+        onVisibleChange={onVisibleChange}
+      >
+        <button style={{ width: 100 }}>open</button>
+      </Dropdown>
+    </div>
+  </div>
+, document.getElementById('__react-content'));

examples/overlay-callback.js

@@ -20,7 +20,10 @@ class Dropdown extends Component {
     align: PropTypes.object,
     overlayStyle: PropTypes.object,
     placement: PropTypes.string,
-    overlay: PropTypes.node,
+    overlay: PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.func,
+    ]),
     trigger: PropTypes.array,
     alignPoint: PropTypes.bool,
     showAction: PropTypes.array,
@@ -100,16 +103,30 @@ class Dropdown extends Component {
     return !alignPoint;
   };
 
-  getMenuElement() {
+  getMenuElement = () => {
     const { overlay, prefixCls } = this.props;
+    let overlayElement;
+    if (typeof overlay === 'function') {
+      overlayElement = overlay();
+    } else {
+      overlayElement = overlay;
+    }
     const extraOverlayProps = {
       prefixCls: `${prefixCls}-menu`,
       onClick: this.onClick,
     };
-    if (typeof overlay.type === 'string') {
+    if (typeof overlayElement.type === 'string') {
       delete extraOverlayProps.prefixCls;
     }
-    return React.cloneElement(overlay, extraOverlayProps);
+    return React.cloneElement(overlayElement, extraOverlayProps);
+  }
+
+  getMenuElementOrLambda() {
+    const { overlay } = this.props;
+    if (typeof overlay === 'function') {
+      return this.getMenuElement;
+    }
+    return this.getMenuElement();
   }
 
   getPopupDomNode() {
@@ -183,7 +200,7 @@ class Dropdown extends Component {
         popupAnimation={animation}
         popupVisible={this.state.visible}
         afterPopupVisibleChange={this.afterVisibleChange}
-        popup={this.getMenuElement()}
+        popup={this.getMenuElementOrLambda()}
         onPopupVisibleChange={this.onVisibleChange}
         getPopupContainer={getPopupContainer}
       >

src/Dropdown.jsx

@@ -192,4 +192,16 @@ describe('dropdown', () => {
     Simulate.click(buttonNode);
     expect(buttonNode.className).to.be('my-button');
   });
+
+  it('overlay callback', () => {
+    const overlay = <div style={{ width: 50 }}>Test</div>;
+    const dropdown = ReactDOM.render(
+      <Dropdown trigger={['click']} overlay={() => overlay}>
+        <button className="my-button">open</button>
+      </Dropdown>
+      , div);
+    Simulate.click(TestUtils.scryRenderedDOMComponentsWithClass(dropdown, 'my-button')[0]);
+    expect($(ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(dropdown,
+      'rc-dropdown')[0])).css('display')).not.to.be('none');
+  });
 });