@addev-be/ui 2.1.6 → 2.2.0

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

@@ -1,73 +1,73 @@
-import {
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-  SqlRequestRow,
-} from '../../../services/sqlRequests';
-import {
-  DataGridCheckboxColumn,
-  DataGridDateColumn,
-  DataGridFilter,
-  DataGridFilterType,
-  DataGridNumberColumn,
-  DataGridSort,
-  DataGridTextColumn,
-} 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 SqlRequestGridCommonProps = {
-  filter?: SqlRequestGridFilter;
-  field?: FieldDTO;
-  filterField?: string;
-  sortField?: string;
-  ignore?: boolean;
-};
-
-export type SqlRequestGridTextColumn<R> = DataGridTextColumn<R> &
-  SqlRequestGridCommonProps;
-export type SqlRequestGridNumberColumn<R> = DataGridNumberColumn<R> &
-  SqlRequestGridCommonProps;
-export type SqlRequestGridCheckboxColumn<R> = DataGridCheckboxColumn<R> &
-  SqlRequestGridCommonProps;
-export type SqlRequestGridDateColumn<R> = DataGridDateColumn<R> &
-  SqlRequestGridCommonProps;
-
-export type SqlRequestGridColumn<R> =
-  | SqlRequestGridTextColumn<R>
-  | SqlRequestGridNumberColumn<R>
-  | SqlRequestGridCheckboxColumn<R>
-  | SqlRequestGridDateColumn<R>;
-
-export type SqlRequestGridColumnWithFilter<R> = SqlRequestGridColumn<R> & {
-  filter: SqlRequestGridFilter;
-};
-
-export type SqlRequestGridColumns<R> = 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 | ((item: R) => P);
-  initialSorts?: Record<string, DataGridSort>;
-};
-
-export type SqlRequestGridRefProps = {
-  refresh: () => void;
-};
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridCheckboxColumn,
+  DataGridDateColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridNumberColumn,
+  DataGridSort,
+  DataGridTextColumn,
+} 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 SqlRequestGridCommonProps = {
+  filter?: SqlRequestGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+  ignore?: boolean;
+};
+
+export type SqlRequestGridTextColumn<R> = DataGridTextColumn<R> &
+  SqlRequestGridCommonProps;
+export type SqlRequestGridNumberColumn<R> = DataGridNumberColumn<R> &
+  SqlRequestGridCommonProps;
+export type SqlRequestGridCheckboxColumn<R> = DataGridCheckboxColumn<R> &
+  SqlRequestGridCommonProps;
+export type SqlRequestGridDateColumn<R> = DataGridDateColumn<R> &
+  SqlRequestGridCommonProps;
+
+export type SqlRequestGridColumn<R> =
+  | SqlRequestGridTextColumn<R>
+  | SqlRequestGridNumberColumn<R>
+  | SqlRequestGridCheckboxColumn<R>
+  | SqlRequestGridDateColumn<R>;
+
+export type SqlRequestGridColumnWithFilter<R> = SqlRequestGridColumn<R> & {
+  filter: SqlRequestGridFilter;
+};
+
+export type SqlRequestGridColumns<R> = 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 | ((item: R) => P);
+  initialSorts?: Record<string, DataGridSort>;
+};
+
+export type SqlRequestGridRefProps = {
+  refresh: () => void;
+};

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

@@ -1,71 +1,71 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useElementSize } from '../../../hooks/useElementSize';
-
-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/useElementSize';
+
+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,
+  };
+};

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

