Refactor TruncatedText & introduce TruncatedMultiLinesText components

GemWallet · Aug 13, 2023 · 9260e42 · 9260e42
1 parent 6611661
commit 9260e42
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx b/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
@@ -0,0 +1,32 @@
+import { ComponentProps } from 'react';
+
+import Typography from '@mui/material/Typography';
+
+type TruncatedMultiLinesTextProps = ComponentProps<typeof Typography> & {
+  text?: string;
+  maxLines?: string;
+};
+
+export const TruncatedMultiLinesText = ({
+  text = '',
+  maxLines = '4',
+  sx,
+  variant = 'body1'
+}: TruncatedMultiLinesTextProps) => {
+  return (
+    <Typography
+      sx={{
+        overflow: 'hidden',
+        display: '-webkit-box',
+        width: '100%',
+        '-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 */,
+        ...sx
+      }}
+      variant={variant}
+    >
+      {text}
+    </Typography>
+  );
+};
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts b/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts
@@ -0,0 +1 @@
+export * from './TruncatedMultiLinesText';
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -1,18 +1,17 @@
-import { ComponentProps, FC } from 'react';
+import { ComponentProps } from 'react';
 
 import { Typography } from '@mui/material';
 
 type TruncatedTextProps = ComponentProps<typeof Typography> & {
   text?: string;
-  maxLength?: number;
 };
 
-export const TruncatedText: FC<TruncatedTextProps> = ({ text, maxLength, sx, ...rest }) => {
-  if (!text) return null;
-
-  const displayedText =
-    maxLength && text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
-
+export const TruncatedText = ({
+  text = '',
+  sx,
+  variant = 'body1',
+  ...rest
+}: TruncatedTextProps) => {
   return (
     <Typography
       sx={{
@@ -23,9 +22,9 @@ export const TruncatedText: FC<TruncatedTextProps> = ({ text, maxLength, sx, ...
         ...sx
       }}
       {...rest}
-      variant="body1"
+      variant={variant}
     >
-      {displayedText}
+      {text}
     </Typography>
   );
 };
diff --git a/packages/extension/src/components/atoms/index.ts b/packages/extension/src/components/atoms/index.ts
@@ -7,5 +7,6 @@ export * from './PrivateRoute';
 export * from './TileLoader';
 export * from './TokenLoader';
 export * from './Tokens';
+export * from './TruncatedMultiLinesText';
 export * from './TruncatedText';
 export * from './WalletIcon';
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -9,8 +9,7 @@ import { convertHexToString } from 'xrpl';
 import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { useLedger } from '../../../contexts';
-import { NFTImage } from '../../atoms';
-import { TruncatedText } from '../../atoms';
+import { NFTImage, TruncatedText, TruncatedMultiLinesText } from '../../atoms';
 import { NFTDetails } from '../../organisms';
 
 export interface NFTCardProps {
@@ -108,10 +107,9 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
             sx={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
             data-testid="nft_name"
           />
-          <TruncatedText
+          <TruncatedMultiLinesText
             text={NFTData.description}
             sx={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}
-            maxLength={200}
           />
           <Button
             variant="outlined"