@m4l/components 0.1.40 → 0.1.41

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

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

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

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

@@ -1,13 +0,0 @@
-// @m4l
-
-// mui
-
-import { PointsFormatter } from '../../../formatters/PointsFormatter';
-import { ColumnPointsFormatterProps } from './types';
-
-export function columnPointsFormatter(props: ColumnPointsFormatterProps) {
-    // eslint-disable-next-line react/display-name
-    return (obProps: any) => {
-        return <PointsFormatter obProps={obProps} {...props} />;
-    };
-}

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

@@ -1,5 +0,0 @@
-export interface ColumnPointsFormatterProps {
-    Component?: React.ElementType;
-    fieldValue: string;
-    fieldUnit: string;
-}

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

@@ -1,14 +0,0 @@
-// @m4l
-
-// mui
-
-import { PriceFormatter } from '../../../formatters/PriceFormatter';
-
-import { ColumnPriceFormatterProps } from './types';
-
-export function columnPriceFormatter(props: ColumnPriceFormatterProps) {
-    // eslint-disable-next-line react/display-name
-    return (obProps: any) => {
-        return <PriceFormatter obProps={obProps} {...props} />;
-    };
-}

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

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

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

@@ -1,13 +0,0 @@
-// @m4l
-
-// mui
-
-import { UncertaintyFormatter } from '../../../formatters/UncertaintyFormatter';
-import { ColumnUncertaintyFormatterProps } from './types';
-
-export function columnUncertaintyFormatter(props: ColumnUncertaintyFormatterProps) {
-    // eslint-disable-next-line react/display-name
-    return (obProps: any) => {
-        return <UncertaintyFormatter obProps={obProps} {...props} />;
-    };
-}

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

@@ -1,6 +0,0 @@
-export interface ColumnUncertaintyFormatterProps {
-    Component?: React.ElementType;
-    fieldValue: string;
-    fieldUnit: string;
-    fieldSymbol: string;
-}

package/src/components/DataGrid/formatters/index.ts

@@ -1,8 +0,0 @@
-export { columnUncertaintyFormatter } from './columnUncertaintyFormatter';
-export { columnPointsFormatter } from './columnPointsFormatter';
-export { columnNestedValueFormatter } from './columnNestedValueFormatter';
-export { columnBooleanFormatter } from './columnBooleanFormatter';
-export { columnDateFormatter } from './columnDateFormatter';
-export { columnPriceFormatter } from './columnPriceFormatter';
-
-export type { ColumnUncertaintyFormatterProps } from './columnUncertaintyFormatter/types';

package/src/components/DataGrid/hooks/useDataGrid.ts

@@ -1,14 +0,0 @@
-import { useContext } from 'react';
-import { DataGridContext } from '../contexts/DataGridContext';
-import { DataGridContextProps } from '../contexts/DataGridContext/types';
-//import { BaseContextProps } from '../../contexts/BaseContext/types';
-
-export function useDataGrid<TRow, TSummaryRow>(): DataGridContextProps<TRow, TSummaryRow> {
-    const context = useContext(DataGridContext);
-
-    if (!context) throw new Error('useDataGrid context must be use inside DataGridContext');
-
-    return context;
-}
-
-export default useDataGrid;

package/src/components/DataGrid/hooks/useFilters.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { FilterContext } from '../contexts/FilterContext';
-
-// ----------------------------------------------------------------------
-
-export const useFilters = () => useContext(FilterContext);

package/src/components/DataGrid/index.tsx

@@ -1,72 +0,0 @@
-// react
-// mui
-// styled components
-import { WrapperGrid } from './styles';
-// Sub components
-import { Table } from './subcomponents/Table';
-import { Actions } from './subcomponents/Actions';
-// hooks
-// contexts
-import { FilterProvider } from './contexts/FilterContext';
-import { DataGridProvider } from './contexts/DataGridContext';
-// types
-import { DataGridProps } from './types';
-
-export function DataGrid<TRow, TSummaryRow>(props: DataGridProps<TRow, TSummaryRow>) {
-    const {
-        id,
-        withActions = true,
-        rows,
-        columns,
-        actionsProps,
-        selectedRows,
-        onSelectedRowsChange,
-        rowKeyGetter,
-        rowActionsGetter,
-        onRowsChange,
-        rowHeaderHeights,
-        rowHeights,
-        initialRowHeightVariant,
-        checkedRows,
-        onCheckedRowsChange,
-    } = props;
-
-    return (
-        <WrapperGrid id={`WrapperGrid_${props.id}`}>
-            <DataGridProvider<TRow, TSummaryRow>
-                id={props.id}
-                columns={props.columns}
-                rowHeights={rowHeights}
-                rowHeaderHeights={rowHeaderHeights}
-                initialRowHeightVariant={initialRowHeightVariant}
-                rowsCount={rows.length}
-                rowActionsGetter={rowActionsGetter}
-                checkedRows={checkedRows}
-                onCheckedRowsChange={onCheckedRowsChange}
-                rowKeyGetter={rowKeyGetter}
-                rows={rows}
-            >
-                <FilterProvider initialActiveFilters={false}>
-                    {withActions && actionsProps && (
-                        <Actions
-                            {...actionsProps}
-                            // totalRecords={props.rows.length}
-                        />
-                    )}
-                    <Table
-                        id={id}
-                        withActions={withActions}
-                        // columns
-                        columns={columns}
-                        // rows
-                        rows={rows}
-                        selectedRows={selectedRows}
-                        onSelectedRowsChange={onSelectedRowsChange}
-                        rowKeyGetter={rowKeyGetter}
-                        onRowsChange={onRowsChange}
-                    />
-                </FilterProvider>
-            </DataGridProvider>
-        </WrapperGrid>
-    );
-}