@@ -1,89 +1,89 @@
-import * as styles from './styles';
-
-import { useEffect, useState } from 'react';
-
-import { VirtualScrollerTemplateFC } from './types';
-import { useVirtualScrolling } from './hooks';
-
-type VirtualScrollerProps<R, P extends object> = {
-  gridTemplateColumns: string;
-  items: R[];
-  itemTemplate: VirtualScrollerTemplateFC<R, P>;
-  rowHeightInPx: number;
-  gap?: string;
-  itemsPerRow?: number;
-  tolerance?: number;
-  itemProps: P | ((item: R, index: number) => P);
-  onRangeChanged?: (index: number, length: number) => void;
-  integrated?: boolean;
-};
-
-export const VirtualScroller = <R, P extends object>({
-  gridTemplateColumns,
-  items,
-  rowHeightInPx,
-  itemTemplate: ItemTemplate,
-  itemProps,
-  onRangeChanged,
-  gap,
-  itemsPerRow,
-  tolerance,
-  integrated,
-}: VirtualScrollerProps<R, P>) => {
-  const [scrollableElement, setScrollableElement] =
-    useState<HTMLElement | null>(null);
-  const {
-    indexWithTolerance,
-    lengthWithTolerance,
-    visibleItems,
-    topPadding,
-    totalHeight,
-  } = useVirtualScrolling<R>({
-    scrollableElement,
-    rowHeightInPx,
-    items,
-    itemsPerRow,
-    tolerance,
-  });
-
-  useEffect(() => {
-    onRangeChanged?.(indexWithTolerance, lengthWithTolerance);
-  }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
-
-  return (
-    <styles.VirtualScrollerContainer $integrated={integrated}>
-      <styles.VirtualScrollerFiller
-        $height={totalHeight}
-        ref={(element) =>
-          setScrollableElement(
-            (integrated
-              ? element?.parentElement?.parentElement
-              : element?.parentElement) ?? null
-          )
-        }
-      >
-        <styles.VirtualScrollerItemsContainer
-          $gridTemplateColumns={gridTemplateColumns}
-          $topPadding={topPadding}
-          $itemHeight={rowHeightInPx}
-          $gap={gap}
-        >
-          {visibleItems.map((item, currentIndex) => {
-            const currentItemProps =
-              typeof itemProps === 'function'
-                ? itemProps(item, indexWithTolerance + currentIndex)
-                : itemProps;
-            return (
-              <ItemTemplate
-                key={indexWithTolerance + currentIndex}
-                item={item}
-                index={currentIndex}
-                {...currentItemProps}
-              />
-            );
-          })}
-        </styles.VirtualScrollerItemsContainer>
-      </styles.VirtualScrollerFiller>
-    </styles.VirtualScrollerContainer>
-  );
-};
+import * as styles from './styles';
+
+import { useEffect, useState } from 'react';
+
+import { VirtualScrollerTemplateFC } from './types';
+import { useVirtualScrolling } from './hooks';
+
+type VirtualScrollerProps<R, P extends object> = {
+  gridTemplateColumns: string;
+  items: R[];
+  itemTemplate: VirtualScrollerTemplateFC<R, P>;
+  rowHeightInPx: number;
+  gap?: string;
+  itemsPerRow?: number;
+  tolerance?: number;
+  itemProps: P | ((item: R, index: number) => P);
+  onRangeChanged?: (index: number, length: number) => void;
+  integrated?: boolean;
+};
+
+export const VirtualScroller = <R, P extends object>({
+  gridTemplateColumns,
+  items,
+  rowHeightInPx,
+  itemTemplate: ItemTemplate,
+  itemProps,
+  onRangeChanged,
+  gap,
+  itemsPerRow,
+  tolerance,
+  integrated,
+}: VirtualScrollerProps<R, P>) => {
+  const [scrollableElement, setScrollableElement] =
+    useState<HTMLElement | null>(null);
+  const {
+    indexWithTolerance,
+    lengthWithTolerance,
+    visibleItems,
+    topPadding,
+    totalHeight,
+  } = useVirtualScrolling<R>({
+    scrollableElement,
+    rowHeightInPx,
+    items,
+    itemsPerRow,
+    tolerance,
+  });
+
+  useEffect(() => {
+    onRangeChanged?.(indexWithTolerance, lengthWithTolerance);
+  }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
+
+  return (
+    <styles.VirtualScrollerContainer $integrated={integrated}>
+      <styles.VirtualScrollerFiller
+        $height={totalHeight}
+        ref={(element) =>
+          setScrollableElement(
+            (integrated
+              ? element?.parentElement?.parentElement
+              : element?.parentElement) ?? null
+          )
+        }
+      >
+        <styles.VirtualScrollerItemsContainer
+          $gridTemplateColumns={gridTemplateColumns}
+          $topPadding={topPadding}
+          $itemHeight={rowHeightInPx}
+          $gap={gap}
+        >
+          {visibleItems.map((item, currentIndex) => {
+            const currentItemProps =
+              typeof itemProps === 'function'
+                ? itemProps(item, indexWithTolerance + currentIndex)
+                : itemProps;
+            return (
+              <ItemTemplate
+                key={indexWithTolerance + currentIndex}
+                item={item}
+                index={currentIndex}
+                {...currentItemProps}
+              />
+            );
+          })}
+        </styles.VirtualScrollerItemsContainer>
+      </styles.VirtualScrollerFiller>
+    </styles.VirtualScrollerContainer>
+  );
+};

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

@@ -1,57 +1,57 @@
-import styled from 'styled-components';
-
-export const TopPaddingItem = styled.div``;
-export const BottomPaddingItem = styled.div``;
-
-export const VirtualScrollerContainer = styled.div<{
-  $integrated?: boolean;
-}>`
-  position: relative;
-  overflow: auto;
-  height: 100%;
-  display: ${({ $integrated }) => ($integrated ? 'contents' : 'block')};
-`;
-
-export const VirtualScrollerFiller = styled.div.attrs<{
-  $height: number;
-}>(({ $height }) => ({
-  style: {
-    height: `${$height}px`,
-  },
-}))`
-  position: relative;
-  overflow: visible;
-`;
-
-export const VirtualScrollerItemsContainer = styled.div.attrs<{
-  $gridTemplateColumns: string;
-  $gap?: string;
-  $topPadding: number;
-  $itemHeight: number;
-}>(({ $gridTemplateColumns, $topPadding, $itemHeight }) => {
-  const itemHeightValue = `${$itemHeight}px`;
-  return {
-    className: 'VirtualScrollerItemsContainer',
-    style: {
-      top: `${$topPadding}px`,
-      gridTemplateColumns: $gridTemplateColumns,
-      gridAutoItems: itemHeightValue,
-    },
-  };
-})`
-  display: grid;
-  position: absolute;
-  min-width: 100%;
-  grid-gap: ${({ $gap }) => $gap};
-
-  ${TopPaddingItem} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 1;
-  }
-  ${BottomPaddingItem} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: -1;
-  }
-`;
+import styled from 'styled-components';
+
+export const TopPaddingItem = styled.div``;
+export const BottomPaddingItem = styled.div``;
+
+export const VirtualScrollerContainer = styled.div<{
+  $integrated?: boolean;
+}>`
+  position: relative;
+  overflow: auto;
+  height: 100%;
+  display: ${({ $integrated }) => ($integrated ? 'contents' : 'block')};
+`;
+
+export const VirtualScrollerFiller = styled.div.attrs<{
+  $height: number;
+}>(({ $height }) => ({
+  style: {
+    height: `${$height}px`,
+  },
+}))`
+  position: relative;
+  overflow: visible;
+`;
+
+export const VirtualScrollerItemsContainer = styled.div.attrs<{
+  $gridTemplateColumns: string;
+  $gap?: string;
+  $topPadding: number;
+  $itemHeight: number;
+}>(({ $gridTemplateColumns, $topPadding, $itemHeight }) => {
+  const itemHeightValue = `${$itemHeight}px`;
+  return {
+    className: 'VirtualScrollerItemsContainer',
+    style: {
+      top: `${$topPadding}px`,
+      gridTemplateColumns: $gridTemplateColumns,
+      gridAutoItems: itemHeightValue,
+    },
+  };
+})`
+  display: grid;
+  position: absolute;
+  min-width: 100%;
+  grid-gap: ${({ $gap }) => $gap};
+
+  ${TopPaddingItem} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 1;
+  }
+  ${BottomPaddingItem} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: -1;
+  }
+`;

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

@@ -1,10 +1,10 @@
-import { FC } from 'react';
-
-export type VirtualScrollerTemplateProps<R, P extends object = {}> = P & {
-  item: R | null;
-  index: number;
-};
-
-export type VirtualScrollerTemplateFC<R, P extends object = {}> = FC<
-  VirtualScrollerTemplateProps<R, P>
->;
+import { FC } from 'react';
+
+export type VirtualScrollerTemplateProps<R, P extends object = {}> = P & {
+  item: R | null;
+  index: number;
+};
+
+export type VirtualScrollerTemplateFC<R, P extends object = {}> = FC<
+  VirtualScrollerTemplateProps<R, P>
+>;