Allen/feature 9 (#10)

AllenFang · web-flow · commit 6b7d1f9aa244 · 2017-08-20T01:43:24.000-05:00
Fix #9
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "webpack-dev-server": "^2.7.1"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import cs from 'classnames';
 
 import Header from './header';
 import Body from './body';
@@ -12,10 +13,25 @@ class BootstrapTable extends storeBase(Component) {
   }
 
   render() {
-    const { columns, keyField } = this.props;
+    const {
+      columns,
+      keyField,
+      striped,
+      hover,
+      bordered,
+      condensed
+    } = this.props;
+
+    const tableClass = cs('table', {
+      'table-striped': striped,
+      'table-hover': hover,
+      'table-bordered': bordered,
+      'table-condensed': condensed
+    });
+
     return (
       <div className="react-bootstrap-table-container">
-        <table className="table">
+        <table className={ tableClass }>
           <Header columns={ columns } />
           <Body
             data={ this.data }
@@ -31,7 +47,15 @@ class BootstrapTable extends storeBase(Component) {
 BootstrapTable.propTypes = {
   keyField: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
-  columns: PropTypes.array.isRequired
+  columns: PropTypes.array.isRequired,
+  striped: PropTypes.bool
+};
+
+BootstrapTable.defaultProps = {
+  striped: false,
+  bordered: true,
+  hover: false,
+  condensed: false
 };
 
 export default BootstrapTable;
diff --git a/packages/react-bootstrap-table2/test/bootstrap-table.test.js b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
@@ -30,10 +30,54 @@ describe('BootstrapTable', () => {
 
     it('should render successfully', () => {
       expect(wrapper.length).toBe(1);
-      expect(wrapper.find('table').length).toBe(1);
+      expect(wrapper.find('table.table').length).toBe(1);
       expect(wrapper.find(Header).length).toBe(1);
       expect(wrapper.find(Body).length).toBe(1);
       expect(wrapper.find('.react-bootstrap-table-container').length).toBe(1);
     });
+
+    it('should have table-bordered class as default', () => {
+      expect(wrapper.find('table.table-bordered').length).toBe(1);
+    });
+  });
+
+  describe('when hover is true', () => {
+    beforeEach(() => {
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } hover />);
+    });
+
+    it('should have table-hover class on table', () => {
+      expect(wrapper.find('table.table-hover').length).toBe(1);
+    });
+  });
+
+  describe('when striped is true', () => {
+    beforeEach(() => {
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } striped />);
+    });
+
+    it('should have table-striped class on table', () => {
+      expect(wrapper.find('table.table-striped').length).toBe(1);
+    });
+  });
+
+  describe('when condensed is true', () => {
+    beforeEach(() => {
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } condensed />);
+    });
+
+    it('should have table-condensed class on table', () => {
+      expect(wrapper.find('table.table-condensed').length).toBe(1);
+    });
+  });
+
+  describe('when bordered is false', () => {
+    beforeEach(() => {
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } bordered={ false } />);
+    });
+
+    it('should not have table-condensed class on table', () => {
+      expect(wrapper.find('table.table-condensed').length).toBe(0);
+    });
   });
 });
