react-virtualized
Advanced tools
Comparing version 1.0.4 to 2.0.0
Changelog | ||
------------ | ||
#### 2.0.0 | ||
Set `shouldPureComponentUpdate` on component prototypes instead of instances. | ||
Dropped half-ass support for React 0.13. This module has always depended on React 0.14 but it was checking in previous versions and trying to be backwards compatible with 0.13. Since that check is no longer in place, this is a major version bump (even though there is no real new functionality being added). | ||
#### 1.0.4 | ||
@@ -5,0 +9,0 @@ Fixed package.json dependencies by moving `classnames`, `raf`, and `react-pure-render` out of `peerDependencies` and into `dependencies`. |
@@ -6,19 +6,18 @@ { | ||
"user": "bvaughn", | ||
"version": "1.0.4", | ||
"version": "2.0.0", | ||
"scripts": { | ||
"build": "npm run build:demo && npm run build:dist", | ||
"build:demo": "npm run clean:demo && NODE_ENV=demo NODE_PATH='source/modules' webpack --config webpack.config.demo.js", | ||
"build:dist": "npm run clean:dist && NODE_ENV=dist NODE_PATH='source/modules' webpack --config webpack.config.dist.js", | ||
"build:demo": "npm run clean:demo && NODE_ENV=production webpack --config webpack.config.demo.js -p --bail", | ||
"build:dist": "npm run clean:dist && NODE_ENV=production webpack --config webpack.config.dist.js --bail", | ||
"clean": "npm run clean:demo && npm run clean:dist", | ||
"clean:demo": "rimraf build", | ||
"clean:dist": "rimraf dist", | ||
"deploy-gh-pages": "node scripts/deploy-gh-pages", | ||
"deploy": "gh-pages -d build", | ||
"lint": "standard", | ||
"postbuild": "node scripts/post-build", | ||
"prebuild": "npm run lint", | ||
"postpublish": "npm run deploy-gh-pages", | ||
"postpublish": "npm run deploy", | ||
"prepublish": "npm run build", | ||
"start": "node devServer.js", | ||
"start": "webpack-dev-server --hot --inline --config webpack.config.dev.js", | ||
"test": "npm run lint && npm run test:unit", | ||
"test:unit": "NODE_ENV=dev karma start", | ||
"test:unit": "NODE_ENV=test karma start", | ||
"watch": "watch 'clear && npm run lint -s && npm run test -s' source" | ||
@@ -69,17 +68,13 @@ }, | ||
"autoprefixer": "^6.1.1", | ||
"babel": "^5.8.29", | ||
"babel-core": "^5.4.7", | ||
"babel": "^5.8.34", | ||
"babel-core": "^5.8.34", | ||
"babel-eslint": "^4.1.6", | ||
"babel-loader": "^5.1.2", | ||
"babel-loader": "^5.4.0", | ||
"babel-plugin-react-transform": "^1.1.1", | ||
"babel-polyfill": "^6.2.0", | ||
"bluebird": "^3.0.5", | ||
"cheerio": "^0.19.0", | ||
"css-loader": "^0.23.0", | ||
"eslint": "^1.3.1", | ||
"eslint-plugin-react": "^3.8.0", | ||
"express": "^4.13.3", | ||
"file-loader": "^0.8.5", | ||
"fs-extra": "^0.26.2", | ||
"gh-pages": "^0.5.0", | ||
"gh-pages": "^0.6.0", | ||
"html-webpack-plugin": "^1.7.0", | ||
"immutable": "^3.7.5", | ||
@@ -99,7 +94,8 @@ "jasmine": "^2.3.2", | ||
"postcss-loader": "^0.8.0", | ||
"react": "^0.14.3", | ||
"react-addons-test-utils": "^0.14.3", | ||
"react-dom": "^0.14.3", | ||
"react-transform-catch-errors": "^1.0.0", | ||
"react-transform-hmr": "^1.0.1", | ||
"redbox-react": "^1.0.1", | ||
"replace": "^0.3.0", | ||
"rimraf": "^2.4.3", | ||
@@ -110,5 +106,3 @@ "standard": "^5.4.1", | ||
"webpack": "^1.9.6", | ||
"webpack-dev-middleware": "^1.2.0", | ||
"webpack-dev-server": "^1.14.0", | ||
"webpack-hot-middleware": "^2.6.0" | ||
"webpack-dev-server": "^1.14.0" | ||
}, | ||
@@ -121,5 +115,4 @@ "dependencies": { | ||
"peerDependencies": { | ||
"react": "^0.14.0", | ||
"react-dom": "^0.14.0" | ||
"react": "^0.14.0" | ||
} | ||
} |
<img src="https://cloud.githubusercontent.com/assets/29597/11453244/aee1b36e-95b7-11e5-9946-17659c0b24e7.png" alt="React virtualized" data-canonical-src="https://cloud.githubusercontent.com/assets/29597/11453244/aee1b36e-95b7-11e5-9946-17659c0b24e7.png" width="304" height="91" /> | ||
<img src="https://circleci.com/gh/bvaughn/react-virtualized.svg?style=shield&circle-token=:circle-token" alt="Circle CI badge"> | ||
Demos available here: | ||
@@ -4,0 +6,0 @@ http://bvaughn.github.io/react-virtualized/ |
@@ -5,5 +5,4 @@ import React from 'react' | ||
import VirtualScrollExample from '../VirtualScroll/VirtualScroll.example' | ||
import './demo.less' | ||
require('./demo.less') | ||
render(( | ||
@@ -10,0 +9,0 @@ <div className='demo__row'> |
@@ -19,5 +19,5 @@ /** @flow */ | ||
sortDirection: SortDirection.ASC, | ||
virtualScrollHeight: 290, | ||
virtualScrollHeaderHeight: 20, | ||
virtualScrollRowHeight: 30 | ||
height: 290, | ||
headerHeight: 20, | ||
rowHeight: 30 | ||
} | ||
@@ -43,2 +43,4 @@ | ||
const { | ||
headerHeight, | ||
height, | ||
rowsCount, | ||
@@ -48,5 +50,3 @@ scrollToIndex, | ||
sortDirection, | ||
virtualScrollHeaderHeight, | ||
virtualScrollHeight, | ||
virtualScrollRowHeight | ||
rowHeight | ||
} = this.state | ||
@@ -97,17 +97,17 @@ | ||
label='List height' | ||
name='virtualScrollHeight' | ||
onChange={event => this.setState({ virtualScrollHeight: parseInt(event.target.value, 10) || 1 })} | ||
value={virtualScrollHeight} | ||
name='height' | ||
onChange={event => this.setState({ height: parseInt(event.target.value, 10) || 1 })} | ||
value={height} | ||
/> | ||
<LabeledInput | ||
label='Row height' | ||
name='virtualScrollRowHeight' | ||
onChange={event => this.setState({ virtualScrollRowHeight: parseInt(event.target.value, 10) || 1 })} | ||
value={virtualScrollRowHeight} | ||
name='rowHeight' | ||
onChange={event => this.setState({ rowHeight: parseInt(event.target.value, 10) || 1 })} | ||
value={rowHeight} | ||
/> | ||
<LabeledInput | ||
label='Header height' | ||
name='virtualScrollHeaderHeight' | ||
onChange={event => this.setState({ virtualScrollHeaderHeight: parseInt(event.target.value, 10) || 1 })} | ||
value={virtualScrollHeaderHeight} | ||
name='headerHeight' | ||
onChange={event => this.setState({ headerHeight: parseInt(event.target.value, 10) || 1 })} | ||
value={headerHeight} | ||
/> | ||
@@ -120,6 +120,6 @@ </InputRow> | ||
width={430} | ||
headerHeight={virtualScrollHeaderHeight} | ||
height={virtualScrollHeight} | ||
headerHeight={headerHeight} | ||
height={height} | ||
rowClassName='FlexTableExample__FlexTable__row' | ||
rowHeight={virtualScrollRowHeight} | ||
rowHeight={rowHeight} | ||
rowGetter={rowGetter} | ||
@@ -137,9 +137,9 @@ rowsCount={rowsCount} | ||
dataKey='index' | ||
width={50}/> | ||
width={50} | ||
/> | ||
<FlexColumn | ||
label='Name' | ||
dataKey='name' | ||
width={90}/> | ||
width={90} | ||
/> | ||
<FlexColumn | ||
@@ -154,3 +154,4 @@ width={210} | ||
} | ||
flexGrow={1}/> | ||
flexGrow={1} | ||
/> | ||
</FlexTable> | ||
@@ -157,0 +158,0 @@ </ContentBox> |
@@ -28,4 +28,2 @@ /** @flow */ | ||
export default class FlexTable extends Component { | ||
shouldComponentUpdate = shouldPureComponentUpdate | ||
static defaultProps = { | ||
@@ -43,3 +41,3 @@ disableHeader: false, | ||
if (children[i].type !== FlexColumn) { | ||
return new Error(`FlexTable only accepts cihldren of type FlexColumn`) | ||
return new Error(`FlexTable only accepts children of type FlexColumn`) | ||
} | ||
@@ -64,3 +62,3 @@ } | ||
* Callback responsible for returning a data row given an index. | ||
* (index: int): any | ||
* (index: number): any | ||
*/ | ||
@@ -172,9 +170,4 @@ rowGetter: PropTypes.func.isRequired, | ||
} = column.props | ||
const renderedCell = cellRenderer( | ||
cellDataGetter(dataKey, rowData, columnData), | ||
dataKey, | ||
rowData, | ||
rowIndex, | ||
columnData | ||
) | ||
const cellData = cellDataGetter(dataKey, rowData, columnData) | ||
const renderedCell = cellRenderer(cellData, dataKey, rowData, rowIndex, columnData) | ||
@@ -294,2 +287,3 @@ const flex = this._getFlexStyleForColumn(column) | ||
} | ||
FlexTable.prototype.shouldComponentUpdate = shouldPureComponentUpdate | ||
@@ -302,3 +296,3 @@ /** | ||
<svg | ||
className='FlexTable__headerRow__SortIndicator' | ||
className={`FlexTable__headerRow__SortIndicator FlexTable__headerRow__SortIndicator--${sortDirection}`} | ||
width={18} | ||
@@ -305,0 +299,0 @@ height={18} |
/** @flow */ | ||
import shouldPureComponentUpdate from 'react-pure-render/function' | ||
import React, { Component, PropTypes } from 'react' | ||
import { findDOMNode } from 'react-dom' | ||
import cn from 'classnames' | ||
import raf from 'raf' | ||
import './VirtualScroll.less' | ||
@@ -22,4 +22,2 @@ const IS_SCROLLING_TIMEOUT = 150 | ||
export default class VirtualScroll extends Component { | ||
shouldComponentUpdate = shouldPureComponentUpdate | ||
static propTypes = { | ||
@@ -65,9 +63,2 @@ /** Optional CSS class name */ | ||
// React v0.14 requires ReactDOM.findDOMNode but earlier versions use getDOMNode() | ||
if (findDOMNode instanceof Function) { | ||
this._scrollingContainer = findDOMNode(this.refs.scrollingContainer) | ||
} else { | ||
this._scrollingContainer = this.refs.scrollingContainer.getDOMNode() | ||
} | ||
if (scrollToIndex >= 0) { | ||
@@ -102,3 +93,3 @@ // Without setImmediate() the initial scrollingContainer.scrollTop assignment doesn't work | ||
if (scrollTop >= 0 && scrollTop !== prevState.scrollTop) { | ||
this._scrollingContainer.scrollTop = scrollTop | ||
this.refs.scrollingContainer.scrollTop = scrollTop | ||
} | ||
@@ -190,14 +181,11 @@ | ||
style={{ | ||
height: height, | ||
outline: 0, | ||
overflow: 'auto' | ||
height: height | ||
}} | ||
> | ||
<div | ||
className='VirtualScroll__inner' | ||
style={{ | ||
boxSizing: 'border-box', | ||
height: totalRowsHeight, | ||
maxHeight: totalRowsHeight, | ||
paddingTop: paddingTop, | ||
overflow: 'hidden', | ||
pointerEvents: isScrolling ? 'none' : 'auto' | ||
@@ -354,3 +342,3 @@ }} | ||
// See issue #404 for more information. | ||
if (event.target !== this._scrollingContainer) { | ||
if (event.target !== this.refs.scrollingContainer) { | ||
return | ||
@@ -385,3 +373,3 @@ } | ||
_onWheel (event) { | ||
const scrollTop = this._scrollingContainer.scrollTop | ||
const scrollTop = this.refs.scrollingContainer.scrollTop | ||
@@ -405,1 +393,2 @@ // Certain devices (like Apple touchpad) rapid-fire duplicate events. | ||
} | ||
VirtualScroll.prototype.shouldComponentUpdate = shouldPureComponentUpdate |
@@ -8,6 +8,6 @@ import React from 'react' | ||
describe('VirtualScroll', () => { | ||
beforeAll(() => { | ||
jasmine.clock().install() | ||
}) | ||
beforeAll(() => jasmine.clock().install()) | ||
afterAll(() => jasmine.clock().uninstall()) | ||
// Used by the renderOrUpdateList() helper method | ||
var node = null | ||
@@ -20,7 +20,3 @@ beforeEach(() => { | ||
for (var i = 0; i < 100; i++) { | ||
array.push({ | ||
id: '${i}', | ||
name: `Name ${i}`, | ||
email: 'user-${i}@treasure-data.com' | ||
}) | ||
array.push(`Name ${i}`) | ||
} | ||
@@ -93,3 +89,3 @@ const list = Immutable.fromJS(array) | ||
/** Allows for testing initial rendering of component and scrolling via props */ | ||
/** Tests horizontal scrolling via updated props */ | ||
describe('scrollToIndex', () => { | ||
@@ -118,3 +114,3 @@ it('should scroll to the top', () => { | ||
/** Allows more fine-grained control of scrolling from position A to B */ | ||
/** Tests fine-grained control of scrolling from position A to B */ | ||
describe('scrollToIndex / _calculateScrollTopForIndex', () => { | ||
@@ -121,0 +117,0 @@ function calculateScrollTopForIndex (scrollToIndex, scrollTop = 0) { |
const autoprefixer = require('autoprefixer') | ||
var path = require('path') | ||
var webpack = require('webpack') | ||
const HtmlWebpackPlugin = require('html-webpack-plugin') | ||
const path = require('path') | ||
const webpack = require('webpack') | ||
module.exports = { | ||
devtool: 'source-map', | ||
entry: ['./source/demo/demo'], | ||
entry: { | ||
demo: './source/demo/demo' | ||
}, | ||
output: { | ||
path: path.join(__dirname, 'build'), | ||
filename: 'demo.js', | ||
publicPath: '/static/' | ||
path: 'build', | ||
filename: 'static/[name].js' | ||
}, | ||
plugins: [ | ||
new webpack.optimize.OccurenceOrderPlugin(), | ||
new HtmlWebpackPlugin({ | ||
filename: 'index.html', | ||
inject: true, | ||
template: './index.html' | ||
}), | ||
new webpack.DefinePlugin({ | ||
@@ -19,7 +25,2 @@ 'process.env': { | ||
} | ||
}), | ||
new webpack.optimize.UglifyJsPlugin({ | ||
compressor: { | ||
warnings: false | ||
} | ||
}) | ||
@@ -26,0 +27,0 @@ ], |
const autoprefixer = require('autoprefixer') | ||
const HtmlWebpackPlugin = require('html-webpack-plugin') | ||
const path = require('path') | ||
@@ -8,13 +9,14 @@ const webpack = require('webpack') | ||
entry: { | ||
client: 'webpack-hot-middleware/client', | ||
demo: './source/demo/demo', | ||
index: './source/index' | ||
demo: './source/demo/demo' | ||
}, | ||
output: { | ||
path: path.join(__dirname, 'build'), | ||
filename: '[name].js', | ||
publicPath: '/static/' | ||
path: 'build', | ||
filename: '/static/[name].js' | ||
}, | ||
plugins: [ | ||
new webpack.HotModuleReplacementPlugin(), | ||
new HtmlWebpackPlugin({ | ||
filename: 'index.html', | ||
inject: true, | ||
template: './index.html' | ||
}), | ||
new webpack.NoErrorsPlugin() | ||
@@ -38,3 +40,8 @@ ], | ||
autoprefixer({ browsers: ['last 2 versions'] }) | ||
] | ||
], | ||
devServer: { | ||
contentBase: 'build', | ||
historyApiFallback: true, | ||
port: 3001 | ||
} | ||
} |
const autoprefixer = require('autoprefixer') | ||
const path = require('path') | ||
require('webpack') | ||
module.exports = { | ||
devtool: 'source-map', | ||
entry: ['./source/index'], | ||
entry: { | ||
'react-virtualized': './source/index.js' | ||
}, | ||
output: { | ||
path: path.join(__dirname, 'dist'), | ||
filename: 'react-virtualized.js', | ||
publicPath: '/static/', | ||
path: 'dist', | ||
filename: '[name].js', | ||
libraryTarget: 'umd', | ||
library: 'react-virtualized', | ||
sourceMapFilename: 'react-virtualized.js.map' | ||
library: 'react-virtualized' | ||
}, | ||
@@ -23,8 +21,2 @@ externals: { | ||
root: 'React' | ||
}, | ||
'react-dom': { | ||
'commonjs': 'react-dom', | ||
'commonjs2': 'react-dom', | ||
'amd': 'react-dom', | ||
'root': 'ReactDOM' | ||
} | ||
@@ -39,4 +31,3 @@ }, | ||
loaders: ['babel'], | ||
include: path.join(__dirname, 'source'), | ||
exclude: /(node_modules)/ | ||
include: path.join(__dirname, 'source') | ||
}, | ||
@@ -46,4 +37,3 @@ { | ||
loaders: ['style', 'css', 'postcss', 'less'], | ||
include: path.join(__dirname, 'source'), | ||
exclude: /(node_modules)/ | ||
include: path.join(__dirname, 'source') | ||
} | ||
@@ -50,0 +40,0 @@ ] |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Debug access
Supply chain riskUses debug, reflection and dynamic code execution features.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
227461
4
38
3368
115
3
42