@addev-be/ui 0.2.13 → 0.2.15

package/src/components/data/DataGrid/helpers/filters.ts

@@ -1,287 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  DataGridFilter,
-  DataGridFilterCheckbox,
-  DataGridFilterDataType,
-  DataGridFilterFormatter,
-  DataGridFilterGroup,
-  DataGridFilterPredicateBuilder,
-  DataGridFilterPredicates,
-  DataGridFilterRenderer,
-  DataGridFilterType,
-  DataGridFilterValue,
-} from '../types';
-
-import moment from 'moment';
-
-const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-const textContainsPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const regex = new RegExp(`${escapeRegExp(filterValues[0])}`, 'i');
-  return (valueToVerify: string) => regex.test(valueToVerify);
-};
-const textNotContainsPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const regex = new RegExp(`${escapeRegExp(filterValues[0])}`, 'i');
-  return (valueToVerify: string) => !regex.test(valueToVerify);
-};
-const textEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const regex = new RegExp(`^${escapeRegExp(filterValues[0])}$`, 'i');
-  return (valueToVerify: string) => regex.test(valueToVerify);
-};
-const textNotEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const regex = new RegExp(`^${escapeRegExp(filterValues[0])}$`, 'i');
-  return (valueToVerify: string) => !regex.test(valueToVerify);
-};
-const textStartsWithPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const regex = new RegExp(`^${escapeRegExp(filterValues[0])}`, 'i');
-  return (valueToVerify: string) => regex.test(valueToVerify);
-};
-const textEndsWithPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const regex = new RegExp(`${escapeRegExp(filterValues[0])}$`, 'i');
-  return (valueToVerify: string) => regex.test(valueToVerify);
-};
-const textInArrayPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  return (valueToVerify: string) => filterValues.includes(valueToVerify);
-};
-
-const numberEqualsPredicate: DataGridFilterPredicateBuilder<number> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify === filterValues[0];
-const numberNotEqualsPredicate: DataGridFilterPredicateBuilder<number> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify !== filterValues[0];
-const numberLessThanPredicate: DataGridFilterPredicateBuilder<number> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify < filterValues[0];
-const numberLessThanOrEqualPredicate: DataGridFilterPredicateBuilder<number> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify <= filterValues[0];
-const numberGreaterThanPredicate: DataGridFilterPredicateBuilder<number> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify > filterValues[0];
-const numberGreaterThanOrEqualPredicate: DataGridFilterPredicateBuilder<
-  number
-> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify >= filterValues[0];
-const numberInRangePredicate: DataGridFilterPredicateBuilder<number> =
-  (...filterValues) =>
-  (valueToVerify: number) =>
-    valueToVerify >= filterValues[0] && valueToVerify <= filterValues[1];
-const numberInArrayPredicate: DataGridFilterPredicateBuilder<number> = (
-  ...filterValues
-) => {
-  return (valueToVerify: number) => filterValues.includes(valueToVerify);
-};
-
-const dateBeforePredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const limitDate = moment(filterValues[0]);
-  return (valueToVerify) => moment(valueToVerify).isBefore(limitDate);
-};
-const dateAfterPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const limitDate = moment(filterValues[0]);
-  return (valueToVerify) => moment(valueToVerify).isAfter(limitDate);
-};
-const dateEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const date = moment(filterValues[0]);
-  return (valueToVerify) => moment(valueToVerify).isSame(date);
-};
-const dateNotEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const date = moment(filterValues[0]);
-  return (valueToVerify) => !moment(valueToVerify).isSame(date);
-};
-const dateInRangePredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  const date1 = moment(filterValues[0]);
-  const date2 = moment(filterValues[1]);
-  const startDate = date1.isBefore(date2) ? date1 : date2;
-  const endDate = date1.isBefore(date2) ? date2 : date1;
-  return (valueToVerify) =>
-    moment(valueToVerify).isBetween(startDate, endDate, 'days', '[]');
-};
-const dateInArrayPredicate: DataGridFilterPredicateBuilder<string> = (
-  ...filterValues
-) => {
-  return (valueToVerify) => filterValues.includes(valueToVerify);
-};
-
-export const filtersPredicates: DataGridFilterPredicates = {
-  date: {
-    before: dateBeforePredicate,
-    after: dateAfterPredicate,
-    equals: dateEqualsPredicate,
-    notEquals: dateNotEqualsPredicate,
-    inRange: dateInRangePredicate,
-    inArray: dateInArrayPredicate,
-  },
-  text: {
-    contains: textContainsPredicate,
-    notContains: textNotContainsPredicate,
-    equals: textEqualsPredicate,
-    notEquals: textNotEqualsPredicate,
-    startsWith: textStartsWithPredicate,
-    endsWith: textEndsWithPredicate,
-    inArray: textInArrayPredicate,
-  },
-  number: {
-    equals: numberEqualsPredicate,
-    notEquals: numberNotEqualsPredicate,
-    lessThan: numberLessThanPredicate,
-    lessThanOrEqual: numberLessThanOrEqualPredicate,
-    greaterThan: numberGreaterThanPredicate,
-    greaterThanOrEqual: numberGreaterThanOrEqualPredicate,
-    inRange: numberInRangePredicate,
-    inArray: numberInArrayPredicate,
-  },
-};
-
-export const applyFilters = <R>(rows: R[], filters: DataGridFilter[]): R[] => {
-  return filters.reduce(
-    (tempRows, filter) => applyFilter(tempRows, filter),
-    rows
-  );
-};
-
-export const applyFilter = <R>(rows: R[], filter: DataGridFilter): R[] => {
-  const predicateBuilder = (filtersPredicates as any)[filter.type][
-    filter.operator
-  ];
-  if (typeof predicateBuilder !== 'function') return rows;
-  const predicate = predicateBuilder(...filter.values);
-  return rows.filter((row) => predicate(filter.getter(row)));
-};
-
-export const defaultFilterGetter = (row: any, columnKey: string) =>
-  row[columnKey];
-
-export const defaultFilterValues: {
-  [K in DataGridFilterType]: DataGridFilterDataType<K>;
-} = {
-  date: '',
-  text: '',
-  number: 0,
-};
-
-export const defaultValueParsers: {
-  [K in DataGridFilterType]: (value: string) => DataGridFilterDataType<K>;
-} = {
-  date: (value) => moment(value).format('YYYY-MM-DD'),
-  text: (value) => value,
-  number: (value) => parseFloat(value),
-};
-
-export const groupDatesByYearAndMonth = (dates: any[]) =>
-  dates.reduce((acc: Record<string, Record<string, any[]>>, date) => {
-    const year = moment(date).format('YYYY');
-    if (!acc[year]) {
-      acc[year] = {};
-    }
-    const yearAndMonth = moment(date).format(`MM/YYYY`);
-    if (!acc[year][yearAndMonth]) {
-      acc[year][yearAndMonth] = [];
-    }
-    acc[year][yearAndMonth].push(date);
-    return acc;
-  }, {} as Record<string, Record<string, any[]>>);
-
-export const getDateGroups = (dates: any[]): DataGridFilterGroup[] => {
-  const grouperDates = groupDatesByYearAndMonth(dates);
-  return Object.entries(grouperDates).map(([year, months]) => ({
-    name: year,
-    displayValue: year,
-    values: Object.values(months).flat(),
-    groups: Object.entries(months).map(([month, dates]) => ({
-      displayValue: month,
-      name: month,
-      values: dates,
-    })),
-  }));
-};
-
-export const defaultRendererAndFormatter = (value: any) =>
-  String(value ?? '').trim() || '(Vides)';
-
-export const getCheckboxes = (
-  values: DataGridFilterValue[],
-  displayValue: DataGridFilterValue,
-  renderer: DataGridFilterRenderer,
-  formatter: DataGridFilterFormatter,
-  groups?: DataGridFilterGroup[],
-  level = 0
-): DataGridFilterCheckbox[] =>
-  groups
-    ? groups
-        .map<DataGridFilterCheckbox[]>((group) => [
-          {
-            displayValue: group.displayValue,
-            title: formatter(group.displayValue),
-            values: group.values ?? [],
-            level,
-          },
-          ...getCheckboxes(
-            group.values ?? [],
-            group.displayValue,
-            renderer,
-            formatter,
-            group.groups,
-            level + 1
-          ),
-        ])
-        .flat()
-    : values.map<DataGridFilterCheckbox>((value) => ({
-        displayValue: renderer(value),
-        title: formatter(value),
-        values: [value ?? ''],
-        level,
-      }));
-
-export const dateFilter = (key: string): DataGridFilter<'date'> => ({
-  type: 'date',
-  operator: 'before',
-  values: [''],
-  getter: (row) => row[key] ?? '',
-});
-
-export const textFilter = (key: string): DataGridFilter<'text'> => ({
-  type: 'text',
-  operator: 'contains',
-  values: [''],
-  getter: (row) => row[key] ?? '',
-});
-
-export const numberFilter = (key: string): DataGridFilter<'number'> => ({
-  type: 'number',
-  operator: 'equals',
-  values: [0],
-  getter: (row) => row[key] ?? '',
-});

