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/Menu.tsx            | 22 +++++----
 FrontEnd/src/views/common/menu/PopupMenu.css       |  3 ++
 FrontEnd/src/views/common/menu/PopupMenu.tsx       | 56 ++++++++++++++++++++--
 .../timeline-common/TimelinePageCardTemplate.tsx   |  3 +-
 .../src/views/timeline-common/TimelinePostEdit.tsx |  2 +-
 5 files changed, 71 insertions(+), 15 deletions(-)
 create mode 100644 FrontEnd/src/views/common/menu/PopupMenu.css

(limited to 'FrontEnd/src/views')

diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index 7523247d..04243fa3 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next";
 import { convertI18nText, I18nText } from "@/common";
 import { PaletteColorType } from "@/palette";
 
+import "./Menu.css";
+
 export type MenuItem =
   | {
       type: "divider";
@@ -19,17 +21,23 @@ export type MenuItem =
 
 export type MenuItems = MenuItem[];
 
-export interface MenuProps {
+export type MenuProps = {
   items: MenuItems;
-  className?: string;
   onItemClicked?: () => void;
-}
+  className?: string;
+  style?: React.CSSProperties;
+};
 
-const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
+export default function _Menu({
+  items,
+  onItemClicked,
+  className,
+  style,
+}: MenuProps): React.ReactElement | null {
   const { t } = useTranslation();
 
   return (
-    <div className={classnames("cru-menu", className)}>
+    <div className={classnames("cru-menu", className)} style={style}>
       {items.map((item, index) => {
         if (item.type === "divider") {
           return <div key={index} className="cru-menu-divider" />;
@@ -61,6 +69,4 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
       })}
     </div>
   );
-};
-
-export default Menu;
+}
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
new file mode 100644
index 00000000..8465a1bb
--- /dev/null
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -0,0 +1,3 @@
+.cru-popup-menu-menu-container {
+
+}
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;
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 78af1131..75f2d400 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -17,7 +17,8 @@ import CollapseButton from "./CollapseButton";
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
 import ConnectionStatusBadge from "./ConnectionStatusBadge";
-import { MenuItems, PopupMenu } from "../common/menu/Menu";
+import { MenuItems } from "../common/menu/Menu";
+import PopupMenu from "../common/menu/PopupMenu";
 import FullPageDialog from "../common/dailog/FullPageDialog";
 import Card from "../common/Card";
 
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index 1e6591c0..e2045429 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -16,7 +16,7 @@ import { base64 } from "@/http/common";
 
 import BlobImage from "../common/BlobImage";
 import LoadingButton from "../common/button/LoadingButton";
-import { PopupMenu } from "../common/menu/Menu";
+import PopupMenu from "../common/menu/PopupMenu";
 import Card from "../common/Card";
 import MarkdownPostEdit from "./MarkdownPostEdit";
 import TimelineLine from "./TimelineLine";
-- 
cgit v1.2.3