Skip to content

Commit 3373a90

Browse files
TheSharpieOneeddywashere
TheSharpieOne
authored and
eddywashere
committed
fix(*): make sure everything can have a Tag (#315)
fixes #314
1 parent feb9a70 commit 3373a90

20 files changed

Lines changed: 180 additions & 31 deletions

‎src/ButtonGroup.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
'aria-label': PropTypes.string,
78
className: PropTypes.string,
89
cssModule: PropTypes.object,
@@ -12,7 +13,8 @@ const propTypes = {
1213
};
1314

1415
const defaultProps = {
15-
role: 'group'
16+
tag: 'div',
17+
role: 'group',
1618
};
1719

1820
const ButtonGroup = (props) => {
@@ -21,6 +23,7 @@ const ButtonGroup = (props) => {
2123
cssModule,
2224
size,
2325
vertical,
26+
tag: Tag,
2427
...attributes
2528
} = props;
2629

@@ -31,7 +34,7 @@ const ButtonGroup = (props) => {
3134
), cssModule);
3235

3336
return (
34-
<div {...attributes} className={classes} />
37+
<Tag {...attributes} className={classes} />
3538
);
3639
};
3740

‎src/ButtonToolbar.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
'aria-label': PropTypes.string,
78
className: PropTypes.string,
89
cssModule: PropTypes.object,
910
role: PropTypes.string,
1011
};
1112

1213
const defaultProps = {
13-
role: 'toolbar'
14+
tag: 'div',
15+
role: 'toolbar',
1416
};
1517

1618
const ButtonToolbar = (props) => {
1719
const {
1820
className,
1921
cssModule,
22+
tag: Tag,
2023
...attributes
2124
} = props;
2225

@@ -26,7 +29,7 @@ const ButtonToolbar = (props) => {
2629
), cssModule);
2730

2831
return (
29-
<div {...attributes} className={classes} />
32+
<Tag {...attributes} className={classes} />
3033
);
3134
};
3235

‎src/Col.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const columnProps = PropTypes.oneOfType([
1919
]);
2020

2121
const propTypes = {
22+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
2223
xs: columnProps,
2324
sm: columnProps,
2425
md: columnProps,
@@ -30,6 +31,7 @@ const propTypes = {
3031
};
3132

3233
const defaultProps = {
34+
tag: 'div',
3335
widths: colWidths,
3436
};
3537

@@ -48,6 +50,7 @@ const Col = (props) => {
4850
className,
4951
cssModule,
5052
widths,
53+
tag: Tag,
5154
...attributes
5255
} = props;
5356
const colClasses = [];
@@ -90,7 +93,7 @@ const Col = (props) => {
9093
), cssModule);
9194

9295
return (
93-
<div {...attributes} className={classes} />
96+
<Tag {...attributes} className={classes} />
9497
);
9598
};
9699

‎src/Container.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,22 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
fluid: PropTypes.bool,
78
className: PropTypes.string,
89
cssModule: PropTypes.object,
910
};
1011

11-
const defaultProps = {};
12+
const defaultProps = {
13+
tag: 'div',
14+
};
1215

1316
const Container = (props) => {
1417
const {
1518
className,
1619
cssModule,
1720
fluid,
21+
tag: Tag,
1822
...attributes
1923
} = props;
2024

@@ -24,7 +28,7 @@ const Container = (props) => {
2428
), cssModule);
2529

2630
return (
27-
<div {...attributes} className={classes} />
31+
<Tag {...attributes} className={classes} />
2832
);
2933
};
3034

‎src/DropdownMenu.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,36 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
children: PropTypes.node.isRequired,
78
right: PropTypes.bool,
89
className: PropTypes.string,
910
cssModule: PropTypes.object,
1011
};
1112

13+
const defaultProps = {
14+
tag: 'div',
15+
};
16+
1217
const contextTypes = {
1318
isOpen: PropTypes.bool.isRequired
1419
};
1520

1621
const DropdownMenu = (props, context) => {
17-
const { className, cssModule, right, ...attributes } = props;
22+
const { className, cssModule, right, tag: Tag, ...attributes } = props;
1823
const classes = mapToCssModules(classNames(
1924
className,
2025
'dropdown-menu',
2126
{ 'dropdown-menu-right': right }
2227
), cssModule);
2328

2429
return (
25-
<div {...attributes} tabIndex="-1" aria-hidden={!context.isOpen} role="menu" className={classes} />
30+
<Tag {...attributes} tabIndex="-1" aria-hidden={!context.isOpen} role="menu" className={classes} />
2631
);
2732
};
2833

2934
DropdownMenu.propTypes = propTypes;
35+
DropdownMenu.defaultProps = defaultProps;
3036
DropdownMenu.contextTypes = contextTypes;
3137

3238
export default DropdownMenu;

‎src/ModalBody.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,32 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
className: PropTypes.string,
78
cssModule: PropTypes.object,
89
};
910

