@m4l/components 0.1.39 → 0.1.41

package/src/components/mui_extended/Button/index.tsx

@@ -1,19 +0,0 @@
-import { useModuleSkeleton } from '@m4l/core';
-import { Skeleton as MuiSkeleton } from '@mui/material';
-import { default as MuiButton } from '@mui/material/Button';
-import { ExtendButtonProps } from './types';
-
-export const Button = (props: ExtendButtonProps) => {
-    const isSkeleton = useModuleSkeleton();
-    if (isSkeleton) {
-        return (
-            <MuiSkeleton
-                sx={{ borderRadius: 2 }}
-                variant="rectangular"
-                width={'100px'}
-                height={'36px'}
-            />
-        );
-    }
-    return <MuiButton {...props} />;
-};

package/src/components/mui_extended/Button/styles.tsx

@@ -1,6 +0,0 @@
-import { styled } from '@mui/material';
-import { Skeleton } from '@mui/material';
-
-export const SKTButton = styled(Skeleton)(({ theme }) => ({
-    borderRadius: theme.spacing(0.5),
-}));

package/src/components/mui_extended/Button/types.tsx

@@ -1,3 +0,0 @@
-import { ButtonProps } from '@mui/material';
-
-export type ExtendButtonProps = ButtonProps;

package/src/components/mui_extended/CircularProgress/index.tsx

@@ -1,5 +0,0 @@
-import { CircularProgress as MUICircularProgress, CircularProgressProps } from '@mui/material';
-
-export const CircularProgress = (props: CircularProgressProps) => {
-    return <MUICircularProgress {...props} />;
-}

package/src/components/mui_extended/IconButton/index.tsx

