@m4l/components 0.1.35 → 0.1.37

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/DataGrid/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+// m4l
+import { useModuleDictionary, useModuleSkeleton } from '@m4l/core';
+// componentes estilados
+import { Skeleton } from '@mui/material';
+import { Container, RowsLabel, InsetLabel } from './styles';
+// hooks
+import { useDataGrid } from '../../../../hooks/useDataGrid';
+// types
+
+// utils
+
+export function RowsCount() {
+    const { rowsCount } = useDataGrid();
+    const { getLabel } = useModuleDictionary();
+    const isSkeleton = useModuleSkeleton();
+
+    if (isSkeleton) {
+        return (
+            <Container>
+                <RowsLabel>
+                    <Skeleton variant="text" width="40px" height="16px" />
+                </RowsLabel>
+                <InsetLabel>
+                    <Skeleton variant="text" width="20px" height="16px" />
+                </InsetLabel>
+            </Container>
+        );
+    }
+
+    return (
+        <Container className="rows-count" id="RowsCount">
+            <RowsLabel>{getLabel('data_grid.rows')}</RowsLabel>
+            <InsetLabel>{rowsCount}</InsetLabel>
+        </Container>
+    );
+}