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