[docs] Add TypeScript demos for Dividers (#15037)

* Added typescript demo for InsetDividers * Added typescript demo for ListDividers * Added typescript Demo for MiddleDividers * Added typescript Demo for SubheaderDividers * Remove withTheme option from withStyles and run prettier
mui · Mar 25, 2019 · cc856b6 · cc856b6
1 parent 49e97e3
commit cc856b6
Show file tree

Hide file tree

Showing 4 changed files with 258 additions and 0 deletions.
diff --git a/docs/src/pages/demos/dividers/InsetDividers.tsx b/docs/src/pages/demos/dividers/InsetDividers.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, WithStyles, WithTheme, createStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import ImageIcon from '@material-ui/icons/Image';
+import WorkIcon from '@material-ui/icons/Work';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Divider from '@material-ui/core/Divider';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      maxWidth: 360,
+      backgroundColor: theme.palette.background.paper,
+    },
+  });
+
+type Props = WithStyles<typeof styles> & WithTheme;
+
+function InsetDividers(props: Props) {
+  const { classes } = props;
+  return (
+    <List className={classes.root}>
+      <ListItem>
+        <Avatar>
+          <ImageIcon />
+        </Avatar>
+        <ListItemText primary="Photos" secondary="Jan 9, 2014" />
+      </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
+      <ListItem>
+        <Avatar>
+          <WorkIcon />
+        </Avatar>
+        <ListItemText primary="Work" secondary="Jan 7, 2014" />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem>
+        <Avatar>
+          <BeachAccessIcon />
+        </Avatar>
+        <ListItemText primary="Vacation" secondary="July 20, 2014" />
+      </ListItem>
+    </List>
+  );
+}
+
+InsetDividers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(InsetDividers);
diff --git a/docs/src/pages/demos/dividers/ListDividers.tsx b/docs/src/pages/demos/dividers/ListDividers.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyles, Theme, WithStyles, WithTheme } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      maxWidth: '360px',
+      backgroundColor: theme.palette.background.paper,
+    },
+  });
+
+type Props = WithStyles<typeof styles> & WithTheme;
+
+function ListDividers(props: Props) {
+  const { classes } = props;
+  return (
+    <List component="nav" className={classes.root}>
+      <ListItem button>
+        <ListItemText primary="Inbox" />
+      </ListItem>
+      <Divider />
+      <ListItem button divider>
+        <ListItemText primary="Drafts" />
+      </ListItem>
+      <ListItem button>
+        <ListItemText primary="Trash" />
+      </ListItem>
+      <Divider light />
+      <ListItem button>
+        <ListItemText primary="Spam" />
+      </ListItem>
+    </List>
+  );
+}
+
+ListDividers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ListDividers);
diff --git a/docs/src/pages/demos/dividers/MiddleDividers.tsx b/docs/src/pages/demos/dividers/MiddleDividers.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyles, Theme, WithStyles, WithTheme } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      maxWidth: 360,
+      backgroundColor: theme.palette.background.paper,
+    },
+    chip: {
+      marginRight: theme.spacing(1),
+    },
+    section1: {
+      margin: theme.spacing(3, 2),
+    },
+    section2: {
+      margin: theme.spacing(2),
+    },
+    section3: {
+      margin: theme.spacing(6, 2, 2),
+    },
+  });
+
+type Props = WithStyles<typeof styles> & WithTheme;
+
+function MiddleDividers(props: Props) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <div className={classes.section1}>
+        <Grid container alignItems="center">
+          <Grid item xs>
+            <Typography gutterBottom variant="h4">
+              Toothbrush
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography gutterBottom variant="h6">
+              $4.50
+            </Typography>
+          </Grid>
+        </Grid>
+        <Typography color="textSecondary">
+          Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
+          hall.
+        </Typography>
+      </div>
+      <Divider variant="middle" />
+      <div className={classes.section2}>
+        <Typography gutterBottom variant="body1">
+          Select type
+        </Typography>
+        <div>
+          <Chip className={classes.chip} label="Extra Soft" />
+          <Chip className={classes.chip} label="Soft" />
+          <Chip className={classes.chip} label="Medium" />
+          <Chip className={classes.chip} label="Hard" />
+        </div>
+      </div>
+      <div className={classes.section3}>
+        <Button variant="contained" color="primary" fullWidth>
+          Add to cart
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+MiddleDividers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(MiddleDividers);
diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, WithStyles, WithTheme, Theme } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+
+const styles = (theme: Theme) => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  dividerFullWidth: {
+    margin: `5px 0 0 ${theme.spacing(2)}px`,
+  },
+  dividerInset: {
+    margin: `5px 0 0 ${theme.spacing(9)}px`,
+  },
+});
+
+type Props = WithStyles<typeof styles> & WithTheme;
+
+function SubheaderDividers(props: Props) {
+  const { classes } = props;
+  return (
+    <List className={classes.root}>
+      <ListItem>
+        <ListItemText primary="Photos" secondary="Jan 9, 2014" />
+      </ListItem>
+      <Divider component="li" />
+      <li>
+        <Typography
+          className={classes.dividerFullWidth}
+          color="textSecondary"
+          display="block"
+          variant="caption"
+        >
+          Divider
+        </Typography>
+      </li>
+      <ListItem>
+        <ListItemText primary="Work" secondary="Jan 7, 2014" />
+      </ListItem>
+      <Divider component="li" variant="inset" />
+      <li>
+        <Typography
+          className={classes.dividerInset}
+          color="textSecondary"
+          display="block"
+          variant="caption"
+        >
+          Leisure
+        </Typography>
+      </li>
+      <ListItem>
+        <Avatar>
+          <BeachAccessIcon />
+        </Avatar>
+        <ListItemText primary="Vacation" secondary="July 20, 2014" />
+      </ListItem>
+    </List>
+  );
+}
+
+SubheaderDividers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(SubheaderDividers);