@dbcdk/react-components 0.0.12 → 0.0.13

package/dist/components/table/tanstack.js

@@ -1,214 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
-import * as React from 'react';
-import { Table } from './Table';
-import ColumnResizer from './components/column-resizer/ColumnResizer';
-function getColumnId(def, index) {
-    const d = def;
-    if (d.id != null && String(d.id).length)
-        return String(d.id);
-    if (d.accessorKey != null && String(d.accessorKey).length)
-        return String(d.accessorKey);
-    return `col_${index}`;
-}
-function buildDefaultVisibleIdsFromDefs(defs) {
-    const ids = [];
-    defs.forEach((def, idx) => {
-        var _a;
-        const id = getColumnId(def, idx);
-        const hiddenByMeta = Boolean((_a = def.meta) === null || _a === void 0 ? void 0 : _a.hidden);
-        if (!hiddenByMeta)
-            ids.push(id);
-    });
-    return ids;
-}
-function mapDefsToColumnItems(defs, columnVisibility) {
-    return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        const id = getColumnId(def, index);
-        const accessorKey = def.accessorKey;
-        const accessorFn = def.accessorFn;
-        const cell = def.cell;
-        let render;
-        if (typeof cell === 'function') {
-            render = (row) => cell({
-                row: { original: row },
-                getValue: () => accessorKey != null
-                    ? row[accessorKey]
-                    : accessorFn
-                        ? accessorFn(row)
-                        : undefined,
-            });
-        }
-        else if (accessorFn) {
-            render = (row) => accessorFn(row);
-        }
-        else if (accessorKey != null) {
-            render = (row) => row[accessorKey];
-        }
-        else {
-            render = () => null;
-        }
-        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
-        return {
-            id,
-            header: def.header,
-            accessor: accessorKey,
-            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
-            render,
-            hidden: !isVisible,
-            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
-            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
-            fitContent: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.fitContent) !== null && _h !== void 0 ? _h : false,
-            emptyPlaceholder: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.emptyPlaceholder) !== null && _k !== void 0 ? _k : '-',
-            allowWrap: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.allowWrap) !== null && _m !== void 0 ? _m : false,
-            fillWidth: (_p = (_o = def.meta) === null || _o === void 0 ? void 0 : _o.fillWidth) !== null && _p !== void 0 ? _p : false,
-            severity: (_r = (_q = def.meta) === null || _q === void 0 ? void 0 : _q.severity) !== null && _r !== void 0 ? _r : undefined,
-        };
-    });
-}
-export function TanstackTable(props) {
-    var _a, _b;
-    const { data, dataKey, columns, filterable = [], onSortingChange, initialSortBy, initialSortDirection, visibleColumnIds, ...tableProps } = props;
-    const [sorting, setSorting] = React.useState([]);
-    const [columnFilters, setColumnFilters] = React.useState([]);
-    const [columnSizing, setColumnSizing] = React.useState({});
-    // IDs in the same order as defs
-    const allColumnIds = React.useMemo(() => columns.map((def, i) => getColumnId(def, i)), [columns]);
-    // Defaults derived from ColumnDef meta.hidden
-    const defaultVisibleIds = React.useMemo(() => buildDefaultVisibleIdsFromDefs(columns), [columns]);
-    // Treat [] as "unset" and fall back to defaults
-    const effectiveVisibleIds = React.useMemo(() => {
-        if (visibleColumnIds && visibleColumnIds.length > 0)
-            return visibleColumnIds;
-        return defaultVisibleIds;
-    }, [visibleColumnIds, defaultVisibleIds]);
-    // TanStack visibility state
-    const [columnVisibility, setColumnVisibility] = React.useState(() => {
-        const visible = new Set(effectiveVisibleIds);
-        const next = {};
-        for (const id of allColumnIds)
-            next[id] = visible.has(id);
-        return next;
-    });
-    const table = useReactTable({
-        data,
-        columns: columns,
-        state: { sorting, columnFilters, columnSizing, columnVisibility },
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        onColumnSizingChange: setColumnSizing,
-        onColumnVisibilityChange: setColumnVisibility,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        enableColumnResizing: true,
-        columnResizeMode: 'onChange',
-        initialState: {},
-        defaultColumn: {
-            enableResizing: true,
-            minSize: 80,
-            size: 180,
-            maxSize: 800,
-        },
-    });
-    // Apply external "visibleColumnIds" -> TanStack column visibility using toggleVisibility,
-    // as requested (no selector UI here).
-    React.useEffect(() => {
-        const desired = new Set(effectiveVisibleIds);
-        for (const id of allColumnIds) {
-            const col = table.getColumn(id);
-            if (!col)
-                continue;
-            const shouldBeVisible = desired.has(id);
-            if (col.getIsVisible() !== shouldBeVisible) {
-                col.toggleVisibility(shouldBeVisible);
-            }
-        }
-    }, [table, allColumnIds, effectiveVisibleIds]);
-    React.useEffect(() => {
-        if (initialSortDirection !== 'asc' && initialSortDirection !== 'desc')
-            return table.setSorting([]);
-        table.setSorting(() => initialSortBy && initialSortDirection
-            ? [{ id: initialSortBy, desc: initialSortDirection === 'desc' }]
-            : []);
-    }, [initialSortBy, initialSortDirection, table]);
-    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
-    const visibleData = table.getRowModel().rows.map(r => r.original);
-    const s = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0];
-    const sortById = (_b = s === null || s === void 0 ? void 0 : s.id) !== null && _b !== void 0 ? _b : undefined;
-    const sortDirection = s ? (s.desc ? 'desc' : 'asc') : null;
-    const gridTemplateColumns = React.useMemo(() => {
-        return columnItems
-            .filter(ci => !ci.hidden)
-            .map(ci => {
-            var _a;
-            const col = table.getColumn(ci.id);
-            const w = (_a = col === null || col === void 0 ? void 0 : col.getSize) === null || _a === void 0 ? void 0 : _a.call(col);
-            if (ci.fillWidth)
-                return '1fr';
-            if (ci.fitContent)
-                return '1%';
-            return `${w !== null && w !== void 0 ? w : 180}px`;
-        })
-            .join(' ');
-    }, [columnItems, table]);
-    const columnStyles = React.useMemo(() => {
-        const styles = {};
-        for (const c of table.getAllLeafColumns()) {
-            const id = c.id;
-            const ci = columnItems.find(x => x.id === id);
-            if (ci === null || ci === void 0 ? void 0 : ci.fillWidth) {
-                styles[id] = { width: 'auto', minWidth: 0 };
-            }
-            else if (ci === null || ci === void 0 ? void 0 : ci.fitContent) {
-                styles[id] = { width: '1%', whiteSpace: 'nowrap' };
-            }
-            else {
-                const w = c.getSize();
-                styles[id] = { width: w, minWidth: w, maxWidth: w };
-            }
-        }
-        return styles;
-    }, [table, columnItems]);
-    const headerExtras = React.useCallback(({ index }) => {
-        var _a, _b, _c, _d;
-        const headerGroups = table.getHeaderGroups();
-        const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-        const header = leafHeaders[index];
-        if (!header)
-            return null;
-        const canResize = (_c = (_b = (_a = header.column).getCanResize) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
-        const handler = (_d = header.getResizeHandler) === null || _d === void 0 ? void 0 : _d.call(header);
-        if (!canResize || !handler)
-            return null;
-        return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
-    }, [table]);
-    const headerBelowRow = React.useMemo(() => {
-        if (!(filterable === null || filterable === void 0 ? void 0 : filterable.length))
-            return null;
-        return (_jsx("div", { style: { display: 'grid', gridTemplateColumns, gap: 8 }, children: columnItems
-                .filter(ci => !ci.hidden)
-                .map(ci => {
-                var _a;
-                const id = ci.id;
-                const isFilterable = filterable.includes(id);
-                if (!isFilterable)
-                    return _jsx("div", {}, id);
-                const col = table.getColumn(id);
-                const value = (_a = col === null || col === void 0 ? void 0 : col.getFilterValue()) !== null && _a !== void 0 ? _a : '';
-                return (_jsx("input", { value: value, placeholder: `Filter ${String(ci.header)}`, onChange: e => col === null || col === void 0 ? void 0 : col.setFilterValue(e.target.value), style: { width: '100%', padding: '4px 6px' } }, id));
-            }) }));
-    }, [columnItems, filterable, table, gridTemplateColumns]);
-    return (_jsx(Table, { ...tableProps, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, onSortChange: (col, dir) => {
-            var _a;
-            if (dir == null) {
-                table.setSorting([]);
-                onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(null, null);
-                return;
-            }
-            table.setSorting([{ id: col.id, desc: dir === 'desc' }]);
-            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange((_a = col.id) !== null && _a !== void 0 ? _a : null, dir);
-        }, headerExtras: headerExtras, columnStyles: columnStyles, headerBelowRow: headerBelowRow }));
-}