@@ -1,68 +0,0 @@
-// react
-import { useMemo } from 'react';
-//m4l
-import { useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-// mui
-import {
-    IconButton as MUIIconButton,
-    IconButtonProps as MUIIconButtonProps,
-    Tooltip,
-} from '@mui/material';
-
-// internal components
-import { Icon } from '../../Icon';
-/* import { default as IconResource } from './IconResource'; */
-// hooks
-
-// types
-import { IconButtonProps } from './types';
-import { SkeletonIconButton } from './subcomponents/SkeletonIconButton';
-
-// config
-
-export function IconButton({
-    src,
-    tooltip,
-    size = 'small',
-    dictionaryTooltip,
-    bgColor = 'primary.active',
-    rotationAngle,
-    angleTransition,
-    ...other
-}: IconButtonProps & MUIIconButtonProps) {
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-    const finalTooltip = useMemo(() => {
-        if (other.disabled) {
-            return undefined;
-        }
-        if (dictionaryTooltip && getLabel) {
-            return getLabel(dictionaryTooltip);
-        }
-        return tooltip;
-    }, [dictionaryTooltip, getLabel, other.disabled]);
-
-    if (isSkeleton) {
-        return <SkeletonIconButton />;
-    }
-    return finalTooltip ? (
-        <Tooltip title={finalTooltip || ''}>
-            <MUIIconButton size={size} {...other}>
-                <Icon
-                    src={src}
-                    bgColor={other.disabled ? 'action.disabled' : bgColor}
-                    rotationAngle={rotationAngle}
-                />
-            </MUIIconButton>
-        </Tooltip>
-    ) : (
-        <MUIIconButton size={size} {...other}>
-            <Icon
-                src={src}
-                bgColor={other.disabled ? 'action.disabled' : bgColor}
-                rotationAngle={rotationAngle}
-                angleTransition={angleTransition}
-            />
-        </MUIIconButton>
-    );
-}

package/src/components/mui_extended/IconButton/styles.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperIconButton = styled('div')(() => ({
-    display: 'flex',
-    '& .disabled': {
-        display: 'none',
-    },
-}));

package/src/components/mui_extended/IconButton/subcomponents/SkeletonIconButton/index.tsx

@@ -1,5 +0,0 @@
-import { Skeleton } from '@mui/material';
-
-export const SkeletonIconButton = () => {
-    return <Skeleton variant="circular" width={'30px'} height={'30px'} />;
-};

package/src/components/mui_extended/IconButton/types.ts

@@ -1,6 +0,0 @@
-import { IconProps } from '../../Icon/types';
-
-export interface IconButtonProps extends IconProps {
-    tooltip?: string;
-    dictionaryTooltip?: string;
-}

package/src/components/mui_extended/ImageButton/index.tsx

@@ -1,63 +0,0 @@
-// react
-import { useMemo } from 'react';
-//m4l
-import { useModuleDictionary } from '@m4l/core';
-// mui
-import { IconButton as MUIIconButton, Tooltip } from '@mui/material';
-// internal components
-import { Image } from '../../Image';
-// sub components
-
-// hooks
-
-// types
-import { ImageButtonProps } from './types';
-
-// config
-
-export function ImageButton({
-    src,
-    width,
-    height,
-    className,
-    useIntersectionObserver,
-    skeletonVariant = 'circle',
-    tooltip,
-    dictionaryTooltip,
-    sx = { width: 40, height: 40 },
-    ...other
-}: ImageButtonProps) {
-    const { getLabel } = useModuleDictionary();
-    const finalTooltip = useMemo(() => {
-        if (dictionaryTooltip && getLabel) {
-            return getLabel(dictionaryTooltip);
-        }
-        return tooltip;
-    }, [tooltip, dictionaryTooltip, getLabel]);
-
-    const imageButton = useMemo(() => {
-        return (
-            <MUIIconButton
-                sx={sx}
-                className={`m4l_image_button ${className ? className : ''}`}
-                {...other}
-            >
-                <Image
-                    src={src}
-                    width={width}
-                    height={height}
-                    useIntersectionObserver={useIntersectionObserver}
-                    skeletonVariant={skeletonVariant}
-                />
-            </MUIIconButton>
-        );
-    }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
-    return finalTooltip ? (
-        <Tooltip title={finalTooltip || ''}>
-            {imageButton}
-            {/* <div>{imageButton}</div> */}
-        </Tooltip>
-    ) : (
-        imageButton
-    );
-}

package/src/components/mui_extended/ImageButton/styles.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperIconButton = styled('div')(() => ({
-    display: 'flex',
-    '& .disabled': {
-        display: 'none',
-    },
-}));

package/src/components/mui_extended/ImageButton/types.ts

@@ -1,8 +0,0 @@
-import { ImageProps } from '../../Image/types';
-import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
-
-export interface ImageButtonProps extends ImageProps, MUIIconButtonProps {
-    tooltip?: string;
-    className?: string;
-    dictionaryTooltip?: string;
-}

package/src/components/mui_extended/LinearProgress/index.tsx

@@ -1,6 +0,0 @@
-import { LinearProgress as MUILinearProgress, LinearProgressProps } from '@mui/material';
-
-export const LinearProgress = (props: LinearProgressProps) => {
-    const { ...other } = props;
-    return <MUILinearProgress {...other} />;
-};

package/src/components/mui_extended/LinkWithRoute/index.tsx

@@ -1,20 +0,0 @@
-import { Link as RouterLink } from 'react-router-dom';
-
-import { LinkWithRouteProps } from './types';
-import { Skeleton, Link as MuiLink } from '@mui/material';
-import { useModuleSkeleton } from '@m4l/core';
-
-export const LinkWithRoute = (props: LinkWithRouteProps) => {
-    const { to, children, skeletonWidth = '100%', skeletonHeight = '14px', ...other } = props;
-    const isSkeleton = useModuleSkeleton();
-
-    if (isSkeleton) {
-        return <Skeleton variant="text" width={skeletonWidth} height={skeletonHeight} />;
-    }
-
-    return (
-        <MuiLink component={RouterLink} to={to} {...other}>
-            {children}
-        </MuiLink>
-    );
-};

package/src/components/mui_extended/LinkWithRoute/types.ts

@@ -1,9 +0,0 @@
-import { LinkProps as MuiLinkProps } from '@mui/material';
-
-import { To } from 'history';
-
-export interface LinkWithRouteProps extends MuiLinkProps {
-    to: To;
-    skeletonWidth: string | number;
-    skeletonHeight: string | number;
-}

package/src/components/mui_extended/LoadingButton/index.tsx

@@ -1,17 +0,0 @@
-import { MuiLabLoadingButtonProps } from './types';
-
-import { LoadingButton as MuiLoadingButton } from '@mui/lab';
-
-import { useModuleSkeleton } from '@m4l/core';
-import { SkeletonLoadingButton } from './subcomponents/Skeleton';
-
-export const LoadingButton = (props: MuiLabLoadingButtonProps) => {
-    const { children, ...other } = props;
-    const isSkeleton = useModuleSkeleton();
-
-    if (isSkeleton) {
-        return <SkeletonLoadingButton />;
-    }
-
-    return <MuiLoadingButton {...other}>{children}</MuiLoadingButton>;
-};

package/src/components/mui_extended/LoadingButton/subcomponents/Skeleton/index.tsx

@@ -1,8 +0,0 @@
-import { Skeleton as MuiSkeleton } from '@mui/material';
-import { WrapperSkeleton } from './styles';
-
-export const SkeletonLoadingButton = () => (
-    <WrapperSkeleton id="WrapperSKTLoadingButton">
-        <MuiSkeleton variant="rectangular" width={'100%'} height={'48px'} />
-    </WrapperSkeleton>
-);

package/src/components/mui_extended/LoadingButton/subcomponents/Skeleton/styles.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperSkeleton = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    borderRadius: theme.spacing(1),
-    overflow: 'hidden',
-}));

