From d1174741b46ab5889fddee767eac4f954c0cdb83 Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Wed, 27 Nov 2024 14:26:26 -0700
Subject: [PATCH] fix

---
 comps/form/Form.tsx          |  14 ++--
 comps/form/base/BaseForm.tsx |   4 +-
 comps/list/TableList.tsx     | 156 +++++++++++++++++------------------
 comps/ui/sonner.tsx          |  29 -------
 4 files changed, 84 insertions(+), 119 deletions(-)
 delete mode 100755 comps/ui/sonner.tsx

diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index e4d5407..c3338e1 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -1,14 +1,13 @@
+import { getPathname } from "lib/utils/pathname";
+import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
 import { useLocal } from "lib/utils/use-local";
 import { FC, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Toaster } from "sonner";
+import { Toaster } from "../ui/toast";
 import { FMInternal, FMProps } from "./typings";
 import { editorFormData } from "./utils/ed-data";
 import { formInit } from "./utils/init";
 import { formReload } from "./utils/reload";
-import { getPathname } from "lib/utils/pathname";
-import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
-import { toast } from "../ui/toast";
 
 export const editorFormWidth = {} as Record<string, { w: number; f: any }>;
 
@@ -86,7 +85,7 @@ export const Form: FC<FMProps> = (props) => {
   const ref = useRef({
     el: null as null | HTMLFormElement,
     rob: new ResizeObserver(([e]) => {
-      if (e.contentRect.width > 0) {
+      if (e.contentRect.width > 0 && fm.size && fm.props) {
         fm.size.height = e.contentRect.height;
         fm.size.width = e.contentRect.width;
 
@@ -188,8 +187,7 @@ export const Form: FC<FMProps> = (props) => {
         "form c-flex-1 c-w-full c-h-full c-relative c-overflow-auto"
       )}
     >
-      {toaster_el &&
-        createPortal(<Toaster position={toast.position} cn={cx} />, toaster_el)}
+      {toaster_el && createPortal(<Toaster />, toaster_el)}
       <div
         ref={form_inner_ref}
         className={cx(
@@ -211,7 +209,7 @@ export const Form: FC<FMProps> = (props) => {
         )}
       >
         <>
-          {fm.status !== "init" && fm.size.width > 0 && (
+          {fm.status !== "init" && (fm.size?.width || 0) > 0 && (
             <PassProp fm={fm} submit={fm.submit}>
               {!fm.data ? <>NO DATA</> : body}
             </PassProp>
diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx
index 1e85780..bcfaf47 100755
--- a/comps/form/base/BaseForm.tsx
+++ b/comps/form/base/BaseForm.tsx
@@ -1,10 +1,10 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Toaster } from "sonner";
 import { editorFormWidth } from "../Form";
 import { FMLocal } from "../typings";
 import { createFm } from "./utils/create-fm";
 import { DivForm } from "./utils/DivForm";
+import { Toaster } from "lib/exports";
 
 export type BaseFormProps<T> = {
   name: string;
@@ -93,7 +93,7 @@ export const BaseForm = <T extends Record<string, any>>({
         className
       )}
     >
-      {toaster_el && createPortal(<Toaster cn={cx} />, toaster_el)}
+      {toaster_el && createPortal(<Toaster />, toaster_el)}
 
       <div
         className={cx(
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index 7a7e878..6055a51 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -24,16 +24,15 @@ import DataGrid, {
   ColumnOrColumnGroup,
   RenderCellProps,
   Row,
-  SortColumn
+  SortColumn,
 } from "react-data-grid";
 import "react-data-grid/lib/styles.css";
 import { createPortal } from "react-dom";
-import { Toaster } from "sonner";
 import { filterWhere } from "../filter/parser/filter-where";
 import { getFilter } from "../filter/utils/get-filter";
 import { MDLocal } from "../md/utils/typings";
 import { Skeleton } from "../ui/skeleton";
-import { toast } from "../ui/toast";
+import { toast, Toaster } from "../ui/toast";
 import { TLList } from "./TLList";
 import { TLSlider } from "./TLSlider";
 import { sortTree } from "./utils/sort-tree";
@@ -225,9 +224,12 @@ export const TableList: FC<TableListProp> = ({
                   }
                 }, 10);
               });
-              if (Array.isArray(md?.params?.links) && md?.params?.links?.length) {
+              if (
+                Array.isArray(md?.params?.links) &&
+                md?.params?.links?.length
+              ) {
                 const last = md.params.links[md.params.links.length - 1];
-  
+
                 if (last && last.where) {
                   if ((last.name && last.name === md.name) || !last.name) {
                     for (const [k, v] of Object.entries(last.where)) {
@@ -237,79 +239,81 @@ export const TableList: FC<TableListProp> = ({
                 }
               }
             }
-            
-          call_prasi_events("tablelist", "where", [__props?.gen__table, where]);
 
-          const load_args: any = {
-            async reload() {},
-            orderBy,
-            where,
-            paging: {
-              take: local.paging.take > 0 ? local.paging.take : undefined,
-              skip: local.paging.skip,
-            },
-          };
+            call_prasi_events("tablelist", "where", [
+              __props?.gen__table,
+              where,
+            ]);
 
-          if (id_parent) {
-            load_args.paging = {};
-          }
-          const result = on_load({ ...load_args, mode: "query" });
-          const callback = (data: any[]) => {
-            if (
-              id_parent ||
-              !local.paging ||
-              (local.paging && !local.paging.take) ||
-              local.paging.skip === 0
-            ) {
-              local.data = data;
-            } else {
-              local.data = [...local.data, ...data];
+            const load_args: any = {
+              async reload() {},
+              orderBy,
+              where,
+              paging: {
+                take: local.paging.take > 0 ? local.paging.take : undefined,
+                skip: local.paging.skip,
+              },
+            };
+
+            if (id_parent) {
+              load_args.paging = {};
             }
-
-            local.paging.last_length = local.data.length;
-
-            local.status = "ready";
-            local.reloading = null;
-            local.render();
-
-            done();
-            setTimeout(() => {
+            const result = on_load({ ...load_args, mode: "query" });
+            const callback = (data: any[]) => {
               if (
-                local.grid_ref &&
-                !id_parent &&
-                (paging !== undefined || paging)
+                id_parent ||
+                !local.paging ||
+                (local.paging && !local.paging.take) ||
+                local.paging.skip === 0
               ) {
-                local.paging.scroll(local.grid_ref);
+                local.data = data;
+              } else {
+                local.data = [...local.data, ...data];
               }
-            }, 100);
-          };
 
-          if (result instanceof Promise) {
-            (async () => {
-              try {
-                callback(await result);
-              } catch (e) {
-                console.error(e);
-                local.status = "error";
-                toast.dismiss();
-                toast.error(
-                  <div className="c-flex c-text-red-600 c-items-center">
-                    <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
-                    Failed to load data
-                  </div>,
-                  {
-                    dismissible: true,
-                    className: css`
-                      background: #ffecec;
-                      border: 2px solid red;
-                    `,
-                  }
-                );
-              }
-            })();
-          } else callback(result);
+              local.paging.last_length = local.data.length;
+
+              local.status = "ready";
+              local.reloading = null;
+              local.render();
+
+              done();
+              setTimeout(() => {
+                if (
+                  local.grid_ref &&
+                  !id_parent &&
+                  (paging !== undefined || paging)
+                ) {
+                  local.paging.scroll(local.grid_ref);
+                }
+              }, 100);
+            };
+
+            if (result instanceof Promise) {
+              (async () => {
+                try {
+                  callback(await result);
+                } catch (e) {
+                  console.error(e);
+                  local.status = "error";
+                  toast.dismiss();
+                  toast.error(
+                    <div className="c-flex c-text-red-600 c-items-center">
+                      <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
+                      Failed to load data
+                    </div>,
+                    {
+                      dismissible: true,
+                      className: css`
+                        background: #ffecec;
+                        border: 2px solid red;
+                      `,
+                    }
+                  );
+                }
+              })();
+            } else callback(result);
           }
-
         });
 
         return local.reloading;
@@ -853,11 +857,7 @@ export const TableList: FC<TableListProp> = ({
               if (e) local.height = e.offsetHeight;
             }}
           >
-            {toaster_el &&
-              createPortal(
-                <Toaster position={toast.position} cn={cn} />,
-                toaster_el
-              )}
+            {toaster_el && createPortal(<Toaster />, toaster_el)}
             {local.status === "init" ? (
               <DataGrid
                 style={{ opacity: 0 }}
@@ -980,11 +980,7 @@ export const TableList: FC<TableListProp> = ({
   } else if (mode === "list") {
     return (
       <>
-        {toaster_el &&
-          createPortal(
-            <Toaster position={toast.position} cn={cn} />,
-            toaster_el
-          )}
+        {toaster_el && createPortal(<Toaster />, toaster_el)}
         {list.type !== "slider" && list.type !== "grid" && (
           <TLList
             row_click={row_click}
diff --git a/comps/ui/sonner.tsx b/comps/ui/sonner.tsx
deleted file mode 100755
index 1a922be..0000000
--- a/comps/ui/sonner.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="c-toaster c-group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }