1  import { Skeleton, Typography, TypographyProps } from '@mui/material';
 2  import { textCenterEllipsis } from 'src/helpers/text-center-ellipsis';
 3  
 4  export interface CompactableTypographyProps extends TypographyProps {
 5    children: string;
 6    compactMode?: CompactMode;
 7    compact?: boolean;
 8    loading?: boolean;
 9    skeletonWidth?: number;
10  }
11  
12  export enum CompactMode {
13    SM,
14    MD,
15    LG,
16    XL,
17    XXL,
18  }
19  
20  const compactModeMap = {
21    [CompactMode.SM]: {
22      from: 4,
23      to: 4,
24    },
25    [CompactMode.MD]: {
26      from: 7,
27      to: 4,
28    },
29    [CompactMode.LG]: {
30      from: 12,
31      to: 4,
32    },
33    [CompactMode.XL]: {
34      from: 12,
35      to: 3,
36    },
37    [CompactMode.XXL]: {
38      from: 14,
39      to: 7,
40    },
41  };
42  
43  export const CompactableTypography = ({
44    compactMode = CompactMode.SM,
45    compact = true,
46    children,
47    loading = false,
48    skeletonWidth = 100,
49    ...rest
50  }: CompactableTypographyProps) => {
51    const selectedCompactMode = compactModeMap[compactMode];
52  
53    return (
54      <Typography {...rest}>
55        {loading ? (
56          <Skeleton width={skeletonWidth} />
57        ) : compact ? (
58          textCenterEllipsis(children, selectedCompactMode.from, selectedCompactMode.to)
59        ) : (
60          children
61        )}
62      </Typography>
63    );
64  };