feat: update input group to have type dropdown

reactstrap · Oct 27, 2021 · 6c60226 · 6c60226
1 parent 322d0ad
commit 6c60226
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git a/docs/lib/examples/InputGroupButton.js b/docs/lib/examples/InputGroupButton.js
@@ -24,34 +24,30 @@ const Example = (props) => {
         <Input />
       </InputGroup>
       <br />
-      <InputGroup>
+      <InputGroup type="dropdown" isOpen={dropdownOpen} toggle={toggleDropDown}>
         <Input />
-        <Dropdown isOpen={dropdownOpen} toggle={toggleDropDown}>
-          <DropdownToggle caret>
-            Button Dropdown
-          </DropdownToggle>
-          <DropdownMenu>
-            <DropdownItem header>Header</DropdownItem>
-            <DropdownItem disabled>Action</DropdownItem>
-            <DropdownItem>Another Action</DropdownItem>
-            <DropdownItem divider />
-            <DropdownItem>Another Action</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
+        <DropdownToggle caret>
+          Button Dropdown
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem disabled>Action</DropdownItem>
+          <DropdownItem>Another Action</DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>Another Action</DropdownItem>
+        </DropdownMenu>
       </InputGroup>
       <br />
-      <InputGroup>
-        <Dropdown isOpen={splitButtonOpen} toggle={toggleSplit}>
-          <Button outline>Split Button</Button>
-          <DropdownToggle split outline />
-          <DropdownMenu>
-            <DropdownItem header>Header</DropdownItem>
-            <DropdownItem disabled>Action</DropdownItem>
-            <DropdownItem>Another Action</DropdownItem>
-            <DropdownItem divider />
-            <DropdownItem>Another Action</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
+      <InputGroup type="dropdown" isOpen={splitButtonOpen} toggle={toggleSplit}>
+        <Button outline>Split Button</Button>
+        <DropdownToggle split outline />
+        <DropdownMenu>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem disabled>Action</DropdownItem>
+          <DropdownItem>Another Action</DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>Another Action</DropdownItem>
+        </DropdownMenu>
         <Input placeholder="and..." />
         <Button color="secondary">I'm a button</Button>
       </InputGroup>

diff --git a/src/InputGroup.js b/src/InputGroup.js
@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
+import Dropdown from './Dropdown';
 
 const propTypes = {
   tag: tagPropType,
+  type: PropTypes.bool,
   size: PropTypes.string,
   className: PropTypes.string,
   cssModule: PropTypes.object,
@@ -19,6 +21,7 @@ const InputGroup = (props) => {
     className,
     cssModule,
     tag: Tag,
+    type,
     size,
     ...attributes
   } = props;
@@ -28,6 +31,10 @@ const InputGroup = (props) => {
     size ? `input-group-${size}` : null
   ), cssModule);
 
+  if (props.type === 'dropdown') {
+    return <Dropdown {...attributes} className={classes} />
+  }
+
   return (
     <Tag {...attributes} className={classes} />
   );

diff --git a/src/__tests__/InputGroup.spec.js b/src/__tests__/InputGroup.spec.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { InputGroup } from '../';
+import Dropdown from '../Dropdown';
 
 describe('InputGroup', () => {
   it('should render with "div" tag', () => {
@@ -39,4 +40,10 @@ describe('InputGroup', () => {
 
     expect(wrapper.type()).toBe('main');
   });
+
+  it('should render Dropdown when type is dropdown', () => {
+    const wrapper = shallow(<InputGroup type="dropdown" />);
+
+    expect(wrapper.type()).toBe(Dropdown);
+  });
 });