Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Migrate more demos to hooks #15494

Merged
merged 21 commits into from Apr 29, 2019
Merged

[docs] Migrate more demos to hooks #15494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
41195fd
[docs] Migrate ExpansionPanel demos to hooks
merceyz Apr 25, 2019
222f94e
[docs] Migrate GridList demos to hooks
merceyz Apr 25, 2019
2684bcc
[docs] Migrate Progress demos to hooks
merceyz Apr 25, 2019
e82ca2f
[docs] Migrate Breadcrumbs demos to hooks
merceyz Apr 25, 2019
1f93429
[docs] Migrate Chips demos to hooks
merceyz Apr 25, 2019
ccb2e9d
[docs] Remove unused import in LinearQuery
merceyz Apr 25, 2019
226cdbf
Apply suggestions from code review
joshwooding Apr 25, 2019
3fb0bdc
Fix suggested change
merceyz Apr 25, 2019
d7a6749
Correctly flip open
merceyz Apr 25, 2019
ec6bbda
[docs] Migrate LongTextSnackbar to hooks
merceyz Apr 25, 2019
57c07b5
[docs] Migrate ConsecutiveSnackbars to hooks
merceyz Apr 25, 2019
90b5a42
[docs] Migrate ImgMediaCard to hooks
merceyz Apr 26, 2019
e25bfd9
[docs] Fix unused var in ConsecutiveSnackbars
merceyz Apr 26, 2019
f2127ba
[docs] Migrate MediaCard to hooks
merceyz Apr 26, 2019
049dcf1
[docs] Migrate MediaControlCard to hooks
merceyz Apr 26, 2019
9c3db1b
[docs] Migrate SimpleCard to hooks
merceyz Apr 26, 2019
69e8cf8
[docs] Migrate MaxWidthDialog to hooks
merceyz Apr 26, 2019
e995310
[docs] Migrate CustomizedDialog to hooks
merceyz Apr 26, 2019
854c734
[docs] Fix CustomizedDialog
merceyz Apr 27, 2019
349705b
[docs] Use PropTypes.node in CustomizedDialog
merceyz Apr 27, 2019
6d021d3
Adapted to feedback
merceyz Apr 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 7 additions & 11 deletions docs/src/pages/demos/cards/ImgMediaCard.js
View file
Open in desktop
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
Expand All @@ -9,14 +8,15 @@ import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = {
const useStyles = makeStyles({
card: {
maxWidth: 345,
},
};
});

