tycho-components 0.0.17-SNAPSHOT-12 → 0.0.17-SNAPSHOT-14

package/dist/AppPagination/AppPagination.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, MenuItem } from '@mui/material';
+import { MenuItem, Select } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { IconButton } from 'tycho-storybook';
 import './styles.scss';

package/dist/AppTable/AppTable.d.ts

@@ -1,16 +1,18 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
 import './styles.scss';
 import { AppPage } from './types/AppPage';
-import { AppPageable } from './types/AppPageable';
 type Props = {
     columns: any;
     data: AppPage<any>;
-    pageable: AppPageable;
-    setPageable: (p: AppPageable) => void;
+    pagination: PaginationState;
+    setPagination: (p: PaginationState) => void;
+    sorting: SortingState;
+    setSorting: (s: SortingState) => void;
     className?: string;
     onClickRow?: (row: any, col: any) => void;
     onMouseEnter?: (row: any) => void;
     onMouseLeave?: (row: any) => void;
     hiddenColumns?: string[];
 };
-export default function AppTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, pageable, setPageable, hiddenColumns, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppTable/AppTable.js

@@ -8,17 +8,12 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import AppPagination from '../AppPagination';
 import { tableTheme } from './AppTableTheme';
 import './styles.scss';
-import DateUtils from '../functions/DateUtils';
-export default function AppTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, pageable, setPageable, hiddenColumns, }) {
+export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }) {
     const { content, totalPages, totalElements } = data;
-    const [pagination, setPagination] = useState({
-        pageIndex: pageable.page,
-        pageSize: pageable.size,
-    });
     const columnVisibility = hiddenColumns?.reduce((acc, col) => {
         acc[col] = false;
         return acc;
@@ -28,8 +23,8 @@ export default function AppTable({ columns, data, className, onClickRow, onMouse
         columns,
         pageCount: totalPages,
         state: {
-            pagination: { pageIndex: pageable.page, pageSize: pageable.size },
-            sorting: pageable.sort || [],
+            pagination,
+            sorting,
             columnVisibility,
         },
         manualPagination: true,
@@ -39,28 +34,13 @@ export default function AppTable({ columns, data, className, onClickRow, onMouse
         getSortedRowModel: getSortedRowModel(),
     });
     useEffect(() => {
-        const sort = table.getState().sorting.length > 0
-            ? table.getState().sorting
-            : undefined;
-        if (pageable.size !== pagination.pageSize) {
-            setPagination({ pageSize: pagination.pageSize, pageIndex: 0 });
-            setPageable({
-                size: pagination.pageSize,
-                page: 0,
-                sort,
-                seed: DateUtils.millis(),
-            });
-        }
-        else if (pageable.page !== pagination.pageIndex ||
-            pageable.sort !== sort) {
-            setPageable({
-                size: pagination.pageSize,
-                page: pagination.pageIndex,
-                sort,
-                seed: DateUtils.millis(),
-            });
+        const currentSorting = table.getState().sorting;
+        if (currentSorting &&
+            sorting &&
+            JSON.stringify(currentSorting) !== JSON.stringify(sorting)) {
+            setSorting(currentSorting);
         }
-    }, [pagination, table.getState().sorting]);
+    }, [table, sorting]);
     return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsxs(Paper, { className: `ds-table ${className}`, children: [_jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsxs(TableCell, { onClick: header.column.getToggleSortingHandler(), style: { width: `${header.column.columnDef.size}%` }, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted()
                                                 ? header.column.getIsSorted() === 'desc'
                                                     ? ' 🔽'

package/dist/AppTable/types/AppPageable.d.ts

@@ -4,18 +4,12 @@ export type AppPageable = {
     size: number;
     seed?: number;
     sort?: SortingState;
-    filter?: any;
 };
-export declare const EMPTY_PAGEABLE: {
+export declare const EMPTY_PAGEABLE: AppPageable;
+export declare const EMPTY_GRID_PAGEABLE: AppPageable;
+export declare function convertPageable(pageable: AppPageable): {
+    sort: string;
     page: number;
     size: number;
-    seed: number;
-    filter: {};
-};
-export declare const EMPTY_GRID_PAGEABLE: {
-    page: number;
-    size: number;
-    seed: number;
-    filter: {};
+    seed?: number;
 };
-export declare function convertPageable(pageable: AppPageable): any;

package/dist/AppTable/types/AppPageable.js

@@ -2,25 +2,18 @@ export const EMPTY_PAGEABLE = {
     page: 0,
     size: 10,
     seed: 1,
-    filter: {},
 };
 export const EMPTY_GRID_PAGEABLE = {
     page: 0,
     size: 12,
     seed: 1,
-    filter: {},
 };
 export function convertPageable(pageable) {
-    const request = {
-        page: pageable.page,
-        size: pageable.size,
-    };
+    const sort = [];
     if (pageable.sort) {
-        const sort = [];
         pageable.sort.forEach((item, index) => {
             sort.push(`${item.id},${item.desc ? 'desc' : 'asc'}`);
         });
-        request.sort = sort;
     }
-    return request;
+    return { ...pageable, sort: sort.join(',') };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.17-SNAPSHOT-12",
+  "version": "0.0.17-SNAPSHOT-14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {