[docs] Add virtualized list example

Author: joshwooding

docs/src/pages/demos/lists/VirtualizedList.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { FixedSizeList } from 'react-window';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    height: 400,
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper } }));
+
+
+
+function Row(props) {
+  const { index, style } = props;
+
+  return (
+    <ListItem button style={style} key={index}>
+      <ListItemText primary={`Item ${index + 1}`} />
+    </ListItem>);
+
+}
+
+function VirtualizedList() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <FixedSizeList height={400} width={360} itemSize={46} itemCount={200}>
+        {Row}
+      </FixedSizeList>
+    </div>);
+
+}
+
+export default VirtualizedList;

docs/src/pages/demos/lists/VirtualizedList.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    width: '100%',
+    height: 400,
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+function Row(props: ListChildComponentProps) {
+  const { index, style } = props;
+
+  return (
+    <ListItem button style={style} key={index}>
+      <ListItemText primary={`Item ${index + 1}`} />
+    </ListItem>
+  );
+}
+
+function VirtualizedList() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <FixedSizeList height={400} width={360} itemSize={46} itemCount={200}>
+        {Row}
+      </FixedSizeList>
+    </div>
+  );
+}
+
+export default VirtualizedList;

docs/src/pages/demos/lists/lists.md

@@ -85,3 +85,11 @@ Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all
 ## Inset List
 
 {{"demo": "pages/demos/lists/InsetList.js"}}
+
+## Virtualized List
+
+In the following example, we demonstrate how to use [react-window](https://github.com/bvaughn/react-window) with the `List` component.
+It renders 200 rows and can easily handle more.
+Virtualization helps with performance issues.
+
+{{"demo": "pages/demos/lists/VirtualizedList.js"}}

package.json

@@ -83,6 +83,7 @@
     "@types/react-select": "^2.0.14",
     "@types/react-swipeable-views": "^0.13.0",
     "@types/react-text-mask": "^5.4.2",
+    "@types/react-window": "^1.7.0",
     "@types/styled-components": "^4.1.11",
     "argos-cli": "^0.1.1",
     "autoprefixer": "^9.0.0",
@@ -177,6 +178,7 @@
     "react-test-renderer": "^16.8.5",
     "react-text-mask": "^5.0.2",
     "react-virtualized": "^9.21.0",
+    "react-window": "^1.7.1",
     "recast": "^0.17.0",
     "recharts": "^1.1.0",
     "redux": "^4.0.0",

yarn.lock

@@ -2210,6 +2210,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-window@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.7.0.tgz#8dd99822c54380c9c05df213b7b4400c24c9877e"
+  integrity sha512-HyxhB3TFL/2WKRi69paA1Ch7kowomhR2eSZe7sJz8OtKuNhzRrlYSteSID7GIUpV95k246iVOlxEXmG2bjZQFA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.7.10":
   version "16.8.8"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.8.tgz#4b60a469fd2469f7aa6eaa0f8cfbc51f6d76e662"
@@ -8993,6 +9000,11 @@ memfs-or-file-map-to-github-branch@^1.1.0:
   resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.1.2.tgz#9d46c02481b7eca8e5ee8a94f170b7e0138cad67"
   integrity sha512-D2JKK2DTuVYQqquBWco3K6UfSVyVwmd58dgNqh+TgxHOZdTmR8I130gjMbVCkemDl/EzqDA62417cJxKL3/FFA==
 
+"memoize-one@>=3.1.1 <6":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.2.tgz#6aba5276856d72fb44ead3efab86432f94ba203d"
+  integrity sha512-o7lldN4fs/axqctc03NF+PMhd2veRrWeJ2n2GjEzUPBD4F9rmNg4A+bQCACIzwjHJEXuYv4aFFMaH35KZfHUrw==
+
 memoize-one@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.0.tgz#d55007dffefb8de7546659a1722a5d42e128286e"
@@ -11463,6 +11475,14 @@ react-virtualized@^9.21.0:
     prop-types "^15.6.0"
     react-lifecycles-compat "^3.0.4"
 
+react-window@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.1.tgz#c1db640415b97b85bc0a1c66eb82dadabca39b86"
+  integrity sha512-y4/Qc98agCtHulpeI5b6K2Hh8J7TeZIfvccBVesfqOFx4CS+TSUpnJl1/ipeXzhfvzPwvVEmaU/VosQ6O5VhTg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^16.8.5:
   version "16.8.5"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.5.tgz#49be3b655489d74504ad994016407e8a0445de66"