package/src/components/data/DataGrid/helpers/index.ts

@@ -1,2 +0,0 @@
-export * from './filters';
-export * from './columns';

package/src/components/data/DataGrid/hooks/index.ts

@@ -1,30 +0,0 @@
-import { DataGridColumns, DataGridContext } from '../types';
-import { useContext, useMemo } from 'react';
-
-import { isColumnVisible } from '../helpers/columns';
-import { pickBy } from 'lodash';
-
-export { useDataGridCopy } from './useDataGridCopy';
-export { useDataGridSettings } from './useDataGridSettings';
-export { useDataGrid } from './useDataGrid';
-
-export const useDataGridContext = <R>(context: DataGridContext<R>) =>
-  useContext(context);
-
-export const useVisibleAndHiddenColumns = <R>(columns: DataGridColumns<R>) =>
-  useMemo(
-    () => [
-      pickBy(columns, (col) => isColumnVisible(col)),
-      pickBy(columns, (col) => !isColumnVisible(col)),
-    ],
-    [columns]
-  );
-
-export const useSortedColumns = <R>(columns: DataGridColumns<R>) =>
-  useMemo(
-    () =>
-      Object.entries(columns)
-        .filter(([, col]) => isColumnVisible(col))
-        .sort((a, b) => (a[1].order ?? 0) - (b[1].order ?? 0)),
-    [columns]
-  );

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -1,306 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { DEFAULT_ROW_HEIGHT, VIRTUAL_SCROLL_TOLERANCE } from '../styles';
-import {
-  DataGridColumns,
-  DataGridContext,
-  DataGridContextProps,
-  DataGridFilters,
-  DataGridFooterFunction,
-  DataGridProps,
-  DataGridSort,
-} from '../types';
-import {
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useDataGridCopy, useSortedColumns } from '.';
-
-import { applyFilter } from '../helpers';
-import { merge } from 'lodash';
-import { useDataGridSettings } from './useDataGridSettings';
-import { useElementSize } from '../../../../hooks';
-
-export const useDataGrid = <R,>(
-  props: DataGridProps<R>,
-  override?: Partial<DataGridContextProps<R>>
-): [DataGridContextProps<R>, DataGridContext<R>] => {
-  const {
-    rows,
-    onFiltersChanged,
-    onSortsChanged,
-    loadCopyRows,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    onVisibleRowsChange,
-    onSelectionChange,
-    selectable,
-    initialSorts,
-  } = props;
-  const [columns, setColumns] = useState<DataGridColumns<R>>(props.columns);
-
-  const visibleColumns = useSortedColumns(columns);
-
-  /** SETTINGS */
-
-  const { settings, setSettings, saveSettings } = useDataGridSettings(
-    props.name
-  );
-
-  const setColumnWidth = useCallback(
-    (key: string, width: number) => {
-      setSettings((prev) => ({ ...prev, [key]: { ...prev[key], width } }));
-    },
-    [setSettings]
-  );
-
-  const gridTemplateColumns = useMemo(
-    () =>
-      [
-        ...(selectable ? ['var(--space-10)'] : []),
-        ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
-      ].join(' '),
-    [selectable, visibleColumns]
-  );
-
-  // Update columns when settings change
-  useEffect(() => {
-    setColumns((prev) => merge({}, prev, settings));
-  }, [settings]);
-
-  /** ROWS SELECTION **/
-
-  const rowKeyGetter = useMemo(
-    () =>
-      typeof props.rowKey === 'function'
-        ? props.rowKey
-        : (row: R) => String(row?.[props.rowKey as keyof R]),
-    [props.rowKey]
-  );
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-
-  const selectedRows = useMemo(
-    () => props.rows.filter((row) => selectedKeys.includes(rowKeyGetter(row))),
-    [props.rows, rowKeyGetter, selectedKeys]
-  );
-
-  useEffect(() => {
-    onSelectionChange?.(selectedKeys);
-  }, [onSelectionChange, selectedKeys]);
-
-  /** ROWS FILTERING **/
-
-  const [filters, setFilters] = useState<DataGridFilters>({});
-  const [filteredRows, setFilteredRows] = useState<R[]>(rows ?? []);
-
-  useEffect(() => {
-    onFiltersChanged?.(filters);
-  }, [filters, onFiltersChanged]);
-
-  useEffect(() => {
-    const filteredRows =
-      props.filter === false
-        ? rows
-        : Object.entries(filters).reduce(
-            (tempRows, [, filter]) =>
-              applyFilter(tempRows, filter as any /* TODO : fix typings */),
-            rows
-          );
-    setFilteredRows(filteredRows ?? []);
-  }, [filters, props.filter, rows]);
-
-  /** CELL EDITING */
-
-  const [editingCell, setEditingCell] = useState<[number, number]>([-1, -1]);
-
-  /** ROWS SORTING **/
-
-  const [sorts, setSorts] = useState<Record<string, DataGridSort>>(
-    initialSorts ?? {}
-  );
-  const [sortedRows, setSortedRows] = useState<R[]>(rows);
-
-  useEffect(() => {
-    const sortedRows = [...filteredRows];
-    if (props.sort !== false) {
-      Object.entries(sorts).forEach(([sortKey, sort]) => {
-        // Get the sort column and make sure it exists and is sortable
-        const sortColumn = columns[sortKey];
-        if (!sortColumn || typeof sortColumn.sortGetter !== 'function') return;
-
-        // Sort the rows using the sortGetter function of the column
-        const sortDirection = sort === 'asc' ? 1 : -1;
-        sortedRows.sort((a: R, b: R) => {
-          const aValue = sortColumn.sortGetter!(a);
-          const bValue = sortColumn.sortGetter!(b);
-          if (aValue === bValue) return 0;
-          return aValue > bValue ? sortDirection : -sortDirection;
-        });
-      });
-    }
-    setSortedRows(sortedRows);
-  }, [columns, filteredRows, sorts, onSortsChanged, props.sort]);
-
-  useEffect(() => {
-    onSortsChanged?.(sorts);
-  }, [sorts, onSortsChanged]);
-
-  /** VIRTUAL SCROLLING */
-
-  const scrollableRef = useRef<HTMLTableSectionElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const [scrollTop, setScrollTop] = useState(0);
-  const [index, length] =
-    // props.showAllRows ? [0, sortedRows.length] :
-    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)];
-
-  const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.target as HTMLDivElement;
-    setScrollTop(target.scrollTop);
-  }, []);
-
-  const indexWithTolerance = Math.max(0, index - VIRTUAL_SCROLL_TOLERANCE);
-  const lengthWithTolerance = length + 2 * VIRTUAL_SCROLL_TOLERANCE;
-  const visibleRows = sortedRows.slice(
-    indexWithTolerance,
-    indexWithTolerance + lengthWithTolerance
-  );
-
-  useEffect(() => {
-    onVisibleRowsChange?.(indexWithTolerance, lengthWithTolerance);
-  }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
-
-  /** FOOTERS */
-  const [footers, setFooters] = useState<Record<string, string>>(
-    props.initialFooters ?? {}
-  );
-
-  const footerFunctions = useMemo(
-    () =>
-      Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
-        const column = columns[columnKey];
-        if (!column) {
-          return acc;
-        }
-        if (typeof column.footer === 'function') {
-          acc[columnKey] = column.footer;
-        } else if (
-          typeof column.footer === 'object' &&
-          typeof column.footer[footerKey] === 'function' &&
-          column.footer[footerKey] !== null
-        ) {
-          acc[columnKey] = column.footer[footerKey] as any;
-        }
-        return acc;
-      }, {} as Record<string, DataGridFooterFunction<R>>),
-    [columns, footers]
-  );
-
-  /** COPYING */
-
-  const { copyTable } = useDataGridCopy({
-    rows,
-    visibleColumns,
-    footerFunctions,
-    loadCopyRows,
-  });
-
-  const contextValue = useMemo<DataGridContextProps<R>>(
-    () => ({
-      ...props,
-      columns,
-      visibleColumns,
-      sortedRows,
-      selectedRows,
-      selectedKeys,
-      setSelectedKeys,
-      sorts,
-      setSorts,
-      filters,
-      setFilters,
-      editingCell,
-      setEditingCell,
-      copyTable,
-      setColumnWidth,
-      settings,
-      setSettings,
-      saveSettings,
-      visibleRows,
-      scrollableRef,
-      onScroll,
-      index,
-      length,
-      rowKeyGetter,
-      gridTemplateColumns,
-      footers,
-      setFooters,
-      footerFunctions,
-      ...override,
-    }),
-    [
-      props,
-      columns,
-      visibleColumns,
-      sortedRows,
-      selectedRows,
-      selectedKeys,
-      sorts,
-      filters,
-      editingCell,
-      copyTable,
-      setColumnWidth,
-      settings,
-      setSettings,
-      saveSettings,
-      visibleRows,
-      onScroll,
-      index,
-      length,
-      rowKeyGetter,
-      gridTemplateColumns,
-      footers,
-      footerFunctions,
-      override,
-    ]
-  );
-
-  const context = useMemo(
-    () =>
-      createContext<DataGridContextProps<R>>({
-        rows: [],
-        columns: {},
-        visibleColumns: [],
-        rowKey: '' as keyof R,
-        rowKeyGetter: () => '',
-        sortedRows: [],
-        selectedRows: [],
-        selectedKeys: [],
-        setSelectedKeys: () => {},
-        setSorts: () => {},
-        setFilters: () => {},
-        editingCell: [-1, -1],
-        setEditingCell: () => {},
-        copyTable: async () => {},
-        setColumnWidth: () => {},
-        saveSettings: () => {},
-        settings: {},
-        setSettings: () => {},
-        visibleRows: [],
-        scrollableRef: { current: null },
-        onScroll: () => {},
-        index: 0,
-        length: 0,
-        gridTemplateColumns: '',
-        footers: {},
-        setFooters: () => {},
-      }),
-    []
-  );
-
-  return useMemo(() => [contextValue, context], [context, contextValue]);
-};