Skip to content
This repository has been archived by the owner on Mar 3, 2021. It is now read-only.

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed May 5, 2018
1 parent 88e7efc commit 6a9829c
Show file tree
Hide file tree
Showing 15 changed files with 15,289 additions and 78 deletions.
26 changes: 1 addition & 25 deletions .eslintrc
View file
@@ -1,27 +1,3 @@
{
"parser": "babel-eslint",
"extends": [
"standard",
"standard-react"
],
"env": {
"es6": true
},
"plugins": [
"react"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// don't force es6 functions to include space before paren
"space-before-function-paren": 0,

// allow specifying true explicitly for boolean props
"react/jsx-boolean-value": 0,

// allow imports mixed with non-import statements at top of file
"import/first": 0
}
"extends": ["react-app", "plugin:prettier/recommended"]
}
5 changes: 3 additions & 2 deletions example/package.json
View file
Expand Up @@ -7,9 +7,10 @@
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-codemirror": "^1.0.0",
"react-dom": "^16.2.0",
"react-virtualized": "link:..",
"react-scripts": "^1.1.1"
"react-scripts": "^1.1.1",
"react-virtualized": "link:.."
},
"scripts": {
"start": "react-scripts start",
Expand Down
56 changes: 56 additions & 0 deletions example/src/App.css
View file
@@ -0,0 +1,56 @@
.App {
height: 100%;
padding: 1rem;
}

.Block {
display: flex;
flex-direction: column;
}
.BlockHeader {
font-weight: bold;
margin: 1rem 0;
}
.BlockBody {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
.BlockDemo {
margin-bottom: 0.5rem;
margin-right: 0.5rem;
}
.BlockCode {
margin-bottom: 0.5rem;
border: 1px solid #ddd;
}

.CodeMirror {
height: auto;
background-color: #f7f7f7;
}

.ScrollToLabel {
font-weight: bold;
margin-right: 1rem;
}

.List {
border: 1px solid #ddd;
}

.ListItemEven,
.ListItemOdd {
display: flex;
align-items: center;
justify-content: center;
}
.ListItemOdd {
background-color: #f7f7f7;
}

.ListItemRernCount {
color: #ccc;
margin-left: 0.5rem;
}
274 changes: 267 additions & 7 deletions example/src/App.js
View file
@@ -1,13 +1,273 @@
import React, { Component } from 'react'
import React, { Component } from "react";
import {
FixedSizeGrid as Grid,
FixedSizeList as List
} from "react-virtualized-v10";
import CodeMirror from "react-codemirror";
import "codemirror/mode/javascript/javascript";
import "codemirror/mode/jsx/jsx";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/dracula.css";
import "./App.css";

import ExampleComponent from 'react-virtualized'
const DEFAULT_GRID_PROPS = {
className: "List",
columnCount: 1000,
columnWidth: 100,
height: 150,
rowCount: 1000,
rowHeight: 35,
width: 300
};

export default class App extends Component {
render () {
const DEFAULT_LIST_PROPS = {
cellSize: 35,
className: "List",
count: 1000,
height: 150,
width: 300,
children: props => <ListCell {...props} />
};

export default class App extends Component<void, void> {
grid = React.createRef();
horizontalList = React.createRef();
scrollingList = React.createRef();
verticalList = React.createRef();

render() {
return (
<div>
<ExampleComponent text='Modern React component module' />
<div className="App">
<div>
<label className="ScrollToLabel">Scroll to:</label>
<button onClick={this.scrollToStart500}>500 (start)</button>
<button onClick={this.scrollToEnd200}>200 (end)</button>
<button onClick={this.scrollToCenter300}>300 (center)</button>
<button onClick={this.scrollToAuto400}>400 (auto)</button>
</div>

<div className="Block">
<div className="BlockHeader">
Vertical <code>List</code>
</div>
<div className="BlockBody">
<div className="BlockDemo">
<List {...DEFAULT_LIST_PROPS} ref={this.verticalList} />
</div>
<div className="BlockCode">
<CodeMirror
options={{ mode: "jsx" }}
value={`<List
cellSize={35}
count={1000}
height={150}
width="100%"
>
{({ key, index, style }) => (
<div key={key} style={style}>
{/* Render item at index ... */}
</div>
)}
</List>`}
/>
</div>
</div>
</div>

<div className="Block">
<div className="BlockHeader">
Horizontal <code>List</code>
</div>
<div className="BlockBody">
<div className="BlockDemo">
<List
{...DEFAULT_LIST_PROPS}
cellSize={100}
direction="horizontal"
ref={this.horizontalList}
/>
</div>
<div className="BlockCode">
<CodeMirror
options={{ mode: "jsx" }}
value={`<List
cellSize={35}
count={1000}
direction="horizontal"
height={150}
width={300}
>
{({ key, index, style }) => (
<div key={key} style={style}>
{/* Render item at index ... */}
</div>
)}
</List>`}
/>
</div>
</div>
</div>

<div className="Block">
<div className="BlockHeader">
<code>List</code> with <code>isScrolling</code> indicator
</div>
<div className="BlockBody">
<div className="BlockDemo">
<List
{...DEFAULT_LIST_PROPS}
useIsScrolling
ref={this.scrollingList}
/>
</div>
<div className="BlockCode">
<CodeMirror
options={{ mode: "jsx" }}
value={`<List
cellSize={35}
count={1000}
useIsScrolling
height={150}
width="100%"
>
{({ key, index, isScrolling, style }) => (
<div key={key} style={style}>
{/* Render item at index ... */}
{isScrolling && (
{/* Render scrolling indicator ... */}
)}
</div>
)}
</List>`}
/>
</div>
</div>
</div>

<div className="Block">
<div className="BlockHeader">
<code>Grid</code>
</div>
<div className="BlockBody">
<div className="BlockDemo">
<Grid {...DEFAULT_GRID_PROPS} ref={this.grid}>
{props => <GridCell {...props} />}
</Grid>
</div>
<div className="BlockCode">
<CodeMirror
options={{ mode: "jsx" }}
value={`<Grid
columnCount={1000}
columnWidth={100}
height={150}
rowCount={1000}
rowHeight={35}
width={300}
>
{({ columnIndex, key, rowIndex, style }) => (
<div key={key} style={style}>
{/* Render item at rowIndex and columnIndex ... */}
</div>
)}
</Grid>`}
/>
</div>
</div>
</div>
</div>
)
);
}

scrollToStart500 = () => {
this.grid.current.scrollToCell({
columnIndex: 500,
rowIndex: 500,
align: "start"
});
this.horizontalList.current.scrollToRow(500, "start");
this.verticalList.current.scrollToRow(500, "start");
this.scrollingList.current.scrollToRow(500, "start");
};

scrollToEnd200 = () => {
this.grid.current.scrollToCell({
columnIndex: 200,
rowIndex: 200,
align: "end"
});
this.horizontalList.current.scrollToRow(200, "end");
this.verticalList.current.scrollToRow(200, "end");
this.scrollingList.current.scrollToRow(200, "end");
};

scrollToCenter300 = () => {
this.grid.current.scrollToCell({
columnIndex: 300,
rowIndex: 300,
align: "center"
});
this.horizontalList.current.scrollToRow(300, "center");
this.verticalList.current.scrollToRow(300, "center");
this.scrollingList.current.scrollToRow(300, "center");
};

scrollToAuto400 = () => {
this.grid.current.scrollToCell({
columnIndex: 400,
rowIndex: 400,
align: "auto"
});
this.horizontalList.current.scrollToRow(400, "auto");
this.verticalList.current.scrollToRow(400, "auto");
this.scrollingList.current.scrollToRow(400, "auto");
};
}

class GridCell extends React.PureComponent {
_renderCounter: number = 0;

render() {
const { columnIndex, rowIndex, style } = this.props;

this._renderCounter++;

return (
<div
className={
rowIndex % 2
? columnIndex % 2
? "ListItemOdd"
: "ListItemEven"
: columnIndex % 2
? "ListItemEven"
: "ListItemOdd"
}
style={style}
>
<span>
r:{rowIndex}, c:{columnIndex}
</span>
<small className="ListItemRernCount">[{this._renderCounter}]</small>
</div>
);
}
}

class ListCell extends React.PureComponent {
_renderCounter: number = 0;

render() {
const { index, isScrolling, style } = this.props;

this._renderCounter++;

return (
<div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
<span>Cell {index}</span>
<span>{isScrolling ? "(scrolling)" : ""}</span>
<small className="ListItemRernCount">[{this._renderCounter}]</small>
</div>
);
}
}
1 change: 1 addition & 0 deletions example/src/index.css
View file
Expand Up @@ -2,4 +2,5 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 11px;
}

0 comments on commit 6a9829c

Please sign in to comment.