Skip to content

Commit 6a9829c

Browse files
author
Brian Vaughn
committed
Initial commit
1 parent 88e7efc commit 6a9829c

15 files changed

+15289
-78
lines changed

‎.eslintrc

+1-25
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,3 @@
11
{
2-
"parser": "babel-eslint",
3-
"extends": [
4-
"standard",
5-
"standard-react"
6-
],
7-
"env": {
8-
"es6": true
9-
},
10-
"plugins": [
11-
"react"
12-
],
13-
"parserOptions": {
14-
"sourceType": "module",
15-
"allowImportExportEverywhere": true
16-
},
17-
"rules": {
18-
// don't force es6 functions to include space before paren
19-
"space-before-function-paren": 0,
20-
21-
// allow specifying true explicitly for boolean props
22-
"react/jsx-boolean-value": 0,
23-
24-
// allow imports mixed with non-import statements at top of file
25-
"import/first": 0
26-
}
2+
"extends": ["react-app", "plugin:prettier/recommended"]
273
}

‎example/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77
"dependencies": {
88
"prop-types": "^15.6.1",
99
"react": "^16.2.0",
10+
"react-codemirror": "^1.0.0",
1011
"react-dom": "^16.2.0",
11-
"react-virtualized": "link:..",
12-
"react-scripts": "^1.1.1"
12+
"react-scripts": "^1.1.1",
13+
"react-virtualized": "link:.."
1314
},
1415
"scripts": {
1516
"start": "react-scripts start",

‎example/src/App.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.App {
2+
height: 100%;
3+
padding: 1rem;
4+
}
5+
6+
.Block {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
.BlockHeader {
11+
font-weight: bold;
12+
margin: 1rem 0;
13+
}
14+
.BlockBody {
15+
display: flex;
16+
flex-direction: row;
17+
align-items: flex-start;
18+
flex-wrap: wrap;
19+
}
20+
.BlockDemo {
21+
margin-bottom: 0.5rem;
22+
margin-right: 0.5rem;
23+
}
24+
.BlockCode {
25+
margin-bottom: 0.5rem;
26+
border: 1px solid #ddd;
27+
}
28+
29+
.CodeMirror {
30+
height: auto;
31+
background-color: #f7f7f7;
32+
}
33+
34+
.ScrollToLabel {
35+
font-weight: bold;
36+
margin-right: 1rem;
37+
}
38+
39+
.List {
40+
border: 1px solid #ddd;
41+
}
42+
43+
.ListItemEven,
44+
.ListItemOdd {
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
}
49+
.ListItemOdd {
50+
background-color: #f7f7f7;
51+
}
52+
53+
.ListItemRernCount {
54+
color: #ccc;
55+
margin-left: 0.5rem;
56+
}

‎example/src/App.js

+267-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,273 @@
1-
import React, { Component } from 'react'
1+
import React, { Component } from "react";
2+
import {
3+
FixedSizeGrid as Grid,
4+
FixedSizeList as List
5+
} from "react-virtualized-v10";
6+
import CodeMirror from "react-codemirror";
7+
import "codemirror/mode/javascript/javascript";
8+
import "codemirror/mode/jsx/jsx";
9+
import "codemirror/lib/codemirror.css";
10+
import "codemirror/theme/dracula.css";
11+
import "./App.css";
212

3-
import ExampleComponent from 'react-virtualized'
13+
const DEFAULT_GRID_PROPS = {
14+
className: "List",
15+
columnCount: 1000,
16+
columnWidth: 100,
17+
height: 150,
18+
rowCount: 1000,
19+
rowHeight: 35,
20+
width: 300
21+
};
422

5-
export default class App extends Component {
6-
render () {
23+
const DEFAULT_LIST_PROPS = {
24+
cellSize: 35,
25+
className: "List",
26+
count: 1000,
27+
height: 150,
28+
width: 300,
29+
children: props => <ListCell {...props} />
30+
};
31+
32+
export default class App extends Component<void, void> {
33+
grid = React.createRef();
34+
horizontalList = React.createRef();
35+
scrollingList = React.createRef();
36+
verticalList = React.createRef();
37+
38+
render() {
739
return (
8-
<div>
9-
<ExampleComponent text='Modern React component module' />
40+
<div className="App">
41+
<div>
42+
<label className="ScrollToLabel">Scroll to:</label>
43+
<button onClick={this.scrollToStart500}>500 (start)</button>
44+
<button onClick={this.scrollToEnd200}>200 (end)</button>
45+
<button onClick={this.scrollToCenter300}>300 (center)</button>
46+
<button onClick={this.scrollToAuto400}>400 (auto)</button>
47+
</div>
48+
49+
<div className="Block">
50+
<div className="BlockHeader">
51+
Vertical <code>List</code>
52+
</div>
53+
<div className="BlockBody">
54+
<div className="BlockDemo">
55+
<List {...DEFAULT_LIST_PROPS} ref={this.verticalList} />
56+
</div>
57+
<div className="BlockCode">
58+
<CodeMirror
59+
options={{ mode: "jsx" }}
60+
value={`<List
61+
cellSize={35}
62+
count={1000}
63+
height={150}
64+
width="100%"
65+
>
66+
{({ key, index, style }) => (
67+
<div key={key} style={style}>
68+
{/* Render item at index ... */}
69+
</div>
70+
)}
71+
</List>`}
72+
/>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<div className="Block">
78+
<div className="BlockHeader">
79+
Horizontal <code>List</code>
80+
</div>
81+
<div className="BlockBody">
82+
<div className="BlockDemo">
83+
<List
84+
{...DEFAULT_LIST_PROPS}
85+
cellSize={100}
86+
direction="horizontal"
87+
ref={this.horizontalList}
88+
/>
89+
</div>
90+
<div className="BlockCode">
91+
<CodeMirror
92+
options={{ mode: "jsx" }}
93+
value={`<List
94+
cellSize={35}
95+
count={1000}
96+
direction="horizontal"
97+
height={150}
98+
width={300}
99+
>
100+
{({ key, index, style }) => (
101+
<div key={key} style={style}>
102+
{/* Render item at index ... */}
103+
</div>
104+
)}
105+
</List>`}
106+
/>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<div className="Block">
112+
<div className="BlockHeader">
113+
<code>List</code> with <code>isScrolling</code> indicator
114+
</div>
115+
<div className="BlockBody">
116+
<div className="BlockDemo">
117+
<List
118+
{...DEFAULT_LIST_PROPS}
119+
useIsScrolling
120+
ref={this.scrollingList}
121+
/>
122+
</div>
123+
<div className="BlockCode">
124+
<CodeMirror
125+
options={{ mode: "jsx" }}
126+
value={`<List
127+
cellSize={35}
128+
count={1000}
129+
useIsScrolling
130+
height={150}
131+
width="100%"
132+
>
133+
{({ key, index, isScrolling, style }) => (
134+
<div key={key} style={style}>
135+
{/* Render item at index ... */}
136+
{isScrolling && (
137+
{/* Render scrolling indicator ... */}
138+
)}
139+
</div>
140+
)}
141+
</List>`}
142+
/>
143+
</div>
144+
</div>
145+
</div>
146+
147+
<div className="Block">
148+
<div className="BlockHeader">
149+
<code>Grid</code>
150+
</div>
151+
<div className="BlockBody">
152+
<div className="BlockDemo">
153+
<Grid {...DEFAULT_GRID_PROPS} ref={this.grid}>
154+
{props => <GridCell {...props} />}
155+
</Grid>
156+
</div>
157+
<div className="BlockCode">
158+
<CodeMirror
159+
options={{ mode: "jsx" }}
160+
value={`<Grid
161+
columnCount={1000}
162+
columnWidth={100}
163+
height={150}
164+
rowCount={1000}
165+
rowHeight={35}
166+
width={300}
167+
>
168+
{({ columnIndex, key, rowIndex, style }) => (
169+
<div key={key} style={style}>
170+
{/* Render item at rowIndex and columnIndex ... */}
171+
</div>
172+
)}
173+
</Grid>`}
174+
/>
175+
</div>
176+
</div>
177+
</div>
10178
</div>
11-
)
179+
);
12180
}
181+
182+
scrollToStart500 = () => {
183+
this.grid.current.scrollToCell({
184+
columnIndex: 500,
185+
rowIndex: 500,
186+
align: "start"
187+
});
188+
this.horizontalList.current.scrollToRow(500, "start");
189+
this.verticalList.current.scrollToRow(500, "start");
190+
this.scrollingList.current.scrollToRow(500, "start");
191+
};
192+
193+
scrollToEnd200 = () => {
194+
this.grid.current.scrollToCell({
195+
columnIndex: 200,
196+
rowIndex: 200,
197+
align: "end"
198+
});
199+
this.horizontalList.current.scrollToRow(200, "end");
200+
this.verticalList.current.scrollToRow(200, "end");
201+
this.scrollingList.current.scrollToRow(200, "end");
202+
};
203+
204+
scrollToCenter300 = () => {
205+
this.grid.current.scrollToCell({
206+
columnIndex: 300,
207+
rowIndex: 300,
208+
align: "center"
209+
});
210+
this.horizontalList.current.scrollToRow(300, "center");
211+
this.verticalList.current.scrollToRow(300, "center");
212+
this.scrollingList.current.scrollToRow(300, "center");
213+
};
214+
215+
scrollToAuto400 = () => {
216+
this.grid.current.scrollToCell({
217+
columnIndex: 400,
218+
rowIndex: 400,
219+
align: "auto"
220+
});
221+
this.horizontalList.current.scrollToRow(400, "auto");
222+
this.verticalList.current.scrollToRow(400, "auto");
223+
this.scrollingList.current.scrollToRow(400, "auto");
224+
};
13225
}
226+
227+
class GridCell extends React.PureComponent {
228+
_renderCounter: number = 0;
229+
230+
render() {
231+
const { columnIndex, rowIndex, style } = this.props;
232+
233+
this._renderCounter++;
234+
235+
return (
236+
<div
237+
className={
238+
rowIndex % 2
239+
? columnIndex % 2
240+
? "ListItemOdd"
241+
: "ListItemEven"
242+
: columnIndex % 2
243+
? "ListItemEven"
244+
: "ListItemOdd"
245+
}
246+
style={style}
247+
>
248+
<span>
249+
r:{rowIndex}, c:{columnIndex}
250+
</span>
251+
<small className="ListItemRernCount">[{this._renderCounter}]</small>
252+
</div>
253+
);
254+
}
255+
}
256+
257+
class ListCell extends React.PureComponent {
258+
_renderCounter: number = 0;
259+
260+
render() {
261+
const { index, isScrolling, style } = this.props;
262+
263+
this._renderCounter++;
264+
265+
return (
266+
<div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
267+
<span>Cell {index}</span>
268+
<span>{isScrolling ? "(scrolling)" : ""}</span>
269+
<small className="ListItemRernCount">[{this._renderCounter}]</small>
270+
</div>
271+
);
272+
}
273+
}

‎example/src/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ body {
22
margin: 0;
33
padding: 0;
44
font-family: sans-serif;
5+
font-size: 11px;
56
}

0 commit comments

Comments
 (0)