@m4l/components 0.1.39 → 0.1.41

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 {}

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

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

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

@@ -1,41 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const Container = styled('div')(() => ({
-    display: 'flex',
-    alignItems: 'center',
-    // flexGrow: 1,
-    // height: "35px",
-}));
-
-export const RowsLabel = styled('span')(() => ({}));
-
-export const InsetLabel = styled('span')(({ theme }) => ({
-    marginLeft: theme.spacing(2),
-    paddingTop: '2px',
-    paddingBottom: '2px',
-    paddingLeft: '4px',
-    paddingRight: '4px',
-    border: `1px solid ${theme.palette.divider}`,
-    // display: 'flex',
-    // alignItems: 'center',
-}));
-
-/* 
-.mi-grid-rdg-header__container-total-regs {
-
-}
-
-.mi-grid-rdg-header__total-regs {
-    width: 80px!important;
-    padding: initial;
-}
-
-.mi-grid-rdg-header__total-regs .mi-label {
-    margin-right: 7px;
-}
-
-.mi-grid-rdg-header__total-regs .mi-input {
-    width: 80px!important;
-    padding: initial;
-    height: 20px!important;
-} */

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

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

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

@@ -1,97 +0,0 @@
-// react
-import { useCallback, useRef } from 'react';
-// mui
-
-// styled components
-
-// internal components
-import { Skeleton } from '@mui/material';
-import { IconButton } from '../../../../../mui_extended/IconButton';
-// sub components
-import { ColumnsConfig } from './subcomponents/ColumnsConfig';
-import { SKTWrapperColumnsSettings } from './styles';
-// types
-
-// hooks
-import { useModal } from '../../../../../../hooks/useModal';
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-
-// utils
-
-// constants
-
-import { ColumnsConfigRef } from './subcomponents/ColumnsConfig/types';
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-import { ActionCancel } from '../../../../../CommonActions/components/ActionCancel';
-import { ActionIntro } from '../../../../../CommonActions/components/ActionIntro';
-import { WindowBase } from '../../../../../modal';
-import { Actions } from '../../../../../../components/CommonActions';
-
-export function Settings() {
-    const { openModal, closeModal } = useModal();
-    const { columnsConfig, onChangeColumnsConfig } = useDataGrid();
-    const { getLabel } = useModuleDictionary();
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const isSkeleton = useModuleSkeleton();
-
-    const ref = useRef<ColumnsConfigRef>(null);
-
-    const onCloseSettings = useCallback(() => {
-        closeModal();
-    }, [closeModal]);
-
-    const onClickIntro = useCallback(() => {
-        if (ref.current?.onClickIntro) {
-            ref.current?.onClickIntro();
-        }
-    }, []);
-
-    const onClickSettings = useCallback(() => {
-        openModal({
-            initialWidth: 500,
-            initialHeigth: 680,
-
-            window: (
-                <WindowBase title={getLabel('data_grid.settings_title')}>
-                    <ColumnsConfig
-                        ref={ref}
-                        columnsConfig={columnsConfig}
-                        onChangeColumnsConfig={onChangeColumnsConfig}
-                        onCloseSettings={onCloseSettings}
-                    />
-                    <Actions>
-                        <ActionCancel onClick={closeModal} />
-                        <ActionIntro onClick={onClickIntro} />
-                    </Actions>
-                </WindowBase>
-            ),
-
-            // { withCancel: true, onClickIntro },
-        });
-    }, [
-        closeModal,
-        columnsConfig,
-        getLabel,
-        onChangeColumnsConfig,
-        onCloseSettings,
-        openModal,
-        onClickIntro,
-    ]);
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapperColumnsSettings>
-                <Skeleton variant="circular" width={20} height={20} />
-            </SKTWrapperColumnsSettings>
-        );
-    }
-
-    return (
-        <IconButton
-            dictionaryTooltip="data_grid.tooltip_settings"
-            onClick={onClickSettings}
-            aria-label="settings"
-            src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`}
-        />
-    );
-}

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

@@ -1,25 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-// export const IconButton = styled(IconButton)(({ theme }) => ({
-//     color: theme.palette.text.primary,
-//     // paddingLeft: "4px",
-//     // paddingRight: "4px",
-//     // '& svg ': {
-//     //     width: "20px",
-//     //     height: "20px"
-//     // }
-//     // display: 'flex',
-//     // textAlign: 'center',
-//     // alignItems: 'center',
-//     // flexDirection: 'column',
-//     // justifyContent: 'center',
-//     // padding: theme.spacing(8, 2),
-// }));
-
-export const SKTWrapperColumnsSettings = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    height: theme.spacing(3.75),
-}));