[docs] Migrate Grid demos to hooks (#15970)

* [docs] Migrate Grid demos to hooks * [docs] Fix complaints * [docs] number to string * Update docs/src/pages/components/grid/SpacingGrid.tsx Co-Authored-By: Olivier Tassinari <[email protected]> * docs:typescript:formatted * Fix name
mui · Jun 2, 2019 · 1aa38f2 · 1aa38f2
1 parent 64e0b6d
commit 1aa38f2
Show file tree

Hide file tree

Showing 18 changed files with 864 additions and 292 deletions.
diff --git a/docs/src/pages/components/grid/AutoGrid.js b/docs/src/pages/components/grid/AutoGrid.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -13,10 +12,10 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-});
+}));
 
-function AutoGrid(props) {
-  const { classes } = props;
+function AutoGrid() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -46,8 +45,4 @@ function AutoGrid(props) {
   );
 }
 
-AutoGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(AutoGrid);
+export default AutoGrid;
diff --git a/docs/src/pages/components/grid/AutoGrid.tsx b/docs/src/pages/components/grid/AutoGrid.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+    },
+  }),
+);
+
+function AutoGrid() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+      </Grid>
+      <Grid container spacing={3}>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default AutoGrid;
diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.js b/docs/src/pages/components/grid/AutoGridNoWrap.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
     overflow: 'hidden',
@@ -17,13 +16,13 @@ const styles = theme => ({
     margin: `${theme.spacing(1)}px auto`,
     padding: theme.spacing(2),
   },
-});
+}));
 
 const message = `Truncation should be conditionally applicable on this long line of text
  as this is a much longer line than what the container can support. `;
 
-function AutoGridNoWrap(props) {
-  const { classes } = props;
+function AutoGridNoWrap() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -61,8 +60,4 @@ function AutoGridNoWrap(props) {
   );
 }
 
-AutoGridNoWrap.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(AutoGridNoWrap);
+export default AutoGridNoWrap;
diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.tsx b/docs/src/pages/components/grid/AutoGridNoWrap.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      overflow: 'hidden',
+      padding: theme.spacing(0, 3),
+    },
+    paper: {
+      maxWidth: 400,
+      margin: `${theme.spacing(1)}px auto`,
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+function AutoGridNoWrap() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid item>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid item xs zeroMinWidth>
+            <Typography noWrap>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+      <Paper className={classes.paper}>
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid item>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid item xs>
+            <Typography noWrap>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+      <Paper className={classes.paper}>
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid item>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid item xs>
+            <Typography>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}
+
+export default AutoGridNoWrap;
diff --git a/docs/src/pages/components/grid/CSSGrid.js b/docs/src/pages/components/grid/CSSGrid.js
@@ -1,16 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   container: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, 1fr)',
-    gridGap: `${theme.spacing(3)}px`,
+    gridGap: theme.spacing(3),
   },
   paper: {
     padding: theme.spacing(1),
@@ -22,10 +21,10 @@ const styles = theme => ({
   divider: {
     margin: theme.spacing(2, 0),
   },
-});
+}));
 
-function CSSGrid(props) {
-  const { classes } = props;
+function CSSGrid() {
+  const classes = useStyles();
 
   return (
     <div>
@@ -80,8 +79,4 @@ function CSSGrid(props) {
   );
 }
 
-CSSGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CSSGrid);
+export default CSSGrid;
diff --git a/docs/src/pages/components/grid/CSSGrid.tsx b/docs/src/pages/components/grid/CSSGrid.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(12, 1fr)',
+      gridGap: theme.spacing(3),
+    },
+    paper: {
+      padding: theme.spacing(1),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+      whiteSpace: 'nowrap',
+      marginBottom: theme.spacing(1),
+    },
+    divider: {
+      margin: theme.spacing(2, 0),
+    },
+  }),
+);
+
+function CSSGrid() {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Typography variant="subtitle1" gutterBottom>
+        Material-UI Grid:
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={8}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </Grid>
+      </Grid>
+      <Divider className={classes.divider} />
+      <Typography variant="subtitle1" gutterBottom>
+        CSS Grid Layout:
+      </Typography>
+      <div className={classes.container}>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 8' }}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 4' }}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CSSGrid;
diff --git a/docs/src/pages/components/grid/CenteredGrid.js b/docs/src/pages/components/grid/CenteredGrid.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -13,10 +12,10 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-});
+}));
 
-function CenteredGrid(props) {
-  const { classes } = props;
+function CenteredGrid() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -47,8 +46,4 @@ function CenteredGrid(props) {
   );
 }
 
-CenteredGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CenteredGrid);
+export default CenteredGrid;