midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add sonar to form

This commit is contained in:
rizky 2024-04-02 08:10:15 -07:00
parent c7d2e95e4a
commit 906f76698a
1 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
comps/form/Form.tsx
View File

@ -1,15 +1,14 @@
import { Form as FForm } from "@/comps/ui/form";
import { Toaster } from "@/comps/ui/sonner";
import { cn } from "@/utils";
import { useLocal } from "@/utils/use-local";
import { FC, useEffect, useState } from "react";
import { AlertTriangle, Check, Loader2 } from "lucide-react";
import { FC, useEffect } from "react";
import { createPortal } from "react-dom";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { FormHook } from "./utils/utils";
import { AlertTriangle, Check, Loader2 } from "lucide-react";
import { cn } from "@/utils";
import { Skeleton } from "../ui/skeleton";
import { getPathname } from "../../..";
import { FormHook } from "./utils/utils";
export const Form: FC<{
on_init: (arg: { submit: any; reload: any }) => any;
@ -19,6 +18,7 @@ export const Form: FC<{
form: FormHook;
PassProp: any;
cache: () => any;
sonar: "on" | "off";
layout: "auto" | "1-col" | "2-col";
}> = ({
on_init,
@ -29,6 +29,7 @@ export const Form: FC<{
on_submit,
cache,
layout: _layout,
sonar,
}) => {
const form_hook = useForm<any>({
defaultValues: {},
@ -62,18 +63,20 @@ export const Form: FC<{
const submit = () => {
clearTimeout(local.submit_timeout);
local.submit_timeout = setTimeout(async () => {
toast.loading(
<>
<Loader2 className="c-h-4 c-w-4 c-animate-spin" />
Processing ...
</>,
{
dismissible: true,
className: css`
background: #e4f7ff;
`,
}
);
if (sonar === "on") {
toast.loading(
<>
<Loader2 className="c-h-4 c-w-4 c-animate-spin" />
Processing ...
</>,
{
dismissible: true,
className: css`
background: #e4f7ff;
`,
}
);
}
const data = form.hook.getValues();
form.hook.clearErrors();
for (const [k, v] of Object.entries(form.validation)) {
@ -96,39 +99,42 @@ export const Form: FC<{
await res;
toast.dismiss();
setTimeout(() => {
toast.dismiss();
if (Object.keys(form.hook.formState.errors).length > 0) {
toast.error(
<div className="c-flex c-text-red-600 c-items-center">
<AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
Save Failed, please correct{" "}
{Object.keys(form.hook.formState.errors).length} errors.
</div>,
{
dismissible: true,
className: css`
background: #ffecec;
border: 2px solid red;
`,
}
);
} else {
toast.success(
<div className="c-flex c-text-blue-700 c-items-center">
<Check className="c-h-4 c-w-4 c-mr-1 " />
Done
</div>,
{
className: css`
background: #e4f5ff;
border: 2px solid blue;
`,
}
);
}
}, 100);
if (sonar === "on") {
setTimeout(() => {
toast.dismiss();
if (Object.keys(form.hook.formState.errors).length > 0) {
toast.error(
<div className="c-flex c-text-red-600 c-items-center">
<AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
Save Failed, please correct{" "}
{Object.keys(form.hook.formState.errors).length} errors.
</div>,
{
dismissible: true,
className: css`
background: #ffecec;
border: 2px solid red;
`,
}
);
} else {
toast.success(
<div className="c-flex c-text-blue-700 c-items-center">
<Check className="c-h-4 c-w-4 c-mr-1 " />
Done
</div>,
{
className: css`
background: #e4f5ff;
border: 2px solid blue;
`,
}
);
}
}, 100);
}
}, 300);
};
@ -163,7 +169,7 @@ export const Form: FC<{
};
if (res instanceof Promise) {
setTimeout(() => {
if (!isEditor) {
if (!isEditor && sonar === "on") {
toast.loading(
<>
<Loader2 className="c-h-4 c-w-4 c-animate-spin" />