@addev-be/ui 0.17.3 → 0.18.0

package/dist/components/data/SqlRequestDataGrid/index.js

@@ -67,13 +67,8 @@ var SqlRequestDataGridInner = function (_a, ref) {
     var onSelectionChangeFromProps = _a.onSelectionChange, props = __rest(_a, ["onSelectionChange"]);
     var currentRows = (0, react_1.useRef)([]);
     var _d = (0, react_1.useState)([]), rows = _d[0], setRows = _d[1];
-    var setRowsRef = (0, react_1.useCallback)(function (value) {
-        var newRows = typeof value === 'function' ? value(currentRows.current) : value;
-        currentRows.current = newRows;
-        setRows(newRows);
-    }, []);
     var _e = (0, react_1.useState)(0), start = _e[0], setStart = _e[1];
-    var _f = (0, react_1.useState)(-1), length = _f[0], setLength = _f[1];
+    var _f = (0, react_1.useState)(50), length = _f[0], setLength = _f[1];
     var _g = (0, react_1.useState)(-1), count = _g[0], setCount = _g[1];
     var _h = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _h[0], sqlIdRequest = _h[1], sqlPartialRequest = _h[2];
     var gridRef = (0, react_1.useRef)(null);
@@ -81,31 +76,30 @@ var SqlRequestDataGridInner = function (_a, ref) {
     var _k = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
         var _b, _c, _d;
         var columnKey = _a[0], direction = _a[1];
-        var column = props.columns.find(function (col) { return col.key === columnKey; });
-        return {
-            field: (_c = (_b = column === null || column === void 0 ? void 0 : column.field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
-            type: (_d = column === null || column === void 0 ? void 0 : column.type) !== null && _d !== void 0 ? _d : 'text',
+        return ({
+            field: (_c = (_b = props.columns[columnKey].field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
+            type: (_d = props.columns[columnKey].type) !== null && _d !== void 0 ? _d : 'text',
             direction: direction.toUpperCase(),
-        };
+        });
     })), orderBy = _k[0], setOrderBy = _k[1];
     var _l = (0, react_1.useMemo)(function () {
         var _a, _b;
         return [
-            __spreadArray(__spreadArray([], props.columns.filter(function (col) { return !col.ignore; }).map(function (col) { return col.key; }), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
-            __spreadArray(__spreadArray([], props.columns
-                .filter(function (col) { return !col.ignore; })
-                .filter(helpers_2.isColumnVisible)
-                .map(function (col) { return col.key; }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.columns), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.columns).filter(function (key) {
+                return (0, helpers_2.isColumnVisible)(props.columns[key]);
+            }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
         ];
-    }, [props.columns, props.hiddenColumns]), columns = _l[0], visibleColumnsKeys = _l[1];
+    }, [props.columns, props.hiddenColumns]), columnsKeys = _l[0], visibleColumnsKeys = _l[1];
     var columnTypes = (0, react_1.useMemo)(function () {
-        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.columns.find(function (col) { return col.key === key; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.columns[key]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
     }, [visibleColumnsKeys, props.columns]);
     var refresh = (0, react_1.useCallback)(function () {
-        setRowsRef([]);
+        setRows([]);
         setStart(0);
+        setLength(50);
         setCount(-1);
-    }, [setRowsRef]);
+    }, []);
     var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
         var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
         setConditions(newConditions);
@@ -126,74 +120,64 @@ var SqlRequestDataGridInner = function (_a, ref) {
         if (conditions === void 0) { conditions = []; }
         if (orderBy === void 0) { orderBy = []; }
         if (start === void 0) { start = 0; }
-        if (length === void 0) { length = 0; }
+        if (length === void 0) { length = 100; }
         if (getCount === void 0) { getCount = false; }
-        if (length > 0) {
-            sqlRequest({
-                columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
-                returnColumns: returnColumns.includes('Id')
-                    ? returnColumns
-                    : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
-                columnTypes: columnTypes.includes('Id')
-                    ? columnTypes
-                    : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
-                conditions: conditions,
-                orderBy: orderBy,
-                start: start,
-                length: length,
-                getCount: getCount,
-            }).then(function (response) {
-                var _a;
-                var _b, _c;
-                if (getCount) {
-                    currentRows.current = Array(response.count).fill(null);
-                    if (getCount)
-                        setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
-                }
-                var data = (_c = response.data) !== null && _c !== void 0 ? _c : [];
-                var rowsFromData = props.parser
-                    ? data.map(props.parser)
-                    : data;
-                var rowsToReplace = currentRows.current
-                    .slice(start, start + length)
-                    .map(function (row, i) { return (!row ? rowsFromData[i] : row); });
-                (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], rowsToReplace, false));
-                setRowsRef(__spreadArray([], currentRows.current, true));
-            });
-        }
+        sqlRequest({
+            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+            returnColumns: returnColumns.includes('Id')
+                ? returnColumns
+                : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+            columnTypes: columnTypes.includes('Id')
+                ? columnTypes
+                : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
+            conditions: conditions,
+            orderBy: orderBy,
+            start: start,
+            length: length,
+            getCount: getCount,
+        }).then(function (response) {
+            var _a;
+            var _b;
+            if (getCount) {
+                currentRows.current = Array(response.count).fill(null);
+                if (getCount)
+                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+            }
+            var parsedRows = props.parser
+                ? response.data.map(props.parser)
+                : response.data;
+            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
+            setRows(__spreadArray([], currentRows.current, true));
+        });
     }, 100, {
         leading: true,
         trailing: true,
     }));
     var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        var column = props.columns.find(function (col) { return col.key === columnKey; });
-        if (!column) {
-            return Promise.resolve([]);
-        }
         return sqlRequest({
-            columns: columns,
+            columns: columnsKeys,
             returnColumns: [columnKey],
-            columnTypes: [(_a = column.type) !== null && _a !== void 0 ? _a : 'text'],
+            columnTypes: [(_a = props.columns[columnKey].type) !== null && _a !== void 0 ? _a : 'text'],
             conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
             orderBy: [
                 {
-                    field: (_g = (_e = (_c = column.filterField) !== null && _c !== void 0 ? _c : (_d = column.field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = column.field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,
-                    type: (_h = column.type) !== null && _h !== void 0 ? _h : 'text',
+                    field: (_g = (_e = (_c = props.columns[columnKey].filterField) !== null && _c !== void 0 ? _c : (_d = props.columns[columnKey].field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = props.columns[columnKey].field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,
+                    type: (_h = props.columns[columnKey].type) !== null && _h !== void 0 ? _h : 'text',
                     direction: 'ASC',
                 },
             ],
             getCount: false,
             unique: true,
         }).then(function (response) {
-            return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
+            return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = props.columns[columnKey].filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
         });
-    }, [columns, conditions, props.columns, props.conditions, sqlRequest]);
+    }, [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        if ((!rows.length && count < 0) ||
+        if (!rows.length ||
             rows.slice(start, start + length).some(function (row) { return row === null; })) {
-            loadRows.current(columns, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, count < 0);
+            loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, count < 0);
         }
     }, [
         props.columns,
@@ -203,14 +187,14 @@ var SqlRequestDataGridInner = function (_a, ref) {
         length,
         count,
         props.conditions,
-        columns,
+        columnsKeys,
         visibleColumnsKeys,
         rows,
     ]);
     var loadCopyRows = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlRequest({
-            columns: columns,
+            columns: columnsKeys,
             returnColumns: visibleColumnsKeys,
             columnTypes: columnTypes,
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
@@ -222,7 +206,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
         });
     }, [
         sqlRequest,
-        columns,
+        columnsKeys,
         visibleColumnsKeys,
         columnTypes,
         props.conditions,
@@ -234,7 +218,9 @@ var SqlRequestDataGridInner = function (_a, ref) {
     var loadAllIds = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlIdRequest({
-            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+            columns: columnsKeys.includes('Id')
+                ? columnsKeys
+                : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
             returnColumns: ['Id'],
             columnTypes: ['text'],
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
@@ -242,7 +228,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
             start: 0,
             length: count,
         }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
-    }, [columns, conditions, orderBy, props.conditions, sqlIdRequest, count]);
+    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
             setStart(newStart);
@@ -263,7 +249,9 @@ var SqlRequestDataGridInner = function (_a, ref) {
         }
         else {
             sqlPartialRequest({
-                columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+                columns: columnsKeys.includes('Id')
+                    ? columnsKeys
+                    : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
                 returnColumns: [],
                 columnTypes: [],
                 totalColumns: footers,
@@ -272,7 +260,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
             }).then(function (response) { var _a; return setFooterData((_a = response.totals) !== null && _a !== void 0 ? _a : {}); });
         }
     }, [
-        columns,
+        columnsKeys,
         conditions,
         footers,
         orderBy,
@@ -288,7 +276,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
             : Object.entries(footers).reduce(function (acc, _a) {
                 var _b, _c;
                 var columnKey = _a[0], footerKey = _a[1];
-                var column = props.columns.find(function (col) { return col.key === columnKey; });
+                var column = props.columns[columnKey];
                 var footerFunc = typeof (column === null || column === void 0 ? void 0 : column.footer) === 'function'
                     ? column.footer
                     : (_b = column === null || column === void 0 ? void 0 : column.footer) === null || _b === void 0 ? void 0 : _b[footerKey];
@@ -307,9 +295,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
         footers: footers,
         setFooters: setFooters,
         footerFunctions: footerFunctions,
-        rows: rows,
-        setRows: setRowsRef,
-    }); }, [footerFunctions, footers, rows, setRowsRef]);
+    }); }, [footers, setFooters, footerFunctions]);
     (0, react_1.useImperativeHandle)(ref, function () {
         var _a, _b;
         return ({

package/dist/components/data/SqlRequestDataGrid/types.d.ts

@@ -1,26 +1,16 @@
 import { ConditionDTO, FieldDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
-import { DataGridCheckboxColumn, DataGridDateColumn, DataGridFilter, DataGridFilterType, DataGridNumberColumn, DataGridProps, DataGridTextColumn, EditableDataGridColumn } from '../DataGrid/types';
-import { SqlRequestForeignListProps } from '../SqlRequestForeignList/types';
+import { DataGridColumn, DataGridFilter, DataGridFilterType, DataGridProps } from '../DataGrid/types';
 export type SqlRequestDataGridFilter<T extends DataGridFilterType = DataGridFilterType> = DataGridFilter<T> & {
     field?: FieldDTO;
 };
 export type SqlRequestDataGridFilters = Record<string, SqlRequestDataGridFilter>;
-export type SqlRequestDataGridCommonProps = {
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
     filter?: SqlRequestDataGridFilter;
     field?: FieldDTO;
     filterField?: string;
     sortField?: string;
-    ignore?: boolean;
 };
-export type SqlRequestDataGridTextColumn<R> = DataGridTextColumn<R> & SqlRequestDataGridCommonProps;
-export type SqlRequestDataGridNumberColumn<R> = DataGridNumberColumn<R> & SqlRequestDataGridCommonProps;
-export type SqlRequestDataGridCheckboxColumn<R> = DataGridCheckboxColumn<R> & SqlRequestDataGridCommonProps;
-export type SqlRequestDataGridDateColumn<R> = DataGridDateColumn<R> & SqlRequestDataGridCommonProps;
-export type SqlRequestDataGridForeignListColumn<R, T> = {
-    type: 'foreignList';
-} & SqlRequestForeignListProps<T> & EditableDataGridColumn<R, T> & SqlRequestDataGridCommonProps;
-export type SqlRequestDataGridColumn<R> = SqlRequestDataGridTextColumn<R> | SqlRequestDataGridNumberColumn<R> | SqlRequestDataGridCheckboxColumn<R> | SqlRequestDataGridDateColumn<R> | SqlRequestDataGridForeignListColumn<R, any>;
-export type SqlRequestDataGridColumns<R> = SqlRequestDataGridColumn<R>[];
+export type SqlRequestDataGridColumns<R> = Record<string, SqlRequestDataGridColumn<R>>;
 export type SqlRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows' | 'columns'> & {
     columns: SqlRequestDataGridColumns<R>;
     hiddenColumns?: string[];

package/dist/components/data/SqlRequestDataGrid/types.js

@@ -1,3 +1,2 @@
 "use strict";
-/* eslint-disable @typescript-eslint/no-explicit-any */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/data/SqlRequestGrid/index.d.ts

@@ -1,4 +1,4 @@
 import { ForwardedRef } from 'react';
 import { SqlRequestGridProps, SqlRequestGridRefProps } from './types';
-export declare const SqlRequestGridInner: <R, P extends object = {}>(allProps: SqlRequestGridProps<R, P>, ref: ForwardedRef<SqlRequestGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestGridInner: <R, P extends object = {}>({ rowHeight, itemsPerRow, itemTemplate, itemProps, gap, ...props }: SqlRequestGridProps<R, P>, ref: ForwardedRef<SqlRequestGridRefProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const SqlRequestGrid: <R, P extends object = {}>(props: SqlRequestGridProps<R, P> & import("react").RefAttributes<SqlRequestGridRefProps>) => import("react").JSX.Element | null;

package/dist/components/data/SqlRequestGrid/index.js

@@ -48,49 +48,29 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var sqlRequests_1 = require("../../../services/sqlRequests");
 var react_1 = require("react");
-var lodash_1 = require("lodash");
-var Icons_1 = require("../../../Icons");
-var FiltersSidebar_1 = require("./filters/FiltersSidebar");
-var forms_1 = require("../../forms");
 var VirtualScroller_1 = require("../VirtualScroller");
-var helpers_1 = require("./helpers");
-var helpers_2 = require("../DataGrid/helpers");
-var hooks_1 = require("../DataGrid/hooks");
+var lodash_1 = require("lodash");
+var helpers_1 = require("../DataGrid/helpers");
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-var SqlRequestGridInner = function (allProps, ref) {
-    var _a;
-    var _b = allProps.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, itemsPerRow = allProps.itemsPerRow, itemTemplate = allProps.itemTemplate, itemProps = allProps.itemProps, gap = allProps.gap, props = __rest(allProps, ["rowHeight", "itemsPerRow", "itemTemplate", "itemProps", "gap"]);
+var SqlRequestGridInner = function (_a, ref) {
+    var _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, itemsPerRow = _a.itemsPerRow, itemTemplate = _a.itemTemplate, itemProps = _a.itemProps, gap = _a.gap, props = __rest(_a, ["rowHeight", "itemsPerRow", "itemTemplate", "itemProps", "gap"]);
     var currentRows = (0, react_1.useRef)([]);
     var _c = (0, react_1.useState)([]), rows = _c[0], setRows = _c[1];
     var _d = (0, react_1.useState)(0), start = _d[0], setStart = _d[1];
-    var _e = (0, react_1.useState)(-1), length = _e[0], setLength = _e[1];
+    var _e = (0, react_1.useState)(50), length = _e[0], setLength = _e[1];
     var _f = (0, react_1.useState)(-1), count = _f[0], setCount = _f[1];
     var sqlRequest = (0, sqlRequests_1.useSqlRequestHandler)(props.type)[0];
-    var _g = (0, react_1.useState)({}), conditions = _g[0], setConditions = _g[1];
-    var _h = (0, react_1.useState)(Object.entries((_a = props.initialSorts) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
-        var _b, _c, _d;
-        var columnKey = _a[0], direction = _a[1];
-        var field = props.fields.find(function (field) { return field.key === columnKey; });
-        return {
-            field: (_c = (_b = field === null || field === void 0 ? void 0 : field.field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
-            type: (_d = field === null || field === void 0 ? void 0 : field.type) !== null && _d !== void 0 ? _d : 'text',
-            direction: direction.toUpperCase(),
-        };
-    })), orderBy = _h[0], setOrderBy = _h[1];
-    var _j = (0, react_1.useMemo)(function () {
+    var _g = (0, react_1.useMemo)(function () {
         var _a, _b;
         return [
-            __spreadArray(__spreadArray([], props.fields
-                .filter(function (field) { return !field.ignore; })
-                .map(function (field) { return field.key; }), true), ((_a = props.additionalFields) !== null && _a !== void 0 ? _a : []), true),
-            __spreadArray(__spreadArray([], props.fields
-                .filter(function (field) { return !field.ignore; })
-                .filter(helpers_2.isColumnVisible)
-                .map(function (field) { return field.key; }), true), ((_b = props.additionalFields) !== null && _b !== void 0 ? _b : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.fields), true), ((_a = props.additionalFields) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.fields).filter(function (key) {
+                return (0, helpers_1.isColumnVisible)(props.fields[key]);
+            }), true), ((_b = props.additionalFields) !== null && _b !== void 0 ? _b : []), true),
         ];
-    }, [props.fields, props.additionalFields]), columnsKeys = _j[0], visibleColumnsKeys = _j[1];
+    }, [props.fields, props.additionalFields]), columnsKeys = _g[0], visibleColumnsKeys = _g[1];
     var columnTypes = (0, react_1.useMemo)(function () {
-        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.fields.find(function (field) { return field.key === key; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.fields[key]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
     }, [visibleColumnsKeys, props.fields]);
     var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getCount) {
         if (conditions === void 0) { conditions = []; }
@@ -98,101 +78,51 @@ var SqlRequestGridInner = function (allProps, ref) {
         if (start === void 0) { start = 0; }
         if (length === void 0) { length = 100; }
         if (getCount === void 0) { getCount = false; }
-        if (length > 0) {
-            sqlRequest({
-                columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
-                returnColumns: returnColumns.includes('Id')
-                    ? returnColumns
-                    : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
-                columnTypes: columnTypes.includes('Id')
-                    ? columnTypes
-                    : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
-                conditions: conditions,
-                orderBy: orderBy,
-                start: start,
-                length: length,
-                getCount: getCount,
-            }).then(function (response) {
-                var _a;
-                var _b, _c;
-                if (getCount) {
-                    currentRows.current = Array(response.count).fill(null);
-                    if (getCount)
-                        setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
-                }
-                var data = (_c = response.data) !== null && _c !== void 0 ? _c : [];
-                var parsedRows = props.parser
-                    ? data.map(props.parser)
-                    : data;
-                (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
-                setRows(__spreadArray([], currentRows.current, true));
-            });
-        }
+        sqlRequest({
+            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+            returnColumns: returnColumns.includes('Id')
+                ? returnColumns
+                : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+            columnTypes: columnTypes.includes('Id')
+                ? columnTypes
+                : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
+            conditions: conditions,
+            orderBy: orderBy,
+            start: start,
+            length: length,
+            getCount: getCount,
+        }).then(function (response) {
+            var _a;
+            var _b;
+            if (getCount) {
+                currentRows.current = Array(response.count).fill(null);
+                if (getCount)
+                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+            }
+            var parsedRows = props.parser
+                ? response.data.map(props.parser)
+                : response.data;
+            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
+            setRows(__spreadArray([], currentRows.current, true));
+        });
     }, 100, {
         leading: true,
         trailing: true,
     }));
-    var refresh = (0, react_1.useCallback)(function () {
-        setRows([]);
-        setStart(0);
-        setCount(-1);
-    }, []);
-    var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
-        var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
-        setConditions(newConditions);
-        refresh();
-    }, [refresh]);
-    var onSortsChanged = (0, react_1.useCallback)(function (sorts) {
-        refresh();
-        var newOrderBy = Object.entries(sorts).map(function (_a) {
-            var columnKey = _a[0], direction = _a[1];
-            return ({
-                field: columnKey,
-                direction: direction.toUpperCase(),
-            });
-        });
-        setOrderBy(newOrderBy);
-    }, [refresh]);
-    var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var field = props.fields.find(function (field) { return field.key === columnKey; });
-        if (!field)
-            return Promise.resolve([]);
-        return sqlRequest({
-            columns: columnsKeys,
-            returnColumns: [columnKey],
-            // columnTypes: [field.type ?? 'text'],
-            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values((0, lodash_1.pickBy)(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
-            orderBy: [
-                {
-                    field: (_f = (_d = (_b = field.filterField) !== null && _b !== void 0 ? _b : (_c = field.field) === null || _c === void 0 ? void 0 : _c.fieldAlias) !== null && _d !== void 0 ? _d : (_e = field.field) === null || _e === void 0 ? void 0 : _e.fieldName) !== null && _f !== void 0 ? _f : columnKey,
-                    type: (_g = field.type) !== null && _g !== void 0 ? _g : 'text',
-                    direction: 'ASC',
-                },
-            ],
-            getCount: false,
-            unique: true,
-        }).then(function (response) {
-            return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = field.filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
-        });
-    }, [columnsKeys, conditions, props.fields, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
-        var _a;
-        if ((!rows.length && count < 0) ||
+        if (!rows.length ||
             rows.slice(start, start + length).some(function (row) { return row === null; })) {
-            loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values(conditions), true), orderBy, start, length, count < 0);
+            loadRows.current(columnsKeys, visibleColumnsKeys, [], [], start, length, count < 0);
         }
     }, [
         props.fields,
         start,
         length,
         count,
-        conditions,
+        props.conditions,
         columnsKeys,
         visibleColumnsKeys,
         rows,
-        orderBy,
-        props.conditions,
     ]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
@@ -200,36 +130,16 @@ var SqlRequestGridInner = function (allProps, ref) {
             setLength(newLength);
         }
     }, [length, start]);
+    var refresh = (0, react_1.useCallback)(function () {
+        setRows([]);
+        setStart(0);
+        setLength(50);
+        setCount(-1);
+    }, []);
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         refresh: refresh,
     }); }, [refresh]);
-    var _k = (0, hooks_1.useDataGrid)({
-        columns: props.fields,
-        rows: rows,
-        onFiltersChanged: onFiltersChanged,
-        filterValuesLoader: loadFilterValues,
-        onSortsChanged: onSortsChanged,
-        onSelectionChange: function () { },
-        onSelectedRowsChanged: function () { },
-        selectable: false,
-        rowKey: function () { return ''; },
-        filter: false,
-        sort: false,
-    }), contextProps = _k[0], DataGridContext = _k[1];
-    var _l = (0, react_1.useState)(false), sidebarVisible = _l[0], setSidebarVisible = _l[1];
-    var onSidebarClose = (0, react_1.useCallback)(function () {
-        setSidebarVisible(false);
-    }, []);
-    var onClearFilters = (0, react_1.useCallback)(function () {
-        onFiltersChanged({});
-        setSidebarVisible(false);
-    }, [onFiltersChanged]);
-    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.SqlRequestGridContainer, { children: [sidebarVisible ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FiltersSidebar_1.FiltersSidebar, { props: allProps, context: DataGridContext, onClose: onSidebarClose, onClearFilters: onClearFilters }) })) : ((0, jsx_runtime_1.jsx)(forms_1.IconButton, { size: "large", onClick: function () { return setSidebarVisible(true); }, icon: Icons_1.FilterFullIcon, color: "primary", rounded: true, style: {
-                        position: 'absolute',
-                        bottom: 'var(--space-2)',
-                        right: 'var(--space-2)',
-                        zIndex: 1,
-                    } })), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: "repeat(".concat(itemsPerRow, ", 1fr)"), items: rows, itemTemplate: itemTemplate, itemsPerRow: itemsPerRow, itemProps: itemProps, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChanged, gap: gap })] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles.SqlRequestGridContainer, { children: (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: "repeat(".concat(itemsPerRow, ", 1fr)"), items: rows, itemTemplate: itemTemplate, itemsPerRow: itemsPerRow, itemProps: itemProps, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChanged, gap: gap }) }));
 };
 exports.SqlRequestGridInner = SqlRequestGridInner;
 exports.SqlRequestGrid = (0, react_1.forwardRef)(exports.SqlRequestGridInner);

package/dist/components/data/SqlRequestGrid/styles.d.ts

@@ -2,3 +2,15 @@ export declare const DEFAULT_ROW_HEIGHT = 200;
 export declare const SqlRequestGridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, never>, never>> & string;
+export declare const TopPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BottomPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height: number;
+}>> & string;
+export declare const VirtualScrollerRowsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
+    $gridTemplateColumns: string;
+    $topPadding: number;
+    $rowHeight?: number;
+}>, never>> & string;

package/dist/components/data/SqlRequestGrid/styles.js

@@ -7,11 +7,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SqlRequestGridContainer = exports.DEFAULT_ROW_HEIGHT = void 0;
-var styles_1 = require("../VirtualScroller/styles");
+exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.SqlRequestGridContainer = exports.DEFAULT_ROW_HEIGHT = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DEFAULT_ROW_HEIGHT = 200;
 exports.SqlRequestGridContainer = styled_components_1.default.div.attrs({
     className: 'SqlRequestGridContainer',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  position: relative;\n\n  ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  position: relative;\n\n  ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n"])), styles_1.VirtualScrollerContainer);
-var templateObject_1;
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n"])));
+exports.TopPaddingRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+exports.BottomPaddingRow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+exports.VirtualScrollerContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"], ["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return "".concat($height, "px");
+});
+exports.VirtualScrollerRowsContainer = styled_components_1.default.div.attrs(function (_a) {
+    var $gridTemplateColumns = _a.$gridTemplateColumns, $topPadding = _a.$topPadding, _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
+    var rowHeightValue = "".concat($rowHeight, "px");
+    return {
+        style: {
+            top: "".concat($topPadding, "px"),
+            gridTemplateColumns: $gridTemplateColumns,
+            gridAutoRows: rowHeightValue,
+        },
+    };
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), exports.TopPaddingRow, exports.BottomPaddingRow);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;