chore: swap dropdown component with plane/ui component (#2480)

* chore: swap custom menu component with plane/ui component * chore: swap custom select component with plane/ui component * chore: swap custom search select component with plane/ui component
2023-10-19 15:24:51 +05:30 · 2023-10-19 15:24:51 +05:30 · c0793ec8a5
commit c0793ec8a5
parent 0b8367a262
91 changed files with 681 additions and 194 deletions
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@ -0,0 +1,152 @@
+import * as React from "react";
+
+// react-poppper
+import { usePopper } from "react-popper";
+// headless ui
+import { Menu } from "@headlessui/react";
+// type
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
+// icons
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+const CustomMenu = (props: ICustomMenuDropdownProps) => {
+  const {
+    buttonClassName = "",
+    customButtonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    verticalEllipsis = false,
+    width = "auto",
+    menuButtonOnClick,
+  } = props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={menuButtonOnClick}
+                className={customButtonClassName}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    onClick={menuButtonOnClick}
+                    disabled={disabled}
+                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
+                      disabled
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal
+                      className={`h-3.5 w-3.5 ${
+                        verticalEllipsis ? "rotate-90" : ""
+                      }`}
+                    />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
+                      open
+                        ? "bg-custom-background-90 text-custom-text-100"
+                        : "text-custom-text-200"
+                    } ${
+                      noBorder
+                        ? ""
+                        : "border border-custom-border-300 shadow-sm focus:outline-none"
+                    } ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items>
+            <div
+              className={`z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                maxHeight === "lg"
+                  ? "max-h-60"
+                  : maxHeight === "md"
+                  ? "max-h-48"
+                  : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                  ? "max-h-28"
+                  : ""
+              } ${
+                width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+              } ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              {children}
+            </div>
+          </Menu.Items>
+        </>
+      )}
+    </Menu>
+  );
+};
+
+const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+  const { children, onClick, className = "" } = props;
+  return (
+    <Menu.Item as="div">
+      {({ active, close }) => (
+        <button
+          type="button"
+          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+            active ? "bg-custom-background-80" : ""
+          } ${className}`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )}
+    </Menu.Item>
+  );
+};
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };