@m4l/components 0.1.39 → 0.1.41

package/src/components/CommonActions/components/ActionFormCancel/index.tsx

@@ -1,63 +0,0 @@
-// react
-import { useFormContext, useFormState } from 'react-hook-form';
-
-// m4l
-import { useModuleSkeleton, useModuleDictionary } from '@m4l/core';
-// mui
-import { Skeleton } from '@mui/material';
-// internal components
-import { Button } from '../../../mui_extended/Button';
-import { useCallback } from 'react';
-
-// external libraries
-// styled conmponents
-// types
-
-// hooks
-import { useModal } from '../../../../hooks/useModal';
-import { WindowConfirm } from '../../../modal';
-
-// utils
-
-// ----------------------------------------------------------------------
-
-export function ActionFormCancel() {
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-    const { openModal } = useModal();
-
-    const { control } = useFormContext();
-    const { isDirty } = useFormState({
-        control,
-    });
-
-    const onConfirmQuit = useCallback(() => {}, []);
-
-    const onClickCancel = useCallback(() => {
-        //
-
-        if (isDirty) {
-            openModal({
-                window: (
-                    <WindowConfirm
-                        variant="warning"
-                        title={getLabel('form_provider.confirm_quit_title')}
-                        msg={getLabel('form_provider.confirm_quit_msg')}
-                        onClickIntro={onConfirmQuit}
-                    />
-                ),
-            });
-        } else {
-            onConfirmQuit();
-        }
-    }, [getLabel, isDirty, openModal]);
-
-    if (isSkeleton) {
-        return <Skeleton variant="text" width={57} height={30} />;
-    }
-    return (
-        <Button variant="outlined" color="inherit" onClick={onClickCancel}>
-            {getLabel('common_actions.cancel')}
-        </Button>
-    );
-}

package/src/components/CommonActions/components/ActionFormCancel/types.ts

@@ -1,7 +0,0 @@
-import { ButtonProps } from '@mui/material';
-import { NavigateOptions, To } from 'react-router-dom';
-
-export interface ActionFormCancelProps extends ButtonProps {
-    to: To;
-    navigateOptions?: NavigateOptions;
-}

package/src/components/CommonActions/components/ActionFormIntro/index.tsx

@@ -1,42 +0,0 @@
-// react
-import { useFormContext, useFormState } from 'react-hook-form';
-// m4l
-import { useModuleSkeleton, useModuleDictionary } from '@m4l/core';
-// mui
-import { LoadingButton, LoadingButtonProps } from '@mui/lab';
-import { Skeleton } from '@mui/material';
-// internal components
-
-// external libraries
-// styled conmponents
-// types
-// hooks
-// utils
-
-// ----------------------------------------------------------------------
-
-export function ActionFormIntro(props: LoadingButtonProps) {
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-
-    const { control } = useFormContext();
-
-    const { isSubmitting } = useFormState({
-        control,
-    });
-
-    if (isSkeleton) {
-        return <Skeleton variant="text" width={57} height={30} />;
-    }
-    return (
-        <LoadingButton
-            variant="contained"
-            type="submit"
-            color="primary"
-            loading={isSubmitting}
-            {...props}
-        >
-            {getLabel('common_actions.intro')}
-        </LoadingButton>
-    );
-}

package/src/components/CommonActions/components/ActionIntro/index.tsx

@@ -1,16 +0,0 @@
-// @m4l
-import { useModuleDictionary } from '@m4l/core';
-// @mui
-import { ButtonProps } from '@mui/material';
-// internal components
-import { Button } from '../../../mui_extended/Button';
-
-export const ActionIntro = (props: ButtonProps) => {
-    const { getLabel } = useModuleDictionary();
-
-    return (
-        <Button variant="contained" type="submit" color="primary" {...props}>
-            {getLabel('common_actions.intro')}
-        </Button>
-    );
-};

package/src/components/CommonActions/components/Actions/index.tsx

@@ -1,14 +0,0 @@
-// m4l
-
-// mui
-
-// styled components
-import { WrapperStandarActions } from './styles';
-// types
-import type { CommonActionsProps } from './types';
-
-export const Actions = (props: CommonActionsProps) => {
-    const { children } = props;
-
-    return <WrapperStandarActions id="WrapperStandarActions">{children}</WrapperStandarActions>;
-};

package/src/components/CommonActions/components/Actions/styles.tsx

@@ -1,12 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperStandarActions = styled('div')(({ theme }) => ({
-    paddingTop: theme.spacing(3),
-    margin: theme.spacing(0, 1.5),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    '& > button': {
-        marginLeft: '10px',
-    },
-}));

package/src/components/CommonActions/components/Actions/types.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CommonActionsProps {
-    children: ReactNode;
-}

package/src/components/CommonActions/dictionary.ts

@@ -1,14 +0,0 @@
-import type { Dictionary } from '@m4l/core';
-
-export function getCommonActionsDictionary() {
-    return ['common_actions'];
-}
-
-export const defaultCommonActionsDictionary: Dictionary = {
-    common_actions: {
-        cancel: 'Cancel',
-        intro: 'Intro',
-        confirm_quit_title: 'Confirm',
-        confirm_quit_msg: 'Are your sure exit?',
-    },
-};

package/src/components/CommonActions/index.ts

@@ -1,9 +0,0 @@
-export { Actions } from './components/Actions';
-
-export { ActionCancel } from './components/ActionCancel';
-export { ActionIntro } from './components/ActionIntro';
-
-export { ActionFormCancel } from './components/ActionFormCancel';
-export { ActionFormIntro } from './components/ActionFormIntro';
-
-export * from './dictionary';

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

@@ -1,348 +0,0 @@
-// 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

@@ -1,82 +0,0 @@
-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

@@ -1,68 +0,0 @@
-// 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 };