package/src/components/DataGrid/styles.tsx

@@ -1,193 +0,0 @@
-// mui
-
-import { styled, alpha } from '@mui/material/styles';
-
-// position: absolute;
-// padding: 10px;
-// inset: 0px;
-// /* left: 0px; */
-// /* bottom: 0px; */
-
-export const WrapperGrid = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-    padding: '0px',
-    inset: '0px',
-    overflow: 'hidden',
-}));
-
-export const OriginalDataGridWrapperStyled = styled('div')(({ theme }) => ({
-    position: 'absolute',
-    bottom: '0px',
-    top: '0px',
-    left: '0px',
-    right: '0px',
-
-    '& .rdg ': {
-        // border: `1px solid ${theme.palette.divider}`,
-        userSelect: 'initial',
-        height: '100%',
-        contentVisibility: 'unset',
-        overflow: 'scroll',
-        borderRadius: '5px',
-        '--rdg-grid-inline-size': '0px',
-        '--rdg-header-background-color': theme.palette.grid?.sectionHeader,
-        '--rdg-row-selected-background-color':
-            theme.palette.mode === 'light'
-                ? theme.palette.primary.LightSelected
-                : theme.palette.primary.DarkSelected,
-        '--rdg-row-hover-background-color': theme.palette.grid?.rowHover,
-        '--rdg-background-color': theme.palette.background.default,
-        '--rdg-selection-color': theme.palette.primary.main,
-        '--row-selected-hover-background-color':
-            theme.palette.mode === 'light'
-                ? theme.palette.primary.LightSelectedHover
-                : theme.palette.primary.DarkSelectedHover,
-        '--rdg-checkbox-color': theme.palette.primary.main,
-        '--rdg-checkbox-focus-color': alpha(
-            theme.palette.primary.main,
-            theme.palette.action.selectedOpacity,
-        ),
-        '--rdg-border-color': theme.palette.divider,
-        // "--rdg-checkbox-disabled-border-color:":theme.palette.divider,
-        // "--rdg-checkbox-disabled-background-color":theme.palette.,
-        /* border-bottom-right-radius: 3px; */
-    },
-    '& .rdg::-webkit-scrollbar': {
-        // camino de la barra con radio
-        width: '6px',
-        height: '6px',
-        borderRadius: '3px',
-        backgroundColor: 'transparent',
-    },
-    '& .rdg::-webkit-scrollbar-track': {
-        // Camino de la barrra sin radio
-        backgroundColor: 'transparent',
-        border: '0px solid transparent',
-    },
-    '& .rdg::-webkit-scrollbar-corner': {
-        backgroundColor: 'transparent',
-    },
-    // FireFox
-    // scrollbarColor: `${theme.palette.primary.main} white`,
-    // scrollbarWidth: 'thin',
-
-    // Chrome
-    '& ::-webkit-scrollbar-thumb': {
-        // barra que se mueve
-        borderRadius: '10px',
-        backgroundColor: theme.palette.divider,
-        border: '0px solid transparent',
-    },
-
-    '& [role="columnheader"]': {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-
-    '& .rdg-cell': {
-        // ...theme.typography.subtitle1,
-        // ...theme.typography.body2,
-        fontFamily: theme.typography.body2.fontFamily,
-        fontWeight: theme.typography.body2.fontWeight,
-        fontSize: theme.typography.body2.fontSize,
-        color: theme.palette.text.secondary,
-        borderBottom: `1px solid ${theme.palette.divider}`,
-        borderRight: `0px solid transparent`,
-
-        position: 'relative', // Position relative de las celdas para que funcione en safari
-
-        '&.rdg-cell-frozen': {
-            position: 'sticky', // Position relative de las celdas para que funcione en safari
-        },
-
-        '&:after': {
-            content: `""`,
-            // height: '100%',
-            borderRight: `1px solid ${theme.palette.divider}`,
-            position: 'absolute',
-            right: '0px', // Por desajuste en chrome en el espaciado
-            top: '25%',
-            bottom: '25%',
-        },
-        '& .m4l_icon': {
-            height: '100%',
-            // display: 'flex',
-            // flexDirection: 'row',
-            // justifyContent: 'center',
-        },
-        // lineHeight: 1,
-        // ,
-    },
-
-    // Alineaciones
-    '& .rdg-cell.rdg-cell-align-left': {
-        textAlign: 'left',
-    },
-    '& .rdg-cell.rdg-cell-align-center': {
-        textAlign: 'center',
-    },
-    '& .rdg-cell.rdg-cell-align-right': {
-        textAlign: 'right',
-    },
-
-    // Estilado de la ultima celda congelada
-    '& .rdg-row .rdg-cell-frozen-last:after': {
-        borderRight: `0px solid transparent`,
-        boxShadow: 'none',
-    },
-    // Estilado de la ultima celda (Quitar la linea divisora derecha)
-    '& .rdg-row :last-child:after': {
-        borderRight: `0px solid transparent`,
-    },
-
-    // Estilado de celdas de la cabecera
-    '& .rdg-header-row .rdg-cell': {
-        fontFamily: theme.typography.subtitle2.fontFamily,
-        fontWeight: theme.typography.subtitle2.fontWeight,
-        fontSize: theme.typography.subtitle2.fontSize,
-        color: theme.palette.text.primary,
-        borderRight: `0px solid transparent`,
-        boxShadow: 'none',
-
-        // Ultima celda de la cebecera frozen
-        '&.rdg-cell-frozen-last': {
-            '&:after': {
-                borderRight: `0px solid transparent`,
-            },
-            boxShadow: 'var(--rdg-frozen-cell-box-shadow)',
-        },
-
-        // Modificar el tamaño de la flecha
-        '& .rdg-sort-arrow': {
-            width: theme.spacing(1),
-            margin: `0 ${theme.spacing(0.5)}`,
-        },
-    },
-
-    // Estilado de la ultima celda Header
-    '& .rdg-header-row :last-child.rdg-cell': {
-        borderTopRightRadius: '5px',
-        '&:after': {
-            borderRight: `0px solid transparent`,
-        },
-    },
-    // filter
-    '& .filter_cell_div': {
-        paddingLeft: theme.spacing(0.5),
-        paddingRight: theme.spacing(0.5),
-    },
-    //
-    '& .rdg-header-sort-cell': {
-        width: '100%',
-        flexGrow: '1',
-        alignItems: 'center',
-    },
-    '& [aria-columnsort="ASC"]': {
-        borderTop: `2px solid ${theme.palette.primary.main}`,
-    },
-    '& [aria-columnsort="DESC"]': {
-        borderBottom: `2px solid ${theme.palette.primary.main}`,
-    },
-}));

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

@@ -1,56 +0,0 @@
-// internal components
-import { Pager } from '../../../../components/mui_extended/Pager';
-
-// sub components
-import { Filter } from './subcomponents/Filter';
-import { Settings } from './subcomponents/Settings';
-import { RowsCount } from './subcomponents/RowsCount';
-import { Density } from './subcomponents/Density';
-
-// styled components
-import { WrapperActions } from './styles';
-// hooks
-import { useDataGrid } from '../../hooks/useDataGrid';
-
-// types
-import { InternalActionsProps } from './types';
-import { useResponsiveDesktop } from '@m4l/graphics';
-import { useModuleSkeleton } from '@m4l/core';
-
-export function Actions(props: InternalActionsProps) {
-    const isDesktop = useResponsiveDesktop();
-
-    const { rowHeights } = useDataGrid();
-    const isSkeleton = useModuleSkeleton();
-
-    const {
-        withRowsCount = true,
-        withPager = true,
-        pagerOptions,
-
-        withSettings = true,
-        settingsProps,
-        withLocalFilters,
-    } = props;
-
-    return (
-        <WrapperActions
-            id="WrapperActions"
-            className={withPager && pagerOptions ? 'with-pager' : 'with-no-pager'}
-        >
-            {withRowsCount && isDesktop && <RowsCount />}
-            {withPager && pagerOptions && (
-                <Pager
-                    {...pagerOptions}
-                    totalRecords={pagerOptions.totalRecords}
-                    isSkeleton={isSkeleton}
-                    isDesktop={isDesktop}
-                />
-            )}
-
-            {typeof rowHeights !== 'number' && <Density />}
-            {withLocalFilters && <Filter />}
-            {withSettings && <Settings {...settingsProps} />}
-        </WrapperActions>
-    );
-}

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

@@ -1,29 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperActions = styled('div')(({ theme }) => ({
-    ...theme.typography.caption,
-    position: 'absolute',
-    left: '0px',
-    right: '0px',
-    top: '0px',
-    height: theme.spacing(5.5),
-    padding: 0,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    [theme.breakpoints.up('sm')]: {
-        padding: theme.spacing(0, 1.5),
-    },
-    // Cuando no tiene paginador
-    '&.with-no-pager .rows-count': {
-        flexGrow: 1,
-    },
-
-    '& .MuiTablePagination-root': {
-        flexGrow: 1,
-        display: 'flex',
-        justifyContent: 'center',
-        overflow: 'hidden',
-    },
-}));

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Density/index.tsx

@@ -1,94 +0,0 @@
-// react
-import { useMemo } from 'react';
-// m4l
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-
-// mui
-import { Skeleton } from '@mui/material';
-// internl components
-import { MenuActions } from '../../../../../mui_extended/MenuActions';
-
-// componentes estilados
-import { WrapperDensity, SKTWrapperDensity } from './styles';
-// types
-import type { MenuAction } from '../../../../../mui_extended/MenuActions/types';
-// hooks
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-
-// consts
-
-export function Density() {
-    // const { } = props;
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-    const menuActions: MenuAction[] = useMemo(() => {
-        if (typeof rowHeights === 'number') {
-            return [];
-        }
-
-        return [
-            {
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
-                onClick: () => setRowHeightVariant('compact'),
-                disabled: currentRowHeightVariant === 'compact',
-                dictionaryField: 'data_grid.density_compact',
-            },
-            {
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
-                onClick: () => setRowHeightVariant('standard'),
-                disabled: currentRowHeightVariant === 'standard',
-                dictionaryField: 'data_grid.density_standard',
-            },
-            {
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
-                onClick: () => setRowHeightVariant('confortable'),
-                disabled: currentRowHeightVariant === 'confortable',
-                dictionaryField: 'data_grid.density_confortable',
-            },
-        ];
-    }, [
-        rowHeights,
-        currentRowHeightVariant,
-        setRowHeightVariant,
-        host_static_assets,
-        environment_assets,
-    ]);
-
-    const currenViewIcon: string = useMemo(() => {
-        if (currentRowHeightVariant === 'compact') {
-            return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
-        }
-        if (currentRowHeightVariant === 'standard') {
-            return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
-        }
-        return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
-    }, [currentRowHeightVariant, host_static_assets, environment_assets]);
-
-    if (menuActions.length === 0) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <></>;
-    }
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapperDensity>
-                <Skeleton variant="circular" width="20px" height="20px" />
-            </SKTWrapperDensity>
-        );
-    }
-
-    return (
-        <WrapperDensity id="WrapperDensity">
-            <MenuActions
-                arrowType="right-top"
-                anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                menuActions={menuActions}
-                url_icon={currenViewIcon}
-                toolTip={getLabel('data_grid.tooltip_density')}
-            />
-        </WrapperDensity>
-    );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Density/styles.ts

