Skip to content

Commit bb00f4c

Browse files
TheSharpieOneTheSharpieOne
committed
feat(Popover): update popovers to bs v4 beta
Deprecate PopoverTitle in favor of PopoverHeader Deprecate PopoverContent in favor of PopoverBody Update docs/examples Update tests
1 parent a460912 commit bb00f4c

14 files changed

Lines changed: 153 additions & 111 deletions

‎docs/lib/UI/Nav.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export default class UINav extends React.Component {
2020
}
2121
render() {
2222
return (
23-
<Navbar className="header" full color="faded" light toggleable>
23+
<Navbar className="header" color="faded" light toggleable>
2424
<Container>
25-
<NavbarToggler right onClick={this.toggleNavbar} />
25+
<NavbarToggler onClick={this.toggleNavbar} />
2626
<NavbarBrand className="mr-auto" tag={Link} to="/">reactstrap</NavbarBrand>
2727
<Collapse navbar isOpen={this.state.showNavbar}>
2828
<Nav navbar className="ml-sm-auto">

‎docs/lib/examples/Popover.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
22
import React from 'react';
3-
import { Button, Popover, PopoverTitle, PopoverContent } from 'reactstrap';
3+
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
44

55
export default class Example extends React.Component {
66
constructor(props) {
@@ -25,8 +25,8 @@ export default class Example extends React.Component {
2525
Launch Popover
2626
</Button>
2727
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
28-
<PopoverTitle>Popover Title</PopoverTitle>
29-
<PopoverContent>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverContent>
28+
<PopoverHeader>Popover Title</PopoverHeader>
29+
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
3030
</Popover>
3131
</div>
3232
);

‎docs/lib/examples/PopoverMulti.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
22

33
import React from 'react';
4-
import { Button, Popover, PopoverTitle, PopoverContent } from 'reactstrap';
4+
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
55

66
class PopoverItem extends React.Component {
77
constructor(props) {
@@ -26,8 +26,8 @@ class PopoverItem extends React.Component {
2626
{this.props.item.text}
2727
</Button>
2828
<Popover placement={this.props.item.placement} isOpen={this.state.popoverOpen} target={'Popover-' + this.props.id} toggle={this.toggle}>
29-
<PopoverTitle>Popover Title</PopoverTitle>
30-
<PopoverContent>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverContent>
29+
<PopoverHeader>Popover Title</PopoverHeader>
30+
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
3131
</Popover>
3232
</span>
3333
);

‎src/PopoverBody.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import { mapToCssModules } from './utils';
5+
6+
const propTypes = {
7+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
8+
className: PropTypes.string,
9+
cssModule: PropTypes.object,
10+
};
11+
12+
const defaultProps = {
13+
tag: 'div'
14+
};
15+
16+
const PopoverBody = (props) => {
17+
const {
18+
className,
19+
cssModule,
20+
tag: Tag,
21+
...attributes
22+
} = props;
23+
24+
const classes = mapToCssModules(classNames(
25+
className,
26+
'popover-body'
27+
), cssModule);
28+
29+
return (
30+
<Tag {...attributes} className={classes} />
31+
);
32+
};
33+
34+
PopoverBody.propTypes = propTypes;
35+
PopoverBody.defaultProps = defaultProps;
36+
37+
export default PopoverBody;

‎src/PopoverContent.js‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +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 PopoverBody from './PopoverBody';
3+
import { warnOnce } from './utils';
54

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

‎src/PopoverHeader.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import { mapToCssModules } from './utils';
5+
6+
const propTypes = {
7+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
8+
className: PropTypes.string,
9+
cssModule: PropTypes.object,
10+
};
11+
12+
const defaultProps = {
13+
tag: 'h3'
14+
};
15+
16+
const PopoverHeader = (props) => {
17+
const {
18+
className,
19+
cssModule,
20+
tag: Tag,
21+
...attributes
22+
} = props;
23+
24+
const classes = mapToCssModules(classNames(
25+
className,
26+
'popover-header'
27+
), cssModule);
28+
29+
return (
30+
<Tag {...attributes} className={classes} />
31+
);
32+
};
33+
34+
PopoverHeader.propTypes = propTypes;
35+
PopoverHeader.defaultProps = defaultProps;
36+
37+
export default PopoverHeader;

‎src/PopoverTitle.js‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +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 PopoverHeader from './PopoverHeader';
3+
import { warnOnce } from './utils';
54

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

‎src/__tests__/CardBlock.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { shallow } from 'enzyme';
33
import { CardBlock, CardBody } from '../';
44

5-
describe('CardBody', () => {
5+
describe('CardBlock', () => {
66
it('should render CardBody', () => {
77
const wrapper = shallow(<CardBlock>Yo!</CardBlock>);
88

‎src/__tests__/Popover.spec.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
3-
import { Popover, PopoverTitle, PopoverContent, TetherContent } from '../';
3+
import { Popover, PopoverHeader, PopoverBody, TetherContent } from '../';
44

55
describe('Popover', () => {
66
let element;
@@ -28,40 +28,40 @@ describe('Popover', () => {
2828
isOpen = true;
2929
const wrapper = mount(
3030
<Popover isOpen={isOpen} toggle={toggle} placement={placement} target="popover-target">
31-
<PopoverTitle>Title</PopoverTitle>
32-
<PopoverContent>Content</PopoverContent>
31+
<PopoverHeader>Title</PopoverHeader>
32+
<PopoverBody>Content</PopoverBody>
3333
</Popover>
3434
);
3535

3636
expect(wrapper.find(TetherContent).length).toBe(1);
3737
expect(document.getElementsByClassName('popover').length).toBe(1);
3838
expect(document.getElementsByClassName('popover-inner').length).toBe(1);
39-
expect(document.getElementsByClassName('popover-title').length).toBe(1);
40-
expect(document.getElementsByClassName('popover-content').length).toBe(1);
39+
expect(document.getElementsByClassName('popover-header').length).toBe(1);
40+
expect(document.getElementsByClassName('popover-body').length).toBe(1);
4141
wrapper.unmount();
4242
});
4343

4444
it('should not render inner TetherContent when not isOpen', () => {
4545
const wrapper = mount(
4646
<Popover isOpen={isOpen} toggle={toggle} placement={placement} target="popover-target">
47-
<PopoverTitle>Title</PopoverTitle>
48-
<PopoverContent>Content</PopoverContent>
47+
<PopoverHeader>Title</PopoverHeader>
48+
<PopoverBody>Content</PopoverBody>
4949
</Popover>
5050
);
5151

5252
expect(wrapper.find(TetherContent).length).toBe(0);
5353
expect(document.getElementsByClassName('popover').length).toBe(0);
5454
expect(document.getElementsByClassName('popover-inner').length).toBe(0);
55-
expect(document.getElementsByClassName('popover-title').length).toBe(0);
56-
expect(document.getElementsByClassName('popover-content').length).toBe(0);
55+
expect(document.getElementsByClassName('popover-header').length).toBe(0);
56+
expect(document.getElementsByClassName('popover-body').length).toBe(0);
5757
wrapper.unmount();
5858
});
5959

6060
it('should be able to show the popover', () => {
6161
const wrapper = mount(
6262
<Popover isOpen={isOpen} toggle={toggle} placement={placement} target="popover-target">
63-
<PopoverTitle>Title</PopoverTitle>
64-
<PopoverContent>Content</PopoverContent>
63+
<PopoverHeader>Title</PopoverHeader>
64+
<PopoverBody>Content</PopoverBody>
6565
</Popover>
6666
);
6767

@@ -71,8 +71,8 @@ describe('Popover', () => {
7171
expect(document.body.querySelectorAll('.popover.show').length).toBe(0);
7272
expect(document.getElementsByClassName('popover').length).toBe(0);
7373
expect(document.getElementsByClassName('popover-inner').length).toBe(0);
74-
expect(document.getElementsByClassName('popover-title').length).toBe(0);
75-
expect(document.getElementsByClassName('popover-content').length).toBe(0);
74+
expect(document.getElementsByClassName('popover-header').length).toBe(0);
75+
expect(document.getElementsByClassName('popover-body').length).toBe(0);
7676

7777
toggle();
7878
wrapper.setProps({
@@ -84,8 +84,8 @@ describe('Popover', () => {
8484
expect(document.body.querySelectorAll('.popover.show').length).toBe(1);
8585
expect(document.getElementsByClassName('popover').length).toBe(1);
8686
expect(document.getElementsByClassName('popover-inner').length).toBe(1);
87-
expect(document.getElementsByClassName('popover-title').length).toBe(1);
88-
expect(document.getElementsByClassName('popover-content').length).toBe(1);
87+
expect(document.getElementsByClassName('popover-header').length).toBe(1);
88+
expect(document.getElementsByClassName('popover-body').length).toBe(1);
8989

9090
wrapper.unmount();
9191
});
@@ -94,17 +94,17 @@ describe('Popover', () => {
9494
isOpen = true;
9595
const wrapper = mount(
9696
<Popover isOpen={isOpen} toggle={toggle} placement={placement} target="popover-target">
97-
<PopoverTitle>Title</PopoverTitle>
98-
<PopoverContent>Content</PopoverContent>
97+
<PopoverHeader>Title</PopoverHeader>
98+
<PopoverBody>Content</PopoverBody>
9999
</Popover>
100100
);
101101

102102
expect(isOpen).toBe(true);
103103
expect(wrapper.find(TetherContent).length).toBe(1);
104104
expect(document.getElementsByClassName('popover').length).toBe(1);
105105
expect(document.getElementsByClassName('popover-inner').length).toBe(1);
106-
expect(document.getElementsByClassName('popover-title').length).toBe(1);
107-
expect(document.getElementsByClassName('popover-content').length).toBe(1);
106+
expect(document.getElementsByClassName('popover-header').length).toBe(1);
107+
expect(document.getElementsByClassName('popover-body').length).toBe(1);
108108

109109
toggle();
110110
wrapper.setProps({
@@ -115,17 +115,17 @@ describe('Popover', () => {
115115
expect(wrapper.find(TetherContent).length).toBe(0);
116116
expect(document.getElementsByClassName('popover').length).toBe(0);
117117
expect(document.getElementsByClassName('popover-inner').length).toBe(0);
118-
expect(document.getElementsByClassName('popover-title').length).toBe(0);
119-
expect(document.getElementsByClassName('popover-content').length).toBe(0);
118+
expect(document.getElementsByClassName('popover-header').length).toBe(0);
119+
expect(document.getElementsByClassName('popover-body').length).toBe(0);
120120

121121
wrapper.unmount();
122122
});
123123

124124
it('default toggle prop does nothing', () => {
125125
const wrapper = mount(
126126
<Popover isOpen={isOpen} placement={placement} target="popover-target">
127-
<PopoverTitle>Title</PopoverTitle>
128-
<PopoverContent>Content</PopoverContent>
127+
<PopoverHeader>Title</PopoverHeader>
128+
<PopoverBody>Content</PopoverBody>
129129
</Popover>
130130
);
131131
const instance = wrapper.instance();
@@ -140,8 +140,8 @@ describe('Popover', () => {
140140
it('should allow custom classes to be added to the popover-inner', () => {
141141
const wrapper = mount(
142142
<Popover isOpen placement={placement} target="popover-target" className="popover-special">
143-
<PopoverTitle>Title</PopoverTitle>
144-
<PopoverContent>Content</PopoverContent>
143+
<PopoverHeader>Title</PopoverHeader>
144+
<PopoverBody>Content</PopoverBody>
145145
</Popover>
146146
);
147147

‎src/__tests__/PopoverBody.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import { PopoverBody } from '../';
4+
5+
describe('PopoverBody', () => {
6+
it('should render children', () => {
7+
const wrapper = shallow(<PopoverBody>Ello world</PopoverBody>);
8+
9+
expect(wrapper.text()).toBe('Ello world');
10+
expect(wrapper.hasClass('popover-body')).toBe(true);
11+
});
12+
});

0 commit comments

Comments
 (0)