@m4l/components 0.1.35 → 0.1.37

package/src/components/DataGrid/contexts/DataGridContext/index.tsx

@@ -0,0 +1,348 @@
+// react
+import { createContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { Column } from 'react-data-grid';
+// eslint-disable-next-line import/extensions
+
+import { Maybe } from '@m4l/core';
+import { RowKey, RowHeightVariants } from '../../types';
+
+// types
+import {
+    DataGridContextProps,
+    DataGridProviderProps,
+    IConfigColumn,
+    IGridConfig,
+    RowHeightState,
+} from './types';
+
+// const initialState: BaseContextProps = {
+//     // columns
+//     columnsWidths: new Map(),
+//     onChangeColumnsConfig: voidFunction,
+//     onChangeColumnsOrder: voidFunction,
+//     onChangeColumnWidth: voidFunction,
+//     columnsConfig: [
+//         {
+//             key: 'string',
+//             visible: true,
+//             hidden: false,
+//             index: 0,
+//             frozen: true,
+//             name: 'string;',
+//             orginalIndex: 0,
+//             originalVisible: true,
+//             originalFrozen: false,
+//         },
+//     ],
+
+//     // rows
+//     isSkeleton: false,
+//     rowsCount: 0,
+//     setRowsCount: voidFunction,
+//     rowHeights: 36,
+//     currentRowHeight: 36,
+//     currentRowHeaderHeight: 40,
+//     currentRowHeightVariant: 'compact',
+//     setRowHeightVariant: voidFunction,
+// };
+
+//
+
+const DataGridContext = createContext<DataGridContextProps<any, any> | null>(null);
+
+// ----------------------------------------------------------------------
+
+const getColumnConfigByKey = (
+    key: string,
+    storeColumnsConfig: IConfigColumn[],
+): [IConfigColumn | undefined, number] => {
+    let indexFind = -1;
+
+    return [
+        storeColumnsConfig.find((column, index) => {
+            if (column.key === key) {
+                indexFind = index;
+            }
+            return column.key === key;
+        }),
+        indexFind,
+    ];
+};
+
+function getColumnsConfig<TRow, TSummaryRow>(
+    id: RowKey,
+    columns: readonly Column<TRow, TSummaryRow>[],
+    remoteConfig: Maybe<IGridConfig> = undefined,
+) {
+    let columnsConfig: IConfigColumn[];
+
+    if (remoteConfig) {
+        columnsConfig = remoteConfig.columnsConfig;
+    } else {
+        try {
+            const item = window.localStorage.getItem(`${id}_columns_config`);
+            columnsConfig = item !== null ? JSON.parse(item) : [];
+        } catch (e) {
+            columnsConfig = [];
+        }
+    }
+
+    return columns
+        .map((column, index) => {
+            const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(
+                column.key,
+                columnsConfig,
+            );
+
+            //
+
+            return {
+                key: column.key,
+                name: column.name,
+                hidden: column.hidden === undefined ? false : column.hidden,
+
+                index: columnConfigIndex > -1 ? columnConfigIndex : index,
+                visible: columnConfig.visible === undefined ? true : columnConfig.visible,
+                frozen: columnConfig.frozen === undefined ? false : columnConfig.frozen,
+
+                orginalIndex: index,
+                originalVisible: column.visible === undefined ? true : column.visible,
+                originalFrozen: column.frozen === undefined ? false : column.frozen,
+            } as IConfigColumn;
+        })
+        .sort((a, b) => a.index - b.index);
+}
+
+function getColumnsWidth<TRow, TSummaryRow>(
+    id: RowKey,
+    columns: readonly Column<TRow, TSummaryRow>[],
+    remoteConfig: Maybe<IGridConfig>,
+) {
+    const newMap = new Map<string, Maybe<string | number>>();
+
+    let storeColumnsWidth: Map<string, any>;
+
+    try {
+        const item = window.localStorage.getItem(`${id}_columns_width`);
+        storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : new Map();
+    } catch (e) {
+        storeColumnsWidth = new Map();
+    }
+
+    for (let i = 0; i < columns.length; i++) {
+        let width: Maybe<string | number>;
+        if (remoteConfig) {
+            // Intentar con la configuración remota
+            try {
+                width = remoteConfig.columnsWidths.get(columns[i].key);
+            } catch (error) {}
+        }
+        if (width === undefined) {
+            // Intentar con el Store
+            const storeWidth = storeColumnsWidth.get(columns[i].key);
+            if (typeof storeWidth === 'number') {
+                width = storeWidth;
+            }
+        }
+        if (width !== undefined) {
+            // Asignar el por defecto de la columna
+            newMap.set(columns[i].key, width);
+        }
+    }
+
+    return newMap;
+}
+
+function saveColumnsWidth(id: RowKey, storeColumnsWidth: Map<string, Maybe<string | number>>) {
+    /// /
+    localStorage.setItem(`${id}_columns_width`, JSON.stringify([...storeColumnsWidth]));
+}
+
+function saveColumnsConfig(id: RowKey, columnsConfig: IConfigColumn[]) {
+    /// /
+    localStorage.setItem(`${id}_columns_config`, JSON.stringify(columnsConfig));
+}
+
+function getIndexRowHeightVariant(variant: RowHeightVariants) {
+    if (variant === 'compact') {
+        return 0;
+    }
+    if (variant === 'standard') {
+        return 1;
+    }
+    return 2;
+}
+
+function DataGridProvider<TRow, TSummaryRow>(props: DataGridProviderProps<TRow, TSummaryRow>) {
+    const {
+        id,
+        children,
+
+        columns,
+        remoteConfig,
+        rows,
+        rowsCount,
+        rowActionsGetter,
+        rowHeights = [36, 52, 67],
+        rowHeaderHeights = [44, 63, 75],
+        initialRowHeightVariant = 'compact',
+        checkedRows,
+        onCheckedRowsChange,
+        rowKeyGetter,
+    } = props;
+
+    const [columnsWidths, setColumnsWidths] = useState<Map<string, Maybe<string | number>>>(
+        new Map<string, Maybe<string | number>>(),
+    );
+    const [columnsConfig, setColumnsConfigOptions] = useState<IConfigColumn[]>(() =>
+        //
+        [],
+    );
+    const [rowsFilterCount, setRowFilterCount] = useState<number>(rowsCount);
+
+    const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState<RowHeightState>(() => {
+        if (typeof rowHeights !== typeof rowHeaderHeights) {
+            throw new Error('Must be same type rowheights and rowHeaderTypes');
+        }
+        if (typeof rowHeights === 'number' && typeof rowHeaderHeights === 'number') {
+            return {
+                rowHVariant: 'compact',
+                rowHeight: rowHeights,
+                rowHeaderHeight: rowHeaderHeights as number,
+            };
+        }
+
+        if (typeof rowHeights !== 'number' && rowHeights.length !== 3) {
+            throw new Error('Must be 3 heights');
+        }
+        if (typeof rowHeaderHeights !== 'number' && rowHeaderHeights.length !== 3) {
+            throw new Error('Must be 3 HeaderHeights');
+        }
+        return {
+            rowHVariant: initialRowHeightVariant,
+            rowHeight:
+                typeof rowHeights !== 'number'
+                    ? rowHeights[getIndexRowHeightVariant(initialRowHeightVariant)]
+                    : rowHeights,
+            rowHeaderHeight:
+                typeof rowHeaderHeights !== 'number'
+                    ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)]
+                    : rowHeaderHeights,
+        };
+    });
+
+    const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
+
+    let timerSaveColumns: NodeJS.Timeout;
+
+    /// /
+    useEffect(() => {
+        //
+    }, [columnsConfig]);
+
+    useEffect(() => {
+        //
+        setColumnsWidths(getColumnsWidth(id, columns, remoteConfig));
+        setColumnsConfigOptions(getColumnsConfig(id, columns, remoteConfig));
+    }, [columns, id, remoteConfig]);
+
+    const onChangeColumnsConfig = useCallback(
+        (newColumnsConfig: IConfigColumn[]) => {
+            saveColumnsConfig(id, newColumnsConfig);
+            setColumnsConfigOptions(newColumnsConfig);
+        },
+        [setColumnsConfigOptions, id],
+    );
+
+    const onChangeColumnsOrder = useCallback(
+        (sourceKey: string, targetKey: string) => {
+            //
+
+            if (sourceKey === targetKey) return;
+
+            const sourceColumnIndex = columnsConfig.findIndex(c => c.key === sourceKey);
+            const targetColumnIndex = columnsConfig.findIndex(c => c.key === targetKey);
+            const reorderedColumnsConfig = [...columnsConfig];
+
+            reorderedColumnsConfig.splice(
+                targetColumnIndex,
+                0,
+                reorderedColumnsConfig.splice(sourceColumnIndex, 1)[0],
+            );
+
+            onChangeColumnsConfig(reorderedColumnsConfig);
+        },
+        [columnsConfig, onChangeColumnsConfig],
+    );
+
+    const onChangeColumnWidth = (columnKey: string, width: number) => {
+        columnsWidths.set(columnKey, Math.round(width)); // para evitar los subpixeles
+
+        if (timerSaveColumns) {
+            clearTimeout(timerSaveColumns);
+        }
+
+        timerSaveColumns = setTimeout(() => {
+            saveColumnsWidth(id, columnsWidths);
+        }, 500);
+    };
+
+    useEffect(() => {
+        // Use efect para poner un atributo de organización, ya que el grid lo pierde cuando se organiza el grid por varias columnas
+        // camb
+        /// /
+
+        setColumnsConfigOptions(getColumnsConfig(id, columns));
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columns]);
+
+    const setRowFilterCountInternal = (newRowsCount: number) => {
+        setRowFilterCount(newRowsCount);
+    };
+    /// /
+
+    const setCurrentRowHeightInternal = useCallback(
+        (newVariant: RowHeightVariants) => {
+            if (typeof rowHeights === 'number' || typeof rowHeaderHeights === 'number') {
+                throw new Error('Only use setCurrentRowHeight with vector rowHeights');
+            }
+
+            setCurrentRowHeightVariant({
+                rowHVariant: newVariant,
+                rowHeight: rowHeights[getIndexRowHeightVariant(newVariant)],
+                rowHeaderHeight: rowHeaderHeights[getIndexRowHeightVariant(newVariant)],
+            });
+        },
+        [setCurrentRowHeightVariant, rowHeights, rowHeaderHeights],
+    );
+
+    return (
+        <DataGridContext.Provider
+            value={{
+                columnsConfig,
+                columnsWidths,
+                onChangeColumnsConfig,
+                onChangeColumnsOrder,
+                onChangeColumnWidth,
+                rowsCount: rowsFilterCount,
+                setRowsCount: setRowFilterCountInternal,
+                rowActionsGetter,
+                currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
+                currentRowHeight: currentRowHeightVariant.rowHeight,
+                currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
+                rowHeights: finalRowHeights,
+
+                setRowHeightVariant: setCurrentRowHeightInternal,
+                rows,
+                checkedRows,
+                onCheckedRowsChange,
+                rowKeyGetter,
+            }}
+        >
+            {children}
+        </DataGridContext.Provider>
+    );
+}
+
+export { DataGridProvider, DataGridContext };

