Merge pull request #9 from vaiRk/v2.0.0

V2.0.0

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["react", "es2015", "stage-1"],
+  "env": {
+    "umd": {
+      "plugins": [
+        "add-module-exports",
+        "transform-es2015-modules-umd"
+      ]
+    }
+  }
+}

.npmignore

@@ -1,4 +1,6 @@
 test
 src
 example
+webpack.config.js
+.babelrc
 .module-cache

README.md

@@ -1,29 +1,29 @@
-[![npm version](https://badge.fury.io/js/responsive-fixed-data-table.svg)](http://badge.fury.io/js/responsive-fixed-data-table)
 # responsive-fixed-data-table
+[![npm version](https://badge.fury.io/js/responsive-fixed-data-table.svg)](http://badge.fury.io/js/responsive-fixed-data-table)
 Responsive wrapper for [Facebook's Fixed-Data-Table](https://github.com/facebook/fixed-data-table) grids
 
 ## Installation
 This module is available as an npm package.
 
-    npm install [--save] responsive-fixed-data-table
+	npm install [--save] responsive-fixed-data-table
 
 ## Usage
+This module includes minified and non minified UMD builds as well as an ES6 build. You choose!
+
 ```js
-var React = require('react');
-var Column = require('fixed-data-table').Column;
-var ResponsiveFixedDataTable = require('responsive-fixed-data-table');
-
-var ResponsiveTable = React.createClass({
-  render: function() {
-    return (
-      <ResponsiveFixedDataTable {...tableProps}>
-        <Column {...columnsProps} />
-      </ResponsiveFixedDataTable>
-    );
-  }
-});
-
-module.exports = ResponsiveTable;
+import React from 'react';
+import ResponsiveFixedDataTable from 'responsive-fixed-data-table';
+import { Column } from 'fixed-data-table';
+
+export default class ResponsiveTable extends React.Component {
+	render() {
+		return (
+			<ResponsiveFixedDataTable {...tableProps}>
+				<Column {...columnsProps} />
+			</ResponsiveFixedDataTable>
+		);
+	}
+}
 ```
 
 All passed props will be passed to the underlying FixedDataTable component. Please check [FixedDataTable docs](http://facebook.github.io/fixed-data-table/api-table.html) for a list of available options.  
@@ -32,3 +32,6 @@ Width and height will be overriden to take all the available space of its parent
 ### Additional configuration
 **containerStyle** *{Object}*: Additional styles to be set on the container div.  
 **refreshRate** *{Number}*: Time in milliseconds to debounce the resize handler.
+
+### React 0.13 compatibility
+If you want to use this module with old versions of React and FixedDataTable please check the **v1.5.0-deprecated** branch.

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-1"]
+}

example/gulpfile.js

@@ -3,10 +3,6 @@
 var gulp           = require('gulp'),
 	rimraf         = require('rimraf'),
 	runSequence    = require('run-sequence'),
-	source         = require('vinyl-source-stream'),
-	buffer         = require('vinyl-buffer'),
-	browserify     = require('browserify'),
-	reactify       = require('reactify'),
 	modRewrite     = require('connect-modrewrite'),
 	connect        = require('gulp-connect');
 
@@ -24,35 +20,13 @@ var buildPaths = {
 	css: 		'./build/assets/css/'
 };
 
-// BUNDLER
-// - - - - - - - - - - - - - - -
-var bundler = browserify({
-	entries: [paths.mainJs], // Only need initial file, browserify finds the deps
-	transform: [
-		reactify // We want to convert JSX to normal javascript
-	],
-	debug: true, // Gives us sourcemapping
-	cache: {},
-	packageCache: {},
-	fullPaths: true
-});
-
 // TASKS
 // - - - - - - - - - - - - - - -
 // Cleans the build directory.
 gulp.task('clean', function(cb) {
 	rimraf(buildPaths.main, cb);
 });
 
-// Bundle files and minify for prod.
-gulp.task('bundle', function() {
-	return bundler
-		.bundle()
-		.pipe(source('bundle.js'))
-		.pipe(buffer())
-		.pipe(gulp.dest(buildPaths.js));
-});
-
 // Copies html file
 gulp.task('copy-html-css', function() {
 	gulp.src(paths.mainHtml)
@@ -65,6 +39,7 @@ gulp.task('copy-html-css', function() {
 gulp.task('server:start', function() {
 	return connect.server({
 		root: './build',
+		port: 8000,
 		middleware: function() {
 			return [
 				modRewrite(['^[^\\.]*$ /index.html [L]'])
@@ -75,7 +50,7 @@ gulp.task('server:start', function() {
 
 // Builds the app prod ready.
 gulp.task('build', function() {
-	runSequence('clean', ['bundle'], 'copy-html-css', function() {
+	runSequence('clean', 'copy-html-css', function() {
 		console.log('Successfully built.');
 	});
 });

example/package.json

@@ -21,22 +21,27 @@
   ],
   "license": "MIT",
   "scripts": {
-  	"start": "gulp"
+    "build": "./node_modules/.bin/gulp build && ./node_modules/.bin/webpack",
+    "start": "npm run build && ./node_modules/.bin/gulp server:start"
   },
   "dependencies": {
-    "fixed-data-table": "^0.3.0",
-    "react": "^0.13.3",
-    "responsive-fixed-data-table": "^1.5.0"
+    "fixed-data-table": "^0.6.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "responsive-fixed-data-table": "^2.0.0"
   },
   "devDependencies": {
-    "browserify": "^10.2.4",
+    "babel-core": "^6.5.2",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
     "connect-modrewrite": "^0.8.1",
     "gulp": "^3.9.0",
     "gulp-connect": "^2.2.0",
-    "reactify": "^1.1.1",
     "rimraf": "^2.4.0",
     "run-sequence": "^1.1.0",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0"
+    "source-map-loader": "^0.1.5",
+    "webpack": "^1.12.13"
   }
 }

example/src/index.html

@@ -4,10 +4,11 @@
 		<link rel='stylesheet' href='/assets/css/fixed-data-table.min.css' />
 		<style type='text/css'>
 			* { margin: 0; padding: 0; }
-			html, body { width: 100%; height: 100%; }
+			html, body, #example-container { width: 100%; height: 100%; }
 		</style>
 	</head>
 	<body>
+		<div id='example-container'></div>
 		<script type='text/javascript' src='/assets/js/bundle.js'></script>
 	</body>
 </html>

example/src/responsive-table-example.js

@@ -1,30 +1,43 @@
-'use-strict';
+'use strict';
 
-var React = require('react');
-var FixedDataTable = require('fixed-data-table');
-var ResponsiveFixedDataTable = require('responsive-fixed-data-table');
+import React from 'react';
+import { render } from 'react-dom';
+import { Column, Cell } from 'fixed-data-table';
+import ResponsiveFixedDataTable from 'responsive-fixed-data-table';
 
-var Column = FixedDataTable.Column;
-
-var data = [
-	['a1', 'b1', 'c1'],
-	['a2', 'b3', 'c2'],
-	['a3', 'b3', 'c3']
+const data = [
+	{ name: 'Olivia Dunham', email: '[email protected]' },
+	{ name: 'Walter Bishop', email: '[email protected]' },
+	{ name: 'Peter Bishop', email: '[email protected]' },
+	{ name: 'Astrid Farnsworth', email: '[email protected]' }
 ];
 
-function rowGetter(rowIndex) {
-  return data[rowIndex];
+class MyCell extends React.Component {
+	render() {
+		const { rowIndex, data, field, ...props } = this.props;
+		return (
+			<Cell {...props}>
+				{data[rowIndex][field]}
+			</Cell>
+		);
+	}
 }
 
-React.render(
+render(
 	<ResponsiveFixedDataTable
-		rowHeight={40}
-		rowGetter={rowGetter}
-		rowsCount={data.length}
-		width={500}
-		height={200}
-		headerHeight={60} >
-		<Column label='Col 1' width={100} dataKey={0} />
-		<Column label="Col 2" width={400} dataKey={1} flexGrow={1} />
-	</ResponsiveFixedDataTable>
-, document.body);
+	rowHeight={40}
+	rowsCount={data.length}
+	width={500}
+	height={200}
+	headerHeight={60} >
+	<Column
+		header={<Cell>Name</Cell>}
+		cell={<MyCell data={data} field='name' />}
+		width={200} />
+	<Column
+		header={<Cell>Email</Cell>}
+		cell={<MyCell data={data} field='email' />}
+		width={400}
+		flexGrow={1} />
+</ResponsiveFixedDataTable>
+, document.getElementById('example-container'));

example/webpack.config.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+	context: __dirname,
+	entry: path.resolve(__dirname, 'src', 'responsive-table-example.js'),
+	output: {
+		path: path.resolve(__dirname, 'build', 'assets', 'js'),
+		sourceMapFileName: '[file].map',
+		filename: 'bundle.js',
+	},
+	devtool: 'source-map',
+	resolve: {
+		extensions: ['', '.js']
+	},
+	module: {
+		preLoaders: [
+			{ test: /\.js$/, include: /responsive-fixed-data-table/, loader: 'source-map' }
+		],
+		loaders: [
+			{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' }
+		]
+	}
+}

package.json

@@ -1,9 +1,14 @@
 {
   "name": "responsive-fixed-data-table",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "author": "Viky Guerra <[email protected]>",
   "description": "Responsive utility wrapper for Facebook's Fixed-Data-Table",
-  "main": "./lib/responsive-fixed-data-table.js",
+  "main": "lib/responsive-fixed-data-table.js",
+  "jsnext:main": "lib/responsive-fixed-data-table.es.js",
+  "files": [
+    "lib",
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/vaiRk/responsive-fixed-data-table"
@@ -21,24 +26,42 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "debounce": "^1.0.0"
+    "lodash": "^4.3.0"
   },
   "peerDependencies": {
-    "fixed-data-table": ">=0.2.0",
-    "react": ">=0.13"
+    "fixed-data-table": ">=0.6.0",
+    "react": ">=0.14",
+    "react-dom": ">=0.14"
   },
   "devDependencies": {
-    "jsx-loader": "^0.13.2",
-    "karma": "^0.12.36",
-    "karma-chrome-launcher": "^0.1.12",
-    "karma-jasmine": "^0.3.5",
-    "karma-webpack": "^1.5.1",
-    "react-tools": "^0.13.3",
-    "webpack": "^1.9.11"
+    "babel-core": "^6.5.2",
+    "babel-loader": "^6.2.2",
+    "babel-plugin-add-module-exports": "^0.1.2",
+    "babel-plugin-transform-es2015-modules-umd": "^6.5.0",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
+    "cross-env": "^1.0.7",
+    "fixed-data-table": "^0.6.0",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.21",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-jasmine": "^0.3.7",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "ncp": "^2.0.0",
+    "react": "^0.14.7",
+    "react-addons-test-utils": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "rimraf": "^2.5.1",
+    "webpack": "^1.12.13"
   },
   "scripts": {
-    "prebuild": "rm -rf lib",
-    "build": "./node_modules/.bin/jsx --no-cache-dir ./src ./lib",
+    "prebuild": "rimraf lib",
+    "build": "npm run build:umd && npm run build:umd:min && npm run build:es",
+    "build:umd": "cross-env BABEL_ENV=umd webpack",
+    "build:umd:min": "cross-env BABEL_ENV=umd NODE_ENV=production webpack",
+    "build:es": "ncp src/responsive-fixed-data-table.js lib/responsive-fixed-data-table.es.js",
     "prepublish": "npm run build",
     "test": "./node_modules/karma/bin/karma start test/karma.conf.js",
     "test:debug": "./node_modules/karma/bin/karma start test/karma.conf.js --no-single-run --auto-watch --log-level debug"