@addev-be/ui 0.6.0 → 0.6.2

package/src/components/data/SqlRequestGrid/helpers/sqlRequests.ts

@@ -1,16 +1,16 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { ConditionDTO } from '../../../../services/sqlRequests';
-import { SqlRequestDataGridFilters } from '../types';
-import _ from 'lodash';
-
-export const convertSqlFiltersToConditions = (
-  filters: SqlRequestDataGridFilters
-): Record<string, ConditionDTO> =>
-  _.mapValues(filters, (filter, columnKey) => ({
-    field: columnKey,
-    operator: filter.operator as any,
-    value: ['inArray', 'inRange'].includes(filter.operator)
-      ? filter.values
-      : _.castArray<string | number | null>(filter.values)[0],
-  }));
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../types';
+import _ from 'lodash';
+
+export const convertSqlFiltersToConditions = (
+  filters: SqlRequestDataGridFilters
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columnKey,
+    operator: filter.operator as any,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));

package/src/components/data/SqlRequestGrid/index.tsx

@@ -1,138 +1,141 @@
-import * as styles from './styles';
-
-import {
-  ConditionDTO,
-  OrderByDTO,
-  useSqlRequestHandler,
-} from '../../../services/sqlRequests';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { SqlRequestGridProps } from './types';
-import { VirtualScroller } from '../VirtualScroller';
-import { debounce } from 'lodash';
-import { isColumnVisible } from '../DataGrid/helpers';
-
-export const SqlRequestGrid = <R,>({
-  rowHeight = styles.DEFAULT_ROW_HEIGHT,
-  itemsPerRow,
-  itemTemplate,
-  gap,
-  ...props
-}: SqlRequestGridProps<R>) => {
-  const currentRows = useRef<R[]>([]);
-  const [rows, setRows] = useState<R[]>([]);
-  const [start, setStart] = useState(0);
-  const [length, setLength] = useState(50);
-  const [count, setCount] = useState(-1);
-  const [sqlRequest] = useSqlRequestHandler<R>(props.type);
-
-  const [columnsKeys, visibleColumnsKeys] = useMemo(
-    () => [
-      [...Object.keys(props.fields), ...(props.additionalFields ?? [])],
-      [
-        ...Object.keys(props.fields).filter((key) =>
-          isColumnVisible(props.fields[key])
-        ),
-        ...(props.additionalFields ?? []),
-      ],
-    ],
-    [props.fields, props.additionalFields]
-  );
-  const columnTypes = useMemo(
-    () =>
-      visibleColumnsKeys.map((key) =>
-        String(props.fields[key]?.type ?? 'text')
-      ),
-    [visibleColumnsKeys, props.fields]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: string[],
-        returnColumns: string[],
-        conditions: ConditionDTO[] = [],
-        orderBy: OrderByDTO[] = [],
-        start = 0,
-        length = 100,
-        getCount = false
-      ) => {
-        sqlRequest({
-          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
-          returnColumns: returnColumns.includes('Id')
-            ? returnColumns
-            : [...returnColumns, 'Id'],
-          columnTypes: columnTypes.includes('Id')
-            ? columnTypes
-            : [...columnTypes, 'Id'],
-          conditions,
-          orderBy,
-          start,
-          length,
-          getCount,
-        }).then((response) => {
-          if (getCount) {
-            currentRows.current = Array(response.count).fill(null);
-            if (getCount) setCount(response.count ?? 0);
-          }
-          const parsedRows = props.parser
-            ? response.data.map(props.parser)
-            : (response.data as R[]);
-          currentRows.current.splice(start, length, ...parsedRows);
-          setRows([...currentRows.current]);
-        });
-      },
-      100,
-      {
-        leading: true,
-        trailing: true,
-      }
-    )
-  );
-
-  useEffect(
-    () =>
-      loadRows.current(
-        columnsKeys,
-        visibleColumnsKeys,
-        [],
-        [],
-        start,
-        length,
-        count < 0
-      ),
-    [
-      props.fields,
-      start,
-      length,
-      count,
-      props.conditions,
-      columnsKeys,
-      visibleColumnsKeys,
-    ]
-  );
-
-  const onVisibleRowsChanged = useCallback(
-    (newStart: number, newLength: number) => {
-      if (newStart !== start || newLength !== length) {
-        setStart(newStart);
-        setLength(newLength);
-      }
-    },
-    [length, start]
-  );
-
-  return (
-    <styles.SqlRequestGridContainer>
-      <VirtualScroller
-        gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
-        items={rows}
-        itemTemplate={itemTemplate}
-        itemsPerRow={itemsPerRow}
-        rowHeightInPx={rowHeight}
-        onRangeChanged={onVisibleRowsChanged}
-        gap={gap}
-      />
-    </styles.SqlRequestGridContainer>
-  );
-};
+import * as styles from './styles';
+
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { SqlRequestGridProps } from './types';
+import { VirtualScroller } from '../VirtualScroller';
+import { debounce } from 'lodash';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export const SqlRequestGrid = <R, P extends object = {}>({
+  rowHeight = styles.DEFAULT_ROW_HEIGHT,
+  itemsPerRow,
+  itemTemplate,
+  itemProps,
+  gap,
+  ...props
+}: SqlRequestGridProps<R, P>) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(50);
+  const [count, setCount] = useState(-1);
+  const [sqlRequest] = useSqlRequestHandler<R>(props.type);
+
+  const [columnsKeys, visibleColumnsKeys] = useMemo(
+    () => [
+      [...Object.keys(props.fields), ...(props.additionalFields ?? [])],
+      [
+        ...Object.keys(props.fields).filter((key) =>
+          isColumnVisible(props.fields[key])
+        ),
+        ...(props.additionalFields ?? []),
+      ],
+    ],
+    [props.fields, props.additionalFields]
+  );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.fields[key]?.type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.fields]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: string[],
+        returnColumns: string[],
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        getCount = false
+      ) => {
+        sqlRequest({
+          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
+          returnColumns: returnColumns.includes('Id')
+            ? returnColumns
+            : [...returnColumns, 'Id'],
+          columnTypes: columnTypes.includes('Id')
+            ? columnTypes
+            : [...columnTypes, 'Id'],
+          conditions,
+          orderBy,
+          start,
+          length,
+          getCount,
+        }).then((response) => {
+          if (getCount) {
+            currentRows.current = Array(response.count).fill(null);
+            if (getCount) setCount(response.count ?? 0);
+          }
+          const parsedRows = props.parser
+            ? response.data.map(props.parser)
+            : (response.data as R[]);
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        columnsKeys,
+        visibleColumnsKeys,
+        [],
+        [],
+        start,
+        length,
+        count < 0
+      ),
+    [
+      props.fields,
+      start,
+      length,
+      count,
+      props.conditions,
+      columnsKeys,
+      visibleColumnsKeys,
+    ]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  return (
+    <styles.SqlRequestGridContainer>
+      <VirtualScroller
+        gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
+        items={rows}
+        itemTemplate={itemTemplate}
+        itemsPerRow={itemsPerRow}
+        itemProps={itemProps}
+        rowHeightInPx={rowHeight}
+        onRangeChanged={onVisibleRowsChanged}
+        gap={gap}
+      />
+    </styles.SqlRequestGridContainer>
+  );
+};

package/src/components/data/SqlRequestGrid/styles.ts

@@ -1,50 +1,50 @@
-import styled from 'styled-components';
-
-export const DEFAULT_ROW_HEIGHT = 200;
-
-export const SqlRequestGridContainer = styled.div.attrs({
-  className: 'SqlRequestGridContainer',
-})`
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-`;
-
-export const TopPaddingRow = styled.div``;
-export const BottomPaddingRow = styled.div``;
-
-export const VirtualScrollerContainer = styled.div<{
-  $height: number;
-}>`
-  position: relative;
-  overflow: visible;
-  height: ${({ $height }) => `${$height}px`};
-`;
-export const VirtualScrollerRowsContainer = styled.div.attrs<{
-  $gridTemplateColumns: string;
-  $topPadding: number;
-  $rowHeight?: number;
-}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
-  const rowHeightValue = `${$rowHeight}px`;
-  return {
-    style: {
-      top: `${$topPadding}px`,
-      gridTemplateColumns: $gridTemplateColumns,
-      gridAutoRows: rowHeightValue,
-    },
-  };
-})`
-  display: grid;
-  position: absolute;
-
-  ${TopPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 1;
-  }
-  ${BottomPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: -1;
-  }
-`;
+import styled from 'styled-components';
+
+export const DEFAULT_ROW_HEIGHT = 200;
+
+export const SqlRequestGridContainer = styled.div.attrs({
+  className: 'SqlRequestGridContainer',
+})`
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+`;
+
+export const TopPaddingRow = styled.div``;
+export const BottomPaddingRow = styled.div``;
+
+export const VirtualScrollerContainer = styled.div<{
+  $height: number;
+}>`
+  position: relative;
+  overflow: visible;
+  height: ${({ $height }) => `${$height}px`};
+`;
+export const VirtualScrollerRowsContainer = styled.div.attrs<{
+  $gridTemplateColumns: string;
+  $topPadding: number;
+  $rowHeight?: number;
+}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
+  const rowHeightValue = `${$rowHeight}px`;
+  return {
+    style: {
+      top: `${$topPadding}px`,
+      gridTemplateColumns: $gridTemplateColumns,
+      gridAutoRows: rowHeightValue,
+    },
+  };
+})`
+  display: grid;
+  position: absolute;
+
+  ${TopPaddingRow} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 1;
+  }
+  ${BottomPaddingRow} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: -1;
+  }
+`;

