[docs] Add simple list typescript demo (#14485)

Testing #11731
mui · Mar 2, 2019 · ecc2c85 · ecc2c85
1 parent 23549d4
commit ecc2c85
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 3 deletions.
diff --git a/docs/src/pages/demos/lists/SimpleList.tsx b/docs/src/pages/demos/lists/SimpleList.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import InboxIcon from '@material-ui/icons/Inbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      maxWidth: 360,
+      backgroundColor: theme.palette.background.paper,
+    },
+  });
+
+function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
+  return <ListItem button component="a" {...props} />;
+}
+
+export interface SimpleListProps extends WithStyles<typeof styles> {}
+
+function SimpleList(props: SimpleListProps) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <List component="nav">
+        <ListItem button>
+          <ListItemIcon>
+            <InboxIcon />
+          </ListItemIcon>
+          <ListItemText primary="Inbox" />
+        </ListItem>
+        <ListItem button>
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText primary="Drafts" />
+        </ListItem>
+      </List>
+      <Divider />
+      <List component="nav">
+        <ListItem button>
+          <ListItemText primary="Trash" />
+        </ListItem>
+        <ListItemLink href="#simple-list">
+          <ListItemText primary="Spam" />
+        </ListItemLink>
+      </List>
+    </div>
+  );
+}
+
+SimpleList.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(SimpleList);
diff --git a/packages/material-ui/src/ListItem/ListItem.d.ts b/packages/material-ui/src/ListItem/ListItem.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 import ButtonBase, { ButtonBaseProps } from '../ButtonBase';
-import { OverridableComponent, SimplifiedPropsOf, OverrideProps } from '../OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ListItemTypeMap<P, D extends React.ReactType> {
   props: P & {
@@ -36,6 +36,9 @@ export type ListItemClassKey =
   | 'secondaryAction'
   | 'selected';
 
-export type ListItemProps = SimplifiedPropsOf<typeof ListItem>;
+export type ListItemProps<D extends React.ReactType = 'li', P = {}> = OverrideProps<
+  ListItemTypeMap<P, D>,
+  D
+>;
 
 export default ListItem;
diff --git a/pages/demos/lists.js b/pages/demos/lists.js
@@ -4,7 +4,11 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/demos/lists', false, /\.md|\.js$/);
-const reqSource = require.context('!raw-loader!../../docs/src/pages/demos/lists', false, /\.js$/);
+const reqSource = require.context(
+  '!raw-loader!../../docs/src/pages/demos/lists',
+  false,
+  /\.(js|tsx)$/,
+);
 const reqPrefix = 'pages/demos/lists';
 
 function Page() {