@m4l/components 0.1.39 → 0.1.41

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

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

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

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

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

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

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

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

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

@@ -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',
-    },
-}));