Refactor TruncatedText component

GemWallet · Aug 14, 2023 · 0139fd5 · 0139fd5
1 parent 207f171
commit 0139fd5
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 41 deletions.
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx b/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts b/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -4,16 +4,42 @@ import { Typography } from '@mui/material';
 
 type TruncatedTextProps = ComponentProps<typeof Typography> & {
   text?: string;
+  isMultiline?: boolean;
+  maxLines?: string;
 };
 
-export const TruncatedText = ({ text = '', sx, ...rest }: TruncatedTextProps) => {
+export const TruncatedText = ({
+  text = '',
+  isMultiline = false,
+  maxLines = '4', // defaults to 4 max lines
+  sx,
+  ...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%'
+    };
+  }
+
   return (
     <Typography
       sx={{
-        display: 'block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        width: '100%',
+        ...styleProps,
         ...sx
       }}
       {...rest}

diff --git a/packages/extension/src/components/atoms/index.ts b/packages/extension/src/components/atoms/index.ts
@@ -6,6 +6,5 @@ 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,7 +9,7 @@ import { convertHexToString } from 'xrpl';
 import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { useLedger } from '../../../contexts';
-import { NFTImage, TruncatedText, TruncatedMultiLinesText } from '../../atoms';
+import { NFTImage, TruncatedText } from '../../atoms';
 import { NFTDetails } from '../../organisms';
 
 export interface NFTCardProps {
@@ -107,9 +107,10 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
             sx={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
             data-testid="nft_name"
           />
-          <TruncatedMultiLinesText
+          <TruncatedText
             text={NFTData.description}
             sx={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}
+            isMultiline={true}
           />
           <Button
             variant="outlined"