package/src/components/data/SqlRequestGrid/types.ts

@@ -1,43 +1,46 @@
-import {
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-  SqlRequestRow,
-} from '../../../services/sqlRequests';
-import {
-  DataGridColumn,
-  DataGridFilter,
-  DataGridFilterType,
-} from '../DataGrid/types';
-
-import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
-
-export type SqlRequestGridFilter<
-  T extends DataGridFilterType = DataGridFilterType
-> = DataGridFilter<T> & {
-  field?: FieldDTO;
-};
-
-export type SqlRequestGridFilters = Record<string, SqlRequestGridFilter>;
-
-export type SqlRequestGridColumn<R> = DataGridColumn<R> & {
-  filter?: SqlRequestGridFilter;
-  field?: FieldDTO;
-  filterField?: string;
-  sortField?: string;
-};
-
-export type SqlRequestGridColumns<R> = Record<string, SqlRequestGridColumn<R>>;
-
-export type SqlRequestGridProps<R> = {
-  itemTemplate: VirtualScrollerTemplateFC<R>;
-  itemsPerRow?: number;
-  rowHeight?: number;
-  gap?: string;
-  fields: SqlRequestGridColumns<R>;
-  additionalFields?: string[];
-  type: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  parser?: (row: SqlRequestRow<R>) => R;
-};
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+} from '../DataGrid/types';
+
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+
+export type SqlRequestGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestGridFilters = Record<string, SqlRequestGridFilter>;
+
+export type SqlRequestGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestGridColumns<R> = Record<string, SqlRequestGridColumn<R>>;
+
+export type SqlRequestGridProps<R, P extends object = {}> = {
+  itemTemplate: VirtualScrollerTemplateFC<R, P>;
+  itemsPerRow?: number;
+  rowHeight?: number;
+  gap?: string;
+  fields: SqlRequestGridColumns<R>;
+  additionalFields?: string[];
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+  itemProps: P;
+};

