react-virtualized example for comparison with dynamic-virtual-scroll
commit
9031a98966
|
@ -0,0 +1,42 @@
|
||||||
|
module.exports = {
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
"env": {
|
||||||
|
"es6": true,
|
||||||
|
"browser": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react/recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 6,
|
||||||
|
"sourceType": "module",
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"experimentalObjectRestSpread": true,
|
||||||
|
"jsx": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"react"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"indent": [
|
||||||
|
"error",
|
||||||
|
4
|
||||||
|
],
|
||||||
|
"linebreak-style": [
|
||||||
|
"error",
|
||||||
|
"unix"
|
||||||
|
],
|
||||||
|
"semi": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"no-control-regex": [
|
||||||
|
"off"
|
||||||
|
],
|
||||||
|
"no-empty": [
|
||||||
|
"off"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,80 @@
|
||||||
|
// Same example using react-virtualized
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { AutoSizer, List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
|
||||||
|
|
||||||
|
export class DynamicVirtualScrollExample extends React.PureComponent
|
||||||
|
{
|
||||||
|
useFixedHeader = true
|
||||||
|
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
const items = [];
|
||||||
|
for (let i = 0; i < 1000; i++)
|
||||||
|
{
|
||||||
|
items[i] = 30 + Math.round(Math.random()*50);
|
||||||
|
}
|
||||||
|
this.state = { items };
|
||||||
|
this.cache = new CellMeasurerCache({
|
||||||
|
fixedWidth: true,
|
||||||
|
defaultHeight: 55,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderItems(start, count)
|
||||||
|
{
|
||||||
|
return this.state.items.slice(start, start+count).map((item, index) => (<div
|
||||||
|
key={'i'+(index+start)}
|
||||||
|
ref={e => this.itemElements[index+start] = e}
|
||||||
|
style={{height: item+'px', color: 'white', textAlign: 'center', lineHeight: item+'px', background: 'rgb('+Math.round(item*255/80)+',0,0)'}}>
|
||||||
|
№ {index+start}: {item}px
|
||||||
|
</div>));
|
||||||
|
}
|
||||||
|
|
||||||
|
renderRow = ({ index, key, style, parent }) =>
|
||||||
|
{
|
||||||
|
const item = this.state.items[index];
|
||||||
|
return (<CellMeasurer key={key} cache={this.cache} parent={parent} columnIndex={0} rowIndex={index}>
|
||||||
|
<div
|
||||||
|
key={'i'+index}
|
||||||
|
ref={e => this.itemElements[index] = e}
|
||||||
|
style={{...style, height: item+'px', color: 'white', textAlign: 'center', lineHeight: item+'px', background: 'rgb('+Math.round(item*255/80)+',0,0)'}}>
|
||||||
|
№ {index}: {item}px
|
||||||
|
</div>
|
||||||
|
</CellMeasurer>);
|
||||||
|
}
|
||||||
|
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
this.itemElements = [];
|
||||||
|
return (<div style={{position: 'relative', width: '400px', height: '400px'}}>
|
||||||
|
<AutoSizer>
|
||||||
|
{({ width, height }) => {
|
||||||
|
return <List
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
deferredMeasurementCache={this.cache}
|
||||||
|
rowHeight={this.cache.rowHeight}
|
||||||
|
rowRenderer={this.renderRow}
|
||||||
|
rowCount={this.state.items.length}
|
||||||
|
overscanRowCount={3}
|
||||||
|
/>
|
||||||
|
}}
|
||||||
|
</AutoSizer>
|
||||||
|
{this.useFixedHeader ? <div style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: '12px',
|
||||||
|
height: '30px',
|
||||||
|
background: '#0080c0',
|
||||||
|
color: 'white',
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: '30px'}}>
|
||||||
|
fixed header
|
||||||
|
</div> : null}
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Dynamic Virtual Scroll Driver Demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="dist/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,8 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
import { DynamicVirtualScrollExample } from './DynamicVirtualScrollExample.js';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<DynamicVirtualScrollExample />, document.getElementById('app')
|
||||||
|
);
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,40 @@
|
||||||
|
{
|
||||||
|
"name": "react-virtualized-example",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"author": {
|
||||||
|
"name": "Vitaliy Filippov",
|
||||||
|
"email": "vitalif@yourcmc.ru",
|
||||||
|
"url": "http://yourcmc.ru/wiki/"
|
||||||
|
},
|
||||||
|
"description": "Test",
|
||||||
|
"license": "LGPL",
|
||||||
|
"maintainers": [
|
||||||
|
{
|
||||||
|
"name": "vitalif",
|
||||||
|
"email": "vitalif@yourcmc.ru"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-cli": "^6.26.0",
|
||||||
|
"babel-core": "^6.26.3",
|
||||||
|
"babel-eslint": "^10.0.1",
|
||||||
|
"babel-loader": "^7.1.5",
|
||||||
|
"babel-polyfill": "^6.26.0",
|
||||||
|
"babel-preset-env": "^1.7.0",
|
||||||
|
"babel-preset-react": "^6.24.1",
|
||||||
|
"babel-preset-stage-1": "^6.24.1",
|
||||||
|
"eslint": "^5.1.0",
|
||||||
|
"eslint-plugin-react": "^7.10.0",
|
||||||
|
"react": "^16.4.1",
|
||||||
|
"react-dom": "^16.4.1",
|
||||||
|
"react-virtualized": "^9.21.0",
|
||||||
|
"webpack": "^4.20.2",
|
||||||
|
"webpack-cli": "^3.1.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --mode=production --optimize-minimize",
|
||||||
|
"watch-dev": "NODE_ENV=development webpack --mode=development -w",
|
||||||
|
"watch": "webpack --mode=production -w --optimize-minimize"
|
||||||
|
}
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
|
@ -0,0 +1,49 @@
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: {
|
||||||
|
main: [ "babel-polyfill", './main.js' ]
|
||||||
|
},
|
||||||
|
context: __dirname,
|
||||||
|
output: {
|
||||||
|
path: __dirname,
|
||||||
|
filename: 'dist/[name].js'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /.jsx?$/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
exclude: /node_modules(?!\/react-toolbox\/components)/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
"style-loader",
|
||||||
|
{
|
||||||
|
loader: "css-loader",
|
||||||
|
options: {
|
||||||
|
modules: true, // default is false
|
||||||
|
sourceMap: true,
|
||||||
|
importLoaders: 1,
|
||||||
|
localIdentName: "[name]--[local]--[hash:base64:8]"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postcss-loader"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
"process.env": {
|
||||||
|
NODE_ENV: JSON.stringify(process.env.NODE_ENV || "production")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
performance: {
|
||||||
|
maxEntrypointSize: 3000000,
|
||||||
|
maxAssetSize: 3000000
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue