@addev-be/ui 0.1.18 → 0.1.20

package/src/components/data/DataGrid/FilterValuesScroller.tsx

@@ -1,131 +1,131 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilterCheckbox,
-  DataGridFilterFormatter,
-  DataGridFilterGroup,
-} from './types';
-import { debounce, join } from 'lodash';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { getCheckboxes } from './helpers';
-import { useElementSize } from '../../../hooks';
-
-const defaultFormatter = (value: any) => (value == null ? null : String(value));
-
-const CheckboxTemplate = <R extends string | number | null>({
-  selectedValues,
-  value,
-  index,
-  className,
-  style,
-  onToggle,
-}: {
-  selectedValues: R[];
-  value: DataGridFilterCheckbox<R>;
-  index: number;
-  className?: string;
-  style?: React.CSSProperties;
-  onToggle?: (values: R[]) => void;
-}) => (
-  <div
-    key={index}
-    className={join(
-      [
-        // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
-        className,
-      ],
-      ' '
-    )}
-    style={{ ...style, paddingLeft: `${value.level}rem` }}
-    title={value.displayValue || '(Vides)'}
-    onClick={() => onToggle?.(value.values)}
-  >
-    <input
-      type="checkbox"
-      checked={selectedValues.includes(value.values[0])}
-      readOnly
-      // className="inline-block mr-2"
-    />
-    <span
-    // className="mr-2 truncate"
-    >
-      {value.displayValue || '(Vides)'}
-    </span>
-  </div>
-);
-
-type FilterValuesScrollerProps<R extends string | number | null> = {
-  values: R[];
-  rowHeight?: number;
-  formatter: DataGridFilterFormatter;
-  onRangeChange?: (startIndex: number, length: number) => void;
-  onToggle?: (values: R[]) => void;
-  selectedValues?: R[];
-  groups?: DataGridFilterGroup<R>[];
-};
-
-export const FilterValuesScroller = <R extends string | number | null>({
-  values,
-  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
-  onRangeChange,
-  onToggle,
-  formatter = defaultFormatter,
-  selectedValues = [],
-  groups,
-}: FilterValuesScrollerProps<R>) => {
-  const scrollableRef = useRef<HTMLDivElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const tolerance = 20;
-  const [scrollTop, setScrollTop] = useState(0);
-  const index = Math.floor(scrollTop / rowHeight);
-  const length = Math.ceil(height / rowHeight);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onScroll = useCallback(
-    debounce((e: React.UIEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLDivElement;
-      setScrollTop(() => target.scrollTop);
-    }, 50),
-    []
-  );
-
-  const checkboxes = useMemo(
-    () => getCheckboxes(values, formatter ?? defaultFormatter, groups),
-    [values, groups, formatter]
-  );
-  const visibleCheckboxes = checkboxes.slice(
-    Math.max(0, index - tolerance),
-    index + length + 1 + tolerance
-  );
-  const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
-
-  useEffect(() => {
-    onRangeChange?.(index, length);
-  }, [index, length, onRangeChange]);
-
-  return (
-    <styles.FilterValuesScrollerContainer
-      ref={scrollableRef}
-      onScroll={onScroll}
-      $rowHeight={rowHeight}
-    >
-      <div style={{ height: `${values.length * rowHeight}px` }}>
-        {visibleCheckboxes.map((value, index) => (
-          <CheckboxTemplate
-            className="checkbox"
-            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
-            key={index}
-            selectedValues={selectedValues}
-            value={value}
-            index={index}
-            onToggle={onToggle}
-          />
-        ))}
-      </div>
-    </styles.FilterValuesScrollerContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilterCheckbox,
+  DataGridFilterFormatter,
+  DataGridFilterGroup,
+} from './types';
+import { debounce, join } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { getCheckboxes } from './helpers';
+import { useElementSize } from '../../../hooks';
+
+const defaultFormatter = (value: any) => (value == null ? null : String(value));
+
+const CheckboxTemplate = <R extends string | number | null>({
+  selectedValues,
+  value,
+  index,
+  className,
+  style,
+  onToggle,
+}: {
+  selectedValues: R[];
+  value: DataGridFilterCheckbox<R>;
+  index: number;
+  className?: string;
+  style?: React.CSSProperties;
+  onToggle?: (values: R[]) => void;
+}) => (
+  <div
+    key={index}
+    className={join(
+      [
+        // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
+        className,
+      ],
+      ' '
+    )}
+    style={{ ...style, paddingLeft: `${value.level}rem` }}
+    title={value.displayValue || '(Vides)'}
+    onClick={() => onToggle?.(value.values)}
+  >
+    <input
+      type="checkbox"
+      checked={selectedValues.includes(value.values[0])}
+      readOnly
+      // className="inline-block mr-2"
+    />
+    <span
+    // className="mr-2 truncate"
+    >
+      {value.displayValue || '(Vides)'}
+    </span>
+  </div>
+);
+
+type FilterValuesScrollerProps<R extends string | number | null> = {
+  values: R[];
+  rowHeight?: number;
+  formatter: DataGridFilterFormatter;
+  onRangeChange?: (startIndex: number, length: number) => void;
+  onToggle?: (values: R[]) => void;
+  selectedValues?: R[];
+  groups?: DataGridFilterGroup<R>[];
+};
+
+export const FilterValuesScroller = <R extends string | number | null>({
+  values,
+  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
+  onRangeChange,
+  onToggle,
+  formatter = defaultFormatter,
+  selectedValues = [],
+  groups,
+}: FilterValuesScrollerProps<R>) => {
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const { height } = useElementSize(scrollableRef.current);
+
+  const tolerance = 20;
+  const [scrollTop, setScrollTop] = useState(0);
+  const index = Math.floor(scrollTop / rowHeight);
+  const length = Math.ceil(height / rowHeight);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onScroll = useCallback(
+    debounce((e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLDivElement;
+      setScrollTop(() => target.scrollTop);
+    }, 50),
+    []
+  );
+
+  const checkboxes = useMemo(
+    () => getCheckboxes(values, formatter ?? defaultFormatter, groups),
+    [values, groups, formatter]
+  );
+  const visibleCheckboxes = checkboxes.slice(
+    Math.max(0, index - tolerance),
+    index + length + 1 + tolerance
+  );
+  const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
+
+  useEffect(() => {
+    onRangeChange?.(index, length);
+  }, [index, length, onRangeChange]);
+
+  return (
+    <styles.FilterValuesScrollerContainer
+      ref={scrollableRef}
+      onScroll={onScroll}
+      $rowHeight={rowHeight}
+    >
+      <div style={{ height: `${values.length * rowHeight}px` }}>
+        {visibleCheckboxes.map((value, index) => (
+          <CheckboxTemplate
+            className="checkbox"
+            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
+            key={index}
+            selectedValues={selectedValues}
+            value={value}
+            index={index}
+            onToggle={onToggle}
+          />
+        ))}
+      </div>
+    </styles.FilterValuesScrollerContainer>
+  );
+};

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

@@ -1,51 +1,51 @@
-import * as styles from './styles';
-
-import { ReactNode, useContext, useMemo } from 'react';
-
-import { DataGridContext } from './types';
-
-type VirtualScrollerProps<R> = {
-  showAllRows?: boolean;
-  rowTemplate: (row: R, index: number) => ReactNode;
-  hasFooter?: boolean;
-  context: DataGridContext<R>;
-  onRangeChange?: (startIndex: number, length: number) => void;
-};
-
-export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
-  const {
-    rowHeight = styles.DEFAULT_ROW_HEIGHT,
-    // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
-    sortedRows,
-    visibleColumns,
-    index,
-    visibleRows,
-  } = useContext(props.context);
-  const {
-    rowTemplate,
-    // hasFooter, onRangeChange
-  } = props;
-
-  const totalHeight = sortedRows.length * rowHeight;
-  const topPadding =
-    Math.max(0, index - styles.VIRTUAL_SCROLL_TOLERANCE) * rowHeight;
-  // const headerAndFooterHeight =
-  //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
-
-  const gridTemplateColumns = useMemo(
-    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
-    [visibleColumns]
-  );
-
-  return (
-    <styles.VirtualScrollerContainer $height={totalHeight}>
-      <styles.VirtualScrollerRowsContainer
-        $gridTemplateColumns={gridTemplateColumns}
-        $topPadding={topPadding}
-        $rowHeight={rowHeight}
-      >
-        {visibleRows.map(rowTemplate)}
-      </styles.VirtualScrollerRowsContainer>
-    </styles.VirtualScrollerContainer>
-  );
-};
+import * as styles from './styles';
+
+import { ReactNode, useContext, useMemo } from 'react';
+
+import { DataGridContext } from './types';
+
+type VirtualScrollerProps<R> = {
+  showAllRows?: boolean;
+  rowTemplate: (row: R, index: number) => ReactNode;
+  hasFooter?: boolean;
+  context: DataGridContext<R>;
+  onRangeChange?: (startIndex: number, length: number) => void;
+};
+
+export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
+  const {
+    rowHeight = styles.DEFAULT_ROW_HEIGHT,
+    // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
+    sortedRows,
+    visibleColumns,
+    index,
+    visibleRows,
+  } = useContext(props.context);
+  const {
+    rowTemplate,
+    // hasFooter, onRangeChange
+  } = props;
+
+  const totalHeight = sortedRows.length * rowHeight;
+  const topPadding =
+    Math.max(0, index - styles.VIRTUAL_SCROLL_TOLERANCE) * rowHeight;
+  // const headerAndFooterHeight =
+  //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
+
+  const gridTemplateColumns = useMemo(
+    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
+    [visibleColumns]
+  );
+
+  return (
+    <styles.VirtualScrollerContainer $height={totalHeight}>
+      <styles.VirtualScrollerRowsContainer
+        $gridTemplateColumns={gridTemplateColumns}
+        $topPadding={topPadding}
+        $rowHeight={rowHeight}
+      >
+        {visibleRows.map(rowTemplate)}
+      </styles.VirtualScrollerRowsContainer>
+    </styles.VirtualScrollerContainer>
+  );
+};

