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

fixing loading table list

This commit is contained in:
rizky 2024-08-14 22:49:16 -07:00
parent 8ced8d57d7
commit 3cf32576bc
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
comps/list/TableList.tsx
View File

@ -162,8 +162,8 @@ export const TableList: FC<TableListProp> = ({
skip: 0, skip: 0,
timeout: null as any, timeout: null as any,
total: 0, total: 0,
scroll: (event: React.UIEvent<HTMLDivElement>) => { scroll: (currentTarget: HTMLDivElement) => {
if (local.status === "loading" || !isAtBottom(event)) return; if (local.status === "loading" || !isAtBottom(currentTarget)) return;
if (local.data.length >= local.paging.skip + local.paging.take) { if (local.data.length >= local.paging.skip + local.paging.take) {
local.paging.skip += local.paging.take; local.paging.skip += local.paging.take;
local.status = "reload"; local.status = "reload";
@ -171,6 +171,7 @@ export const TableList: FC<TableListProp> = ({
} }
}, },
}, },
grid_ref: null as null | HTMLDivElement,
collapsed: new Set<number>(), collapsed: new Set<number>(),
cached_row: new WeakMap<any, ReactElement>(), cached_row: new WeakMap<any, ReactElement>(),
filtering: "" as ReactNode | string | true, filtering: "" as ReactNode | string | true,
@ -245,6 +246,8 @@ export const TableList: FC<TableListProp> = ({
local.status = "ready"; local.status = "ready";
local.render(); local.render();
done(); done();
if (local.grid_ref) local.paging.scroll(local.grid_ref);
}; };
if (result instanceof Promise) { if (result instanceof Promise) {
@ -817,7 +820,10 @@ export const TableList: FC<TableListProp> = ({
columns={columns} columns={columns}
rows={data} rows={data}
className="rdg-light" className="rdg-light"
onScroll={local.paging.scroll} ref={(e) => {
local.grid_ref = e?.element as any;
}}
onScroll={(e) => local.paging.scroll(e.currentTarget)}
selectedRows={EMPTY_SET} selectedRows={EMPTY_SET}
onSelectedCellChange={() => {}} onSelectedCellChange={() => {}}
onSelectedRowsChange={() => {}} onSelectedRowsChange={() => {}}
@ -859,8 +865,9 @@ export const TableList: FC<TableListProp> = ({
className={cx( className={cx(
props.className, props.className,
(isSelect || (isSelect ||
md?.selected?.[local.pk?.name || ""] === (md?.selected?.[local.pk?.name || ""] ===
props.row[local.pk?.name || ""]) && props.row[local.pk?.name || ""] &&
props.row[local.pk?.name || ""])) &&
"row-selected" "row-selected"
)} )}
/> />
@ -928,7 +935,10 @@ export const TableList: FC<TableListProp> = ({
{Array.isArray(data) && data.length > 0 ? ( {Array.isArray(data) && data.length > 0 ? (
<div <div
className="w-full h-full overflow-y-auto c-flex-col" className="w-full h-full overflow-y-auto c-flex-col"
onScroll={local.paging.scroll} ref={(e) => {
local.grid_ref = e;
}}
onScroll={(e) => local.paging.scroll(e.currentTarget)}
> >
{data.map((e, idx) => { {data.map((e, idx) => {
return ( return (
@ -1066,7 +1076,7 @@ const dataGridStyle = (local: { height: number }) => css`
} }
`; `;
function isAtBottom({ currentTarget }: React.UIEvent<HTMLDivElement>): boolean { function isAtBottom(currentTarget: HTMLDivElement): boolean {
return ( return (
currentTarget.scrollTop + 10 >= currentTarget.scrollTop + 10 >=
currentTarget.scrollHeight - currentTarget.clientHeight currentTarget.scrollHeight - currentTarget.clientHeight