@m4l/components 0.1.39 → 0.1.41

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/index.tsx

@@ -1,327 +0,0 @@
-// react
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-// m4l
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-
-// librerías externas
-import Datadata_grid, { Column, DataGridHandle } from 'react-data-grid';
-
-// mui
-import { IconButton } from '../../../../../../../mui_extended/IconButton';
-// internal components
-
-// styled components
-import { WrapperColumnsConfig, WrapperDataGrid, DivSelColumns, ColumnActions } from './styles';
-
-import { OriginalDataGridWrapperStyled } from '../../../../../../styles';
-
-import { FormatterColumn } from './subcomponents/FormatterColumn';
-
-// hooks
-
-// types
-import type { RowKey } from '../../../../../../types';
-import type { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
-import type { ColumnsConfigRef, ConfigProps, Row } from './types';
-
-function getRowsFromColumnsConfig(columnsConfig: IConfigColumn[]): Row[] {
-    // Filtrar los hidden y
-
-    return columnsConfig
-        .filter(column => !column.hidden)
-        .map(
-            column =>
-                ({
-                    key: column.key,
-                    name: column.name,
-                    visible: column.visible === undefined ? true : column.visible,
-                    frozen: column.frozen === undefined ? false : column.frozen,
-                    originalIndex: column.orginalIndex,
-                    originalFrozen: column.originalFrozen,
-                    originalVisible: column.originalVisible,
-                } as Row),
-        );
-}
-
-export const ColumnsConfig = forwardRef<ColumnsConfigRef, ConfigProps>((props, ref) => {
-    const refdata_grid = useRef<DataGridHandle>(null);
-    const { onCloseSettings, columnsConfig, onChangeColumnsConfig } = props;
-    const { getLabel } = useModuleDictionary();
-
-    const [isInit, setIsInit] = useState(true);
-
-    const [rows, setRows] = useState<Row[]>(getRowsFromColumnsConfig(columnsConfig));
-    const [selRows, setSelRows] = useState<ReadonlySet<RowKey>>(() => new Set());
-    const divRef = useRef<HTMLDivElement>(null);
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    useImperativeHandle(ref, () => ({
-        onClickIntro: handleIntro,
-        current: divRef.current,
-    }));
-
-    const columnsdata_grid: Column<Row>[] = useMemo(
-        () => [
-            {
-                key: 'name',
-                name: getLabel('data_grid.settings_column_name'),
-                width: 200,
-                resizable: true,
-                type: 'string',
-            },
-            {
-                key: 'originalIndex',
-                name: getLabel('data_grid.settings_column_position'),
-                width: 50,
-                type: 'number',
-                cellClass: 'rdg-cell-align-center',
-            },
-            {
-                key: 'visible',
-                name: getLabel('data_grid.settings_column_visible'),
-                width: 80,
-                type: 'boolean',
-                formatter: FormatterColumn,
-                cellClass: 'rdg-cell-align-center',
-            },
-            {
-                key: 'frozen',
-                name: getLabel('data_grid.settings_column_frozen'),
-                width: 80,
-                type: 'boolean',
-                formatter: FormatterColumn,
-                cellClass: 'rdg-cell-align-center',
-            },
-        ],
-        [getLabel],
-    );
-
-    const checkAll = () => {
-        setRows(rows.map(row => ({ ...row, visible: true })));
-    };
-
-    const unCheckAll = () => {
-        setRows(rows.map(row => ({ ...row, visible: false })));
-    };
-
-    const restoreAll = () => {
-        setRows(
-            rows
-                .map(row => ({
-                    ...row,
-                    visible: row.originalVisible,
-                    frozen: row.originalFrozen,
-                    index: row.originalIndex,
-                }))
-                .sort((a, b) => a.index - b.index),
-        );
-    };
-
-    useEffect(() => {
-        if (isInit === false) {
-            setRows(getRowsFromColumnsConfig(columnsConfig));
-        }
-        setIsInit(false);
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [columnsConfig]);
-
-    const rowSelectedIndex: number = useMemo(() => {
-        let rowIndex = -1;
-        if (selRows.size !== 1) return rowIndex;
-
-        const iterator = selRows.entries();
-        const entry = iterator.next().value[1];
-
-        rowIndex = rows.findIndex(row => row.key === entry);
-        return rowIndex;
-    }, [rows, selRows]);
-
-    const handleMoveFirst = () => {
-        if (rowSelectedIndex === -1) return -1;
-
-        const newRows: Row[] = [...rows];
-
-        newRows.splice(rowSelectedIndex, 1);
-        newRows.splice(0, 0, rows[rowSelectedIndex]);
-
-        refdata_grid.current?.selectCell({ idx: 0, rowIdx: 0 });
-        setRows(newRows);
-    };
-
-    const handleMoveLast = () => {
-        if (rowSelectedIndex === -1) return -1;
-
-        const newRows: Row[] = [...rows];
-
-        newRows.splice(rowSelectedIndex, 1);
-        newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
-
-        refdata_grid.current?.selectCell({ idx: 0, rowIdx: newRows.length - 1 });
-
-        setRows(newRows);
-    };
-
-    const handleMoveUpDownd = (position: number) => {
-        if (rowSelectedIndex === -1) return -1;
-
-        const newRows: Row[] = [...rows];
-        const element = newRows[rowSelectedIndex];
-
-        newRows.splice(rowSelectedIndex, 1);
-        newRows.splice(rowSelectedIndex + position, 0, element);
-
-        refdata_grid.current?.selectCell({ idx: 0, rowIdx: rowSelectedIndex + position });
-
-        setRows(newRows);
-    };
-
-    const getColumnConfigByKey = (
-        key: string,
-    ): Pick<IConfigColumn, 'visible' | 'frozen'> | undefined => {
-        const rowIndexFinded = rows.findIndex(row => row.key === key);
-
-        if (rowIndexFinded > -1) {
-            return {
-                visible: rows[rowIndexFinded].visible,
-                frozen: rows[rowIndexFinded].frozen,
-                // index: rowIndexFinded,
-            };
-        }
-
-        return undefined;
-    };
-
-    const getRowIndex = (column: IConfigColumn): number => {
-        const rowIndexFinded = rows.findIndex(row => row.key === column.key);
-
-        if (rowIndexFinded > -1) {
-            return rowIndexFinded;
-        }
-
-        return columnsConfig.findIndex(columnConfig => columnConfig.key === column.key);
-    };
-
-    const handleIntro = () => {
-        const newColumnsConfig = columnsConfig
-            .map(columnConfig => {
-                const newColumnConfig = { ...columnConfig };
-
-                if (!columnConfig.hidden) {
-                    const columnConfigRow = getColumnConfigByKey(columnConfig.key);
-
-                    if (columnConfigRow) {
-                        newColumnConfig.visible = columnConfigRow.visible;
-                        // newColumnConfig.index = columnConfigRow.index;
-                        newColumnConfig.frozen = columnConfigRow.frozen;
-                    }
-                }
-
-                return newColumnConfig;
-            })
-            .sort((a, b) => getRowIndex(a) - getRowIndex(b));
-
-        onChangeColumnsConfig(newColumnsConfig);
-
-        onCloseSettings(); // Cerrar la ventana
-    };
-
-    const onInternalSelectedRowsChange = () => {};
-
-    const onInternalRowsChange = (newRows: Row[]) => {
-        setRows(newRows);
-    };
-
-    const onRowClick = (row: Row) => {
-        if (selRows.has(row.key)) return;
-
-        const mySet: ReadonlySet<RowKey> = new Set([row.key]);
-        setSelRows(mySet);
-    };
-
-    return (
-        <WrapperColumnsConfig id="WrapperColumnsConfig" ref={divRef}>
-            <DivSelColumns id="divInfo">{getLabel('data_grid.settings_sel_columns')}</DivSelColumns>
-            <WrapperDataGrid id="WrapperDataGrid">
-                <OriginalDataGridWrapperStyled id="Originaldata_gridWrapperStyled">
-                    <Datadata_grid
-                        className="fill-data_grid  rdg-light"
-                        ref={refdata_grid}
-                        // header
-
-                        // columnas
-                        columns={columnsdata_grid}
-                        // sortColumns={sortColumns}
-                        // onSortColumnsChange={setSortColumns}
-
-                        // filas
-                        rows={rows}
-                        onRowsChange={onInternalRowsChange}
-                        selectedRows={selRows}
-                        onSelectedRowsChange={onInternalSelectedRowsChange}
-                        onRowClick={onRowClick}
-                        // rowHeight={props.rowHeight}
-                        rowKeyGetter={(row: Row) => row.key}
-                        // celdas
-                        cellNavigationMode="CHANGE_ROW"
-                        defaultColumnOptions={{ resizable: true, sortable: true }}
-                    />
-                </OriginalDataGridWrapperStyled>
-            </WrapperDataGrid>
-            <ColumnActions>
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_first"
-                    onClick={handleMoveFirst}
-                    aria-label="move first place"
-                    disabled={rowSelectedIndex < 1}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_up"
-                    onClick={() => handleMoveUpDownd(-1)}
-                    aria-label="move up place"
-                    disabled={rowSelectedIndex < 1}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_last"
-                    onClick={handleMoveLast}
-                    aria-label="move last place"
-                    disabled={!!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1)}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_down"
-                    onClick={() => handleMoveUpDownd(+1)}
-                    aria-label="move down place"
-                    disabled={!!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1)}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_visible_all"
-                    onClick={checkAll}
-                    aria-label="check visible all"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_no_visible_all"
-                    onClick={unCheckAll}
-                    aria-label="un check all"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_restore"
-                    onClick={restoreAll}
-                    aria-label="Restore columns"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`}
-                />
-            </ColumnActions>
-            {/* <DialogActions >
-                // {/* <Button variant="outlined" color="inherit" onClick={onCloseSettings}>{getLabel( 'data_grid.cancel')}</Button> */}
-            {/* <Button variant="contained" onClick={handleIntro} >{getLabel( 'data_grid.intro')}</Button> */}
-            {/* </DialogActions> } */}
-        </WrapperColumnsConfig>
-    );
-});
-
-ColumnsConfig.displayName = 'ColumnsConfig';

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/styles.ts

@@ -1,48 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperColumnsConfig = styled('div')(({ theme }) => ({
-    color: theme.palette.text.primary,
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-}));
-
-export const DivAll = styled('div')(({ theme }) => ({
-    color: theme.palette.text.primary,
-    fontSize: theme.typography.h4.fontSize,
-}));
-
-export const DivSelColumns = styled('div')(({ theme }) => ({
-    ...theme.typography.subtitle2,
-    color: theme.palette.text.primary,
-    padding: `${theme.spacing(3)} ${theme.spacing(1)}`,
-}));
-
-export const WrapperDataGrid = styled('div')(() => ({
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-}));
-
-export const DivColumn = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'row',
-}));
-
-export const ColumnActions = styled('div')(({ theme }) => ({
-    paddingTop: theme.spacing(3),
-    display: 'flex',
-    flexDirection: 'row',
-}));
-export const DialogActions = styled('div')(({ theme }) => ({
-    paddingTop: theme.spacing(3),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    '& > button': {
-        marginLeft: '10px',
-    },
-}));

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/subcomponents/FormatterColumn/index.tsx

@@ -1,15 +0,0 @@
-import { Checkbox } from '@mui/material';
-import { FormatterProps } from 'react-data-grid';
-import { Row } from '../../types';
-
-export function FormatterColumn({ row, onRowChange, column }: FormatterProps<Row>) {
-    const handleChange = () => {
-        const newRow = { ...row };
-
-        (newRow as any)[column.key] = !(row as any)[column.key];
-
-        onRowChange(newRow);
-    };
-
-    return <Checkbox size="small" checked={(row as any)[column.key]} onChange={handleChange} />;
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/types.ts

@@ -1,31 +0,0 @@
-import { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
-
-export interface Row {
-    key: string;
-    name: string;
-    visible: boolean;
-    frozen: boolean;
-
-    width: number;
-    index: number;
-
-    originalIndex: number;
-    originalVisible: boolean;
-    originalFrozen: boolean;
-}
-
-export type ColumnsConfigRef = {
-    onClickIntro: () => void;
-    current: HTMLDivElement | null;
-};
-
-export interface ConfigProps {
-    onCloseSettings: () => void;
-    columnsConfig: IConfigColumn[];
-    onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
-}
-
-export interface CheckFormatterProps {
-    key: string;
-    row: any;
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SettingsProps {}

package/src/components/DataGrid/subcomponents/Actions/types.ts

@@ -1,20 +0,0 @@
-import type { PagerProps } from '../../../mui_extended/Pager/types';
-import { SettingsProps } from './subcomponents/Settings/types';
-
-export interface ActionsProps {
-    withSettings?: boolean;
-    settingsProps?: SettingsProps;
-
-    // TotalRecords
-
-    withRowsCount?: boolean;
-
-    // Pager
-    withPager?: boolean;
-    pagerOptions?: PagerProps;
-
-    // WithLocalFilters
-    withLocalFilters?: boolean;
-}
-
-export type InternalActionsProps = ActionsProps;

package/src/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.tsx

@@ -1,21 +0,0 @@
-// react
-import { FunctionComponent } from 'react';
-
-// external components
-import { HeaderRendererProps } from 'react-data-grid';
-
-// types
-
-import { DraggableHeaderRenderer } from '../subcomponents/DraggableHeaderRenderer';
-// (props: HeaderRendererProps<R>) => JSX.Element
-export const getDragHeaderRenderer = <TRow, TSummaryRow>(
-    handleColumnsReorder: (sourceKey: string, targetKey: string) => void,
-): FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>> => {
-    // onChangehandleColumnsReorder: (sourceKey: string, targetKey: string) => void)
-
-    function HeaderRenderer(props: HeaderRendererProps<TRow>) {
-        return <DraggableHeaderRenderer {...props} onColumnsReorder={handleColumnsReorder} />;
-    }
-
-    return HeaderRenderer as FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
-};

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,
-    };
-}