fix(*): make sure everything can have a Tag (#315)

fixes #314
reactstrap · Jan 31, 2017 · 3373a90 · 3373a90
1 parent feb9a70
commit 3373a90
Show file tree

Hide file tree

Showing 20 changed files with 180 additions and 31 deletions.
diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   'aria-label': PropTypes.string,
   className: PropTypes.string,
   cssModule: PropTypes.object,
@@ -12,7 +13,8 @@ const propTypes = {
 };
 
 const defaultProps = {
-  role: 'group'
+  tag: 'div',
+  role: 'group',
 };
 
 const ButtonGroup = (props) => {
@@ -21,6 +23,7 @@ const ButtonGroup = (props) => {
     cssModule,
     size,
     vertical,
+    tag: Tag,
     ...attributes
   } = props;
 
@@ -31,7 +34,7 @@ const ButtonGroup = (props) => {
   ), cssModule);
 
   return (
-    <div {...attributes} className={classes} />
+    <Tag {...attributes} className={classes} />
   );
 };
 

diff --git a/src/ButtonToolbar.js b/src/ButtonToolbar.js
@@ -3,20 +3,23 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   'aria-label': PropTypes.string,
   className: PropTypes.string,
   cssModule: PropTypes.object,
   role: PropTypes.string,
 };
 
 const defaultProps = {
-  role: 'toolbar'
+  tag: 'div',
+  role: 'toolbar',
 };
 
 const ButtonToolbar = (props) => {
   const {
     className,
     cssModule,
+    tag: Tag,
     ...attributes
   } = props;
 
@@ -26,7 +29,7 @@ const ButtonToolbar = (props) => {
   ), cssModule);
 
   return (
-    <div {...attributes} className={classes} />
+    <Tag {...attributes} className={classes} />
   );
 };
 

diff --git a/src/Col.js b/src/Col.js
@@ -19,6 +19,7 @@ const columnProps = PropTypes.oneOfType([
 ]);
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   xs: columnProps,
   sm: columnProps,
   md: columnProps,
@@ -30,6 +31,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  tag: 'div',
   widths: colWidths,
 };
 
@@ -48,6 +50,7 @@ const Col = (props) => {
     className,
     cssModule,
     widths,
+    tag: Tag,
     ...attributes
   } = props;
   const colClasses = [];
@@ -90,7 +93,7 @@ const Col = (props) => {
   ), cssModule);
 
   return (
-    <div {...attributes} className={classes} />
+    <Tag {...attributes} className={classes} />
   );
 };
 

diff --git a/src/Container.js b/src/Container.js
@@ -3,18 +3,22 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   fluid: PropTypes.bool,
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
-const defaultProps = {};
+const defaultProps = {
+  tag: 'div',
+};
 
 const Container = (props) => {
   const {
     className,
     cssModule,
     fluid,
+    tag: Tag,
     ...attributes
   } = props;
 
@@ -24,7 +28,7 @@ const Container = (props) => {
   ), cssModule);
 
   return (
-    <div {...attributes} className={classes} />
+    <Tag {...attributes} className={classes} />
   );
 };
 

diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -3,30 +3,36 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   children: PropTypes.node.isRequired,
   right: PropTypes.bool,
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
+const defaultProps = {
+  tag: 'div',
+};
+
 const contextTypes = {
   isOpen: PropTypes.bool.isRequired
 };
 
 const DropdownMenu = (props, context) => {
-  const { className, cssModule, right, ...attributes } = props;
+  const { className, cssModule, right, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(classNames(
     className,
     'dropdown-menu',
     { 'dropdown-menu-right': right }
   ), cssModule);
 
   return (
-    <div {...attributes} tabIndex="-1" aria-hidden={!context.isOpen} role="menu" className={classes} />
+    <Tag {...attributes} tabIndex="-1" aria-hidden={!context.isOpen} role="menu" className={classes} />
   );
 };
 
 DropdownMenu.propTypes = propTypes;
+DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.contextTypes = contextTypes;
 
 export default DropdownMenu;
diff --git a/src/ModalBody.js b/src/ModalBody.js
@@ -3,25 +3,32 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
+const defaultProps = {
+  tag: 'div',
+};
+
 const ModalBody = (props) => {
   const {
     className,
     cssModule,
+    tag: Tag,
     ...attributes } = props;
   const classes = mapToCssModules(classNames(
     className,
     'modal-body'
   ), cssModule);
 
   return (
-    <div {...attributes} className={classes} />
+    <Tag {...attributes} className={classes} />
   );
 };
 
 ModalBody.propTypes = propTypes;
+ModalBody.defaultProps = defaultProps;
 
 export default ModalBody;
diff --git a/src/ModalFooter.js b/src/ModalFooter.js
@@ -3,25 +3,32 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
+const defaultProps = {
+  tag: 'div',
+};
+
 const ModalFooter = (props) => {
   const {
     className,
     cssModule,
+    tag: Tag,
     ...attributes } = props;
   const classes = mapToCssModules(classNames(
     className,
     'modal-footer'
   ), cssModule);
 
   return (
-    <div {...attributes} className={classes} />
+    <Tag {...attributes} className={classes} />
   );
 };
 
 ModalFooter.propTypes = propTypes;
+ModalFooter.defaultProps = defaultProps;
 
 export default ModalFooter;
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
@@ -3,13 +3,18 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  wrapTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   toggle: PropTypes.func,
   className: PropTypes.string,
   cssModule: PropTypes.object,
   children: PropTypes.node,
 };
 
-const defaultProps = {};
+const defaultProps = {
+  tag: 'h4',
+  wrapTag: 'div',
+};
 
 const ModalHeader = (props) => {
   let closeButton;
@@ -18,6 +23,8 @@ const ModalHeader = (props) => {
     cssModule,
     children,
     toggle,
+    tag: Tag,
+    wrapTag: WrapTag,
     ...attributes } = props;
 
   const classes = mapToCssModules(classNames(
@@ -34,12 +41,12 @@ const ModalHeader = (props) => {
   }
 
   return (
-    <div {...attributes} className={classes}>
-      <h4 className={mapToCssModules('modal-title', cssModule)}>
+    <WrapTag {...attributes} className={classes}>
+      <Tag className={mapToCssModules('modal-title', cssModule)}>
         {children}
-      </h4>
+      </Tag>
       {closeButton}
-    </div>
+    </WrapTag>
   );
 };
 

diff --git a/src/TabContent.js b/src/TabContent.js
@@ -1,14 +1,19 @@
 import React, { PropTypes, Component } from 'react';
 import classNames from 'classnames';
+import omit from 'lodash.omit';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
-  children: PropTypes.node,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   activeTab: PropTypes.any,
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
+const defaultProps = {
+  tag: 'div',
+};
+
 const childContextTypes = {
   activeTabId: PropTypes.any
 };
@@ -33,13 +38,21 @@ export default class TabContent extends Component {
     }
   }
   render() {
-    const classes = mapToCssModules(classNames('tab-content', this.props.className), this.props.cssModule);
+    const {
+      className,
+      cssModule,
+      tag: Tag,
+    } = this.props;
+
+    const attributes = omit(this.props, Object.keys(propTypes));
+
+    const classes = mapToCssModules(classNames('tab-content', className), cssModule);
+
     return (
-      <div className={classes}>
-        {this.props.children}
-      </div>
+      <Tag {...attributes} className={classes} />
     );
   }
 }
 TabContent.propTypes = propTypes;
+TabContent.defaultProps = defaultProps;
 TabContent.childContextTypes = childContextTypes;
diff --git a/src/TabPane.js b/src/TabPane.js
@@ -1,14 +1,18 @@
-
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
-  children: PropTypes.node,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
   tabId: PropTypes.any,
 };
+
+const defaultProps = {
+  tag: 'div',
+};
+
 const contextTypes = {
   activeTabId: PropTypes.any
 };
@@ -18,15 +22,14 @@ export default function TabPane(props, context) {
     className,
     cssModule,
     tabId,
-    children,
+    tag: Tag,
     ...attributes
   } = props;
   const classes = mapToCssModules(classNames('tab-pane', className, { active: tabId === context.activeTabId }), cssModule);
   return (
-    <div {...attributes} className={classes}>
-      {children}
-    </div>
+    <Tag {...attributes} className={classes} />
   );
 }
 TabPane.propTypes = propTypes;
+TabPane.defaultProps = defaultProps;
 TabPane.contextTypes = contextTypes;