package/src/components/mui_extended/LoadingButton/types.ts

@@ -1,6 +0,0 @@
-import { LoadingButtonProps } from '@mui/lab';
-import { ReactNode } from 'react';
-
-export interface MuiLabLoadingButtonProps extends LoadingButtonProps {
-    children?: ReactNode;
-}

package/src/components/mui_extended/MenuActions/index.tsx

@@ -1,116 +0,0 @@
-import { useMemo, useState } from 'react';
-//m4l
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-// @mui
-import { MenuItem, Tooltip } from '@mui/material';
-import Popover from '../Popover';
-
-// styled components
-
-// types
-import { MenuAction, MenuActionsProps } from './types';
-
-// hooks
-import { LabelMemuItem, WrapperMenuActions } from './styles';
-import { Icon } from '../../Icon';
-
-// routes
-
-// components
-
-// ----------------------------------------------------------------------
-
-export function MenuActions(props: MenuActionsProps) {
-    const {
-        menuActions,
-        objItem = {},
-        url_icon: urlIcon,
-        toolTip = '',
-        marginTop = -1,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        width = 200,
-        arrowType: arrow = 'right-top',
-        ...other
-    } = props;
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const { getLabel } = useModuleDictionary();
-    const [open, setOpen] = useState<HTMLElement | null>(null);
-    const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
-        setOpen(event.currentTarget);
-    };
-
-    const urlFinalIcon = useMemo(() => {
-        if (urlIcon) return urlIcon;
-
-        return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
-    }, [urlIcon, host_static_assets, environment_assets]);
-
-    const handleClose = () => {
-        setOpen(null);
-    };
-
-    const handleClick = (menuAction: MenuAction) => {
-        setOpen(null);
-        menuAction.onClick();
-    };
-
-    const finalActions: MenuAction[] = useMemo(() => {
-        let ret: MenuAction[];
-
-        if (typeof menuActions !== 'function') {
-            ret = menuActions;
-        } else {
-            ret = menuActions(objItem);
-        }
-
-        /// /
-        return ret;
-    }, [menuActions, objItem]);
-
-    return (
-        <>
-            <Tooltip title={toolTip}>
-                <WrapperMenuActions id="WrapperMenuActions" size="small" onClick={handleOpen}>
-                    <Icon src={urlFinalIcon} />
-                </WrapperMenuActions>
-            </Tooltip>
-            <Popover
-                id="Popover"
-                open={Boolean(open)}
-                anchorEl={open}
-                onClose={handleClose}
-                arrowType={arrow}
-                sx={{
-                    marginTop,
-                    marginBottom,
-                    marginLeft,
-                    marginRight,
-                    width,
-                    '& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
-                }}
-                {...other}
-            >
-                {open &&
-                    finalActions.map((menuAction, index) => (
-                        <MenuItem
-                            key={`menu_action_${index}`}
-                            dense
-                            onClick={() => handleClick(menuAction)}
-                            sx={{ color: menuAction.color ?? 'text.main' }}
-                            disabled={menuAction.disabled}
-                        >
-                            <Icon src={menuAction.urlIcon} />
-                            <LabelMemuItem>
-                                {menuAction.label || getLabel(menuAction.dictionaryField)}
-                            </LabelMemuItem>
-                        </MenuItem>
-                    ))}
-            </Popover>
-        </>
-    );
-}
-
-export default MenuActions;

