Skip to content

Commit 5236588

Browse files
bh1505eps1lon
bh1505
authored and
eps1lon
committed
[docs] Add some List Typescript demos (#15323)
Adding Typescript demos for some List components as a part of [#14897](#14897)
1 parent 1e86a1c commit 5236588

File tree

6 files changed

+360
-0
lines changed

6 files changed

+360
-0
lines changed

‎docs/src/pages/demos/lists/AlignItemsList.tsx

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import List from '@material-ui/core/List';
5+
import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
8+
import Avatar from '@material-ui/core/Avatar';
9+
import Typography from '@material-ui/core/Typography';
10+
11+
const styles = (theme: Theme) =>
12+
createStyles({
13+
root: {
14+
width: '100%',
15+
maxWidth: 360,
16+
backgroundColor: theme.palette.background.paper,
17+
},
18+
inline: {
19+
display: 'inline',
20+
},
21+
});
22+
23+
export interface AlignItemListProps extends WithStyles<typeof styles> {}
24+
25+
function AlignItemsList(props: AlignItemListProps) {
26+
const { classes } = props;
27+
return (
28+
<List className={classes.root}>
29+
<ListItem alignItems="flex-start">
30+
<ListItemAvatar>
31+
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
32+
</ListItemAvatar>
33+
<ListItemText
34+
primary="Brunch this weekend?"
35+
secondary={
36+
<React.Fragment>
37+
<Typography
38+
component="span"
39+
variant="body2"
40+
className={classes.inline}
41+
color="textPrimary"
42+
>
43+
Ali Connors
44+
</Typography>
45+
{" — I'll be in your neighborhood doing errands this…"}
46+
</React.Fragment>
47+
}
48+
/>
49+
</ListItem>
50+
<ListItem alignItems="flex-start">
51+
<ListItemAvatar>
52+
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
53+
</ListItemAvatar>
54+
<ListItemText
55+
primary="Summer BBQ"
56+
secondary={
57+
<React.Fragment>
58+
<Typography
59+
component="span"
60+
variant="body2"
61+
className={classes.inline}
62+
color="textPrimary"
63+
>
64+
to Scott, Alex, Jennifer
65+
</Typography>
66+
{" — Wish I could come, but I'm out of town this…"}
67+
</React.Fragment>
68+
}
69+
/>
70+
</ListItem>
71+
<ListItem alignItems="flex-start">
72+
<ListItemAvatar>
73+
<Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />
74+
</ListItemAvatar>
75+
<ListItemText
76+
primary="Oui Oui"
77+
secondary={
78+
<React.Fragment>
79+
<Typography
80+
component="span"
81+
variant="body2"
82+
className={classes.inline}
83+
color="textPrimary"
84+
>
85+
Sandra Adams
86+
</Typography>
87+
{' — Do you have Paris recommendations? Have you ever…'}
88+
</React.Fragment>
89+
}
90+
/>
91+
</ListItem>
92+
</List>
93+
);
94+
}
95+
96+
AlignItemsList.propTypes = {
97+
classes: PropTypes.object.isRequired,
98+
} as any;
99+
100+
export default withStyles(styles)(AlignItemsList);

‎docs/src/pages/demos/lists/CheckboxList.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
3+
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
5+
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import Checkbox from '@material-ui/core/Checkbox';
8+
import IconButton from '@material-ui/core/IconButton';
9+
import CommentIcon from '@material-ui/icons/Comment';
10+
11+
const useStyles = makeStyles((theme: Theme) =>
12+
createStyles({
13+
root: {
14+
width: '100%',
15+
maxWidth: 360,
16+
backgroundColor: theme.palette.background.paper,
17+
},
18+
}),
19+
);
20+
21+
function CheckboxList() {
22+
const classes = useStyles();
23+
const [checked, setChecked] = React.useState([0]);
24+
25+
const handleToggle = (value: number) => () => {
26+
const currentIndex = checked.indexOf(value);
27+
const newChecked = [...checked];
28+
29+
if (currentIndex === -1) {
30+
newChecked.push(value);
31+
} else {
32+
newChecked.splice(currentIndex, 1);
33+
}
34+
35+
setChecked(newChecked);
36+
};
37+
38+
return (
39+
<List className={classes.root}>
40+
{[0, 1, 2, 3].map(value => (
41+
<ListItem key={value} role={undefined} dense button onClick={handleToggle(value)}>
42+
<Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
43+
<ListItemText primary={`Line item ${value + 1}`} />
44+
<ListItemSecondaryAction>
45+
<IconButton aria-label="Comments">
46+
<CommentIcon />
47+
</IconButton>
48+
</ListItemSecondaryAction>
49+
</ListItem>
50+
))}
51+
</List>
52+
);
53+
}
54+
55+
export default CheckboxList;

‎docs/src/pages/demos/lists/CheckboxListSecondary.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
3+
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
5+
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
8+
import Checkbox from '@material-ui/core/Checkbox';
9+
import Avatar from '@material-ui/core/Avatar';
10+
11+
const useStyles = makeStyles((theme: Theme) =>
12+
createStyles({
13+
root: {
14+
width: '100%',
15+
maxWidth: 360,
16+
backgroundColor: theme.palette.background.paper,
17+
},
18+
}),
19+
);
20+
21+
function CheckboxListSecondary() {
22+
const classes = useStyles();
23+
const [checked, setChecked] = React.useState([1]);
24+
25+
const handleToggle = (value: number) => () => {
26+
const currentIndex = checked.indexOf(value);
27+
const newChecked = [...checked];
28+
29+
if (currentIndex === -1) {
30+
newChecked.push(value);
31+
} else {
32+
newChecked.splice(currentIndex, 1);
33+
}
34+
35+
setChecked(newChecked);
36+
};
37+
38+
return (
39+
<List dense className={classes.root}>
40+
{[0, 1, 2, 3].map(value => (
41+
<ListItem key={value} button>
42+
<ListItemAvatar>
43+
<Avatar alt={`Avatar n°${value + 1}`} src={`/static/images/avatar/${value + 1}.jpg`} />
44+
</ListItemAvatar>
45+
<ListItemText primary={`Line item ${value + 1}`} />
46+
<ListItemSecondaryAction>
47+
<Checkbox onChange={handleToggle(value)} checked={checked.indexOf(value) !== -1} />
48+
</ListItemSecondaryAction>
49+
</ListItem>
50+
))}
51+
</List>
52+
);
53+
}
54+
55+
export default CheckboxListSecondary;

‎docs/src/pages/demos/lists/FolderList.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import Avatar from '@material-ui/core/Avatar';
8+
import ImageIcon from '@material-ui/icons/Image';
9+
import WorkIcon from '@material-ui/icons/Work';
10+
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
11+
12+
const styles = (theme: Theme) =>
13+
createStyles({
14+
root: {
15+
width: '100%',
16+
maxWidth: 360,
17+
backgroundColor: theme.palette.background.paper,
18+
},
19+
});
20+
21+
export interface FolderListProps extends WithStyles<typeof styles> {}
22+
23+
function FolderList(props: FolderListProps) {
24+
const { classes } = props;
25+
return (
26+
<List className={classes.root}>
27+
<ListItem>
28+
<Avatar>
29+
<ImageIcon />
30+
</Avatar>
31+
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
32+
</ListItem>
33+
<ListItem>
34+
<Avatar>
35+
<WorkIcon />
36+
</Avatar>
37+
<ListItemText primary="Work" secondary="Jan 7, 2014" />
38+
</ListItem>
39+
<ListItem>
40+
<Avatar>
41+
<BeachAccessIcon />
42+
</Avatar>
43+
<ListItemText primary="Vacation" secondary="July 20, 2014" />
44+
</ListItem>
45+
</List>
46+
);
47+
}
48+
49+
FolderList.propTypes = {
50+
classes: PropTypes.object.isRequired,
51+
} as any;
52+
53+
export default withStyles(styles)(FolderList);

‎docs/src/pages/demos/lists/InsetList.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemIcon from '@material-ui/core/ListItemIcon';
7+
import ListItemText from '@material-ui/core/ListItemText';
8+
import StarIcon from '@material-ui/icons/Star';
9+
10+
const styles = (theme: Theme) =>
11+
createStyles({
12+
root: {
13+
width: '100%',
14+
maxWidth: 360,
15+
backgroundColor: theme.palette.background.paper,
16+
},
17+
});
18+
19+
export interface InsetListProps extends WithStyles<typeof styles> {}
20+
21+
function InsetList(props: InsetListProps) {
22+
const { classes } = props;
23+
return (
24+
<List component="nav" className={classes.root}>
25+
<ListItem button>
26+
<ListItemIcon>
27+
<StarIcon />
28+
</ListItemIcon>
29+
<ListItemText inset primary="Chelsea Otakan" />
30+
</ListItem>
31+
<ListItem button>
32+
<ListItemText inset primary="Eric Hoffman" />
33+
</ListItem>
34+
</List>
35+
);
36+
}
37+
38+
InsetList.propTypes = {
39+
classes: PropTypes.object.isRequired,
40+
} as any;
41+
42+
export default withStyles(styles)(InsetList);

‎docs/src/pages/demos/lists/PinnedSubheaderList.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import ListSubheader from '@material-ui/core/ListSubheader';
8+
9+
const styles = (theme: Theme) =>
10+
createStyles({
11+
root: {
12+
width: '100%',
13+
maxWidth: 360,
14+
backgroundColor: theme.palette.background.paper,
15+
position: 'relative',
16+
overflow: 'auto',
17+
maxHeight: 300,
18+
},
19+
listSection: {
20+
backgroundColor: 'inherit',
21+
},
22+
ul: {
23+
backgroundColor: 'inherit',
24+
padding: 0,
25+
},
26+
});
27+
28+
export interface PinnedSubheaderListProps extends WithStyles<typeof styles> {}
29+
30+
function PinnedSubheaderList(props: PinnedSubheaderListProps) {
31+
const { classes } = props;
32+
33+
return (
34+
<List className={classes.root} subheader={<li />}>
35+
{[0, 1, 2, 3, 4].map(sectionId => (
36+
<li key={`section-${sectionId}`} className={classes.listSection}>
37+
<ul className={classes.ul}>
38+
<ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
39+
{[0, 1, 2].map(item => (
40+
<ListItem key={`item-${sectionId}-${item}`}>
41+
<ListItemText primary={`Item ${item}`} />
42+
</ListItem>
43+
))}
44+
</ul>
45+
</li>
46+
))}
47+
</List>
48+
);
49+
}
50+
51+
PinnedSubheaderList.propTypes = {
52+
classes: PropTypes.object.isRequired,
53+
} as any;
54+
55+
export default withStyles(styles)(PinnedSubheaderList);

0 commit comments

Comments
 (0)