let's merge

mui · Jul 21, 2018 · 2a74fcd · 2a74fcd
1 parent 67b1736
commit 2a74fcd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/docs/src/pages/utils/popper/FakedReferencePopper.js b/docs/src/pages/utils/popper/FakedReferencePopper.js
@@ -27,33 +27,33 @@ class FakedReferencePopper extends React.Component {
       return;
     }
 
-    const boundingClientRect = selection.getRangeAt(0).getBoundingClientRect();
+    const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect();
 
-    const virtualAnchorEl = {
-      clientWidth: boundingClientRect.width,
-      clientHeight: boundingClientRect.height,
-      getBoundingClientRect: () => boundingClientRect,
-    };
-
-    this.setState(state => ({
-      anchorEl: virtualAnchorEl,
-      open: !state.open,
-    }));
+    this.setState({
+      open: true,
+      anchorEl: {
+        clientWidth: getBoundingClientRect().width,
+        clientHeight: getBoundingClientRect().height,
+        getBoundingClientRect,
+      },
+    });
   };
 
   handleClose = () => {
+    if (!this.state.open) {
+      return;
+    }
+
     this.setState({ open: false });
   };
 
   render() {
     const { classes } = this.props;
     const { anchorEl, open } = this.state;
-    const id = open ? 'simple-popper' : null;
 
     return (
       <div onMouseLeave={this.handleClose}>
-        <Typography variant="caption">Highlight part of the text to see the popper</Typography>
-        <Typography variant="body1" onMouseUp={this.handleMouseUp}>
+        <Typography onMouseUp={this.handleMouseUp}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
           amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
           finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
@@ -62,7 +62,7 @@ class FakedReferencePopper extends React.Component {
           facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
           lacinia tellus a libero volutpat maximus.
         </Typography>
-        <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        <Popper open={open} anchorEl={anchorEl} transition placement="bottom-start">
           {({ TransitionProps }) => (
             <Fade {...TransitionProps} timeout={350}>
               <Paper>

diff --git a/docs/src/pages/utils/popper/popper.md b/docs/src/pages/utils/popper/popper.md
@@ -10,10 +10,11 @@ components: Popper
 Things to know when using the `Popper` component:
 
 - Poppers rely on the 3rd party library [Popper.js](https://github.com/FezVrasta/popper.js) for positioning.
-- The children is [`Portal`](/utils/portal) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
+- The children is [`Portal`](/utils/portal) to the body of the document to avoid rendering problems.
+You can disable this behavior with `disablePortal`.
 - The scroll and click away aren't blocked like with the [`Popover`](/utils/popover) component.
-  The placement of the popper updates with the available area in the viewport.
-- The `anchorEl` is passed as the reference object to create a new `Popper` instance. It can be faked by creating an object shaped like the [`ReferenceObject`](https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118).
+The placement of the popper updates with the available area in the viewport.
+- The `anchorEl` is passed as the reference object to create a new `Popper.js` instance.
 
 ## Simple Popper
 
@@ -33,4 +34,9 @@ Things to know when using the `Popper` component:
 
 ## Faked reference object
 
+The `anchorEl` property can be a reference to a fake DOM element.
+You just need to create an object shaped like the [`ReferenceObject`](https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118-L123).
+
+Highlight part of the text to see the popper:
+
 {{"demo": "pages/utils/popper/FakedReferencePopper.js"}}