package/src/components/DataGrid/contexts/DataGridContext/types.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+
+import { Maybe } from '@m4l/core';
+
+import { RowKey, RowHeightVariants, GridProps } from '../../types';
+
+export interface IConfigColumn {
+    key: string;
+    visible: boolean;
+    hidden: boolean;
+    // width: number;
+    index: number;
+    frozen: boolean;
+    name: string;
+
+    orginalIndex: number;
+    originalVisible: boolean;
+    originalFrozen: boolean;
+}
+
+export interface IGridConfig {
+    columnsConfig: IConfigColumn[];
+    columnsWidths: Map<string, Maybe<RowKey>>;
+}
+
+export interface DataGridProviderProps<TRow, TSummaryRow>
+    extends Pick<
+        GridProps<TRow, TSummaryRow>,
+        | 'rows'
+        | 'columns'
+        | 'rowActionsGetter'
+        | 'rowHeaderHeights'
+        | 'rowHeights'
+        | 'initialRowHeightVariant'
+        | 'checkedRows'
+        | 'onCheckedRowsChange'
+        | 'rowKeyGetter'
+    > {
+    id: number | string;
+
+    children: ReactNode;
+
+    remoteConfig?: IGridConfig;
+    rowsCount: number;
+
+    // checkedRows?: Set<RowKey>;
+    // onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>, rawRowsSelected: TRow[]) => void;
+}
+
+export type RowHeightState = {
+    rowHVariant: RowHeightVariants;
+    rowHeight: number;
+    rowHeaderHeight: number;
+};
+
+// type RequiredWithType<T, V> = {
+//     [P in keyof T]-?: V;
+// };
+
+export interface DataGridContextProps<TRow, TSummaryRow>
+    extends IGridConfig,
+        Pick<
+            DataGridProviderProps<TRow, TSummaryRow>,
+            | 'rows'
+            | 'checkedRows'
+            | 'onCheckedRowsChange'
+            | 'rowHeights'
+            | 'rowsCount'
+            | 'rowActionsGetter'
+            | 'rowKeyGetter'
+        > {
+    setRowsCount: (newRowsCount: number) => void;
+
+    currentRowHeaderHeight: number;
+    currentRowHeight: number;
+    currentRowHeightVariant: RowHeightVariants;
+    setRowHeightVariant: (neVariant: RowHeightVariants) => void;
+
+    onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
+    onChangeColumnsOrder: (sourceKey: string, targetKey: string) => void;
+    onChangeColumnWidth: (columnKey: string, width: number) => void;
+}

