feat: adds shorten text tooltip component

Author: itofarina

dist/components/molecules/CopyTextTooltip.d.ts

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { TooltipProps } from '@material-ui/core/Tooltip';
-export interface CopyTextTooltipProps extends TooltipProps {
+export interface CopyTextTooltipProps {
     displayElement: React.ReactElement;
     fullText: string;
 }

dist/components/molecules/ShortenTextTooltip.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface ShortenTextTooltipProps {
+    value: string;
+    maxLength?: number;
+    charsShownCount?: number;
+}
+declare const ShortenTextTooltip: FC<ShortenTextTooltipProps>;
+export default ShortenTextTooltip;

dist/components/molecules/index.d.ts

@@ -8,8 +8,9 @@ import FooterColumn from './FooterColumn';
 import LabeledCheckbox from './LabeledCheckbox';
 import ModalDialogue from './ModalDialogue';
 import RangeSliderWithInputs from './RangeSliderWithInputs';
+import ShortenTextTooltip from './ShortenTextTooltip';
 import StyledTabs from './StyledTabs';
 import SwitchTabs from './SwitchTabs';
 import TooltipIconButton from './TooltipIconButton';
 import UnitsInput from './UnitsInput';
-export { Accordion, Account, AccountModal, CopyTextTooltip, FAQSection, FilterCheckboxCard, FooterColumn, LabeledCheckbox, ModalDialogue, RangeSliderWithInputs, StyledTabs, SwitchTabs, TooltipIconButton, UnitsInput, };
+export { Accordion, Account, AccountModal, CopyTextTooltip, FAQSection, FilterCheckboxCard, FooterColumn, LabeledCheckbox, ModalDialogue, RangeSliderWithInputs, ShortenTextTooltip, StyledTabs, SwitchTabs, TooltipIconButton, UnitsInput, };

dist/doneThumbsUp~bbkTwQsx.svg

@@ -1,9 +1,9 @@
 import React, { FC, useState } from 'react'
-import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'
+import Tooltip from '@material-ui/core/Tooltip'
 import { Typography, makeStyles } from '@material-ui/core'
 import FileCopyIcon from '@material-ui/icons/FileCopy'
 
-export interface CopyTextTooltipProps extends TooltipProps {
+export interface CopyTextTooltipProps {
   displayElement: React.ReactElement
   fullText: string
 }

dist/index.js

@@ -0,0 +1,30 @@
+import React, { FC } from 'react'
+import Typography from '@material-ui/core/Typography'
+import CopyTextTooltip from './CopyTextTooltip'
+import { shortenString } from '../../utils'
+
+export interface ShortenTextTooltipProps {
+  value: string
+  maxLength?: number
+  charsShownCount?: number
+}
+
+const ShortenTextTooltip: FC<ShortenTextTooltipProps> = ({ value, maxLength = 20, charsShownCount }) => (
+  <React.Fragment>
+    {
+      value.length > maxLength
+      && (
+        <CopyTextTooltip
+          displayElement={<Typography variant="body2">{shortenString(value, maxLength, charsShownCount || maxLength - 5)}</Typography>}
+          fullText={value}
+        />
+      )
+    }
+    {
+      value.length <= maxLength
+      && value
+    }
+  </React.Fragment>
+)
+
+export default ShortenTextTooltip