update Field.tsx, alert.tsx and dropdown-menu.tsx
This commit is contained in:
parent
ba418a3a26
commit
624df96b1e
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<AlertDialogTrigger>{children}</AlertDialogTrigger>
|
||||
<AlertDialog {...param}>
|
||||
{mode === "manual" ? (
|
||||
<></>
|
||||
) : (
|
||||
<AlertDialogTrigger>{children}</AlertDialogTrigger>
|
||||
)}
|
||||
|
||||
<AlertDialogContent className={className}>
|
||||
{content ? (
|
||||
content
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
onOpenChange={(e) => {
|
||||
setOpen(e);
|
||||
}}
|
||||
>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<ButtonBetter
|
||||
onClick={() => {
|
||||
setOpen(!open);
|
||||
}}
|
||||
>
|
||||
More Action
|
||||
{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") {
|
||||
<>
|
||||
<Alert
|
||||
type={"delete"}
|
||||
msg={local?.msg}
|
||||
onClick={async () => {
|
||||
if (typeof local.onClick === "function") {
|
||||
await local.onClick();
|
||||
}
|
||||
}}
|
||||
mode="manual"
|
||||
open={openAlert}
|
||||
onOpenChange={(e) => {
|
||||
setOpenAlert(e);
|
||||
}}
|
||||
></Alert>
|
||||
|
||||
<DropdownMenu
|
||||
open={open}
|
||||
onOpenChange={(e) => {
|
||||
setOpen(e);
|
||||
}}
|
||||
>
|
||||
<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();
|
||||
event.preventDefault();
|
||||
if (!e?.progration) {
|
||||
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()}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
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
|
||||
{typeof e?.label === "function" ? (
|
||||
e?.label()
|
||||
) : e?.label ? (
|
||||
e?.label
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenuShortcut>
|
||||
{" "}
|
||||
{typeof e?.icon === "function" ? (
|
||||
e?.icon()
|
||||
) : e?.icon ? (
|
||||
e?.icon
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||
|
|
|
|||
Loading…
Reference in New Issue