function ImgMediaCard() {
const classes = useStyles();

function ImgMediaCard(props) {
const { classes } = props;
return (
<Card className={classes.card}>
<CardActionArea>
Expand Down Expand Up @@ -49,8 +49,4 @@ function ImgMediaCard(props) {
);
}

ImgMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ImgMediaCard);
export default ImgMediaCard;
26 changes: 11 additions & 15 deletions docs/src/pages/demos/cards/ImgMediaCard.tsx
View file
Open in desktop
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
Expand All @@ -9,16 +8,17 @@ import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = createStyles({
card: {
maxWidth: 345,
},
});
const useStyles = makeStyles(
createStyles({
card: {
maxWidth: 345,
},
}),
);

export interface Props extends WithStyles<typeof styles> {}
function ImgMediaCard() {
const classes = useStyles();

function ImgMediaCard(props: Props) {
const { classes } = props;
return (
<Card className={classes.card}>
<CardActionArea>
Expand Down Expand Up @@ -51,8 +51,4 @@ function ImgMediaCard(props: Props) {
);
}

ImgMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(ImgMediaCard);
export default ImgMediaCard;
18 changes: 7 additions & 11 deletions docs/src/pages/demos/cards/MediaCard.js
View file
Open in desktop
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
Expand All @@ -9,17 +8,18 @@ import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = {
const useStyles = makeStyles({
card: {
maxWidth: 345,
},
media: {
height: 140,
},
};
});

function MediaCard() {
const classes = useStyles();

function MediaCard(props) {
const { classes } = props;
return (
<Card className={classes.card}>
<CardActionArea>
Expand Down Expand Up @@ -50,8 +50,4 @@ function MediaCard(props) {
);
}

MediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MediaCard);
export default MediaCard;
32 changes: 14 additions & 18 deletions docs/src/pages/demos/cards/MediaCard.tsx
View file
Open in desktop
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
Expand All @@ -9,19 +8,20 @@ import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = createStyles({
card: {
maxWidth: 345,
},
media: {
height: 140,
},
});
const useStyles = makeStyles(
createStyles({
card: {
maxWidth: 345,
},
media: {
height: 140,
},
}),
);

export interface Props extends WithStyles<typeof styles> {}
function MediaCard() {
const classes = useStyles();

function MediaCard(props: Props) {
const { classes } = props;
return (
<Card className={classes.card}>
<CardActionArea>
Expand Down Expand Up @@ -52,8 +52,4 @@ function MediaCard(props: Props) {
);
}

MediaCard.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(MediaCard);
export default MediaCard;
19 changes: 7 additions & 12 deletions docs/src/pages/demos/cards/MediaControlCard.js
View file
Open in desktop
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
Expand All @@ -10,7 +9,7 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';

const styles = theme => ({
const useStyles = makeStyles(theme => ({
card: {
display: 'flex',
},
Expand All @@ -34,10 +33,11 @@ const styles = theme => ({
height: 38,
width: 38,
},
});
}));

function MediaControlCard(props) {
const { classes, theme } = props;
function MediaControlCard() {
const classes = useStyles();
const theme = useTheme();

return (
<Card className={classes.card}>
Expand Down Expand Up @@ -71,9 +71,4 @@ function MediaControlCard(props) {
);
}

MediaControlCard.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(MediaControlCard);
export default MediaControlCard;
22 changes: 8 additions & 14 deletions docs/src/pages/demos/cards/MediaControlCard.tsx
View file
Open in desktop
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, Theme, createStyles, WithStyles, WithTheme } from '@material-ui/core/styles';
import { Theme, createStyles, makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
Expand All @@ -10,7 +9,7 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';

const styles = (theme: Theme) =>
const useStyles = makeStyles((theme: Theme) =>
createStyles({
card: {
display: 'flex',
Expand All @@ -35,12 +34,12 @@ const styles = (theme: Theme) =>
height: 38,
width: 38,
},
});
}),
);

type Props = WithStyles<typeof styles> & WithTheme;

function MediaControlCard(props: Props) {
const { classes, theme } = props;
function MediaControlCard() {
const classes = useStyles();
const theme = useTheme<Theme>();

return (
<Card className={classes.card}>
Expand Down Expand Up @@ -74,9 +73,4 @@ function MediaControlCard(props: Props) {
);
}

MediaControlCard.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
} as any;

export default withStyles(styles, { withTheme: true })(MediaControlCard);
export default MediaControlCard;
17 changes: 6 additions & 11 deletions docs/src/pages/demos/cards/SimpleCard.js
View file
Open in desktop
@@ -1,13 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = {
const useStyles = makeStyles({
card: {
minWidth: 275,
},
Expand All @@ -22,10 +21,10 @@ const styles = {
pos: {
marginBottom: 12,
},
};
});

function SimpleCard(props) {
const { classes } = props;
function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;

return (
Expand Down Expand Up @@ -57,8 +56,4 @@ function SimpleCard(props) {
);
}

SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleCard);
export default SimpleCard;
49 changes: 22 additions & 27 deletions docs/src/pages/demos/cards/SimpleCard.tsx
View file
Open in desktop
@@ -1,33 +1,32 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = createStyles({
card: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
});
const useStyles = makeStyles(
createStyles({
card: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
}),
);

export interface Props extends WithStyles<typeof styles> {}

function SimpleCard(props: Props) {
const { classes } = props;
function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;

return (
Expand Down Expand Up @@ -59,8 +58,4 @@ function SimpleCard(props: Props) {
);
}

SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(SimpleCard);
export default SimpleCard;