Update to React 15, babel 6

Author: Justin Slattery

package.json

@@ -1,13 +1,13 @@
 {
   "name": "tabletable",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "A simple and extremely flexible table component written in React.",
   "main": "dist/entry.js",
   "scripts": {
-    "build": "$(npm bin)/babel --optional es7.decorators src/ -d dist/",
-    "watch": "$(npm bin)/babel --optional es7.decorators src/ -d dist/ --watch",
-    "demo-build": "$(npm bin)/browserify --extension=.jsx -e src/demo.jsx -t [ babelify --optional es7.objectRestSpread --optional es7.decorators ] -o test/index.js",
-    "demo-watch": "$(npm bin)/watchify --extension=.jsx -e src/demo.jsx -t [ babelify --optional es7.objectRestSpread --optional es7.decorators ] -o test/index.js",
+    "build": "$(npm bin)/babel src/ -d dist/",
+    "watch": "$(npm bin)/babel src/ -d dist/ --watch",
+    "demo-build": "$(npm bin)/browserify --extension=.jsx -e src/demo.jsx -o test/index.js",
+    "demo-watch": "$(npm bin)/watchify --extension=.jsx -e src/demo.jsx -o test/index.js",
     "prepublish": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -25,16 +25,46 @@
     "url": "https://github.com/ZeroarcSoftware/tabletable/issues"
   },
   "homepage": "https://github.com/ZeroarcSoftware/tabletable#readme",
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015",
+            "react"
+          ],
+          "plugins": [
+            "transform-decorators-legacy"
+          ]
+        }
+      ]
+    ]
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ],
+    "plugins": [
+      "transform-decorators-legacy"
+    ]
+  },
   "devDependencies": {
-    "babel": "^5.8.29",
-    "react-dom": "^0.14.6",
+    "babel-cli": "^6.7.5",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "react-dom": "^15.0.1",
     "watchify": "^3.7.0"
   },
   "dependencies": {
     "autobind-decorator": "^1.3.3",
     "classnames": "^2.2.3",
     "immutable": "^3.7.6",
-    "react": "^0.14.6",
-    "react-addons-shallow-compare": "^0.14.6"
+    "react": "^15.0.1",
+    "react-addons-shallow-compare": "^15.0.1"
   }
 }

src/Container.jsx

@@ -13,7 +13,7 @@ let ClassNames = require('classnames');
 let Autobind = require('autobind-decorator');
 
 // Local
-let Pager = require('./Pager');
+import Pager from './Pager';
 
 
 @Autobind

src/Pager.jsx

@@ -26,7 +26,7 @@ export default class TabletablePager extends React.Component {
     }
 
     for(let i = startIndex; i <= endIndex; i++){
-      let thisButtonClasses = ClassNames('btn', 'btn-primary', 'btn-sm', {
+      let thisButtonClasses = ClassNames('btn', 'btn-white', 'btn-sm', {
         'label-success': this.props.currentPage === i
       });
       options.push(<button key={i} className={thisButtonClasses} data-value={i} onClick={this.pageChange}>{i}</button>);
@@ -35,19 +35,19 @@ export default class TabletablePager extends React.Component {
     return (
       <div className='btn-toolbar text-center' role='toolbar' style={{marginTop: '20px', marginBottom: '20px'}} >
         <div className='btn-group pull-left' role='group'>
-          <button className='btn btn-primary btn-sm' onClick={this.firstPageChange}><i className='fa fa-step-backward'></i> First</button>
+          <button className='btn btn-white btn-sm' onClick={this.firstPageChange}><i className='fa fa-step-backward'></i> First</button>
         </div>
         <div className='btn-group pull-right' role='group'>
-          <button className='btn btn-primary btn-sm' onClick={this.lastPageChange}><i className='fa fa-step-forward'></i> Last</button>
+          <button className='btn btn-white primary btn-sm' onClick={this.lastPageChange}><i className='fa fa-step-forward'></i> Last</button>
         </div>
         <div className='btn-group' role='group' style={{float:'none'}}>
-          <button className='btn btn-primary btn-sm' onClick={this.previousPageChange}><i className='fa fa-chevron-left'></i> Prev</button>
+          <button className='btn btn-white primary btn-sm' onClick={this.previousPageChange}><i className='fa fa-chevron-left'></i> Prev</button>
         </div>
         <div className='btn-group' role='group' style={{float:'none'}}>
           {options}
         </div>
         <div className='btn-group' role='group' style={{float:'none'}}>
-          <button className='btn btn-primary btn-sm' onClick={this.nextPageChange}><i className='fa fa-chevron-right'></i> Next</button>
+          <button className='btn btn-white primary btn-sm' onClick={this.nextPageChange}><i className='fa fa-chevron-right'></i> Next</button>
         </div>
       </div>
     )

src/demo.jsx

@@ -13,8 +13,8 @@ let Immutable = require('immutable');
 let Autobind = require('autobind-decorator');
 
 // Local
-let Tabletable = require('./Container');
-let fakeData = require('../test/fake_data.json');
+import Tabletable from './Container';
+import fakeData from '../test/fake_data.json';
 
 
 @Autobind
@@ -59,6 +59,7 @@ class Demo extends React.Component {
         data={immutableData}
         columns={columnDefs}
         pagerSize={5}
+        rowsPerPage={10}
       />
     );
   }