@@ -1,16 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperDensity = styled('div')(({ theme }) => ({
-    marginLeft: 0,
-    [theme.breakpoints.up('sm')]: {
-        marginLeft: theme.spacing(3),
-    },
-}));
-
-export const SKTWrapperDensity = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    height: theme.spacing(3.75),
-}));

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

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

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Filter/index.tsx

@@ -1,45 +0,0 @@
-// react
-// material
-import { Skeleton } from '@mui/material';
-
-// componentes estilados
-
-// types
-
-// hooks
-import { useFilters } from '../../../../hooks/useFilters';
-
-import { IconButton } from '../../../../../mui_extended/IconButton';
-
-import { SKTWrapperFilter } from './styles';
-import { useEnvironment, useModuleSkeleton } from '@m4l/core';
-
-export function Filter() {
-    const isSkeleton = useModuleSkeleton();
-
-    const { activeFilters, setActiveFilters } = useFilters();
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const toggleIcon = () => {
-        setActiveFilters(!activeFilters);
-    };
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapperFilter>
-                <Skeleton variant="circular" width={20} height={20} />
-            </SKTWrapperFilter>
-        );
-    }
-
-    return (
-        <IconButton
-            dictionaryTooltip={
-                activeFilters ? 'data_grid.tooltip_filter_hide' : 'data_grid.tooltip_filter_show'
-            }
-            onClick={toggleIcon}
-            aria-label="filter"
-            src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`}
-        />
-    );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Filter/styles.tsx

@@ -1,9 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const SKTWrapperFilter = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    height: theme.spacing(3.75),
-}));

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

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