@addev-be/ui 0.2.5 → 0.2.7

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

@@ -1,131 +1,133 @@
-/* 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,
+  DataGridFilterRenderer,
+  DataGridFilterValue,
+} from './types';
+import { debounce, join } from 'lodash';
+import { defaultRendererAndFormatter, getCheckboxes } from './helpers';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useElementSize } from '../../../hooks';
+
+const CheckboxTemplate = ({
+  selectedValues,
+  value,
+  index,
+  className,
+  style,
+  onToggle,
+}: {
+  selectedValues: DataGridFilterValue[];
+  value: DataGridFilterCheckbox;
+  index: number;
+  className?: string;
+  style?: React.CSSProperties;
+  onToggle?: (values: DataGridFilterValue[]) => 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.title}
+    onClick={() => onToggle?.([value.value])}
+  >
+    <input
+      type="checkbox"
+      checked={selectedValues.includes(value.value)}
+      readOnly
+      // className="inline-block mr-2"
+    />
+    <span
+    // className="mr-2 truncate"
+    >
+      {value.displayValue || '(Vides)'}
+    </span>
+  </div>
+);
+
+type FilterValuesScrollerProps = {
+  values: DataGridFilterValue[];
+  rowHeight?: number;
+  formatter: DataGridFilterFormatter;
+  renderer: DataGridFilterRenderer;
+  onRangeChange?: (startIndex: number, length: number) => void;
+  onToggle?: (values: DataGridFilterValue[]) => void;
+  selectedValues?: DataGridFilterValue[];
+  groups?: DataGridFilterGroup[];
+};
+
+export const FilterValuesScroller = ({
+  values,
+  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
+  onRangeChange,
+  onToggle,
+  formatter = defaultRendererAndFormatter,
+  renderer = defaultRendererAndFormatter,
+  selectedValues = [],
+  groups,
+}: FilterValuesScrollerProps) => {
+  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, renderer, formatter, groups),
+    [values, groups, renderer, 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,46 +1,46 @@
-import * as styles from './styles';
-
-import { ReactNode, useContext } 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,
-    index,
-    visibleRows,
-    gridTemplateColumns,
-  } = 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;
-
-  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 } 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,
+    index,
+    visibleRows,
+    gridTemplateColumns,
+  } = 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;
+
+  return (
+    <styles.VirtualScrollerContainer $height={totalHeight}>
+      <styles.VirtualScrollerRowsContainer
+        $gridTemplateColumns={gridTemplateColumns}
+        $topPadding={topPadding}
+        $rowHeight={rowHeight}
+      >
+        {visibleRows.map(rowTemplate)}
+      </styles.VirtualScrollerRowsContainer>
+    </styles.VirtualScrollerContainer>
+  );
+};