package/src/components/mui_extended/MenuActions/styles.tsx

@@ -1,13 +0,0 @@
-// mui
-import { IconButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const WrapperMenuActions = styled(IconButton)(() => ({}));
-
-export const LabelMemuItem = styled('div')(({ theme }) => ({
-    height: '22px',
-    // padding: '0px',
-    marginLeft: theme.spacing(1.5),
-    display: 'flex',
-    alignItems: 'center',
-}));

package/src/components/mui_extended/MenuActions/types.ts

@@ -1,33 +0,0 @@
-// import { ReactNode } from "react";
-import { PopoverProps } from '../Popover/types';
-
-export interface ComponentActionProps {
-    description?: string;
-    onClick: (props?: any) => void;
-    // disabled: boolean;
-}
-
-export interface MenuAction {
-    urlIcon: string;
-    iconWidth?: number;
-    iconHeight?: number;
-    label?: string;
-    dictionaryField: string;
-    onClick: (props?: any) => void;
-    disabled: boolean;
-    color?: string;
-
-    component?: (props: ComponentActionProps) => JSX.Element;
-}
-
-export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
-    objItem?: any;
-    url_icon?: string;
-    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
-    toolTip?: string;
-    marginTop?: number | string;
-    marginBottom?: number | string;
-    marginRight?: number | string;
-    marginLeft?: number | string;
-    width?: number;
-}

package/src/components/mui_extended/Pager/components/PagerActions/index.tsx

@@ -1,67 +0,0 @@
-// mui
-
-// types
-import { PagerActionsProps } from './types';
-import { WrapperPagerActions } from './styles';
-import { IconButton } from '../../../IconButton';
-import { useEnvironment } from '@m4l/core';
-// hooks
-
-// constants
-
-export function PagerActions(props: PagerActionsProps) {
-    const { count, page, rowsPerPage, onPageChange } = props;
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        onPageChange(event, 0);
-    };
-
-    const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        onPageChange(event, page - 1);
-    };
-
-    const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        onPageChange(event, page + 1);
-    };
-
-    const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-    };
-
-    return (
-        <WrapperPagerActions id="WrapperPagerActions">
-            <IconButton
-                id="test_bruce"
-                dictionaryTooltip="pager.first"
-                onClick={handleFirstPageButtonClick}
-                disabled={page === 0}
-                aria-label="first page"
-                src={`${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`}
-            />
-            <IconButton
-                dictionaryTooltip="pager.previous"
-                onClick={handleBackButtonClick}
-                disabled={page === 0}
-                aria-label="first page"
-                src={`${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`}
-            />
-
-            <IconButton
-                dictionaryTooltip="pager.next"
-                onClick={handleNextButtonClick}
-                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-                aria-label="next page"
-                src={`${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`}
-            />
-
-            <IconButton
-                dictionaryTooltip="pager.last"
-                onClick={handleLastPageButtonClick}
-                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-                aria-label="last page"
-                src={`${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`}
-            />
-        </WrapperPagerActions>
-    );
-}

package/src/components/mui_extended/Pager/components/PagerActions/styles.ts

