feat(ButtonDropdown): wrap Dropdown for ButtonDropdown

eddywashere · eddywashere · commit a2ea178143ab · 2016-02-21T00:11:05.000-08:00
diff --git a/example/js/DropdownsExample.jsx b/example/js/DropdownsExample.jsx
@@ -1,7 +1,7 @@
 /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
 
 import React from 'react';
-import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'lib/index';
+import { Button, ButtonDropdown, Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'lib/index';
 
 class DropdownsExample extends React.Component {
   render() {
@@ -46,6 +46,31 @@ class DropdownsExample extends React.Component {
             <DropdownItem>Another Action</DropdownItem>
           </DropdownMenu>
         </Dropdown>
+        <p>Button Dropdown</p>
+        <ButtonDropdown className="m-r-1">
+          <DropdownToggle caret>
+            <Button color="primary">Button Dropdown</Button>
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem header>Header</DropdownItem>
+            <DropdownItem disabled>Action</DropdownItem>
+            <DropdownItem>Another Action</DropdownItem>
+            <DropdownItem divider/>
+            <DropdownItem>Another Action</DropdownItem>
+          </DropdownMenu>
+        </ButtonDropdown>
+        <ButtonDropdown>
+          <DropdownToggle caret>
+            <Button color="primary">Button Dropdown</Button>
+          </DropdownToggle>
+          <DropdownMenu right>
+            <DropdownItem header>Header</DropdownItem>
+            <DropdownItem disabled>Action</DropdownItem>
+            <DropdownItem>Another Action</DropdownItem>
+            <DropdownItem divider/>
+            <DropdownItem>Another Action</DropdownItem>
+          </DropdownMenu>
+        </ButtonDropdown>
       </div>
     );
   }
diff --git a/lib/ButtonDropdown.jsx b/lib/ButtonDropdown.jsx
@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import Dropdown from './Dropdown';
+
+const propTypes = {
+  children: PropTypes.node
+};
+
+class ButtonDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      children,
+      ...attributes
+    } = this.props;
+
+    return (
+      <Dropdown {...attributes} group>
+        {children}
+      </Dropdown>
+    );
+  }
+}
+
+ButtonDropdown.propTypes = propTypes;
+
+export default ButtonDropdown;
diff --git a/lib/Dropdown.jsx b/lib/Dropdown.jsx
@@ -4,6 +4,8 @@ import omit from 'lodash.omit';
 
 const propTypes = {
   disabled: PropTypes.bool,
+  dropup: PropTypes.bool,
+  group: PropTypes.bool,
   open: PropTypes.bool,
   tag: PropTypes.string
 };
@@ -93,14 +95,19 @@ class Dropdown extends React.Component {
   render() {
     const {
       className,
+      dropup,
+      group,
       'tag': TagName,
       ...attributes
     } = omit(this.props, ['children', 'open']);
 
     const classes = classNames(
       className,
-      'dropdown',
-      { 'open': this.state.open }
+      group ? 'btn-group' : 'dropdown',
+      {
+        open: this.state.open,
+        dropup: dropup
+      }
     );
 
     return (
diff --git a/lib/index.js b/lib/index.js
@@ -1,4 +1,5 @@
 import Button from './Button';
+import ButtonDropdown from './ButtonDropdown';
 import ButtonGroup from './ButtonGroup';
 import ButtonToolbar from './ButtonToolbar';
 import Dropdown from './Dropdown';
@@ -8,6 +9,7 @@ import DropdownToggle from './DropdownToggle';
 
 export {
   Button,
+  ButtonDropdown,
   ButtonGroup,
   ButtonToolbar,
   Dropdown,
diff --git a/test/ButtonDropdown.spec.js b/test/ButtonDropdown.spec.js
@@ -0,0 +1,30 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { mount } from 'enzyme';
+import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from '../lib';
+
+
+describe('ButtonDropdown', () => {
+  it('should render a single child', () => {
+    const wrapper = mount(<ButtonDropdown>Ello world</ButtonDropdown>);
+
+    expect(wrapper.text()).toBe('Ello world');
+    expect(wrapper.find('.btn-group').length).toBe(1);
+  });
+
+  it('should render multiple children', () => {
+    const wrapper = mount(
+      <ButtonDropdown>
+        <DropdownToggle>Toggle</DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </ButtonDropdown>
+    );
+
+    expect(wrapper.find('.btn').text()).toBe('Toggle');
+    expect(wrapper.find('.btn-group').length).toBe(1);
+    expect(wrapper.find('.dropdown-item').length).toBe(1);
+    expect(wrapper.children().length).toBe(2);
+  });
+});
diff --git a/test/Dropdown.spec.js b/test/Dropdown.spec.js
@@ -1,6 +1,6 @@
 /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
 import React from 'react';
-import { shallow, mount, render } from 'enzyme';
+import { mount } from 'enzyme';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '../lib';
 
 
