Merge branch 'feat/new-dropdown-component' into alpha

src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.tsx

@@ -1,45 +1,19 @@
-import React from "react";
+import { Dropdown } from "@/components/ui/Dropdown";
 import { RightCircleOutlined } from "@ant-design/icons";
-import { Menu, Dropdown, Spin } from "antd";
 import { Many2OneSuffixProps } from "./Many2OneSuffix.types";
 
-export const Many2oneSuffix = (props: Many2OneSuffixProps) => {
-  const { loading, menuItems, onMenuItemClicked, onSuffixExpandClicked } =
-    props;
-
-  function menu() {
-    if (loading) {
-      return (
-        <Menu>
-          <div style={{ padding: 15 }}>
-            <Spin />
-          </div>
-        </Menu>
-      );
-    }
-
-    return (
-      <Menu
-        onClick={(e: any) => {
-          onMenuItemClicked(e);
-        }}
-      >
-        {menuItems}
-      </Menu>
-    );
-  }
-
+export const Many2OneSuffix = ({
+  onRetrieveData,
+  onItemClick,
+}: Many2OneSuffixProps) => {
   return (
-    <>
-      <Dropdown overlay={menu()} trigger={["click"]}>
-        <RightCircleOutlined
-          style={{ color: "rgba(0,0,0,.45)" }}
-          onClick={(e) => {
-            onSuffixExpandClicked();
-            e.preventDefault();
-          }}
-        />
-      </Dropdown>
-    </>
+    <Dropdown
+      onRetrieveData={onRetrieveData}
+      onItemClick={onItemClick}
+      maxHeight={300}
+      trigger={["click"]}
+    >
+      <RightCircleOutlined style={{ color: "rgba(0,0,0,.45)" }} />
+    </Dropdown>
   );
 };

src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.types.tsx

@@ -1,7 +1,6 @@
+import { DropdownMenuGroup, DropdownMenuItem } from "@/components/ui";
 
 export type Many2OneSuffixProps = {
-  loading?: boolean;
-  menuItems: React.ReactNode;
-  onMenuItemClicked: (event: any) => void;
-  onSuffixExpandClicked: () => void;
-};
+  onRetrieveData: () => Promise<DropdownMenuGroup[]>;
+  onItemClick?: (item: DropdownMenuItem) => void;
+};

src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffixModal.tsx

@@ -0,0 +1,43 @@
+import { Modal, Button, Space } from "antd";
+import { DropdownMenuItem } from "@/components/ui";
+import { useLocale } from "@/context/LocaleContext";
+
+type Props = {
+  visible: boolean;
+  items: DropdownMenuItem[];
+  onItemClicked?: (item: DropdownMenuItem) => void;
+  onCancel: () => void;
+};
+
+export const Many2OneSuffixModal = (props: Props) => {
+  const { visible, onCancel, items = [], onItemClicked } = props;
+  const { t } = useLocale();
+
+  return (
+    <Modal
+      title={t("selectAction")}
+      centered
+      open={visible}
+      footer={null}
+      destroyOnClose
+      onCancel={onCancel}
+      maskClosable={false}
+    >
+      <Space direction="vertical" className="w-full">
+        {items.map((item) => {
+          return (
+            <Button
+              key={item.id}
+              className="w-full"
+              onClick={() => {
+                onItemClicked?.(item);
+              }}
+            >
+              {item.name}
+            </Button>
+          );
+        })}
+      </Space>
+    </Modal>
+  );
+};

src/components/widgets/Many2one/Many2OneSuffix/index.ts

@@ -1 +1,3 @@
 export * from "./Many2OneSuffix";
+export * from "./Many2OneSuffix.types";
+export * from "./Many2OneSuffixModal";

src/components/widgets/index.ts

@@ -10,3 +10,4 @@ export * from "./Selection";
 export * from "./Link";
 export * from "./ProgressBar";
 export * from "./Translatable";
+export * from "./Many2One";