@@ -1,13 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperPagerActions = styled('div')(({ theme }) => ({
-    width: '100%',
-    justifyContent: 'center',
-    display: 'flex',
-    marginLeft: 0,
-    [theme.breakpoints.up('sm')]: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: theme.spacing(3),
-    },
-}));

package/src/components/mui_extended/Pager/components/PagerActions/types.ts

@@ -1,6 +0,0 @@
-export interface PagerActionsProps {
-    count: number;
-    page: number;
-    rowsPerPage: number;
-    onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
-}

package/src/components/mui_extended/Pager/dicctionary.ts

@@ -1,15 +0,0 @@
-import { Dictionary } from '@m4l/core';
-
-export function getPagerComponentsDictionary() {
-    return ['pager'];
-}
-
-export const defaultPagerDictionary: Dictionary = {
-    pager: {
-        first: 'First',
-        previous: 'Previous',
-        before: 'Before',
-        last: 'Last',
-        of: 'of',
-    },
-};

package/src/components/mui_extended/Pager/index.tsx

@@ -1,89 +0,0 @@
-import { useMemo } from 'react';
-import { Skeleton, TablePagination } from '@mui/material';
-import { PagerActions } from './components/PagerActions';
-import { PagerProps } from './types';
-import {
-    SKTWrapperPagerActions,
-    SKTSvgIconButton,
-    SKTWrapperRowsPerPage,
-    SKTSvgIconButtonContainer,
-} from './styles';
-
-export function Pager(props: PagerProps) {
-    const {
-        totalRecords,
-        rowsPerPageOptions = [5, 10, 2],
-        rowsPerPage = 25,
-        page,
-        onPageChange,
-        onRowsPerPageChange,
-        labelRows = 'Rows per page',
-        labelOf = 'Of',
-        isSkeleton = 'false',
-        isDesktop,
-    } = props;
-
-    const currentPage = useMemo(() => {
-        if (rowsPerPage * page > totalRecords) {
-            return Math.floor(totalRecords / rowsPerPage);
-        }
-        return page;
-    }, [page, rowsPerPage, totalRecords]);
-
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-        onRowsPerPageChange(parseInt(event.target.value, 10));
-        onPageChange(0);
-    };
-
-    const handleChangePage = (_event: unknown, newPage: number) => {
-        onPageChange(newPage);
-    };
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapperPagerActions>
-                <SKTWrapperRowsPerPage>
-                    <Skeleton variant="text" width="40px" height="16px" />
-                    <Skeleton variant="text" width="20px" height="16px" />
-                </SKTWrapperRowsPerPage>
-
-                <Skeleton variant="text" width="50px" height="16px" />
-
-                <SKTSvgIconButtonContainer>
-                    <SKTSvgIconButton>
-                        <Skeleton variant="circular" width={20} height={20} />
-                    </SKTSvgIconButton>
-                    <SKTSvgIconButton>
-                        <Skeleton variant="circular" width={20} height={20} />
-                    </SKTSvgIconButton>
-                    <SKTSvgIconButton>
-                        <Skeleton variant="circular" width={20} height={20} />
-                    </SKTSvgIconButton>
-                    <SKTSvgIconButton>
-                        <Skeleton variant="circular" width={20} height={20} />
-                    </SKTSvgIconButton>
-                </SKTSvgIconButtonContainer>
-            </SKTWrapperPagerActions>
-        );
-    }
-
-    return (
-        <TablePagination
-            id="TablePagination"
-            rowsPerPageOptions={rowsPerPageOptions}
-            component="div"
-            count={totalRecords}
-            rowsPerPage={rowsPerPage}
-            page={currentPage}
-            onPageChange={handleChangePage}
-            onRowsPerPageChange={handleChangeRowsPerPage}
-            labelDisplayedRows={
-                isDesktop ? ({ from, to, count }) => `${from}-${to} ${labelOf} ${count}` : () => ``
-            }
-            labelRowsPerPage={isDesktop ? labelRows : ''}
-            ActionsComponent={PagerActions}
-        />
-    );
-}
-
-export default Pager;