package/src/components/DataGrid/contexts/FilterContext/index.tsx

@@ -0,0 +1,68 @@
+// react
+import { ReactNode, createContext, useState } from 'react';
+import { voidFunction } from '@m4l/core';
+// types
+import { ColumnFilter, FilterContextProps, IFilterState } from './types';
+import { Column } from 'react-data-grid';
+
+const initialState: FilterContextProps = {
+    activeFilters: false,
+    setActiveFilters: voidFunction,
+};
+
+const FilterContext = createContext<FilterContextProps>(initialState);
+
+// ----------------------------------------------------------------------
+
+type FilterProviderProps = {
+    children: ReactNode;
+    initialActiveFilters: boolean;
+};
+
+function FilterProvider({ children, initialActiveFilters }: FilterProviderProps) {
+    const [filterOptions, setFilterOptions] = useState<IFilterState>({
+        activeFilters: initialActiveFilters,
+    });
+
+    const onChangeFilter = (column: Column<any, any>, value: string) => {
+        const newMap: Map<string, ColumnFilter> = filterOptions.filters
+            ? new Map(filterOptions.filters)
+            : new Map();
+
+        if (value !== '') {
+            newMap.set(column.key, { value, customFilter: column.customFilter });
+        } else {
+            newMap.delete(column.key);
+        }
+        /// /////
+
+        setFilterOptions({
+            ...filterOptions,
+            filters: newMap,
+        });
+    };
+
+    const setActiveFilters = (active: boolean) => {
+        if (active) {
+            setFilterOptions({ activeFilters: true, filters: new Map() });
+        } else {
+            setFilterOptions({ activeFilters: false });
+        }
+    };
+
+    /// /////
+
+    return (
+        <FilterContext.Provider
+            value={{
+                ...filterOptions,
+                onChangeFilter,
+                setActiveFilters,
+            }}
+        >
+            {children}
+        </FilterContext.Provider>
+    );
+}
+
+export { FilterProvider, FilterContext };

