feat(Table): BS4 beta 2 updates for Table (#694)

* Deprecated `inverse` prop for `dark` on Table
* Add responsive `table-responsive` class option
* Change responsive prop-type to bool/string to allow users to create custom breakpoints
* Remove table-reflow
* Fix responsive classname and remove wrapper

docs/lib/Components/TablesPage.js

@@ -6,17 +6,15 @@ import Helmet from 'react-helmet';
 import TableExample from '../examples/Table';
 import TableBorderedExample from '../examples/TableBordered';
 import TableHoverExample from '../examples/TableHover';
-import TableInverseExample from '../examples/TableInverse';
-import TableReflowExample from '../examples/TableReflow';
+import TableDarkExample from '../examples/TableDark';
 import TableResponsiveExample from '../examples/TableResponsive';
 import TableSizingExample from '../examples/TableSizing';
 import TableStripedExample from '../examples/TableStriped';
 
 const TableExampleSource = require('!!raw!../examples/Table');
 const TableBorderedExampleSource = require('!!raw!../examples/TableBordered');
 const TableHoverExampleSource = require('!!raw!../examples/TableHover');
-const TableInverseExampleSource = require('!!raw!../examples/TableInverse');
-const TableReflowExampleSource = require('!!raw!../examples/TableReflow');
+const TableDarkExampleSource = require('!!raw!../examples/TableDark');
 const TableResponsiveExampleSource = require('!!raw!../examples/TableResponsive');
 const TableSizingExampleSource = require('!!raw!../examples/TableSizing');
 const TableStripedExampleSource = require('!!raw!../examples/TableStriped');
@@ -45,20 +43,19 @@ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 size: PropTypes.string,
 bordered: PropTypes.bool,
 striped: PropTypes.bool,
-inverse: PropTypes.bool,
+dark: PropTypes.bool,
 hover: PropTypes.bool,
-reflow: PropTypes.bool,
 responsive: PropTypes.bool
 };`}
         </PrismCode>
         </pre>
-        <h3>Inverse table</h3>
+        <h3>Dark table</h3>
         <div className="docs-example">
-          <TableInverseExample />
+          <TableDarkExample />
         </div>
         <pre>
           <PrismCode className="language-jsx">
-            {TableInverseExampleSource}
+            {TableDarkExampleSource}
           </PrismCode>
         </pre>
         <h3>Striped rows</h3>
@@ -106,15 +103,6 @@ responsive: PropTypes.bool
             {TableResponsiveExampleSource}
           </PrismCode>
         </pre>
-        <h3>Reflow</h3>
-        <div className="docs-example">
-          <TableReflowExample />
-        </div>
-        <pre>
-          <PrismCode className="language-jsx">
-            {TableReflowExampleSource}
-          </PrismCode>
-        </pre>
       </div>
     );
   }

docs/lib/examples/TableInverse.js → docs/lib/examples/TableDark.js

@@ -4,7 +4,7 @@ import { Table } from 'reactstrap';
 export default class Example extends React.Component {
   render() {
     return (
-      <Table inverse>
+      <Table dark>
         <thead>
           <tr>
             <th>#</th>

src/Table.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { mapToCssModules } from './utils';
+import { mapToCssModules, deprecated } from './utils';
 
 const propTypes = {
   className: PropTypes.string,
   cssModule: PropTypes.object,
   size: PropTypes.string,
   bordered: PropTypes.bool,
   striped: PropTypes.bool,
-  inverse: PropTypes.bool,
+  inverse: deprecated(PropTypes.bool, 'Please use the prop "dark"'),
+  dark: PropTypes.bool,
   hover: PropTypes.bool,
-  reflow: PropTypes.bool,
-  responsive: PropTypes.bool,
+  responsive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   responsiveTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 };
@@ -30,33 +30,31 @@ const Table = (props) => {
     bordered,
     striped,
     inverse,
+    dark,
     hover,
-    reflow,
     responsive,
     tag: Tag,
-    responsiveTag: ResponsiveTag,
     ...attributes
   } = props;
 
+  let responsiveClassName = false;
+  if (responsive) {
+    responsiveClassName = responsive === true ? 'table-responsive' : `table-responsive-${responsive}`;
+  }
+
   const classes = mapToCssModules(classNames(
     className,
     'table',
     size ? 'table-' + size : false,
     bordered ? 'table-bordered' : false,
     striped ? 'table-striped' : false,
-    inverse ? 'table-inverse' : false,
+    (dark || inverse) ? 'table-dark' : false,
     hover ? 'table-hover' : false,
-    reflow ? 'table-reflow' : false
+    responsiveClassName
   ), cssModule);
 
   const table = <Tag {...attributes} className={classes} />;
 
-  if (responsive) {
-    return (
-      <ResponsiveTag className="table-responsive">{table}</ResponsiveTag>
-    );
-  }
-
   return table;
 };
 

src/__tests__/Table.spec.js

@@ -26,23 +26,22 @@ describe('Table', () => {
   });
 
   it('should render modifier classes', () => {
-    const wrapper = shallow(<Table size="sm" bordered striped reflow inverse hover>Yo!</Table>);
+    const wrapper = shallow(<Table size="sm" bordered striped dark hover responsive>Yo!</Table>);
 
     expect(wrapper.text()).toBe('Yo!');
     expect(wrapper.hasClass('table')).toBe(true);
     expect(wrapper.hasClass('table-sm')).toBe(true);
     expect(wrapper.hasClass('table-bordered')).toBe(true);
     expect(wrapper.hasClass('table-striped')).toBe(true);
     expect(wrapper.hasClass('table-hover')).toBe(true);
-    expect(wrapper.hasClass('table-reflow')).toBe(true);
-    expect(wrapper.hasClass('table-inverse')).toBe(true);
+    expect(wrapper.hasClass('table-dark')).toBe(true);
+    expect(wrapper.hasClass('table-responsive')).toBe(true);
   });
 
-  it('should render responsive wrapper class', () => {
-    const wrapper = shallow(<Table responsive>Yo!</Table>);
+  it('should render responsive class for md', () => {
+    const wrapper = shallow(<Table responsive="md">Yo!</Table>);
 
     expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('table-responsive')).toBe(true);
-    expect(wrapper.find('.table').length).toBe(1);
+    expect(wrapper.hasClass('table-responsive-md')).toBe(true);
   });
 });