Merge remote-tracking branch 'upstream/master' into nav

* upstream/master:
  Slightly tweaked example code

example/src/App.js

@@ -9,7 +9,7 @@ import FixedSizeGridApi from './routes/api/FixedSizeGrid';
 import FixedSizeListApi from './routes/api/FixedSizeList';
 import FixedSizeGridExample from './routes/examples/FixedSizeGrid';
 import FixedSizeListExample from './routes/examples/FixedSizeList';
-import FixedSizeListWithScrollingIndicatorExample from './routes/examples/FixedSizeListWithScrollingIndicator';
+import ListWithScrollingIndicatorExample from './routes/examples/ListWithScrollingIndicator';
 import ScrollToItemExample from './routes/examples/ScrollToItem';
 
 import './App.css';
@@ -66,7 +66,7 @@ export default function App() {
           />
           <Route
             path="/examples/list/scrolling-indicators"
-            component={FixedSizeListWithScrollingIndicatorExample}
+            component={ListWithScrollingIndicatorExample}
           />
           <Route
             path="/examples/list/scroll-to-cell"

example/src/components/CodeBlock.js

@@ -9,8 +9,15 @@ import "./CodeBlock.css";
 
 const CodeBlock = ({ value }) => (
   <div className="CodeBlock">
-    <CodeMirror options={{ mode: "jsx", readOnly: true, theme: "material" }} value={value.trim()} />
+    <CodeMirror options={OPTIONS} value={value.trim()} />
   </div>
 );
 
+const OPTIONS = {
+  lineWrapping: true,
+  mode: "jsx",
+  readOnly: true,
+  theme: "material"
+};
+
 export default CodeBlock;

example/src/routes/examples/DynamicList.js

@@ -43,25 +43,24 @@ export default function() {
 }
 
 const SNIPPET = `
-import { DynamicList } from 'react-virtualized';
+import { DynamicList as List } from 'react-virtualized';
 
-<DynamicList
-  cellSize={
-    (index) => 20 + index % 3 * 5
-  }
-  className="List"
+// This is a silly row height function.
+// Yours would probably return a height based on the item.
+function getRowHeight(index) {
+  return 20 + index % 3 * 5;
+}
+
+<List
+  cellSize={getRowHeight}
   count={1000}
   height={150}
   width={300}
 >
   {({ key, index, style }) => (
-    <div
-      className={index % 2 ? 'ItemOdd' : 'ItemEven'}
-      key={key}
-      style={style}
-    >
+    <div key={key} style={style}>
       Row {index}
     </div>
   )}
-</DynamicList>
+</List>
 `;

example/src/routes/examples/FixedSizeGrid.js

@@ -43,10 +43,9 @@ export default function() {
 }
 
 const SNIPPET = `
-import { FixedSizeGrid } from 'react-virtualized';
+import { FixedSizeGrid as Grid } from 'react-virtualized';
 
-<FixedSizeGrid
-  className="Grid"
+<Grid
   columnCount={1000}
   columnWidth={100}
   height={150}
@@ -55,13 +54,9 @@ import { FixedSizeGrid } from 'react-virtualized';
   width={300}
 >
   {({ columnIndex, key, rowIndex, style }) => (
-    <div
-      className="GridItem"
-      key={key}
-      style={style}
-    >
-      r{rowIndex}, c{columnIndex}
+    <div key={key} style={style}>
+      row {rowIndex}, column {columnIndex}
     </div>
   )}
-</FixedSizeGrid>
+</Grid>
 `;

example/src/routes/examples/FixedSizeList.js

@@ -70,46 +70,36 @@ export default function() {
 }
 
 const SNIPPET_VERTICAL = `
-import { FixedSizeList } from 'react-virtualized';
+import { FixedSizeList as List } from 'react-virtualized';
 
-<FixedSizeList
+<List
   cellSize={35}
-  className="List"
   count={1000}
   height={150}
   width={300}
 >
   {({ key, index, style }) => (
-    <div
-      className={index % 2 ? 'ItemOdd' : 'ItemEven'}
-      key={key}
-      style={style}
-    >
+    <div key={key} style={style}>
       Row {index}
     </div>
   )}
-</FixedSizeList>
+</List>
 `;
 
 const SNIPPET_HORIZONTAL = `
-import { FixedSizeList } from 'react-virtualized';
+import { FixedSizeList as List } from 'react-virtualized';
 
-<FixedSizeList
+<List
   cellSize={100}
-  className="List"
   count={1000}
   direction="horizontal"
   height={75}
   width={300}
 >
   {({ key, index, style }) => (
-    <div
-      className={index % 2 ? 'ItemOdd' : 'ItemEven'}
-      key={key}
-      style={style}
-    >
+    <div key={key} style={style}>
       Column {index}
     </div>
   )}
-</FixedSizeList>
+</List>
 `;

example/src/routes/examples/FixedSizeListWithScrollingIndicator.js → example/src/routes/examples/ListWithScrollingIndicator.js

@@ -42,21 +42,17 @@ export default function() {
 }
 
 const SNIPPET = `
-import { FixedSizeList } from 'react-virtualized';
+import { FixedSizeList as List } from 'react-virtualized';
 
 // If your component's items are expensive to render,
 // You can boost performance by rendering a placeholder while the user is scrolling.
 // To do this, add the \`useIsScrolling\` property to your List or Grid.
 // Now an additional parameter, \`isScrolling\`, will be passed to your render method:
-<FixedSizeList useIsScrolling {...props}>
+<List useIsScrolling {...props}>
   {({ key, index, isScrolling, style }) => (
-    <div
-      className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
-      key={key}
-      style={style}
-    >
+    <div key={key} style={style}>
       {isScrolling ? 'Scrolling' : \`Row \${index}\`}
     </div>
   )}
-</FixedSizeList>
+</List>
 `;

example/src/routes/examples/ScrollToItem.js

@@ -110,27 +110,31 @@ export default class ScrollToItem extends Component {
 }
 
 const SNIPPET_LIST = `
-import { FixedSizeList } from 'react-virtualized';
+import { FixedSizeList as List } from 'react-virtualized';
+
+const listRef = React.createRef();
 
 // You can programatically scroll to a item within a List.
 // First, attach a ref to the List:
-<FixedSizeList ref={listRef} {...props} />
+<List ref={listRef} {...props} />
 
 // Then call the scrollToItem() API method with an item index:
-listRefRef.current.scrollToItem(200);
+listRe.current.scrollToItem(200);
 
 // The List will scroll as little as possible to ensure the item is visible.
 // You can also specify a custom alignment: center, start, or end.
 // For example:
-listRefRef.current.scrollToItem(300, "center");
+listRe.current.scrollToItem(300, "center");
 `;
 
 const SNIPPET_GRID = `
-import { FixedSizeGrid } from 'react-virtualized';
+import { FixedSizeGrid as Grid } from 'react-virtualized';
+
+const gridRef = React.createRef();
 
 // You can programatically scroll to a item within a Grid.
 // First, attach a ref to the Grid:
-<FixedSizeGrid ref={gridRef} {...props} />
+<Grid ref={gridRef} {...props} />
 
 // Then call the scrollToItem() API method with the item indices:
 gridRef.current.scrollToItem({

example/src/routes/examples/shared.css

@@ -18,7 +18,9 @@
 }
 
 .ExampleDemo {
-  display: inline-flex;
+  flex: 0 0 auto;
+  max-width: 400px;
+  display: flex;
   flex-direction: column;
   align-items: center;
   margin: 2rem 0.5rem 1rem 0.5rem;
@@ -34,7 +36,7 @@
 }
 
 .ExampleCode {
-  margin-left: 0.5rem;
+  flex: 1 1 auto;
 }
 
 .Grid,