popover: adjust default collisions to take button width into account (#…

…460)
reach · Feb 7, 2020 · 769e47c · 769e47c
1 parent ac17a53
commit 769e47c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 54 deletions.
diff --git a/packages/menu-button/examples/long-text.example.js b/packages/menu-button/examples/long-text.example.js
@@ -5,7 +5,7 @@ import {
   MenuList,
   MenuLink,
   MenuButton,
-  MenuItem
+  MenuItem,
 } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
 
@@ -14,45 +14,39 @@ let name = "Long Text";
 function Example() {
   return (
     <>
-      <Menu>
-        <MenuButton>
-          Developers Developers Developers Developers <span aria-hidden>▾</span>
-        </MenuButton>
-        <MenuList>
-          <MenuItem onSelect={action("Download")}>Download</MenuItem>
-          <MenuItem onSelect={action("Copy")}>Create a Copy</MenuItem>
-          <MenuItem onSelect={action("Mark as Draft")}>Mark as Draft</MenuItem>
-          <MenuItem onSelect={action("Delete")}>Delete</MenuItem>
-          <MenuLink href="https://reacttraining.com/workshops/">
-            Attend a Workshop Attend a Workshop Attend a Workshop Attend a
-            Workshop Attend a Workshop
-          </MenuLink>
-        </MenuList>
-      </Menu>
       <div style={{ display: "flex", justifyContent: "flex-end" }}>
-        <Menu>
-          <MenuButton>
-            Developers Developers Developers Developers{" "}
-            <span aria-hidden>▾</span>
-          </MenuButton>
-          <MenuList>
-            <MenuItem onSelect={action("Download")}>Download</MenuItem>
-            <MenuItem onSelect={action("Copy")}>Create a Copy</MenuItem>
-            <MenuItem onSelect={action("Mark as Draft")}>
-              Mark as Draft
-            </MenuItem>
-            <MenuItem onSelect={action("Delete")}>Delete</MenuItem>
-            <MenuLink href="https://reacttraining.com/workshops/">
-              Attend a Workshop Attend a Workshop Attend a Workshop Attend a
-              Workshop Attend a Workshop
-            </MenuLink>
-          </MenuList>
-        </Menu>
+        <MyMenu />
+      </div>
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <MyMenu />
+      </div>
+      <div>
+        <MyMenu />
       </div>
     </>
   );
 }
 
+function MyMenu() {
+  return (
+    <Menu>
+      <MenuButton>
+        Developers Developers Developers Developers <span aria-hidden>▾</span>
+      </MenuButton>
+      <MenuList>
+        <MenuItem onSelect={action("Download")}>Download</MenuItem>
+        <MenuItem onSelect={action("Copy")}>Create a Copy</MenuItem>
+        <MenuItem onSelect={action("Mark as Draft")}>Mark as Draft</MenuItem>
+        <MenuItem onSelect={action("Delete")}>Delete</MenuItem>
+        <MenuLink href="https://reacttraining.com/workshops/">
+          Attend a Workshop Attend a Workshop Attend a Workshop Attend a
+          Workshop Attend a Workshop
+        </MenuLink>
+      </MenuList>
+    </Menu>
+  );
+}
+
 Example.story = { name };
 export const Comp = Example;
 export default { title: "MenuButton" };
diff --git a/packages/popover/src/index.tsx b/packages/popover/src/index.tsx
@@ -123,25 +123,6 @@ export const positionMatchWidth: Position = (targetRect, popoverRect) => {
   };
 };
 
-// Finish this another time
-// export function positionHorizontalCenter(targetRect, popoverRect) {
-//   const targetCenter = targetRect.width / 2 + targetRect.left;
-//   const popoverHalf = popoverRect.width / 2;
-
-//   const collisions = {
-//     right: window.innerWidth < targetCenter - popoverHalf,
-//     left: targetCenter - popoverHalf < 0
-//     // top:
-//     // bottom:
-//   };
-
-//   return {
-//     left: collisions.right
-//       ? `${targetRect.right - popoverRect.width + window.pageXOffset}px`
-//       : collisions.left ? `` : ``
-//   };
-// }
-
 function getCollisions(
   targetRect: PRect,
   popoverRect: PRect,
@@ -154,7 +135,7 @@ function getCollisions(
     bottom:
       window.innerHeight <
       targetRect.bottom + popoverRect.height - offsetBottom,
-    left: targetRect.left - popoverRect.width < 0,
+    left: targetRect.left + targetRect.width - popoverRect.width < 0,
   };
 
   const directionRight = collisions.right && !collisions.left;