Room UI Redesign: Popover

package.json

@@ -53,6 +53,7 @@
     "@fortawesome/react-fontawesome": "^0.1.0",
     "@mozillareality/easing-functions": "^0.1.1",
     "@mozillareality/three-batch-manager": "github:mozillareality/three-batch-manager#master",
+    "@popperjs/core": "^2.4.4",
     "aframe": "github:mozillareality/aframe#hubs/master",
     "aframe-rounded": "^1.0.3",
     "aframe-slice9-component": "^1.0.0",
@@ -101,8 +102,10 @@
     "react-infinite-scroller": "^1.2.2",
     "react-intl": "^2.4.0",
     "react-linkify": "^0.2.2",
+    "react-popper-2": "npm:react-popper@^2.2.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-use-css-breakpoints": "^1.0.3",
     "screenfull": "^4.0.1",
     "semver": "^7.3.2",
     "three": "github:mozillareality/three.js#hubs/master",

src/react-components/popover/Popover.js

@@ -0,0 +1,116 @@
+import React, { useState, useCallback, useEffect } from "react";
+// Note react-popper-2 is just an alias to [email protected] because storybook is depending on an old version.
+// https://github.com/storybookjs/storybook/issues/10982
+import { usePopper } from "react-popper-2";
+import styles from "./Popover.scss";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import { useCssBreakpoints } from "react-use-css-breakpoints";
+import classNames from "classnames";
+import { ReactComponent as CloseIcon } from "../icons/Close.svg";
+import { ReactComponent as PopoverArrow } from "./PopoverArrow.svg";
+
+export function Popover({ content: Content, children, title, placement, initiallyVisible }) {
+  const [visible, setVisible] = useState(initiallyVisible);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const {
+    styles: { popper: popperStyles, arrow: arrowStyles },
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }, { name: "offset", options: { offset: [0, 16] } }]
+  });
+  const breakpoint = useCssBreakpoints();
+  const fullscreen = breakpoint === "sm";
+  const closePopover = useCallback(() => setVisible(false), [setVisible]);
+  const togglePopover = useCallback(() => setVisible(visible => !visible), [setVisible]);
+
+  useEffect(
+    () => {
+      const onClick = e => {
+        if (
+          (referenceElement && referenceElement.contains(e.target)) ||
+          (popperElement && popperElement.contains(e.target))
+        ) {
+          return;
+        }
+
+        setVisible(false);
+      };
+
+      if (visible) {
+        window.addEventListener("click", onClick);
+      }
+
+      return () => {
+        window.removeEventListener("click", onClick);
+      };
+    },
+    [visible, popperElement, referenceElement]
+  );
+
+  useEffect(
+    () => {
+      if (visible && fullscreen) {
+        document.body.classList.add(styles.fullscreenBody);
+      } else {
+        document.body.classList.remove(styles.fullscreenBody);
+      }
+
+      return () => {
+        document.body.classList.remove(styles.fullscreenBody);
+      };
+    },
+    [fullscreen, visible]
+  );
+
+  return (
+    <>
+      {children({
+        togglePopover,
+        popoverVisible: visible,
+        triggerRef: setReferenceElement
+      })}
+      {visible &&
+        createPortal(
+          <div
+            ref={setPopperElement}
+            className={classNames(styles.popover, { [styles.fullscreen]: fullscreen })}
+            style={fullscreen ? undefined : popperStyles}
+            {...attributes.popper}
+          >
+            <div className={styles.header}>
+              <button onClick={closePopover}>
+                <CloseIcon />
+              </button>
+              <h5>{title}</h5>
+            </div>
+            <div className={styles.content}>
+              {typeof Content === "function" ? <Content closePopover={closePopover} /> : Content}
+            </div>
+            {!fullscreen && (
+              <div ref={setArrowElement} className={styles.arrow} style={arrowStyles}>
+                <PopoverArrow />
+              </div>
+            )}
+          </div>,
+          document.body
+        )}
+    </>
+  );
+}
+
+Popover.propTypes = {
+  initiallyVisible: PropTypes.bool,
+  placement: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  children: PropTypes.func.isRequired,
+  content: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+};
+
+Popover.defaultProps = {
+  initiallyVisible: false,
+  placement: "auto"
+};

src/react-components/popover/Popover.scss

@@ -0,0 +1,91 @@
+@use "../styles/theme";
+
+:local(.popover) {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  background-color: theme.$white;
+  border: 1px solid theme.$lightgrey;
+  min-width: 160px;
+
+  &[data-popper-placement^=bottom] :local(.arrow) {
+    margin-top: -9px;
+
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-popper-placement^=top] :local(.arrow) {
+    bottom: -9px;
+  }
+
+  &[data-popper-placement^=right] :local(.arrow) {
+    left: -16px;
+
+    svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-popper-placement^=left] :local(.arrow) {
+    right: -16px;
+
+    svg {
+      transform: rotate(270deg);
+    }
+  }
+}
+
+:local(.header) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  height: 48px;
+  position: relative;
+
+  h5 {
+    display: flex
+  }
+
+  button {
+    position: absolute;
+    left: 8px;
+    border: none;
+    background-color: transparent;
+
+    &:hover * {
+      stroke: theme.$black-hover;
+    }
+
+    &:active * {
+      stroke: theme.$black-pressed;
+    }
+  }
+}
+
+:local(.arrow) {
+  position: absolute;
+}
+
+:local(.fullscreen) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 0;
+
+  :local(.header) {
+    border-bottom: 1px solid theme.$lightgrey;
+  }
+
+  :local(.content) {
+    overflow-y: auto;
+  }
+}
+
+:local(.fullscreen-body) {
+  overflow: hidden;
+}