update Field.tsx, alert.tsx and dropdown-menu.tsx

components/form/Field.tsx

@@ -10,12 +10,50 @@ import { getNumber } from "@/lib/utils/getNumber";
 import { useLocal } from "@/lib/utils/use-local";
 import { FieldRadio } from "./field/TypeRadio";
 
-export const Field: React.FC<any> = ({
+export const Field: React.FC<{
+  fm: any;
+  label: string;
+  name: string;
+  onLoad?: () => Promise<any> | any;
+  type?:
+    | "rating"
+    | "color"
+    | "single-checkbox"
+    | "radio"
+    | "checkbox"
+    | "upload"
+    | "multi-upload"
+    | "dropdown"
+    | "multi-dropdown"
+    | "checkbox"
+    | "radio"
+    | "single-checkbox"
+    | "richtext"
+    | "tag"
+    | "text"
+    | "money"
+    | "textarea"
+    | "time"
+    | "date"
+    | "password";
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  hidden_label?: boolean;
+
+  onChange?: ({ data }: any) => Promise<void> | void;
+  className?: string;
+  classField?: string;
+  style?: string;
+  prefix?: string | any | (() => any);
+  suffix?: string | any | (() => any);
+  allowNew?: boolean;
+}> = ({
   fm,
   label,
   name,
   onLoad,
-  type,
+  type = "text",
   placeholder,
   required,
   disabled,

components/ui/alert.tsx

@@ -11,23 +11,48 @@ import {
   AlertDialogTrigger,
 } from "./alert-dialog";
 
-export const Alert: FC<any> = ({
+export const Alert: FC<{
+  type: string;
+  onClick?: () => Promise<void> | void;
+  children?: any;
+  className?: string;
+  content?: any;
+  msg?: any;
+  mode?: "auto" | "manual";
+  open?: boolean;
+  onOpenChange?: (event: boolean) => void;
+}> = ({
   type,
   onClick,
   children,
   className,
   content,
   msg,
+  mode,
+  open,
+  onOpenChange,
 }) => {
   const message: any = {
     save: "Your data will be saved securely. You can update it at any time if needed.",
     delete:
       "This action cannot be undone. This will permanently remove your data from our servers.",
   };
+  const param =
+    mode === "manual"
+      ? {
+          open: open,
+          onOpenChange: onOpenChange,
+        }
+      : {};
   return (
     <>
-      <AlertDialog>
+      <AlertDialog {...param}>
-        <AlertDialogTrigger>{children}</AlertDialogTrigger>
+        {mode === "manual" ? (
+          <></>
+        ) : (
+          <AlertDialogTrigger>{children}</AlertDialogTrigger>
+        )}
+
         <AlertDialogContent className={className}>
           {content ? (
             content

components/ui/dropdown-menu.tsx

@@ -1,11 +1,12 @@
 "use client";
-
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ButtonBetter } from "./button";
 import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
+import { Alert } from "./alert";
+import { useLocal } from "@/lib/utils/use-local";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -187,93 +188,134 @@ const DropdownHamburgerBetter: React.FC<{
   list: any[];
   className?: string;
   classNameList?: string;
+  alert?: boolean;
+  message?: string;
 }> = ({ children, list, className, classNameList }) => {
+  const local = useLocal({
+    onClick: () => {},
+    msg: null as any,
+  });
   const [open, setOpen] = React.useState(false as boolean);
+  const [openAlert, setOpenAlert] = React.useState(false as boolean);
   const firstChild = list?.[0];
   const childs = list?.length > 1 ? list.slice(1) : [];
   return (
-    <DropdownMenu
+    <>
-      open={open}
+      <Alert
-      onOpenChange={(e) => {
+        type={"delete"}
-        setOpen(e);
+        msg={local?.msg}
-      }}
+        onClick={async () => {
-    >
+          if (typeof local.onClick === "function") {
-      <DropdownMenuTrigger asChild>
+            await local.onClick();
-        <ButtonBetter
+          }
-          onClick={() => {
+        }}
-            setOpen(!open);
+        mode="manual"
-          }}
+        open={openAlert}
-        >
+        onOpenChange={(e) => {
-          More Action
+          setOpenAlert(e);
-          {open ? <IoIosArrowDown /> : <IoIosArrowUp />}
+        }}
-        </ButtonBetter>
+      ></Alert>
-      </DropdownMenuTrigger>
+
-      <DropdownMenuContent className={cn("w-56 bg-white", classNameList)}>
+      <DropdownMenu
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        open={open}
-        <DropdownMenuSeparator />
+        onOpenChange={(e) => {
-        <DropdownMenuGroup>
+          setOpen(e);
-          {list.map((e, idx) => {
+        }}
-            if (typeof e?.children === "function") {
+      >
+        <DropdownMenuTrigger asChild>
+          <ButtonBetter
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            More Actions
+            {open ? <IoIosArrowDown /> : <IoIosArrowUp />}
+          </ButtonBetter>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className={cn("w-56 bg-white", classNameList)}>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {list.map((e, idx) => {
+              if (typeof e?.children === "function") {
+                return (
+                  <DropdownMenuItem
+                    key={"menu-group-" + idx}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      event.preventDefault();
+                    }}
+                    className={cn(
+                      "cursor-pointer hover:bg-gray-100 rounded-md",
+                      e?.className ? e?.className : ""
+                    )}
+                  >
+                    {e.children()}
+                  </DropdownMenuItem>
+                );
+              }
               return (
                 <DropdownMenuItem
                   key={"menu-group-" + idx}
                   onClick={(event) => {
-                    event.stopPropagation();
+                    if (!e?.progration) {
-                    event.preventDefault();
+                      event.stopPropagation();
+                      event.preventDefault();
+                    }
+                    if (typeof e?.onClick === "function") {
+                      local.onClick = e?.onClick;
+                      e?.onClick({
+                        close: () => {
+                          setOpen(false);
+                        },
+                      });
+                    }
+                    const data = {
+                      alert: e?.alert ? true : false,
+                      onClick: e?.onClick,
+                      msg: e?.msg,
+                    };
+                    if (data?.alert) {
+                      setOpen(false);
+                      setOpenAlert(e);
+                      local.msg = data?.msg;
+                      local.onClick = async () => {
+                        if (typeof data?.onClick === "function") {
+                          await data?.onClick();
+                        }
+                      };
+                      local.render();
+                    }
                   }}
                   className={cn(
                     "cursor-pointer hover:bg-gray-100 rounded-md",
                     e?.className ? e?.className : ""
                   )}
                 >
-                  {e.children()}
+                  {typeof e?.label === "function" ? (
-                </DropdownMenuItem>
+                    e?.label()
-              );
+                  ) : e?.label ? (
-            }
+                    e?.label
-            return (
-              <DropdownMenuItem
-                key={"menu-group-" + idx}
-                onClick={(event) => {
-                  if (!e?.progration) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                  }
-                  if (typeof e?.onClick === "function") {
-                    e?.onClick({
-                      close: () => {
-                        setOpen(false);
-                      },
-                    });
-                  }
-                }}
-                className={cn(
-                  "cursor-pointer hover:bg-gray-100 rounded-md",
-                  e?.className ? e?.className : ""
-                )}
-              >
-                {typeof e?.label === "function" ? (
-                  e?.label()
-                ) : e?.label ? (
-                  e?.label
-                ) : (
-                  <></>
-                )}
-                <DropdownMenuShortcut>
-                  {" "}
-                  {typeof e?.icon === "function" ? (
-                    e?.icon()
-                  ) : e?.icon ? (
-                    e?.icon
                   ) : (
                     <></>
                   )}
-                </DropdownMenuShortcut>
+                  <DropdownMenuShortcut>
-              </DropdownMenuItem>
+                    {" "}
-            );
+                    {typeof e?.icon === "function" ? (
-          })}
+                      e?.icon()
-        </DropdownMenuGroup>
+                    ) : e?.icon ? (
-      </DropdownMenuContent>
+                      e?.icon
-    </DropdownMenu>
+                    ) : (
+                      <></>
+                    )}
+                  </DropdownMenuShortcut>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";