From 3ac595e4c5b852714d21acf71a4e97ba15effe65 Mon Sep 17 00:00:00 2001 From: Viky Guerra Date: Sat, 13 Feb 2016 03:15:34 +0000 Subject: [PATCH 1/5] ES6 version. --- .babelrc | 11 ++ .npmignore | 2 + example/.babelrc | 3 + example/gulpfile.js | 29 +----- example/package.json | 21 ++-- example/src/index.html | 3 +- example/src/responsive-table-example.js | 59 ++++++----- example/webpack.config.js | 26 +++++ package.json | 34 +++++-- src/responsive-fixed-data-table.js | 117 +++++++++++----------- test/karma.conf.js | 13 +-- test/specs/responsive-fixed-data-table.js | 42 +++++--- webpack.config.js | 61 +++++++++++ 13 files changed, 269 insertions(+), 152 deletions(-) create mode 100644 .babelrc create mode 100644 example/.babelrc create mode 100644 example/webpack.config.js create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..5a32d61 --- /dev/null +++ b/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": ["react", "es2015", "stage-1"], + "env": { + "commonjs": { + "plugins": [ + "add-module-exports", + "transform-es2015-modules-umd" + ] + } + } +} \ No newline at end of file diff --git a/.npmignore b/.npmignore index c0b28bf..40fe4ce 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,6 @@ test src example +webpack.config.js +.babelrc .module-cache \ No newline at end of file diff --git a/example/.babelrc b/example/.babelrc new file mode 100644 index 0000000..014a6aa --- /dev/null +++ b/example/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["react", "es2015", "stage-1"] +} \ No newline at end of file diff --git a/example/gulpfile.js b/example/gulpfile.js index 9c682e0..4d2c312 100644 --- a/example/gulpfile.js +++ b/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,19 +20,6 @@ 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. @@ -44,15 +27,6 @@ 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.'); }); }); diff --git a/example/package.json b/example/package.json index 45e5089..9c168ca 100644 --- a/example/package.json +++ b/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": "../../responsive-fixed-data-table" }, "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" } } diff --git a/example/src/index.html b/example/src/index.html index c36ba43..1dc4ff8 100644 --- a/example/src/index.html +++ b/example/src/index.html @@ -4,10 +4,11 @@ +
\ No newline at end of file diff --git a/example/src/responsive-table-example.js b/example/src/responsive-table-example.js index 095d5a4..293091e 100644 --- a/example/src/responsive-table-example.js +++ b/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: 'odunham@fbi.gov' }, + { name: 'Walter Bishop', email: 'drbishop@harvard.edu' }, + { name: 'Peter Bishop', email: 'peterbishop@fbi.gov' }, + { name: 'Astrid Farnsworth', email: 'afarnsworth@fbi.gov' } ]; -function rowGetter(rowIndex) { - return data[rowIndex]; +class MyCell extends React.Component { + render() { + const { rowIndex, data, field, ...props } = this.props; + return ( + + {data[rowIndex][field]} + + ); + } } -React.render( +render( - - - -, document.body); + rowHeight={40} + rowsCount={data.length} + width={500} + height={200} + headerHeight={60} > + Name} + cell={} + width={200} /> + Email} + cell={} + width={400} + flexGrow={1} /> + +, document.getElementById('example-container')); \ No newline at end of file diff --git a/example/webpack.config.js b/example/webpack.config.js new file mode 100644 index 0000000..9f80fa4 --- /dev/null +++ b/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' } + ] + } +} \ No newline at end of file diff --git a/package.json b/package.json index 6f95628..c0e50bc 100644 --- a/package.json +++ b/package.json @@ -21,24 +21,36 @@ ], "license": "MIT", "dependencies": { - "debounce": "^1.0.0" + "lodash": "^4.3.0" }, "peerDependencies": { "fixed-data-table": ">=0.2.0", - "react": ">=0.13" + "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" + "fixed-data-table": ">=0.2.0", + "react": ">=0.14", + "react-dom": ">=0.14", + "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", + "jasmine-core": "^2.4.1", + "karma": "^0.13.21", + "karma-chrome-launcher": "^0.2.2", + "karma-jasmine": "^0.3.7", + "karma-webpack": "^1.7.0", + "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": "cross-env BABEL_ENV=commonjs webpack", "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" diff --git a/src/responsive-fixed-data-table.js b/src/responsive-fixed-data-table.js index 3512924..52384a9 100644 --- a/src/responsive-fixed-data-table.js +++ b/src/responsive-fixed-data-table.js @@ -1,85 +1,84 @@ -'use-strict'; +'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; -var Table = require('fixed-data-table').Table; -var debounce = require('debounce'); -var assign = require('react/lib/Object.assign'); +import React from 'react'; +import { findDOMNode } from 'react-dom'; +import { Table } from 'fixed-data-table'; +import debounce from 'lodash/debounce'; +import assign from 'lodash/assign'; +import isEqual from 'lodash/isEqual'; -var ResponsiveFixedDataTable = React.createClass({ - mixins: [ PureRenderMixin ], +export default class ResponsiveFixedDataTable extends React.Component { + constructor(props, context) { + super(props, context); + } - propTypes: { + static propTypes = { containerStyle: React.PropTypes.object, refreshRate: React.PropTypes.number - }, + }; - getDefaultProps: function() { - return { - containerStyle: {}, - refreshRate: 250 // ms - }; - }, + static defaultProps = { + containerStyle: {}, + refreshRate: 250 // ms + }; - getInitialState: function() { - return { - gridWidth: 1, - gridHeight: 1 - }; - }, + state = { + gridWidth: 1, + gridHeight: 1 + }; - componentDidMount: function() { + shouldComponentUpdate(nextProps, nextState) { + return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState); + } + + componentDidMount() { this._setDimensionsOnState(); this._attachResizeEvent(); - }, + } - componentWillMount: function() { - this._setDimensionsOnState = debounce(this._setDimensionsOnState, this.props.refreshRate); - }, + componentWillMount() { + const { refreshRate } = this.props; + this._setDimensionsOnState = debounce(this._setDimensionsOnState.bind(this), refreshRate); + } - componentWillUnmount: function() { + componentWillUnmount() { window.removeEventListener('resize', this._setDimensionsOnState); - }, - - _attachResizeEvent: function() { - var win = window; + } - if (win.addEventListener) { - win.addEventListener('resize', this._setDimensionsOnState, false); - } else if (win.attachEvent) { - win.attachEvent('resize', this._setDimensionsOnState); + _attachResizeEvent() { + if (window.addEventListener) { + window.addEventListener('resize', this._setDimensionsOnState, false); + } else if (window.attachEvent) { + window.attachEvent('resize', this._setDimensionsOnState); } else { - win.onresize = this._setDimensionsOnState; + window.onresize = this._setDimensionsOnState; } - }, + } - _setDimensionsOnState: function() { - if (this.isMounted()) { - var tableWrapperNode = this.getDOMNode(); - this.setState({ - gridWidth: tableWrapperNode.offsetWidth, - gridHeight: tableWrapperNode.offsetHeight - }); - } - }, + _setDimensionsOnState() { + const { offsetWidth, offsetHeight } = findDOMNode(this); + + this.setState({ + gridWidth: offsetWidth, + gridHeight: offsetHeight + }); + } - _getStyle: function() { - return assign(this.props.containerStyle, { + _getStyle() { + return { + ...this.props.containerStyle, width: '100%', height: '100%' - }); - }, + }; + } + + render() { + const { gridWidth, gridHeight } = this.state; - /** - * @return {ReactDOMNode} - */ - render: function() { return (
- +
); } -}); - -module.exports = ResponsiveFixedDataTable; +}; \ No newline at end of file diff --git a/test/karma.conf.js b/test/karma.conf.js index 2d77dea..b57ea4f 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,5 +1,7 @@ 'use strict'; +var webpackConfig = require('../webpack.config.js'); + module.exports = function(karma) { karma.set({ @@ -45,15 +47,8 @@ module.exports = function(karma) { port: 9876, webpack: { - module: { - loaders: [ - { - exclude: /node_modules/, - test: /\.js$/, - loader: 'jsx-loader' - } - ] - } + module: webpackConfig.module, + resolve: webpackConfig.resolve }, // Prevent webpack from logging stuff to the console. diff --git a/test/specs/responsive-fixed-data-table.js b/test/specs/responsive-fixed-data-table.js index d47faff..886a243 100644 --- a/test/specs/responsive-fixed-data-table.js +++ b/test/specs/responsive-fixed-data-table.js @@ -1,47 +1,61 @@ -'use-strict'; +'use strict'; -var React = require('react/addons'); -var TestUtils = React.addons.TestUtils; +import React from 'react'; +import ReactDOM from 'react-dom'; +import TestUtils from 'react-addons-test-utils'; +import ResponsiveFixedDataTable from './../../src/responsive-fixed-data-table'; describe('responsive-fixed-data-table', function() { - var table; - var ResponsiveFixedDataTable = require('../../src/responsive-fixed-data-table'); - var container = document.createElement('div'); + let table; + const container = document.createElement('div'); container.style.width = '500px'; container.style.height = '500px'; beforeEach(function() { - var props = { + const props = { foo: 'bar', containerStyle: { width: '20%', position: 'absolute' }, - rowGetter: function() {}, rowHeight: 1, rowsCount: 1, headerHeight: 1 }; - table = React.render(, container); + table = ReactDOM.render(, container); }); afterEach(function() { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); table = null; }); // _____TESTS_________________________________________________________________ // it('should have 100% width and height', function() { - var tableNode = table.getDOMNode(); + const tableNode = ReactDOM.findDOMNode(table); expect(tableNode.style.width).toBe('100%'); expect(tableNode.style.height).toBe('100%'); }); it('should accept additional styles', function() { - var tableNode = table.getDOMNode(); + const tableNode = ReactDOM.findDOMNode(table); expect(tableNode.style.position).toBe('absolute'); }); + xit('should not update', function() { + const newProps = { ...table.props }; + expect(table.shouldComponentUpdate(newProps)).toBe(false); + const newState = { ...table.state }; + expect(table.shouldComponentUpdate(newProps, newState)).toBe(false); + }); + + xit('should update', function() { + const newProps = { headerHeight: 100, ...table.props }; + expect(table.shouldComponentUpdate(newProps)).toBe(true); + const newState = { gridWidth: 100, ...table.state }; + expect(table.shouldComponentUpdate(newProps, newState)).toBe(true); + }); + it('should transfer props and add width and height', function() { - var tableState = table.state; - var fixedDataTable = table.refs.table + const tableState = table.state; + const fixedDataTable = table.refs.table; expect(fixedDataTable.props.foo).toBe('bar'); expect(fixedDataTable.props.width).toBe(tableState.gridWidth); expect(fixedDataTable.props.height).toBe(tableState.gridHeight); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..a269702 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,61 @@ +'use strict'; + +var webpack = require('webpack'); +var path = require('path'); + +module.exports = { + context: __dirname, + entry: path.resolve(__dirname, 'src', 'responsive-fixed-data-table.js'), + output: { + path: path.resolve(__dirname, 'lib'), + filename: 'responsive-fixed-data-table.js', + sourceMapFileName: '[file].map', + library: 'ResponsiveFixedDataTable', + libraryTarget: 'umd' + }, + devtool: 'source-map', + externals: { + react: { + root: 'React', + commonjs2: 'react', + commonjs: 'react', + amd: 'react' + }, + 'react-dom': { + root: 'ReactDOM', + commonjs2: 'react-dom', + commonjs: 'react-dom', + amd: 'react-dom' + }, + 'fixed-data-table': { + root: 'FixedDataTable', + commonjs2: 'fixed-data-table', + commonjs: 'fixed-data-table', + amd: 'fixed-data-table' + } + }, + resolve: { + extensions: ['', '.js'] + }, + module: { + loaders: [ + { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' } + ] + }, + plugins: [ + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production') + }), + new webpack.optimize.UglifyJsPlugin({ + comments: false, + compress: { + warnings: false, + screw_ie8: true, + dead_code: true, + drop_debugger: true, + drop_console: true + } + }) + ] +} \ No newline at end of file From 57c79d29406531bbdd0e8924b0df118ea2c594a4 Mon Sep 17 00:00:00 2001 From: Viky Guerra Date: Sat, 13 Feb 2016 03:26:36 +0000 Subject: [PATCH 2/5] Update dependencies --- .babelrc | 8 ++++---- example/package.json | 2 +- package.json | 13 +++++++------ 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/.babelrc b/.babelrc index 5a32d61..a1f0b7a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,10 +1,10 @@ { - "presets": ["react", "es2015", "stage-1"], + "presets": ["react", "es2015", "stage-1"], "env": { - "commonjs": { + "umd": { "plugins": [ - "add-module-exports", - "transform-es2015-modules-umd" + "add-module-exports", + "transform-es2015-modules-umd" ] } } diff --git a/example/package.json b/example/package.json index 9c168ca..7adef5a 100644 --- a/example/package.json +++ b/example/package.json @@ -28,7 +28,7 @@ "fixed-data-table": "^0.6.0", "react": "^0.14.7", "react-dom": "^0.14.7", - "responsive-fixed-data-table": "../../responsive-fixed-data-table" + "responsive-fixed-data-table": "^2.0.0" }, "devDependencies": { "babel-core": "^6.5.2", diff --git a/package.json b/package.json index c0e50bc..4c29ad9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "responsive-fixed-data-table", - "version": "1.5.0", + "version": "2.0.0", "author": "Viky Guerra ", "description": "Responsive utility wrapper for Facebook's Fixed-Data-Table", "main": "./lib/responsive-fixed-data-table.js", @@ -24,14 +24,15 @@ "lodash": "^4.3.0" }, "peerDependencies": { - "fixed-data-table": ">=0.2.0", + "fixed-data-table": ">=0.6.0", "react": ">=0.14", "react-dom": ">=0.14" }, "devDependencies": { - "fixed-data-table": ">=0.2.0", - "react": ">=0.14", - "react-dom": ">=0.14", + "fixed-data-table": "^0.6.0", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-addons-test-utils": "^0.14.7", "babel-core": "^6.5.2", "babel-loader": "^6.2.2", "babel-plugin-add-module-exports": "^0.1.2", @@ -50,7 +51,7 @@ }, "scripts": { "prebuild": "rimraf lib", - "build": "cross-env BABEL_ENV=commonjs webpack", + "build": "cross-env BABEL_ENV=umd webpack", "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" From 81c5ed8ea96d550369fa87507b28962030742c7a Mon Sep 17 00:00:00 2001 From: Viky Guerra Date: Sat, 13 Feb 2016 13:57:35 +0000 Subject: [PATCH 3/5] Add should update tests --- package.json | 9 +++++---- src/responsive-fixed-data-table.js | 18 +++++++++++------- test/karma.conf.js | 4 +++- test/specs/responsive-fixed-data-table.js | 12 ++++++------ 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 4c29ad9..60ece8b 100644 --- a/package.json +++ b/package.json @@ -29,10 +29,6 @@ "react-dom": ">=0.14" }, "devDependencies": { - "fixed-data-table": "^0.6.0", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-addons-test-utils": "^0.14.7", "babel-core": "^6.5.2", "babel-loader": "^6.2.2", "babel-plugin-add-module-exports": "^0.1.2", @@ -41,11 +37,16 @@ "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", + "react": "^0.14.7", + "react-addons-test-utils": "^0.14.7", + "react-dom": "^0.14.7", "rimraf": "^2.5.1", "webpack": "^1.12.13" }, diff --git a/src/responsive-fixed-data-table.js b/src/responsive-fixed-data-table.js index 52384a9..04680b3 100644 --- a/src/responsive-fixed-data-table.js +++ b/src/responsive-fixed-data-table.js @@ -32,16 +32,18 @@ export default class ResponsiveFixedDataTable extends React.Component { } componentDidMount() { + this.__isMounted = true; this._setDimensionsOnState(); this._attachResizeEvent(); } componentWillMount() { const { refreshRate } = this.props; - this._setDimensionsOnState = debounce(this._setDimensionsOnState.bind(this), refreshRate); + this._setDimensionsOnState = debounce(this._setDimensionsOnState, refreshRate); } componentWillUnmount() { + this.__isMounted = false; window.removeEventListener('resize', this._setDimensionsOnState); } @@ -55,13 +57,15 @@ export default class ResponsiveFixedDataTable extends React.Component { } } - _setDimensionsOnState() { - const { offsetWidth, offsetHeight } = findDOMNode(this); + _setDimensionsOnState = () => { + if (this.__isMounted) { + const { offsetWidth, offsetHeight } = findDOMNode(this); - this.setState({ - gridWidth: offsetWidth, - gridHeight: offsetHeight - }); + this.setState({ + gridWidth: offsetWidth, + gridHeight: offsetHeight + }); + } } _getStyle() { diff --git a/test/karma.conf.js b/test/karma.conf.js index b57ea4f..e988ab9 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -24,7 +24,7 @@ module.exports = function(karma) { // Preprocess matching files before serving them to the browser. preprocessors: { - 'test/specs/*.js': [ 'webpack' ] + 'test/specs/*.js': [ 'webpack', 'sourcemap' ] }, // Start this browsers @@ -47,6 +47,7 @@ module.exports = function(karma) { port: 9876, webpack: { + devtool: 'cheap-eval-source-map', module: webpackConfig.module, resolve: webpackConfig.resolve }, @@ -68,6 +69,7 @@ module.exports = function(karma) { plugins: [ 'karma-jasmine', 'karma-webpack', + 'karma-sourcemap-loader', 'karma-chrome-launcher' ] }); diff --git a/test/specs/responsive-fixed-data-table.js b/test/specs/responsive-fixed-data-table.js index 886a243..4089e90 100644 --- a/test/specs/responsive-fixed-data-table.js +++ b/test/specs/responsive-fixed-data-table.js @@ -39,18 +39,18 @@ describe('responsive-fixed-data-table', function() { expect(tableNode.style.position).toBe('absolute'); }); - xit('should not update', function() { + it('should not update', function() { const newProps = { ...table.props }; - expect(table.shouldComponentUpdate(newProps)).toBe(false); const newState = { ...table.state }; expect(table.shouldComponentUpdate(newProps, newState)).toBe(false); }); - xit('should update', function() { - const newProps = { headerHeight: 100, ...table.props }; - expect(table.shouldComponentUpdate(newProps)).toBe(true); - const newState = { gridWidth: 100, ...table.state }; + it('should update', function() { + const newProps = { ...table.props, headerHeight: 100 }; + const newState = { ...table.state, gridWidth: 100 }; expect(table.shouldComponentUpdate(newProps, newState)).toBe(true); + expect(table.shouldComponentUpdate(newProps, { ...table.state })).toBe(true); + expect(table.shouldComponentUpdate({ ...table.props }, newState)).toBe(true); }); it('should transfer props and add width and height', function() { From 505224ffebd4638736c9ff25c3ee43f657571711 Mon Sep 17 00:00:00 2001 From: Viky Guerra Date: Sat, 13 Feb 2016 14:32:30 +0000 Subject: [PATCH 4/5] Add umd:min and es6 builds --- package.json | 13 +++++++++++-- webpack.config.js | 41 ++++++++++++++++++++++------------------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 60ece8b..dda16d6 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,12 @@ "version": "2.0.0", "author": "Viky Guerra ", "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" @@ -44,6 +49,7 @@ "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", @@ -52,7 +58,10 @@ }, "scripts": { "prebuild": "rimraf lib", - "build": "cross-env BABEL_ENV=umd webpack", + "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" diff --git a/webpack.config.js b/webpack.config.js index a269702..9acc771 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,17 +3,35 @@ var webpack = require('webpack'); var path = require('path'); +var minify = process.env.NODE_ENV === 'production'; +var plugins = [ + new webpack.optimize.OccurenceOrderPlugin() +]; + +if (minify) { + plugins.push( + new webpack.optimize.UglifyJsPlugin({ + comments: false, + compress: { + warnings: false, + screw_ie8: true, + dead_code: true, + drop_debugger: true, + drop_console: true + } + }) + ); +} + module.exports = { context: __dirname, entry: path.resolve(__dirname, 'src', 'responsive-fixed-data-table.js'), output: { path: path.resolve(__dirname, 'lib'), - filename: 'responsive-fixed-data-table.js', - sourceMapFileName: '[file].map', + filename: 'responsive-fixed-data-table' + (minify ? '.min.js' : '.js'), library: 'ResponsiveFixedDataTable', libraryTarget: 'umd' }, - devtool: 'source-map', externals: { react: { root: 'React', @@ -42,20 +60,5 @@ module.exports = { { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' } ] }, - plugins: [ - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production') - }), - new webpack.optimize.UglifyJsPlugin({ - comments: false, - compress: { - warnings: false, - screw_ie8: true, - dead_code: true, - drop_debugger: true, - drop_console: true - } - }) - ] + plugins: plugins } \ No newline at end of file From d238a73ed6df60c326d6d36d92f656fe0c129b04 Mon Sep 17 00:00:00 2001 From: Viky Guerra Date: Sat, 13 Feb 2016 14:43:29 +0000 Subject: [PATCH 5/5] Update README.md --- README.md | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 4bc6055..12e6c40 100644 --- a/README.md +++ b/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 ( - - - - ); - } -}); - -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 ( + + + + ); + } +} ``` 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. \ No newline at end of file