@m4l/components 0.1.40 → 0.1.41

package/src/components/DataGrid/subcomponents/Table/hooks/useFocusRef.ts

@@ -1,15 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-
-export function useFocusRef<T extends HTMLOrSVGElement>(isSelected: boolean) {
-    const ref = useRef<T>(null);
-
-    useLayoutEffect(() => {
-        if (!isSelected) return;
-        ref.current?.focus({ preventScroll: true });
-    }, [isSelected]);
-
-    return {
-        ref,
-        tabIndex: isSelected ? 0 : -1,
-    };
-}

package/src/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.ts

@@ -1,323 +0,0 @@
-// react
-import { useEffect, useMemo, useState } from 'react';
-// External components
-import { Column, SELECT_COLUMN_KEY, SortColumn } from 'react-data-grid';
-// sub components
-import { getDragHeaderRenderer } from './getDragHeaderRenderer';
-import { ActionsColumn } from '../subcomponents/ActionsColumn';
-import { filterColumnClassName, SelectColumn } from '../subcomponents/SelectColumn';
-
-// types
-import type { ColumnAlign, ColumnType } from '../../../types';
-import { getPropertyByString, Maybe, useModuleSkeleton } from '@m4l/core';
-import type { IConfigColumn } from '../../../contexts/DataGridContext/types';
-import type { MenuAction } from '../../../../mui_extended/MenuActions/types';
-
-// hooks
-import { useFilters } from '../../../hooks/useFilters';
-import { useDataGrid } from '../../../hooks/useDataGrid';
-import { SkeletonFormatter } from '../subcomponents/SkeletonFormatter';
-import { ColumnFilter } from '../../../contexts/FilterContext/types';
-
-type Comparator = <TRow>(a: TRow, b: TRow) => number;
-
-function getComparator<TRow, TSummaryRow>(
-    columns: readonly Column<TRow, TSummaryRow>[],
-    sortColumn: string,
-): Comparator {
-    const column = columns.find(d => d.key === sortColumn);
-
-    let typeOrder: ColumnType = 'string';
-
-    if (column) {
-        typeOrder = column.type || 'string';
-    }
-
-    switch (typeOrder) {
-        case 'number':
-            return (a, b) => {
-                try {
-                    return Number((a as any)[sortColumn]) - Number((b as any)[sortColumn]);
-                } catch (error) {
-                    return -1;
-                }
-            };
-        default:
-            return (a, b) => {
-                try {
-                    return (a as any)[sortColumn]
-                        .toString()
-                        .localeCompare((b as any)[sortColumn].toString());
-                } catch (error) {
-                    return -1;
-                }
-            };
-    }
-}
-
-const getColumIndex = (key: string, columnsConfig: IConfigColumn[]) =>
-    columnsConfig.findIndex(columnConfig => columnConfig.key === key);
-const getInOrderColumns = <TRow, TSummaryRow>(
-    columns: readonly Column<TRow, TSummaryRow>[],
-    hasCheckedRows: boolean,
-    columnsConfig: IConfigColumn[],
-    columnsWidths: Map<string, Maybe<string | number>>,
-    rowActionsGetter: ((row: TRow) => MenuAction[]) | undefined,
-): readonly Column<TRow, TSummaryRow>[] => {
-    // Filtras las ocultas y las no visibles.
-    // Organizarlas por el index en que se guardó la configuraciion
-    // Aplicar la configuración de frozen y otras que puedan aparacer de la columna
-
-    let filteredSortedColumns = columns
-        .filter(column => {
-            const columnConfigIndex = getColumIndex(column.key, columnsConfig);
-
-            const visible =
-                columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
-
-            return !column.hidden && visible;
-        })
-        .sort(
-            (a, b) =>
-                // Sort for index
-                getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig),
-        )
-        .map(columnSorted => {
-            const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
-
-            return {
-                ...columnSorted,
-                frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
-                width:
-                    typeof columnsWidths.get(columnSorted.key) === 'number'
-                        ? columnsWidths.get(columnSorted.key)
-                        : columnSorted.width,
-            };
-        })
-        .sort((a, b) => {
-            // Sort for frozen
-            const order =
-                (a.frozen === undefined || a.frozen === false) ===
-                (b.frozen === undefined || b.frozen === false)
-                    ? 0
-                    : a.frozen
-                    ? -1
-                    : 1;
-            /// /////
-            return order;
-        });
-
-    // ////
-    if (rowActionsGetter) {
-        filteredSortedColumns = [ActionsColumn as any, ...filteredSortedColumns];
-    }
-
-    if (hasCheckedRows) {
-        filteredSortedColumns = [SelectColumn as any, ...filteredSortedColumns];
-    }
-
-    return filteredSortedColumns;
-};
-
-const getAligByType = (columnType: ColumnType): ColumnAlign => {
-    switch (columnType) {
-        case 'string':
-            return 'left';
-        case 'date':
-        case 'boolean':
-        case 'custom':
-            return 'center';
-        case 'number':
-            return 'right';
-        default:
-            break;
-    }
-
-    return 'left';
-};
-
-export const useSortColumnsRows = <TRow, TSummaryRow>(
-    sourceColumns: readonly Column<TRow, TSummaryRow>[],
-    sourceRows: readonly TRow[],
-) => {
-    const {
-        columnsConfig,
-        columnsWidths,
-        onChangeColumnsOrder,
-        rowActionsGetter,
-        checkedRows,
-        onCheckedRowsChange,
-    } = useDataGrid<TRow, TSummaryRow>();
-
-    const [columns, setColumns] = useState<readonly Column<TRow, TSummaryRow>[]>(() => []);
-    const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
-
-    const isSkeleton = useModuleSkeleton();
-    const { activeFilters, filters } = useFilters();
-
-    /// ///
-
-    // const [filters, setFilters] = useState<Map<Key, string>>(new Map());
-    /// /////
-
-    const findKeyInColumns = (key: string, cols: readonly Column<TRow, TSummaryRow>[]) => {
-        const index = cols.findIndex(column => key === column.key && column.hidden === false);
-        return index !== -1;
-    };
-
-    useEffect(() => {
-        setColumns(
-            getInOrderColumns<TRow, TSummaryRow>(
-                sourceColumns,
-                !!checkedRows && !!onCheckedRowsChange, //Si están seteados se habilita el múltipe
-                columnsConfig,
-                columnsWidths,
-                rowActionsGetter,
-            ),
-        );
-
-        /// /////
-
-        const finalSortedColumns = sortColumns.filter(sortColumn =>
-            findKeyInColumns(sortColumn.columnKey, sourceColumns),
-        );
-
-        if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
-            setSortColumns(finalSortedColumns);
-        }
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sourceColumns, columnsConfig, rowActionsGetter]);
-
-    const finalColumns: readonly Column<TRow, TSummaryRow>[] = useMemo(() => {
-        const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
-
-        return columns.map(c => {
-            const newColumn = {
-                ...c,
-                cellClass:
-                    c.align !== undefined
-                        ? `rdg-cell-align-${c.align}`
-                        : `rdg-cell-align-${getAligByType(c.type)}`,
-            };
-
-            if (
-                newColumn.key === SELECT_COLUMN_KEY ||
-                (newColumn.isDraggable !== undefined && newColumn.isDraggable === false)
-            )
-                return newColumn;
-
-            if (isSkeleton) {
-                newColumn.headerRenderer = SkeletonFormatter;
-                newColumn.formatter = SkeletonFormatter;
-            }
-            /// ///
-            if (newColumn.headerRenderer) {
-                newColumn.withinHeaderRenderer = newColumn.headerRenderer as any;
-            }
-            // ComponentType<HeaderRendererProps<TRow, TSummaryRow>
-            if (
-                (newColumn?.withFilter === undefined || newColumn.withFilter === true) &&
-                activeFilters
-            ) {
-                newColumn.headerCellClass = filterColumnClassName;
-            }
-            newColumn.headerRenderer = DragAndDropHeaderRenderer as any;
-
-            return newColumn;
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
-
-    /// ///////
-    const finalRows = useMemo((): readonly TRow[] => {
-        /// /////
-        const nextRows = sourceRows.filter(r => {
-            if (!filters || filters.size === 0) return true;
-
-            const iterator = filters.entries();
-            let valReturn = true;
-
-            /// /////
-
-            for (let i = 0; i < filters.size; i++) {
-                const entry = iterator.next().value;
-
-                const columnKey: string = entry[0];
-                const columnFilter: ColumnFilter = entry[1];
-                let valCell: string;
-                try {
-                    if (columnFilter.customFilter) {
-                        valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
-                    } else {
-                        valCell = getPropertyByString(r as any, columnKey) || '';
-                        valReturn = valReturn && valCell.includes(columnFilter.value);
-                    }
-                } catch (error) {
-                    continue;
-                }
-
-                if (!valReturn) break;
-            }
-
-            return valReturn;
-        });
-
-        if (sortColumns.length === 0) {
-            return nextRows;
-        }
-
-        nextRows.sort((a, b) => {
-            for (const sort of sortColumns) {
-                const comparator = getComparator(columns, sort.columnKey);
-                const compResult = comparator(a, b);
-                if (compResult !== 0) {
-                    return sort.direction === 'ASC' ? compResult : -compResult;
-                }
-            }
-            return 0;
-        });
-
-        return nextRows;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sourceRows, sortColumns, filters]);
-
-    return { finalColumns, sortColumns, setSortColumns, finalRows };
-};
-
-/*
-import { useState, useMemo, useCallback } from 'react';
-import { Column } from 'react-data-grid';
-//types
-import { ColumnType } from '../types';
-
-const order = (type: ColumnType, a: any, b: any) => {
-    if (type === 'number') {
-        // order number
-        try {
-            return Number(a) - Number(b);
-        } catch (error) {
-            return -1;
-        }
-    }
-
-    if (type === 'date') {
-        try {
-            if (isNaN(Date.parse(a))) {
-                return 1;
-            }
-
-            if (isNaN(Date.parse(b))) {
-                return -1;
-            }
-
-            const date1: number = new Date(a).getMilliseconds();
-            const date2: number = new Date(b).getMilliseconds();
-            return date2 - date1;
-        } catch (error) {
-            return -1;
-        }
-    }
-
-    return a.toString().localeCompare(b.toString());
-}; */

package/src/components/DataGrid/subcomponents/Table/index.tsx

@@ -1,139 +0,0 @@
-// react
-import { Key, useEffect, useRef } from 'react';
-
-// External components
-import DataGrid, { DataGridHandle, SortColumn } from 'react-data-grid';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-// Styled components
-import { OriginalDataGridWrapperStyled } from '../../styles';
-import { WrapperTable } from './styles';
-// Sub components
-import { CheckboxFormatter } from './subcomponents/CheckboxFormatter';
-
-// types
-import { GridProps } from '../../types';
-import { filterHeight } from './subcomponents/SelectColumn';
-
-// hooks
-import { useSortColumnsRows } from './hooks/useSortColumnsRows';
-import { useFilters } from '../../hooks/useFilters';
-import { useDataGrid } from '../../hooks/useDataGrid';
-
-// eslint-disable-next-line no-empty-pattern
-export function Table<TRow, TSummaryRow>(props: GridProps<TRow, TSummaryRow>) {
-    const {
-        columns,
-        rows,
-        withActions,
-        onRowsChange,
-        rowKeyGetter,
-        selectedRows,
-        onSelectedRowsChange,
-    } = props;
-    const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
-        columns,
-        rows,
-    );
-    const { activeFilters } = useFilters();
-    const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight } =
-        useDataGrid();
-
-    // const [finalSelectedRows, setFinalSelectedRows] = useState<ReadonlySet<Key>>(
-    //     () => new Set(props.selectedRows),
-    // );
-
-    // Actualizar las filas que externamente se seleccionan
-    // useEffect(() => {
-    //     setFinalSelectedRows(new Set(selectedRows));
-    // }, [selectedRows]);
-
-    const ref_data_grid = useRef<DataGridHandle>(null);
-
-    //Esta función permite seleccionar la fila a la que se le dió click.
-    const onRowClick = (row: TRow) => {
-        if (selectedRows && onSelectedRowsChange) {
-            if (selectedRows.entries().next().value) {
-                // no repetir el click
-                if (selectedRows.entries().next().value[1] === rowKeyGetter(row)) {
-                    return;
-                }
-            }
-
-            const mySet: ReadonlySet<Key> = new Set([rowKeyGetter(row)]);
-
-            onSelectedRowsChange(mySet);
-        }
-    };
-
-    useEffect(() => {
-        // Use efect para poner un atributo de organización, ya que el grid lo pierde cuando se organiza el grid por varias columnas
-
-        let columnIndice = 0;
-        for (const column of finalColumns) {
-            const index = sortColumns.findIndex(sortColumn => column.key === sortColumn.columnKey);
-            if (index !== -1) {
-                ref_data_grid.current?.element
-                    ?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)
-                    ?.setAttribute('aria-columnsort', `${sortColumns[index].direction}`);
-            } else {
-                ref_data_grid.current?.element
-                    ?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)
-                    ?.removeAttribute('aria-columnsort');
-            }
-            columnIndice++;
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sortColumns, finalColumns]);
-
-    useEffect(() => {
-        setRowsCount(finalRows.length); // Actualizar la filas filtradas
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [finalRows]);
-
-    const onColumnResize = (idx: number, width: number) => {
-        // informa el del ancho de las columnas
-        onChangeColumnWidth(finalColumns[idx].key, width);
-    };
-
-    const onChangeSort = (newSortColumns: SortColumn[]) => {
-        setSortColumns(newSortColumns);
-    };
-
-    return (
-        <WrapperTable id="WrapperTable" withActions={withActions}>
-            <OriginalDataGridWrapperStyled id="OriginalGridWrapperStyled">
-                <DndProvider backend={HTML5Backend} context={window}>
-                    <DataGrid
-                        className="fill-grid rdg-light"
-                        ref={ref_data_grid}
-                        // header
-                        headerRowHeight={
-                            activeFilters
-                                ? currentRowHeaderHeight + filterHeight
-                                : currentRowHeaderHeight
-                        }
-                        // columnas
-                        columns={finalColumns}
-                        sortColumns={sortColumns}
-                        onSortColumnsChange={onChangeSort}
-                        onColumnResize={onColumnResize}
-                        // filas
-                        rows={finalRows}
-                        onRowsChange={onRowsChange}
-                        selectedRows={selectedRows}
-                        onSelectedRowsChange={onSelectedRowsChange}
-                        onRowClick={onRowClick}
-                        rowHeight={currentRowHeight}
-                        rowKeyGetter={rowKeyGetter}
-                        // celdas
-                        cellNavigationMode="LOOP_OVER_ROW"
-                        components={{ checkboxFormatter: CheckboxFormatter }}
-                        defaultColumnOptions={{ resizable: true, sortable: true }}
-                    />
-                </DndProvider>
-            </OriginalDataGridWrapperStyled>
-        </WrapperTable>
-    );
-}

package/src/components/DataGrid/subcomponents/Table/styles.tsx

@@ -1,15 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { WithActionsProps } from '../../types';
-
-export const WrapperTable = styled('div', {
-    shouldForwardProp: prop => prop !== 'withActions',
-})<WithActionsProps>(({ withActions, theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-    top: withActions ? theme.spacing(5.5) : '0px',
-    bottom: '0px',
-    left: '0px',
-    right: '0px',
-    overflow: 'hidden',
-}));

package/src/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.tsx

@@ -1,44 +0,0 @@
-import { Column, FormatterProps } from 'react-data-grid';
-import { MenuActions } from '../../../../mui_extended/MenuActions';
-
-// hooks
-import { useDataGrid } from '../../../hooks/useDataGrid';
-
-export const ACTIONS_COLUMN_KEY = 'actions-row';
-
-export const filterHeight = 35;
-
-function ActionsFormatter(props: FormatterProps<any, any>) {
-    const { rowActionsGetter } = useDataGrid();
-
-    if (rowActionsGetter === undefined) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <></>;
-    }
-
-    return (
-        <MenuActions
-            arrowType="top-left"
-            objItem={props.row}
-            menuActions={rowActionsGetter}
-            marginTop={1}
-            marginLeft="-11px" // Se calcula a ojo, por el arrow que esta desplazado
-            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-        />
-    );
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ActionsColumn: Column<any, any> = {
-    key: ACTIONS_COLUMN_KEY,
-    name: 'Actions',
-    width: 60,
-    // maxWidth: 40,
-    withFilter: false,
-    resizable: true,
-    sortable: false,
-    frozen: true,
-    type: 'custom',
-    formatter: ActionsFormatter,
-};

package/src/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.tsx

@@ -1,26 +0,0 @@
-import { Checkbox } from '@mui/material';
-import { forwardRef } from 'react';
-import { CheckboxFormatterProps } from 'react-data-grid';
-import { CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon } from './CustomIcons';
-
-export const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function CheckboxFormatter({ onChange, checked, ...props }, _ref) {
-        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-            onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);
-        }
-        return (
-            <Checkbox
-                checked={checked}
-                size="small"
-                icon={<CheckboxIcon />}
-                checkedIcon={<CheckboxCheckedIcon />}
-                indeterminateIcon={<CheckboxIndeterminateIcon />}
-                onChange={handleChange}
-                {...props}
-            />
-        );
-
-        // return <input  type="checkbox" ref={ref} {...props} onChange={handleChange} />;
-    },
-);