@eml-payments/ui-kit 1.8.0 → 1.8.2

package/dist/src/components/Table/hooks/useTableController.js

@@ -1,146 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getGroupedRowModel, getExpandedRowModel, } from '@tanstack/react-table';
-import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
-import { usePaginationController } from './usePaginationController';
-import { useUrlPaginationSync } from './useUrlPaginationSync';
-import { useInfiniteScrolling } from './useInfiniteScrolling';
-export function useTableController({ id, height, data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, grouping, infiniteScroll, virtualization, }) {
-    const safeData = Array.isArray(data) ? data : [];
-    const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);
-    const parentScrollRef = useRef(null);
-    const loaderRef = useRef(null);
-    const columnVisibility = useMemo(() => {
-        return Object.fromEntries(stableGrouping.map((columnId) => [columnId, false]));
-    }, [stableGrouping]);
-    const [containerWidth, setContainerWidth] = useState(0);
-    useLayoutEffect(() => {
-        if (!parentScrollRef.current)
-            return;
-        const ro = new ResizeObserver(([entry]) => {
-            setContainerWidth(entry.contentRect.width);
-        });
-        ro.observe(parentScrollRef.current);
-        return () => ro.disconnect();
-    }, []);
-    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled)));
-    const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
-    const [internalRowSelection, setInternalRowSelection] = useState(() => {
-        if (selectedRowIds) {
-            return selectedRowIds.reduce((acc, id) => {
-                acc[id] = true;
-                return acc;
-            }, {});
-        }
-        return {};
-    });
-    const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, id);
-    const isInfinite = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled);
-    const dataPages = useMemo(() => {
-        if (!isInfinite) {
-            return undefined;
-        }
-        return [{ rows: safeData }];
-    }, [isInfinite, safeData.length]);
-    const infiniteOpts = useMemo(() => infiniteScroll, [infiniteScroll]);
-    const virtualizationOpts = useMemo(() => virtualization, [virtualization]);
-    const { allRows, virtualizationEnabled, rowVirtualizer, hasNextPage } = useInfiniteScrolling({
-        dataPages,
-        flatData: data,
-        infiniteScroll: infiniteOpts,
-        virtualization: virtualizationOpts,
-        parentScrollRef,
-        loaderRef,
-    });
-    const dataForTable = useMemo(() => (virtualizationEnabled || isInfinite ? allRows : safeData), [virtualizationEnabled, isInfinite, allRows, safeData]);
-    const table = useReactTable({
-        data: dataForTable,
-        columns: tableColumns,
-        getRowId: (row) => String(row[rowIdKey]),
-        state: {
-            ...(isInfinite ? {} : { pagination: { pageIndex, pageSize } }),
-            sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
-            rowSelection: internalRowSelection,
-            grouping: stableGrouping,
-            columnVisibility,
-        },
-        getSortedRowModel: getSortedRowModel(),
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: !isInfinite && paginationMode === 'client' ? getPaginationRowModel() : undefined,
-        manualPagination: !isInfinite && paginationMode === 'server',
-        autoResetPageIndex: false,
-        pageCount: !isInfinite && paginationMode === 'server' ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize) : undefined,
-        onPaginationChange: (updater) => {
-            if (isInfinite)
-                return;
-            const next = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;
-            setPageIndex(next.pageIndex);
-            setPageSize(next.pageSize);
-        },
-        onSortingChange: (updater) => {
-            const nextSorting = typeof updater === 'function' ? updater(sorting !== null && sorting !== void 0 ? sorting : internalSorting) : updater;
-            setInternalSorting(nextSorting);
-            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(nextSorting);
-        },
-        enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : true,
-        onRowSelectionChange: (updater) => {
-            const newSelection = typeof updater === 'function' ? updater(internalRowSelection) : updater;
-            setInternalRowSelection(newSelection);
-            if (onSelectionChange) {
-                const selectedIdsArray = Object.keys(newSelection).filter((id) => newSelection[id]);
-                onSelectionChange(selectedIdsArray);
-            }
-        },
-        enableMultiRowSelection: isMultiRowSelection,
-        getGroupedRowModel: getGroupedRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-    });
-    useEffect(() => {
-        if (paginationMode === 'none') {
-            setPageIndex(0);
-        }
-    }, [paginationMode, setPageIndex]);
-    const pagination = usePaginationController({
-        table,
-        paginationMode,
-        onRefetch,
-    });
-    const selectionColumn = useMemo(() => {
-        return checkboxSelection ? getCheckboxSelectionColumn(table) : null;
-    }, [checkboxSelection, table]);
-    useEffect(() => {
-        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled));
-        let finalColumns;
-        if (checkboxSelection && selectionColumn) {
-            if (checkboxPosition === 'start') {
-                finalColumns = [selectionColumn, ...normalized];
-            }
-            else if (checkboxPosition === 'end') {
-                finalColumns = [...normalized, selectionColumn];
-            }
-            else {
-                finalColumns = normalized;
-            }
-        }
-        else {
-            finalColumns = normalized;
-        }
-        setTableColumns(finalColumns);
-    }, [columns, checkboxSelection, checkboxPosition, containerWidth, virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled]);
-    return {
-        table,
-        height,
-        showHeader,
-        grouping,
-        setPageSize,
-        setPageIndex,
-        sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
-        virtualizationEnabled,
-        rowVirtualizer,
-        hasNextPage,
-        parentScrollRef,
-        loaderRef,
-        infiniteScroll,
-        virtualization,
-        ...pagination,
-    };
-}