@addev-be/ui 1.0.0 → 1.0.2

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

@@ -1,257 +1,257 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  ConditionDTO,
-  OrderByDTO,
-  useSqlRequestHandler,
-} from '../../../services';
-import {
-  ForwardedRef,
-  MouseEvent,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  SqlRequestForeignListInput,
-  SqlRequestForeignListItem,
-  SqlRequestForeignListValue,
-} from './styles';
-import {
-  SqlRequestForeignListItemProps,
-  SqlRequestForeignListProps,
-} from './types';
-
-import { ChevronDownIcon } from '../../../Icons';
-import { Dropdown } from '../../layout';
-import { VirtualScroller } from '../VirtualScroller';
-import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
-import { debounce } from 'lodash';
-import { withDisplayName } from '../../../helpers/components';
-
-const DEFAULT_ROW_HEIGHT = 24;
-
-const CreateValueTemplate = <R extends Record<string, any>>(
-  ValueTemplate: VirtualScrollerTemplateFC<
-    R,
-    SqlRequestForeignListItemProps<R>
-  >,
-  rowHeight = DEFAULT_ROW_HEIGHT
-): VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>> =>
-  withDisplayName(
-    ({ item }) => (
-      <SqlRequestForeignListValue $rowHeight={rowHeight}>
-        <ValueTemplate item={item} index={0} />
-      </SqlRequestForeignListValue>
-    ),
-    'SqlRequestForeignListCreateValueTemplate'
-  );
-
-const createItemTemplate = <R extends Record<string, any>>(
-  ItemTemplate: VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>>,
-  rowHeight = DEFAULT_ROW_HEIGHT
-): VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>> =>
-  withDisplayName(({ item, index, onClick: onItemClick }) => {
-    const onClick = useCallback(
-      (
-        e: MouseEvent<HTMLElement>,
-        item: R | null,
-        onItemClick?: (item: R | null) => void
-      ) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onItemClick?.(item);
-      },
-      []
-    );
-
-    return (
-      <SqlRequestForeignListItem
-        $rowHeight={rowHeight}
-        onClick={(e) => onClick(e, item, onItemClick)}
-      >
-        <ItemTemplate item={item} index={index} />
-      </SqlRequestForeignListItem>
-    );
-  }, 'SqlRequestForeignListCreateItemTemplate');
-
-export const SqlRequestForeignListInner = <T extends Record<string, any>>(
-  {
-    requestName,
-    idColumn,
-    columns = [],
-    initialValue = null,
-    onItemChanged,
-    onIdChanged,
-    onClosed,
-    onBlur,
-    itemTemplate,
-    valueTemplate,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    maxRows = 10,
-    orderBy = [],
-    conditions = [],
-  }: SqlRequestForeignListProps<T>,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  const [opened, setOpened] = useState(false);
-  const [rect, setRect] = useState<DOMRect | null>(null);
-
-  const currentRows = useRef<T[]>([]);
-  const [rows, setRows] = useState<T[]>([]);
-  const [start, setStart] = useState(0);
-  const [length, setLength] = useState(-1);
-  const [count, setCount] = useState(-1);
-  const [selectedItem, setSelectedItem] = useState<T | null>(initialValue);
-
-  // Create an internal ref for the component to use
-  const internalRef = useRef<HTMLDivElement>(null);
-
-  // Forward the ref while linking it to our internal ref
-  useImperativeHandle(ref, () => internalRef.current!, []);
-
-  const [sqlRequest] = useSqlRequestHandler<T>(requestName);
-
-  const open = useCallback(() => {
-    if (internalRef.current) {
-      const parentRect = internalRef.current.getBoundingClientRect();
-      setRect(new DOMRect(0, 0, parentRect.width, parentRect.height));
-      setOpened(true);
-    }
-  }, []);
-
-  const close = useCallback(() => {
-    setOpened(false);
-    onClosed?.();
-  }, [onClosed]);
-
-  const onClick = useCallback(
-    (item: T | null) => {
-      setSelectedItem(item);
-      onItemChanged?.(item);
-      onIdChanged?.(item?.[idColumn] ?? null);
-      close();
-    },
-    [close, idColumn, onIdChanged, onItemChanged]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: string[],
-        returnColumns: string[],
-        conditions: ConditionDTO[] = [],
-        orderBy: OrderByDTO[] = [],
-        start = 0,
-        length = 100,
-        getCount = false
-      ) => {
-        if (length > 0) {
-          sqlRequest({
-            columns: columns.includes('Id') ? columns : [...columns, 'Id'],
-            returnColumns: returnColumns.includes('Id')
-              ? returnColumns
-              : [...returnColumns, 'Id'],
-            conditions,
-            orderBy,
-            start,
-            length,
-            getCount,
-          }).then((response) => {
-            if (getCount) {
-              currentRows.current = Array(response.count).fill(null);
-              if (getCount) setCount(response.count ?? 0);
-            }
-            const data = response.data ?? [];
-            const parsedRows = data as T[];
-            currentRows.current.splice(start, length, ...parsedRows);
-            setRows([...currentRows.current]);
-          });
-        }
-      },
-      100,
-      {
-        leading: true,
-        trailing: true,
-      }
-    )
-  );
-
-  useEffect(() => {
-    if (
-      (!rows.length && count < 0) ||
-      rows.slice(start, start + length).some((row) => row === null)
-    ) {
-      loadRows.current(
-        columns,
-        columns,
-        conditions,
-        orderBy,
-        start,
-        length,
-        count < 0
-      );
-    }
-  }, [start, length, count, conditions, rows, orderBy, columns]);
-
-  const onVisibleRowsChanged = useCallback(
-    (newStart: number, newLength: number) => {
-      if (newStart !== start || newLength !== length) {
-        setStart(newStart);
-        setLength(newLength);
-      }
-    },
-    [length, start]
-  );
-
-  const ItemTemplate = useMemo(
-    () => createItemTemplate<T>(itemTemplate, rowHeight),
-    [itemTemplate, rowHeight]
-  );
-  const ValueTemplate = useMemo(
-    () => CreateValueTemplate<T>(valueTemplate ?? itemTemplate, rowHeight),
-    [itemTemplate, rowHeight, valueTemplate]
-  );
-
-  return (
-    <>
-      <SqlRequestForeignListInput
-        tabIndex={0}
-        ref={internalRef}
-        onClick={open}
-        onBlur={onBlur}
-      >
-        <ValueTemplate item={selectedItem} index={0} />
-        <ChevronDownIcon />
-        {opened && rect && (
-          <Dropdown
-            $height={[Math.min(maxRows, rows.length) * rowHeight, 300]}
-            $width={rect.width}
-            $sourceRect={rect}
-            onClose={close}
-            usePortal={false}
-          >
-            <VirtualScroller
-              gridTemplateColumns={'1fr'}
-              items={rows}
-              itemTemplate={ItemTemplate}
-              rowHeightInPx={rowHeight}
-              itemProps={(item, index) => ({
-                item,
-                onClick,
-                index: index,
-              })}
-              onRangeChanged={onVisibleRowsChanged}
-            ></VirtualScroller>
-          </Dropdown>
-        )}
-      </SqlRequestForeignListInput>
-    </>
-  );
-};
-
-export const SqlRequestForeignList = forwardRef(SqlRequestForeignListInner);
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services';
+import {
+  ForwardedRef,
+  MouseEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  SqlRequestForeignListInput,
+  SqlRequestForeignListItem,
+  SqlRequestForeignListValue,
+} from './styles';
+import {
+  SqlRequestForeignListItemProps,
+  SqlRequestForeignListProps,
+} from './types';
+
+import { ChevronDownIcon } from '../../../Icons';
+import { Dropdown } from '../../layout';
+import { VirtualScroller } from '../VirtualScroller';
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+import { debounce } from 'lodash';
+import { withDisplayName } from '../../../helpers/components';
+
+const DEFAULT_ROW_HEIGHT = 24;
+
+const CreateValueTemplate = <R extends Record<string, any>>(
+  ValueTemplate: VirtualScrollerTemplateFC<
+    R,
+    SqlRequestForeignListItemProps<R>
+  >,
+  rowHeight = DEFAULT_ROW_HEIGHT
+): VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>> =>
+  withDisplayName(
+    ({ item }) => (
+      <SqlRequestForeignListValue $rowHeight={rowHeight}>
+        <ValueTemplate item={item} index={0} />
+      </SqlRequestForeignListValue>
+    ),
+    'SqlRequestForeignListCreateValueTemplate'
+  );
+
+const createItemTemplate = <R extends Record<string, any>>(
+  ItemTemplate: VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>>,
+  rowHeight = DEFAULT_ROW_HEIGHT
+): VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>> =>
+  withDisplayName(({ item, index, onClick: onItemClick }) => {
+    const onClick = useCallback(
+      (
+        e: MouseEvent<HTMLElement>,
+        item: R | null,
+        onItemClick?: (item: R | null) => void
+      ) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onItemClick?.(item);
+      },
+      []
+    );
+
+    return (
+      <SqlRequestForeignListItem
+        $rowHeight={rowHeight}
+        onClick={(e) => onClick(e, item, onItemClick)}
+      >
+        <ItemTemplate item={item} index={index} />
+      </SqlRequestForeignListItem>
+    );
+  }, 'SqlRequestForeignListCreateItemTemplate');
+
+export const SqlRequestForeignListInner = <T extends Record<string, any>>(
+  {
+    requestName,
+    idColumn,
+    columns = [],
+    initialValue = null,
+    onItemChanged,
+    onIdChanged,
+    onClosed,
+    onBlur,
+    itemTemplate,
+    valueTemplate,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    maxRows = 10,
+    orderBy = [],
+    conditions = [],
+  }: SqlRequestForeignListProps<T>,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
+  const [opened, setOpened] = useState(false);
+  const [rect, setRect] = useState<DOMRect | null>(null);
+
+  const currentRows = useRef<T[]>([]);
+  const [rows, setRows] = useState<T[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(-1);
+  const [count, setCount] = useState(-1);
+  const [selectedItem, setSelectedItem] = useState<T | null>(initialValue);
+
+  // Create an internal ref for the component to use
+  const internalRef = useRef<HTMLDivElement>(null);
+
+  // Forward the ref while linking it to our internal ref
+  useImperativeHandle(ref, () => internalRef.current!, []);
+
+  const [sqlRequest] = useSqlRequestHandler<T>(requestName);
+
+  const open = useCallback(() => {
+    if (internalRef.current) {
+      const parentRect = internalRef.current.getBoundingClientRect();
+      setRect(new DOMRect(0, 0, parentRect.width, parentRect.height));
+      setOpened(true);
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    setOpened(false);
+    onClosed?.();
+  }, [onClosed]);
+
+  const onClick = useCallback(
+    (item: T | null) => {
+      setSelectedItem(item);
+      onItemChanged?.(item);
+      onIdChanged?.(item?.[idColumn] ?? null);
+      close();
+    },
+    [close, idColumn, onIdChanged, onItemChanged]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: string[],
+        returnColumns: string[],
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        getCount = false
+      ) => {
+        if (length > 0) {
+          sqlRequest({
+            columns: columns.includes('Id') ? columns : [...columns, 'Id'],
+            returnColumns: returnColumns.includes('Id')
+              ? returnColumns
+              : [...returnColumns, 'Id'],
+            conditions,
+            orderBy,
+            start,
+            length,
+            getCount,
+          }).then((response) => {
+            if (getCount) {
+              currentRows.current = Array(response.count).fill(null);
+              if (getCount) setCount(response.count ?? 0);
+            }
+            const data = response.data ?? [];
+            const parsedRows = data as T[];
+            currentRows.current.splice(start, length, ...parsedRows);
+            setRows([...currentRows.current]);
+          });
+        }
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  useEffect(() => {
+    if (
+      (!rows.length && count < 0) ||
+      rows.slice(start, start + length).some((row) => row === null)
+    ) {
+      loadRows.current(
+        columns,
+        columns,
+        conditions,
+        orderBy,
+        start,
+        length,
+        count < 0
+      );
+    }
+  }, [start, length, count, conditions, rows, orderBy, columns]);
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  const ItemTemplate = useMemo(
+    () => createItemTemplate<T>(itemTemplate, rowHeight),
+    [itemTemplate, rowHeight]
+  );
+  const ValueTemplate = useMemo(
+    () => CreateValueTemplate<T>(valueTemplate ?? itemTemplate, rowHeight),
+    [itemTemplate, rowHeight, valueTemplate]
+  );
+
+  return (
+    <>
+      <SqlRequestForeignListInput
+        tabIndex={0}
+        ref={internalRef}
+        onClick={open}
+        onBlur={onBlur}
+      >
+        <ValueTemplate item={selectedItem} index={0} />
+        <ChevronDownIcon />
+        {opened && rect && (
+          <Dropdown
+            $height={[Math.min(maxRows, rows.length) * rowHeight, 300]}
+            $width={rect.width}
+            $sourceRect={rect}
+            onClose={close}
+            usePortal={false}
+          >
+            <VirtualScroller
+              gridTemplateColumns={'1fr'}
+              items={rows}
+              itemTemplate={ItemTemplate}
+              rowHeightInPx={rowHeight}
+              itemProps={(item, index) => ({
+                item,
+                onClick,
+                index: index,
+              })}
+              onRangeChanged={onVisibleRowsChanged}
+            ></VirtualScroller>
+          </Dropdown>
+        )}
+      </SqlRequestForeignListInput>
+    </>
+  );
+};
+
+export const SqlRequestForeignList = forwardRef(SqlRequestForeignListInner);

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

@@ -1,43 +1,43 @@
-import { inputCss } from '../../forms/Form/styles';
-import styled from 'styled-components';
-
-export const SqlRequestForeignListInput = styled.div<{ $readOnly?: boolean }>`
-  ${inputCss}
-
-  padding: 0;
-  position: relative;
-  cursor: pointer;
-  background-color: var(--color-base-0);
-
-  & > svg {
-    position: absolute;
-    right: var(--space-2);
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    width: var(--space-4);
-    height: var(--space-4);
-    fill: var(--color-base-900);
-  }
-`;
-
-export const SqlRequestForeignListValue = styled.div<{ $rowHeight: number }>`
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-2);
-  height: ${({ $rowHeight }) => $rowHeight}px;
-`;
-
-export const SqlRequestForeignListItem = styled.div<{ $rowHeight: number }>`
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-2);
-  cursor: pointer;
-  height: ${({ $rowHeight }) => $rowHeight}px;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  &:hover {
-    background-color: var(--color-primary-300);
-  }
-`;
+import { inputCss } from '../../forms/Form/styles';
+import styled from 'styled-components';
+
+export const SqlRequestForeignListInput = styled.div<{ $readOnly?: boolean }>`
+  ${inputCss}
+
+  padding: 0;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--color-base-0);
+
+  & > svg {
+    position: absolute;
+    right: var(--space-2);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    width: var(--space-4);
+    height: var(--space-4);
+    fill: var(--color-base-900);
+  }
+`;
+
+export const SqlRequestForeignListValue = styled.div<{ $rowHeight: number }>`
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-2);
+  height: ${({ $rowHeight }) => $rowHeight}px;
+`;
+
+export const SqlRequestForeignListItem = styled.div<{ $rowHeight: number }>`
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-2);
+  cursor: pointer;
+  height: ${({ $rowHeight }) => $rowHeight}px;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: var(--color-primary-300);
+  }
+`;

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

@@ -1,32 +1,32 @@
-import { ConditionDTO, OrderByDTO } from '../../../services';
-
-import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
-
-export type SqlRequestForeignListProps<T> = {
-  requestName: string;
-  idColumn: string;
-  columns: string[];
-  initialValue?: T | null;
-  onIdChanged?: (value: string | null) => void;
-  onItemChanged?: (value: T | null) => void;
-  onClosed?: () => void;
-  onBlur?: () => void;
-  valueTemplate?: VirtualScrollerTemplateFC<
-    T,
-    SqlRequestForeignListItemProps<T>
-  >;
-  itemTemplate: VirtualScrollerTemplateFC<T, SqlRequestForeignListItemProps<T>>;
-  rowHeight?: number;
-  maxRows?: number;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-};
-
-export type SqlRequestForeignListItemProps<T> = {
-  onClick?: (item: T | null) => void;
-};
-
-export type SqlRequestForeignListItemFC<T> = VirtualScrollerTemplateFC<
-  T,
-  SqlRequestForeignListItemProps<T>
->;
+import { ConditionDTO, OrderByDTO } from '../../../services';
+
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+
+export type SqlRequestForeignListProps<T> = {
+  requestName: string;
+  idColumn: string;
+  columns: string[];
+  initialValue?: T | null;
+  onIdChanged?: (value: string | null) => void;
+  onItemChanged?: (value: T | null) => void;
+  onClosed?: () => void;
+  onBlur?: () => void;
+  valueTemplate?: VirtualScrollerTemplateFC<
+    T,
+    SqlRequestForeignListItemProps<T>
+  >;
+  itemTemplate: VirtualScrollerTemplateFC<T, SqlRequestForeignListItemProps<T>>;
+  rowHeight?: number;
+  maxRows?: number;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+};
+
+export type SqlRequestForeignListItemProps<T> = {
+  onClick?: (item: T | null) => void;
+};
+
+export type SqlRequestForeignListItemFC<T> = VirtualScrollerTemplateFC<
+  T,
+  SqlRequestForeignListItemProps<T>
+>;