[docs] Migrate batch of demos to hooks/typescript (#16003)

* [docs] Migrate components/typography/TypographyTheme * [docs] Migrate components/transitions * [docs] Migrate components/links * Migrate some demos in customization/components * use immediate export * Move Polygon out of function * use immediate exports
mui · Jun 3, 2019 · ecb0897 · ecb0897
1 parent dc68f1a
commit ecb0897
Show file tree

Hide file tree

Showing 22 changed files with 667 additions and 264 deletions.
diff --git a/docs/src/pages/components/app-bar/BottomAppBar.js b/docs/src/pages/components/app-bar/BottomAppBar.js
@@ -97,7 +97,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function BottomAppBar() {
+export default function BottomAppBar() {
   const classes = useStyles();
 
   return (
@@ -142,5 +142,3 @@ function BottomAppBar() {
     </React.Fragment>
   );
 }
-
-export default BottomAppBar;
diff --git a/docs/src/pages/components/app-bar/BottomAppBar.tsx b/docs/src/pages/components/app-bar/BottomAppBar.tsx
@@ -99,7 +99,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-function BottomAppBar() {
+export default function BottomAppBar() {
   const classes = useStyles();
 
   return (
@@ -144,5 +144,3 @@ function BottomAppBar() {
     </React.Fragment>
   );
 }
-
-export default BottomAppBar;
diff --git a/docs/src/pages/components/links/ButtonLink.tsx b/docs/src/pages/components/links/ButtonLink.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import Link from '@material-ui/core/Link';
+
+export default function ButtonLink() {
+  return (
+    <Link
+      component="button"
+      variant="body2"
+      onClick={() => {
+        alert("I'm a button.");
+      }}
+    >
+      Button Link
+    </Link>
+  );
+}
diff --git a/docs/src/pages/components/links/Links.js b/docs/src/pages/components/links/Links.js
@@ -1,21 +1,20 @@
 /* eslint-disable no-script-url */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   link: {
     margin: theme.spacing(1),
   },
-});
+}));
 
 // This resolves to nothing and doesn't affect browser history
 const dudUrl = 'javascript:;';
 
-function Links(props) {
-  const { classes } = props;
+export default function Links() {
+  const classes = useStyles();
 
   return (
     <Typography>
@@ -31,9 +30,3 @@ function Links(props) {
     </Typography>
   );
 }
-
-Links.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(Links);
diff --git a/docs/src/pages/components/links/Links.tsx b/docs/src/pages/components/links/Links.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable no-script-url */
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      margin: theme.spacing(1),
+    },
+  }),
+);
+
+// This resolves to nothing and doesn't affect browser history
+const dudUrl = 'javascript:;';
+
+export default function Links() {
+  const classes = useStyles();
+
+  return (
+    <Typography>
+      <Link href={dudUrl} className={classes.link}>
+        Link
+      </Link>
+      <Link href={dudUrl} color="inherit" className={classes.link}>
+        {'color="inherit"'}
+      </Link>
+      <Link href={dudUrl} variant="body2" className={classes.link}>
+        {'variant="body2"'}
+      </Link>
+    </Typography>
+  );
+}
diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Collapse from '@material-ui/core/Collapse';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -25,50 +24,38 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleCollapse extends React.Component {
-  state = {
-    checked: false,
-  };
+export default function SimpleCollapse() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={this.handleChange} />}
-          label="Show"
-        />
-        <div className={classes.container}>
-          <Collapse in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Collapse>
-          <Collapse in={checked} collapsedHeight="40px">
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Collapse>
-        </div>
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Collapse in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
+        <Collapse in={checked} collapsedHeight="40px">
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-SimpleCollapse.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleCollapse);
diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Collapse from '@material-ui/core/Collapse';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: 180,
+    },
+    container: {
+      display: 'flex',
+    },
+    paper: {
+      margin: theme.spacing(1),
+    },
+    svg: {
+      width: 100,
+      height: 100,
+    },
+    polygon: {
+      fill: theme.palette.common.white,
+      stroke: theme.palette.divider,
+      strokeWidth: 1,
+    },
+  }),
+);
+
+export default function SimpleCollapse() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Collapse in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
+        <Collapse in={checked} collapsedHeight="40px">
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Fade from '@material-ui/core/Fade';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -25,43 +24,31 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleFade extends React.Component {
-  state = {
-    checked: false,
-  };
+export default function SimpleFade() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={this.handleChange} />}
-          label="Show"
-        />
-        <div className={classes.container}>
-          <Fade in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Fade>
-        </div>
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Fade in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Fade>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-SimpleFade.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleFade);