Skip to content

Commit 48edd6b

Browse files
supergibbsTheSharpieOne
supergibbs
authored and
TheSharpieOne
committed
feat(Dropdown): Add nav prop to Dropdown (#636)
Consolidate NavDropdown with Dropdown Move NavDropdown tests to Dropdown Remove Uncontrolled NavDropdown and tests Update docs Deprecate: UncontrolledNavDropdown and NavDropdown. Use UncontrolledDropdown and Dropdown respectfully with the nav prop
1 parent 78322b1 commit 48edd6b

11 files changed

Lines changed: 53 additions & 123 deletions

File tree

‎docs/lib/Components/DropdownsPage.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ export default class DropdownPage extends React.Component {
5757
dropup: PropTypes.bool,
5858
group: PropTypes.bool,
5959
isOpen: PropTypes.bool,
60-
tag: PropTypes.string, // default: 'div'
60+
// For Dropdown usage inside a Nav
61+
nav: PropTypes.bool,
62+
tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'
6163
toggle: PropTypes.func
6264
};
6365
@@ -206,7 +208,7 @@ DropdownItem.propTypes = {
206208

207209
<h3>Uncontrolled Dropdown</h3>
208210
<p>
209-
For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledDropdown</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work. For the other Dropdown flavors, <code>ButtonDropdown</code>, <code>NavDropdown</code>, uncontrolled components have been made as well; <code>UncontrolledButtonDropdown</code>, <code>UncontrolledNavDropdown</code> respectfully.
211+
For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledDropdown</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work. For the <code>ButtonDropdown</code> flavor, an uncontrolled component have been made as well; <code>UncontrolledButtonDropdown</code>.
210212
</p>
211213
<div className="docs-example">
212214
<DropdownUncontrolledExample />

‎docs/lib/Components/NavsPage.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,6 @@ export default class NavssPage extends React.Component {
6262
}`}
6363
</PrismCode>
6464
</pre>
65-
<h4>NavDropdown Properties</h4>
66-
<pre>
67-
<PrismCode className="language-jsx">
68-
{`NavDropdown.propTypes = {
69-
disabled: PropTypes.bool,
70-
dropup: PropTypes.bool,
71-
group: PropTypes.bool,
72-
isOpen: PropTypes.bool,
73-
tag: PropTypes.string,
74-
toggle: PropTypes.func
75-
};`}
76-
</PrismCode>
77-
</pre>
7865
<h3>Vertical</h3>
7966
<div className="docs-example">
8067
<NavVerticalExample />

‎docs/lib/examples/NavPills.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Nav, NavItem, NavDropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
2+
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
33

44
export default class Example extends React.Component {
55
constructor(props) {
@@ -24,7 +24,7 @@ export default class Example extends React.Component {
2424
<NavItem>
2525
<NavLink href="#" active>Link</NavLink>
2626
</NavItem>
27-
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
27+
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
2828
<DropdownToggle nav caret>
2929
Dropdown
3030
</DropdownToggle>
@@ -35,7 +35,7 @@ export default class Example extends React.Component {
3535
<DropdownItem divider />
3636
<DropdownItem>Another Action</DropdownItem>
3737
</DropdownMenu>
38-
</NavDropdown>
38+
</Dropdown>
3939
<NavItem>
4040
<NavLink href="#">Link</NavLink>
4141
</NavItem>

‎docs/lib/examples/NavTabs.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Nav, NavItem, NavDropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
2+
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
33

44
export default class Example extends React.Component {
55
constructor(props) {
@@ -24,7 +24,7 @@ export default class Example extends React.Component {
2424
<NavItem>
2525
<NavLink href="#" active>Link</NavLink>
2626
</NavItem>
27-
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
27+
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
2828
<DropdownToggle nav caret>
2929
Dropdown
3030
</DropdownToggle>
@@ -35,7 +35,7 @@ export default class Example extends React.Component {
3535
<DropdownItem divider />
3636
<DropdownItem>Another Action</DropdownItem>
3737
</DropdownMenu>
38-
</NavDropdown>
38+
</Dropdown>
3939
<NavItem>
4040
<NavLink href="#">Link</NavLink>
4141
</NavItem>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"Jason Sturges <[email protected]> (https://github.com/jasonsturges)",
6565
"Jean-Elie Barjonet (https://github.com/jebarjonet)",
6666
"Jeff Francisco (https://github.com/j-francisco)",
67+
"Jesse Mandel (https://github.com/supergibbs)",
6768
"Jim Liu <[email protected]> (https://github.com/JimLiu)",
6869
"Joe (https://github.com/joemcadams)",
6970
"Joe Woynillowicz (https://github.com/CoderJoeIO)",

‎src/Dropdown.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const propTypes = {
1313
dropup: PropTypes.bool,
1414
group: PropTypes.bool,
1515
isOpen: PropTypes.bool,
16+
nav: PropTypes.bool,
1617
size: PropTypes.string,
1718
tag: PropTypes.string,
1819
toggle: PropTypes.func,
@@ -24,7 +25,7 @@ const propTypes = {
2425
const defaultProps = {
2526
isOpen: false,
2627
dropup: false,
27-
tag: 'div',
28+
nav: false,
2829
};
2930

3031
const childContextTypes = {
@@ -170,17 +171,21 @@ class Dropdown extends React.Component {
170171
isOpen,
171172
group,
172173
size,
174+
nav,
173175
...attrs
174176
} = omit(this.props, ['toggle', 'disabled']);
175177

178+
attrs.tag = attrs.tag || (nav ? 'li' : 'div');
179+
176180
const classes = mapToCssModules(classNames(
177181
className,
178182
{
179183
'btn-group': group,
180184
[`btn-group-${size}`]: !!size,
181185
dropdown: !group,
182186
show: isOpen,
183-
dropup: dropup
187+
dropup: dropup,
188+
'nav-item': nav
184189
}
185190
), cssModule);
186191
return <Manager {...attrs} className={classes} onKeyDown={this.handleKeyDown} />;

‎src/NavDropdown.js‎

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,8 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import { mapToCssModules } from './utils';
2+
import { warnOnce } from './utils';
53
import Dropdown from './Dropdown';
64

7-
const propTypes = {
8-
children: PropTypes.node,
9-
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
10-
className: PropTypes.string,
11-
cssModule: PropTypes.object,
12-
};
13-
14-
const defaultProps = {
15-
tag: 'li'
16-
};
17-
18-
const NavDropdown = (props) => {
19-
const {
20-
className,
21-
cssModule,
22-
tag: Tag,
23-
...attributes
24-
} = props;
25-
26-
const classes = mapToCssModules(classNames(
27-
className,
28-
'nav-item'
29-
), cssModule);
30-
31-
return (
32-
<Dropdown {...attributes} tag={Tag} className={classes} />
33-
);
34-
};
35-
36-
NavDropdown.propTypes = propTypes;
37-
NavDropdown.defaultProps = defaultProps;
38-
39-
export default NavDropdown;
5+
export default function NavDropdown(props) {
6+
warnOnce('The "NavDropdown" component has been deprecated.\nPlease use component "Dropdown" with nav prop.');
7+
return <Dropdown nav {...props} />;
8+
}

‎src/Uncontrolled.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { warnOnce } from './utils';
23
import Alert from './Alert';
34
import ButtonDropdown from './ButtonDropdown';
45
import Dropdown from './Dropdown';
@@ -32,6 +33,9 @@ Object.keys(components).forEach((key) => {
3233
}
3334

3435
render() {
36+
if (key === 'UncontrolledNavDropdown') {
37+
warnOnce('The "UncontrolledNavDropdown" component has been deprecated.\nPlease use component "UncontrolledDropdown" with nav prop.');
38+
}
3539
return <Tag isOpen={this.state.isOpen} toggle={this.toggle} {...this.props} />;
3640
}
3741
}

‎src/__tests__/Dropdown.spec.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -746,4 +746,30 @@ describe('Dropdown', () => {
746746
expect(small.find('.btn-group-sm').length).toBe(1);
747747
expect(large.find('.btn-group-lg').length).toBe(1);
748748
});
749+
750+
describe('Dropdown with nav', () => {
751+
it('should render a single child', () => {
752+
const wrapper = mount(<Dropdown nav isOpen={isOpen} toggle={toggle}>Ello world</Dropdown>);
753+
754+
expect(wrapper.find('.nav-item').text()).toBe('Ello world');
755+
expect(wrapper.find('.nav-item').length).toBe(1);
756+
});
757+
758+
it('should render multiple children when isOpen', () => {
759+
isOpen = true;
760+
const wrapper = mount(
761+
<Dropdown nav isOpen={isOpen} toggle={toggle}>
762+
<DropdownToggle>Toggle</DropdownToggle>
763+
<DropdownMenu>
764+
<DropdownItem>Test</DropdownItem>
765+
</DropdownMenu>
766+
</Dropdown>
767+
);
768+
769+
expect(wrapper.find('.btn').text()).toBe('Toggle');
770+
expect(wrapper.find('.nav-item').length).toBe(1);
771+
expect(wrapper.find('.dropdown-item').length).toBe(1);
772+
expect(wrapper.children().length).toBe(2);
773+
});
774+
});
749775
});

‎src/__tests__/NavDropdown.spec.js‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)