11+
const defaultProps = {
12+
tag: 'div',
13+
};
14+
1015
const ModalBody = (props) => {
1116
const {
1217
className,
1318
cssModule,
19+
tag: Tag,
1420
...attributes } = props;
1521
const classes = mapToCssModules(classNames(
1622
className,
1723
'modal-body'
1824
), cssModule);
1925

2026
return (
21-
<div {...attributes} className={classes} />
27+
<Tag {...attributes} className={classes} />
2228
);
2329
};
2430

2531
ModalBody.propTypes = propTypes;
32+
ModalBody.defaultProps = defaultProps;
2633

2734
export default ModalBody;

‎src/ModalFooter.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,32 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
className: PropTypes.string,
78
cssModule: PropTypes.object,
89
};
910

11+
const defaultProps = {
12+
tag: 'div',
13+
};
14+
1015
const ModalFooter = (props) => {
1116
const {
1217
className,
1318
cssModule,
19+
tag: Tag,
1420
...attributes } = props;
1521
const classes = mapToCssModules(classNames(
1622
className,
1723
'modal-footer'
1824
), cssModule);
1925

2026
return (
21-
<div {...attributes} className={classes} />
27+
<Tag {...attributes} className={classes} />
2228
);
2329
};
2430

2531
ModalFooter.propTypes = propTypes;
32+
ModalFooter.defaultProps = defaultProps;
2633

2734
export default ModalFooter;

‎src/ModalHeader.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@ import classNames from 'classnames';
33
import { mapToCssModules } from './utils';
44

55
const propTypes = {
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
7+
wrapTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
68
toggle: PropTypes.func,
79
className: PropTypes.string,
810
cssModule: PropTypes.object,
911
children: PropTypes.node,
1012
};
1113

12-
const defaultProps = {};
14+
const defaultProps = {
15+
tag: 'h4',
16+
wrapTag: 'div',
17+
};
1318

1419
const ModalHeader = (props) => {
1520
let closeButton;
@@ -18,6 +23,8 @@ const ModalHeader = (props) => {
1823
cssModule,
1924
children,
2025
toggle,
26+
tag: Tag,
27+
wrapTag: WrapTag,
2128
...attributes } = props;
2229

2330
const classes = mapToCssModules(classNames(
@@ -34,12 +41,12 @@ const ModalHeader = (props) => {
3441
}
3542

3643
return (
37-
<div {...attributes} className={classes}>
38-
<h4 className={mapToCssModules('modal-title', cssModule)}>
44+
<WrapTag {...attributes} className={classes}>
45+
<Tag className={mapToCssModules('modal-title', cssModule)}>
3946
{children}
40-
</h4>
47+
</Tag>
4148
{closeButton}
42-
</div>
49+
</WrapTag>
4350
);
4451
};
4552

‎src/TabContent.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import React, { PropTypes, Component } from 'react';
22
import classNames from 'classnames';
3+
import omit from 'lodash.omit';
34
import { mapToCssModules } from './utils';
45

56
const propTypes = {
6-
children: PropTypes.node,
7+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
78
activeTab: PropTypes.any,
89
className: PropTypes.string,
910
cssModule: PropTypes.object,
1011
};
1112

13+
const defaultProps = {
14+
tag: 'div',
15+
};
16+
1217
const childContextTypes = {
1318
activeTabId: PropTypes.any
1419
};
@@ -33,13 +38,21 @@ export default class TabContent extends Component {
3338
}
3439
}
3540
render() {
36-
const classes = mapToCssModules(classNames('tab-content', this.props.className), this.props.cssModule);
41+
const {
42+
className,
43+
cssModule,
44+
tag: Tag,
45+
} = this.props;
46+
47+
const attributes = omit(this.props, Object.keys(propTypes));
48+
49+
const classes = mapToCssModules(classNames('tab-content', className), cssModule);
50+
3751
return (
38-
<div className={classes}>
39-
{this.props.children}
40-
</div>
52+
<Tag {...attributes} className={classes} />
4153
);
4254
}
4355
}
4456
TabContent.propTypes = propTypes;
57+
TabContent.defaultProps = defaultProps;
4558
TabContent.childContextTypes = childContextTypes;

‎src/TabPane.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
21
import React, { PropTypes } from 'react';
32
import classNames from 'classnames';
43
import { mapToCssModules } from './utils';
54

65
const propTypes = {
7-
children: PropTypes.node,
6+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
87
className: PropTypes.string,
98
cssModule: PropTypes.object,
109
tabId: PropTypes.any,
1110
};
11+
12+
const defaultProps = {
13+
tag: 'div',
14+
};
15+
1216
const contextTypes = {
1317
activeTabId: PropTypes.any
1418
};
@@ -18,15 +22,14 @@ export default function TabPane(props, context) {
1822
className,
1923
cssModule,
2024
tabId,
21-
children,
25+
tag: Tag,
2226
...attributes
2327
} = props;
2428
const classes = mapToCssModules(classNames('tab-pane', className, { active: tabId === context.activeTabId }), cssModule);
2529
return (
26-
<div {...attributes} className={classes}>
27-
{children}
28-
</div>
30+
<Tag {...attributes} className={classes} />
2931
);
3032
}
3133
TabPane.propTypes = propTypes;
34+
TabPane.defaultProps = defaultProps;
3235
TabPane.contextTypes = contextTypes;

0 commit comments

Comments
 (0)