package/src/components/DataGrid/contexts/FilterContext/types.ts

@@ -0,0 +1,18 @@
+import { Column } from 'react-data-grid';
+
+export interface ColumnFilter {
+    value: string;
+    customFilter?: (row: any, value: string) => boolean;
+    // column: Column<any, any>;
+}
+export interface FilterContextProps {
+    activeFilters: boolean;
+    filters?: Map<string, ColumnFilter>;
+    onChangeFilter?: (column: Column<any, any>, value: string) => void;
+    setActiveFilters: (active: boolean) => void;
+}
+
+export interface IFilterState {
+    activeFilters: boolean;
+    filters?: Map<string, ColumnFilter>;
+}

package/src/components/DataGrid/dictionary.ts

@@ -0,0 +1,51 @@
+import { Dictionary } from '@m4l/core';
+
+import {
+    getModalDialogComponentsDictionary,
+    defaultModalDialogDictionary,
+} from '../modal/ModalDialog/dictionary';
+
+import {
+    defaultPagerDictionary,
+    getPagerComponentsDictionary,
+} from '../../components/mui_extended/Pager/dicctionary';
+
+export function getDataGridComponentsDictionary() {
+    return ['data_grid']
+        .concat(getPagerComponentsDictionary())
+        .concat(getModalDialogComponentsDictionary());
+}
+
+export const defaultGridDictionary: Dictionary = {
+    grid: {
+        actions: 'Actions',
+
+        settings_tooltip: 'Settings',
+        settings_sel_columns: 'Select columns',
+        settings_column_name: 'Name',
+        settings_column_position: 'Position',
+        settings_column_visible: 'Visible',
+        settings_column_frozen: 'Frozen',
+        settings_move_first: 'Move first',
+        settings_move_up: 'Move up',
+        settings_move_last: 'Move first',
+        settings_move_down: 'Move down',
+        settings_visible_all: 'Visible all',
+        settings_no_visible_all: 'Invisible all',
+        settings_restore: 'Restore',
+
+        density_tooltip: 'Density',
+        density_compact: 'Compact',
+        density_standard: 'Standard',
+        density_confortable: 'Confortable',
+
+        filter_holder: 'Filter',
+        filter_show: 'Show filters',
+        filter_hide: 'Hide filters',
+
+        rows: 'Rows',
+        rows_per_page: 'Rows per page',
+    },
+    ...defaultPagerDictionary,
+    ...defaultModalDialogDictionary,
+};

