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

fix

This commit is contained in:
rizky 2024-11-27 14:26:26 -07:00
parent e062991ac4
commit d1174741b4
4 changed files with 84 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
comps/form/Form.tsx
View File

@ -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>

4
comps/form/base/BaseForm.tsx
View File

@ -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(

152
comps/list/TableList.tsx
View File

@ -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,7 +224,10 @@ 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) {
@ -238,78 +240,80 @@ export const TableList: FC<TableListProp> = ({
}
}
call_prasi_events("tablelist", "where", [__props?.gen__table, where]);
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,
},
};
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 = {};
}
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];
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}

29
comps/ui/sonner.tsx
View File

@ -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 }