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

* components/click-away-listener/ClickAway * components/container/FixedContainer * components/container/SimpleContainer * components/popover/MouseOverPopover * Typeless: components/popover/PopoverPopupState * Typeless: components/popper/PopperPopupState * components/popover/SimplePopover * components/popper/PositionedPopper * components/popper/NoTransitionPopper * components/popper/MinimalPopper * components/popper/FakedReferencePopper * Update FakedReferencePopper.tsx
mui · Jun 22, 2019 · 1052126 · 1052126
1 parent 6539a04
commit 1052126
Show file tree

Hide file tree

Showing 20 changed files with 585 additions and 251 deletions.
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.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 ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import { grey } from '@material-ui/core/colors';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     position: 'relative',
   },
@@ -25,53 +24,38 @@ const styles = theme => ({
       marginRight: theme.spacing(3),
     },
   },
-});
+}));
 
-class ClickAway extends React.Component {
-  state = {
-    open: false,
-  };
+export default function ClickAway() {
+  const [open, setOpen] = React.useState(false);
+  const classes = useStyles();
 
-  handleClick = () => {
-    this.setState(state => ({
-      open: !state.open,
-    }));
+  const handleClick = () => {
+    setOpen(prev => !prev);
   };
 
-  handleClickAway = () => {
-    this.setState({
-      open: false,
-    });
+  const handleClickAway = () => {
+    setOpen(false);
   };
 
-  render() {
-    const { classes } = this.props;
-    const { open } = this.state;
-    const fake = <div className={classes.fake} />;
-
-    return (
-      <div className={classes.root}>
-        <ClickAwayListener onClickAway={this.handleClickAway}>
-          <div>
-            <Button onClick={this.handleClick}>Open menu</Button>
-            {open ? (
-              <Paper className={classes.paper}>
-                {fake}
-                {fake}
-                {fake}
-                {fake}
-                {fake}
-              </Paper>
-            ) : null}
-          </div>
-        </ClickAwayListener>
-      </div>
-    );
-  }
+  const fake = <div className={classes.fake} />;
+
+  return (
+    <div className={classes.root}>
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <div>
+          <Button onClick={handleClick}>Open menu</Button>
+          {open ? (
+            <Paper className={classes.paper}>
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+            </Paper>
+          ) : null}
+        </div>
+      </ClickAwayListener>
+    </div>
+  );
 }
-
-ClickAway.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(ClickAway);
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import { grey } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      position: 'relative',
+    },
+    paper: {
+      position: 'absolute',
+      top: 36,
+      right: 0,
+      left: 0,
+    },
+    fake: {
+      backgroundColor: grey[200],
+      height: theme.spacing(1),
+      margin: theme.spacing(2),
+      // Selects every two elements among any group of siblings.
+      '&:nth-child(2n)': {
+        marginRight: theme.spacing(3),
+      },
+    },
+  }),
+);
+
+export default function ClickAway() {
+  const [open, setOpen] = React.useState(false);
+  const classes = useStyles();
+
+  const handleClick = () => {
+    setOpen(prev => !prev);
+  };
+
+  const handleClickAway = () => {
+    setOpen(false);
+  };
+
+  const fake = <div className={classes.fake} />;
+
+  return (
+    <div className={classes.root}>
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <div>
+          <Button onClick={handleClick}>Open menu</Button>
+          {open ? (
+            <Paper className={classes.paper}>
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+            </Paper>
+          ) : null}
+        </div>
+      </ClickAwayListener>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/container/FixedContainer.js b/docs/src/pages/components/container/FixedContainer.js
@@ -3,7 +3,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 
-function FixedContainer() {
+export default function FixedContainer() {
   return (
     <React.Fragment>
       <CssBaseline />
@@ -13,5 +13,3 @@ function FixedContainer() {
     </React.Fragment>
   );
 }
-
-export default FixedContainer;
diff --git a/docs/src/pages/components/container/FixedContainer.tsx b/docs/src/pages/components/container/FixedContainer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+
+export default function FixedContainer() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Container fixed>
+        <Typography component="div" style={{ backgroundColor: '#cfe8fc', height: '100vh' }} />
+      </Container>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/components/container/SimpleContainer.js b/docs/src/pages/components/container/SimpleContainer.js
@@ -3,7 +3,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 
-function SimpleContainer() {
+export default function SimpleContainer() {
   return (
     <React.Fragment>
       <CssBaseline />
@@ -13,5 +13,3 @@ function SimpleContainer() {
     </React.Fragment>
   );
 }
-
-export default SimpleContainer;
diff --git a/docs/src/pages/components/container/SimpleContainer.tsx b/docs/src/pages/components/container/SimpleContainer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+
+export default function SimpleContainer() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Container maxWidth="sm">
+        <Typography component="div" style={{ backgroundColor: '#cfe8fc', height: '100vh' }} />
+      </Container>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/components/popover/MouseOverPopover.js b/docs/src/pages/components/popover/MouseOverPopover.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function MouseOverPopover() {
+export default function MouseOverPopover() {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -60,5 +60,3 @@ function MouseOverPopover() {
     </div>
   );
 }
-
-export default MouseOverPopover;
diff --git a/docs/src/pages/components/popover/MouseOverPopover.tsx b/docs/src/pages/components/popover/MouseOverPopover.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    popover: {
+      pointerEvents: 'none',
+    },
+    paper: {
+      padding: theme.spacing(1),
+    },
+  }),
+);
+
+export default function MouseOverPopover() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+
+  function handlePopoverOpen(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handlePopoverClose() {
+    setAnchorEl(null);
+  }
+
+  const open = Boolean(anchorEl);
+
+  return (
+    <div>
+      <Typography
+        aria-owns={open ? 'mouse-over-popover' : undefined}
+        aria-haspopup="true"
+        onMouseEnter={handlePopoverOpen}
+        onMouseLeave={handlePopoverClose}
+      >
+        Hover with a Popover.
+      </Typography>
+      <Popover
+        id="mouse-over-popover"
+        className={classes.popover}
+        classes={{
+          paper: classes.paper,
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+      >
+        <Typography>I use Popover.</Typography>
+      </Popover>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js
@@ -1,19 +1,18 @@
 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 Button from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   typography: {
     margin: theme.spacing(2),
   },
-});
+}));
 
-function PopoverPopupState(props) {
-  const { classes } = props;
+export default function PopoverPopupState() {
+  const classes = useStyles();
 
   return (
     <PopupState variant="popover" popupId="demo-popup-popover">
@@ -40,9 +39,3 @@ function PopoverPopupState(props) {
     </PopupState>
   );
 }
-
-PopoverPopupState.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(PopoverPopupState);
diff --git a/docs/src/pages/components/popover/SimplePopover.js b/docs/src/pages/components/popover/SimplePopover.js
@@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SimplePopover() {
+export default function SimplePopover() {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -23,7 +23,7 @@ function SimplePopover() {
   }
 
   const open = Boolean(anchorEl);
-  const id = open ? 'simple-popover' : null;
+  const id = open ? 'simple-popover' : undefined;
 
   return (
     <div>
@@ -49,5 +49,3 @@ function SimplePopover() {
     </div>
   );
 }
-
-export default SimplePopover;