package/src/components/data/VirtualScroller/hooks.ts

@@ -1,71 +1,71 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useElementSize } from '../../../hooks';
-
-export const VIRTUAL_SCROLL_TOLERANCE = 20;
-
-type VirtualScrollingProps<R> = {
-  scrollableElement: HTMLElement | null;
-  rowHeightInPx: number;
-  items: R[];
-  itemsPerRow?: number;
-  tolerance?: number;
-};
-
-export const useVirtualScrolling = <R>({
-  scrollableElement,
-  rowHeightInPx,
-  items,
-  itemsPerRow = 1,
-  tolerance = VIRTUAL_SCROLL_TOLERANCE,
-}: VirtualScrollingProps<R>) => {
-  const { height } = useElementSize(scrollableElement);
-
-  const [scrollTop, setScrollTop] = useState(0);
-  const [rowIndex, rowLength] = [
-    Math.floor(scrollTop / rowHeightInPx),
-    Math.ceil(height / rowHeightInPx),
-  ];
-  const [index, length] = [rowIndex * itemsPerRow, rowLength * itemsPerRow];
-  const rowTolerance = Math.ceil(tolerance / itemsPerRow);
-
-  const totalRows = Math.ceil((items?.length ?? 0) / itemsPerRow);
-  const totalHeight = totalRows * rowHeightInPx;
-  const topPadding = Math.max(0, rowIndex - rowTolerance) * rowHeightInPx;
-
-  const onScroll = useCallback(() => {
-    if (scrollableElement) {
-      setScrollTop(scrollableElement.scrollTop);
-    }
-  }, [scrollableElement]);
-
-  useEffect(() => {
-    const scrollable = scrollableElement;
-    if (scrollable) {
-      scrollable.addEventListener('scroll', onScroll);
-      return () => {
-        scrollable.removeEventListener('scroll', onScroll);
-      };
-    }
-  }, [onScroll, scrollableElement]);
-
-  const rowIndexWithTolerance = Math.max(0, rowIndex - rowTolerance);
-  const rowLengthWithTolerance = rowLength + 2 * rowTolerance;
-  const indexWithTolerance = rowIndexWithTolerance * itemsPerRow;
-  const lengthWithTolerance = rowLengthWithTolerance * itemsPerRow;
-
-  const visibleItems = items.slice(
-    indexWithTolerance,
-    indexWithTolerance + lengthWithTolerance
-  );
-
-  return {
-    index,
-    length,
-    indexWithTolerance,
-    lengthWithTolerance,
-    visibleItems,
-    totalHeight,
-    topPadding,
-  };
-};
+import { useCallback, useEffect, useState } from 'react';
+
+import { useElementSize } from '../../../hooks';
+
+export const VIRTUAL_SCROLL_TOLERANCE = 20;
+
+type VirtualScrollingProps<R> = {
+  scrollableElement: HTMLElement | null;
+  rowHeightInPx: number;
+  items: R[];
+  itemsPerRow?: number;
+  tolerance?: number;
+};
+
+export const useVirtualScrolling = <R>({
+  scrollableElement,
+  rowHeightInPx,
+  items,
+  itemsPerRow = 1,
+  tolerance = VIRTUAL_SCROLL_TOLERANCE,
+}: VirtualScrollingProps<R>) => {
+  const { height } = useElementSize(scrollableElement);
+
+  const [scrollTop, setScrollTop] = useState(0);
+  const [rowIndex, rowLength] = [
+    Math.floor(scrollTop / rowHeightInPx),
+    Math.ceil(height / rowHeightInPx),
+  ];
+  const [index, length] = [rowIndex * itemsPerRow, rowLength * itemsPerRow];
+  const rowTolerance = Math.ceil(tolerance / itemsPerRow);
+
+  const totalRows = Math.ceil((items?.length ?? 0) / itemsPerRow);
+  const totalHeight = totalRows * rowHeightInPx;
+  const topPadding = Math.max(0, rowIndex - rowTolerance) * rowHeightInPx;
+
+  const onScroll = useCallback(() => {
+    if (scrollableElement) {
+      setScrollTop(scrollableElement.scrollTop);
+    }
+  }, [scrollableElement]);
+
+  useEffect(() => {
+    const scrollable = scrollableElement;
+    if (scrollable) {
+      scrollable.addEventListener('scroll', onScroll);
+      return () => {
+        scrollable.removeEventListener('scroll', onScroll);
+      };
+    }
+  }, [onScroll, scrollableElement]);
+
+  const rowIndexWithTolerance = Math.max(0, rowIndex - rowTolerance);
+  const rowLengthWithTolerance = rowLength + 2 * rowTolerance;
+  const indexWithTolerance = rowIndexWithTolerance * itemsPerRow;
+  const lengthWithTolerance = rowLengthWithTolerance * itemsPerRow;
+
+  const visibleItems = items.slice(
+    indexWithTolerance,
+    indexWithTolerance + lengthWithTolerance
+  );
+
+  return {
+    index,
+    length,
+    indexWithTolerance,
+    lengthWithTolerance,
+    visibleItems,
+    totalHeight,
+    topPadding,
+  };
+};