From 6b5d88a6a1a3fe12721f3159a6837d3f41d69022 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 00:15:20 +0800
Subject: ...

---
 FrontEnd/src/views/common/menu/PopupMenu.tsx | 56 +++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 5 deletions(-)

(limited to 'FrontEnd/src/views/common/menu/PopupMenu.tsx')

diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 0d447f09..50f80a91 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -1,17 +1,63 @@
+import classNames from "classnames";
 import React from "react";
+import { usePopper } from "react-popper";
 
 import Menu, { MenuItems } from "./Menu";
 
+import "./PopupMenu.css";
+
 export interface PopupMenuProps {
   items: MenuItems;
-  children: React.ReactElement;
+  children?: React.ReactNode;
+  containerClassName?: string;
+  containerStyle?: React.CSSProperties;
 }
 
-export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
+const PopupMenu: React.FC<PopupMenuProps> = ({
+  items,
+  children,
+  containerClassName,
+  containerStyle,
+}) => {
   const [show, setShow] = React.useState<boolean>(false);
-  const toggle = (): void => setShow(!show);
 
-  // TODO:
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [arrowElement, setArrowElement] = React.useState<HTMLDivElement | null>(
+    null
+  );
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+  });
 
-  return <Menu items={items} onItemClicked={() => setShow(false)} />;
+  return (
+    <>
+      <div
+        ref={setReferenceElement}
+        className={classNames(
+          "cru-popup-menu-trigger-container",
+          containerClassName
+        )}
+        style={containerStyle}
+        onClick={() => setShow(true)}
+      >
+        {children}
+      </div>
+      {show ? (
+        <div
+          ref={setPopperElement}
+          className="cru-popup-menu-menu-container"
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <Menu items={items} />
+          <div ref={setArrowElement} style={styles.arrow} />
+        </div>
+      ) : null}
+    </>
+  );
 };
+
+export default PopupMenu;
-- 
cgit v1.2.3