From f39f7ab4cd8e5839e52df2c64402320c9387cc6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Wed, 17 Aug 2022 20:29:00 +0300
Subject: [PATCH 1/2] Dropdown has been modified - Button converted to Link
---
src/components/ContextMenu.tsx | 115 +++++++++++++++++++++++++++
src/components/ContextMenuAction.tsx | 34 ++++++++
2 files changed, 149 insertions(+)
create mode 100644 src/components/ContextMenu.tsx
create mode 100644 src/components/ContextMenuAction.tsx
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
new file mode 100644
index 0000000..0073083
--- /dev/null
+++ b/src/components/ContextMenu.tsx
@@ -0,0 +1,115 @@
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { PropsPartion } from "./ContextMenuItem";
+import classNames from "classnames";
+import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
+type ChildType = React.ReactElement<any & PropsPartion[]>;
+type ChildrenType = ChildType[] | ChildType;
+
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+
+type MenuProps = {
+ emphasis?: "high" | "low";
+ disabled?: boolean;
+ className?: string | undefined;
+ button: React.ReactNode;
+ children: ChildrenType;
+};
+/* -------------------------------------------------------------------------- */
+/* Styles */
+/* -------------------------------------------------------------------------- */
+
+const MenuButtonStyle = `
+inline-flex
+justify-center w-full
+cursor-default
+rounded
+border border-gray-100
+outline-8
+py-2
+px-2
+text-base`;
+
+const MenuItemStyle = `
+absolute
+left-0
+mt-2 w-60
+origin-top-left
+rounded
+shadow-lg
+focus:outline-none
+py-2 px-4 sm:text-sm`;
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+/**
+ * Use width ContextMenuAction.tsx , for example:
+ * <ContextMenu button="MyButton" emphasis="low/high">
+ * <ContextMenuAction
+ * caption="First Menu"
+ * icon={icon}
+ * action={() => alert('click')}
+ * ></ContextMenuAction>
+ * ...
+ * </ContextMenu>
+ */
+export default function ContextMenu({
+ button,
+ children,
+ className,
+ emphasis = "low",
+}: MenuProps) {
+ return (
+ <Menu as="div" className="relative inline-block text-right">
+ {({ open }) => (
+ <>
+ <Menu.Button
+ className={classNames([
+ `${MenuButtonStyle}`,
+ {
+ "hover:bg-gray-100 font-bold uppercase": emphasis === "high",
+ },
+ className,
+ ])}
+ >
+ {button}
+ <SelectIcon
+ className={`${
+ open ? "rotate-180 transform" : "font-normal"
+ } my-2 mx-3 h-2 w-3 flex-center`}
+ aria-hidden="true"
+ />
+ </Menu.Button>
+
+ <Transition
+ as={Fragment}
+ show={open}
+ enter="transition ease-out duration-100"
+ enterFrom="transform opacity-0 scale-95"
+ enterTo="transform opacity-100 scale-100"
+ leave="transition ease-in duration-75"
+ leaveFrom="transform opacity-100 scale-100"
+ leaveTo="transform opacity-0 scale-95"
+ >
+ <Menu.Items
+ static
+ className={classNames([
+ className,
+ `${MenuItemStyle}`,
+ { "ml-2": emphasis === "high" },
+ ])}
+ >
+ {children}
+ </Menu.Items>
+ </Transition>
+ </>
+ )}
+ </Menu>
+ );
+}
diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx
new file mode 100644
index 0000000..9d3af26
--- /dev/null
+++ b/src/components/ContextMenuAction.tsx
@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+ action: Function;
+ caption: string;
+ disabled?: boolean;
+ icon?: React.ReactNode;
+ className?: string | undefined;
+};
+
+export default function ContextMenuAction({
+ action,
+ caption,
+ disabled,
+ icon,
+ className,
+}: Props) {
+ return (
+ <a
+ href="#"
+ onClick={(e) => action(e)}
+ // disabled={disabled}
+ className={classNames([
+ "group flex px-2 rounded items-center text-base hover:bg-gray-100",
+ // { "opacity-50": disabled, "cursor-default": !disabled },
+ className,
+ ])}
+ >
+ {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
+ <span className="px-2 py-2">{caption}</span>
+ </a>
+ );
+}
From e8f8777fa85b84382d2055709e6470f9c981859d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Thu, 18 Aug 2022 12:22:41 +0300
Subject: [PATCH 2/2] Unimportant comments have been removed
---
src/components/ContextMenuAction.tsx | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx
index 9d3af26..8d1e653 100644
--- a/src/components/ContextMenuAction.tsx
+++ b/src/components/ContextMenuAction.tsx
@@ -20,10 +20,8 @@ export default function ContextMenuAction({
<a
href="#"
onClick={(e) => action(e)}
- // disabled={disabled}
className={classNames([
"group flex px-2 rounded items-center text-base hover:bg-gray-100",
- // { "opacity-50": disabled, "cursor-default": !disabled },
className,
])}
>