feat(Table): BS4 beta 3 revert responsive table (#757)

reactstrap · Jan 2, 2018 · ee08d21 · ee08d21
1 parent c3a483a
commit ee08d21
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/Table.js b/src/Table.js
@@ -34,14 +34,10 @@ const Table = (props) => {
     hover,
     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',
@@ -50,11 +46,18 @@ const Table = (props) => {
     striped ? 'table-striped' : false,
     (dark || inverse) ? 'table-dark' : false,
     hover ? 'table-hover' : false,
-    responsiveClassName
   ), cssModule);
 
   const table = <Tag {...attributes} className={classes} />;
 
+  if (responsive) {
+    const responsiveClassName = responsive === true ? 'table-responsive' : `table-responsive-${responsive}`;
+
+    return (
+      <ResponsiveTag className={responsiveClassName}>{table}</ResponsiveTag>
+    );
+  }
+
   return table;
 };
 

diff --git a/src/__tests__/Table.spec.js b/src/__tests__/Table.spec.js
@@ -26,7 +26,7 @@ describe('Table', () => {
   });
 
   it('should render modifier classes', () => {
-    const wrapper = shallow(<Table size="sm" bordered striped dark hover responsive>Yo!</Table>);
+    const wrapper = shallow(<Table size="sm" bordered striped dark hover>Yo!</Table>);
 
     expect(wrapper.text()).toBe('Yo!');
     expect(wrapper.hasClass('table')).toBe(true);
@@ -35,13 +35,21 @@ describe('Table', () => {
     expect(wrapper.hasClass('table-striped')).toBe(true);
     expect(wrapper.hasClass('table-hover')).toBe(true);
     expect(wrapper.hasClass('table-dark')).toBe(true);
+  });
+
+  it('should render responsive wrapper class', () => {
+    const wrapper = shallow(<Table responsive>Yo!</Table>);
+
+    expect(wrapper.text()).toBe('Yo!');
     expect(wrapper.hasClass('table-responsive')).toBe(true);
+    expect(wrapper.find('.table').length).toBe(1);
   });
 
-  it('should render responsive class for md', () => {
+  it('should render responsive wrapper class for md', () => {
     const wrapper = shallow(<Table responsive="md">Yo!</Table>);
 
     expect(wrapper.text()).toBe('Yo!');
     expect(wrapper.hasClass('table-responsive-md')).toBe(true);
+    expect(wrapper.find('.table').length).toBe(1);
   });
 });