Refactor TruncatedText

GemWallet · Aug 14, 2023 · dc53022 · dc53022
1 parent f7f5859
commit dc53022
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 34 deletions.
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -1,40 +1,38 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, FC, useMemo } from 'react';
 
-import { Typography } from '@mui/material';
+import { SxProps, Theme, Typography } from '@mui/material';
 
 type TruncatedTextProps = ComponentProps<typeof Typography> & {
-  text?: string;
   isMultiline?: boolean;
   maxLines?: string;
 };
 
-export const TruncatedText = ({
-  text = '',
+export const TruncatedText: FC<TruncatedTextProps> = ({
   isMultiline = false,
-  maxLines = '4', // defaults to 4 max lines
+  maxLines = '4',
   sx,
+  children,
   ...rest
-}: TruncatedTextProps) => {
-  let styleProps: {};
-
-  if (isMultiline) {
-    styleProps = {
-      overflow: 'hidden',
-      display: '-webkit-box',
-      width: '100%', // if the string is very long without spaces, it will not overflow the view
-      '-webkit-box-orient': 'vertical',
-      '-webkit-line-clamp': maxLines, // start showing ellipsis when X line is reached
-      'white-space': 'pre-wrap' // let the text wrap preserving spaces
-    };
-  } else {
-    // mode is 'width'
-    styleProps = {
-      display: 'block',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      width: '100%'
-    };
-  }
+}) => {
+  const styleProps: SxProps<Theme> | undefined = useMemo(
+    () =>
+      isMultiline
+        ? {
+            overflow: 'hidden',
+            display: '-webkit-box',
+            width: '100%', // if the string is very long without spaces, it will not overflow the view
+            webkitBoxOrient: 'vertical',
+            webkitLineClamp: maxLines, // start showing ellipsis when X line is reached
+            whiteSpace: 'pre-wrap' // let the text wrap preserving spaces
+          }
+        : {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%'
+          },
+    [isMultiline, maxLines]
+  );
 
   return (
     <Typography
@@ -44,7 +42,7 @@ export const TruncatedText = ({
       }}
       {...rest}
     >
-      {text}
+      {children}
     </Typography>
   );
 };
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -98,20 +98,23 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
           <Tooltip title={NFTData.NFTokenID}>
             <TruncatedText
               onClick={() => handleTokenIdClick(NFTData.NFTokenID)}
-              text={NFTData.NFTokenID}
               sx={{ fontSize: '14px', color: 'grey', marginTop: '10px', cursor: 'pointer' }}
-            />
+            >
+              {NFTData.NFTokenID}
+            </TruncatedText>
           </Tooltip>
           <TruncatedText
-            text={NFTData.name}
             sx={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
             data-testid="nft_name"
-          />
+          >
+            {NFTData.name}
+          </TruncatedText>
           <TruncatedText
-            text={NFTData.description}
             sx={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}
             isMultiline={true}
-          />
+          >
+            {NFTData.description}
+          </TruncatedText>
           <Button
             variant="outlined"
             style={{ marginTop: '10px', fontSize: '14px', gap: '10px' }}