package/src/components/DataGrid/formatters/columnBooleanFormatter/index.tsx

@@ -0,0 +1,24 @@
+// @m4l
+
+// mui
+
+import { getPropertyByString } from '@m4l/core';
+
+import { BooleanFormatter } from '../../../../components/formatters';
+
+import { ColumnBooleanFormatterProps } from './types';
+
+export function columnBooleanFormatter(props: ColumnBooleanFormatterProps) {
+    const { fieldValue, presentationType, Component } = props;
+
+    // eslint-disable-next-line react/display-name
+    return (obProps: any) => {
+        return (
+            <BooleanFormatter
+                presentationType={presentationType}
+                value={getPropertyByString(obProps, fieldValue)}
+                Component={Component}
+            />
+        );
+    };
+}

package/src/components/DataGrid/formatters/columnBooleanFormatter/styles.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+export const Container = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+
+    // height: 100%;
+    position: 'absolute',
+    inset: '0px',
+    margin: theme.spacing(0.5),
+    padding: '0px',
+    overflow: 'hidden',
+}));

package/src/components/DataGrid/formatters/columnBooleanFormatter/types.ts

@@ -0,0 +1,7 @@
+import { PresentationType } from '../../../../components/formatters/BooleanFormatter/types';
+
+export interface ColumnBooleanFormatterProps {
+    Component?: React.ElementType;
+    presentationType: PresentationType;
+    fieldValue: string;
+}

package/src/components/DataGrid/formatters/columnDateFormatter/index.tsx

@@ -0,0 +1,24 @@
+// react
+
+// @m4l
+import { getPropertyByString } from '@m4l/core';
+// mui
+
+import { DateFormatter } from '../../../formatters';
+
+import type { ColumnDateFormatterProps } from './types';
+
+export function columnDateFormatter(props: ColumnDateFormatterProps) {
+    const { fieldValue, presentationType, Component } = props;
+
+    // eslint-disable-next-line react/display-name
+    return (obProps: any) => {
+        return (
+            <DateFormatter
+                presentationType={presentationType}
+                value={getPropertyByString(obProps, fieldValue)}
+                Component={Component}
+            />
+        );
+    };
+}

package/src/components/DataGrid/formatters/columnDateFormatter/styles.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+export const Container = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+
+    // height: 100%;
+    position: 'absolute',
+    inset: '0px',
+    margin: theme.spacing(0.5),
+    padding: '0px',
+    overflow: 'hidden',
+}));

package/src/components/DataGrid/formatters/columnDateFormatter/types.ts

@@ -0,0 +1,8 @@
+import { PresentationType } from '../../../formatters/DateFormatter/types';
+
+export interface ColumnDateFormatterProps {
+    Component?: React.ElementType;
+    presentationType: PresentationType;
+    format?: string;
+    fieldValue: string;
+}

package/src/components/DataGrid/formatters/columnNestedValueFormatter/index.tsx

@@ -0,0 +1,17 @@
+// @m4l
+
+// mui
+
+import { getPropertyByString } from '@m4l/core';
+import { WrapperComponent } from '../../../WrapperComponent';
+
+import { ColumnNestedValueFormatterProps } from './types';
+
+export function columnNestedValueFormatter(props: ColumnNestedValueFormatterProps) {
+    const { fieldValue, Component = WrapperComponent } = props;
+
+    // eslint-disable-next-line react/display-name
+    return (obProps: any) => {
+        return <Component>{getPropertyByString(obProps, fieldValue) + ''}</Component>;
+    };
+}

package/src/components/DataGrid/formatters/columnNestedValueFormatter/types.ts

@@ -0,0 +1,4 @@
+export interface ColumnNestedValueFormatterProps {
+    Component?: React.ElementType;
+    fieldValue: string;
+}