package/src/components/data/DataGrid/helpers/advancedRequests.tsx

@@ -1,61 +1,61 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  AdvancedRequestDTO,
-  ConditionDTO,
-  OrderByDTO,
-} from '../../../../services/advancedRequests';
-
-import { DataGridColumns } from '../types';
-
-export const getAdvancedRequestDto = <R,>({
-  type,
-  columns,
-  conditions = [],
-  orderBy = [],
-  start = 0,
-  length = 100,
-  getTotal = false,
-  addIdColumn = true,
-}: {
-  type: string;
-  columns: DataGridColumns<R>;
-  conditions?: ConditionDTO[];
-  orderBy?: OrderByDTO[];
-  start?: number;
-  length?: number;
-  getTotal?: boolean;
-  addIdColumn?: boolean;
-}): AdvancedRequestDTO => ({
-  fields: [
-    ...(Object.keys(columns).includes('Id') || addIdColumn === false
-      ? []
-      : [{ fieldName: 'Id' }]),
-    ...Object.keys(columns).map((key) =>
-      columns[key].field
-        ? {
-            ...columns[key].field,
-            fieldName: columns[key].field?.fieldName ?? key,
-            fieldAlias: key,
-          }
-        : {
-            fieldName: key,
-            fieldAlias: key,
-          }
-    ),
-  ],
-  conditions: [
-    ...conditions,
-    {
-      field: {
-        fieldName: 'DeletedAt',
-      },
-      operator: 'isNull' as const,
-    },
-  ],
-  orderBy,
-  type,
-  start,
-  length,
-  getTotal,
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+
+import { DataGridColumns } from '../types';
+
+export const getAdvancedRequestDto = <R,>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  addIdColumn = true,
+}: {
+  type: string;
+  columns: DataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  addIdColumn?: boolean;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(Object.keys(columns).includes('Id') || addIdColumn === false
+      ? []
+      : [{ fieldName: 'Id' }]),
+    ...Object.keys(columns).map((key) =>
+      columns[key].field
+        ? {
+            ...columns[key].field,
+            fieldName: columns[key].field?.fieldName ?? key,
+            fieldAlias: key,
+          }
+        : {
+            fieldName: key,
+            fieldAlias: key,
+          }
+    ),
+  ],
+  conditions: [
+    ...conditions,
+    {
+      field: {
+        fieldName: 'DeletedAt',
+      },
+      operator: 'isNull' as const,
+    },
+  ],
+  orderBy,
+  type,
+  start,
+  length,
+  getTotal,
+});