feat(UIKIT-1771,OverflowTypography): Добавлен prop visibleLastSymbols…

…Count (#1138)

packages/components/src/OverflowTypography/OverflowTypography.stories.tsx

@@ -1,5 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 
+import { styled } from '../styles';
+
 import { OverflowTypography } from './OverflowTypography';
 
 /**
@@ -31,9 +33,13 @@ export const Interaction: Story = {
   },
 };
 
+const Wrapper = styled.div`
+  max-width: 500px;
+`;
+
 export const Example = () => {
   return (
-    <div style={{ maxWidth: '600px' }}>
+    <Wrapper>
       <OverflowTypography>
         Not enough long text for special behavior.
       </OverflowTypography>
@@ -42,7 +48,7 @@ export const Example = () => {
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut
         delectus dolorem ea, explicabo illo minus nostrum quae quod veniam.
       </OverflowTypography>
-    </div>
+    </Wrapper>
   );
 };
 
@@ -53,7 +59,7 @@ export const Example = () => {
  */
 export const RowsCount = () => {
   return (
-    <div style={{ maxWidth: '600px' }}>
+    <Wrapper>
       <OverflowTypography>
         default props, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Atque aut delectus dolorem ea, explicabo illo minus nostrum quae quod
@@ -65,7 +71,7 @@ export const RowsCount = () => {
         sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui,
         tempore.
       </OverflowTypography>
-    </div>
+    </Wrapper>
   );
 };
 
@@ -74,7 +80,7 @@ export const RowsCount = () => {
  */
 export const TooltipProps = () => {
   return (
-    <div style={{ maxWidth: '600px' }}>
+    <Wrapper>
       <OverflowTypography
         tooltipProps={{
           title: 'custom tooltip, with separate settings',
@@ -85,6 +91,23 @@ export const TooltipProps = () => {
         adipisicing elit. Assumenda autem debitis eligendi inventore magni nobis
         perspiciatis quisquam ratione, unde vel?
       </OverflowTypography>
-    </div>
+    </Wrapper>
+  );
+};
+
+/**
+ * Prop `visibleLastSymbolsCount` позволяет задавать число отображаемых символов после сокращения.
+ * При использовании `visibleLastSymbolsCount` не работает props `rowsCount`
+ */
+export const VisibleLastSymbols = () => {
+  return (
+    <Wrapper>
+      <OverflowTypography visibleLastSymbolsCount={10}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi
+        consectetur corporis dolores eos, esse eum expedita hic minima
+        molestias, nobis odio qui quisquam rem saepe ut, velit voluptate
+        voluptates!
+      </OverflowTypography>
+    </Wrapper>
   );
 };

packages/components/src/OverflowTypography/OverflowTypography.tsx

@@ -3,10 +3,10 @@ import { type PropsWithChildren } from 'react';
 
 import { Tooltip } from '../Tooltip';
 import { type TooltipProps as BasicTooltipProps } from '../Tooltip';
-import { type TypographyProps } from '../Typography';
+import { Typography, type TypographyProps } from '../Typography';
 
-import { StyledTypography } from './styles';
-import { useOverflowed } from './hooks';
+import { StyledTypography, Wrapper } from './styles';
+import { useLogic } from './useLogic';
 
 type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
 
@@ -31,6 +31,10 @@ type TooltipCustomizable = {
      */
     title?: ReactNode;
   };
+  /**
+   * Количество отображаемых после сокращения в конце символов
+   */
+  visibleLastSymbolsCount?: number;
 };
 
 export type OverflowedElementProps = OverflowedProps &
@@ -45,29 +49,65 @@ export const DEFAULT_ROWS_COUNT = 1;
 export const OverflowTypography = forwardRef<
   HTMLElement,
   OverflowedTypographyProps
->(
-  (
-    { tooltipProps, children, rowsCount = DEFAULT_ROWS_COUNT, ...props },
+>((props, forwardedRef) => {
+  const {
+    ref,
+    isOverflowed,
+    secondPartLabel,
+    firstPartLabel,
+    isTruncatedStringVisible,
+  } = useLogic({
+    ...props,
     forwardedRef,
-  ) => {
-    const { ref, isOverflowed } = useOverflowed(forwardedRef);
+  });
+
+  const {
+    tooltipProps,
+    children,
+    rowsCount = DEFAULT_ROWS_COUNT,
+    visibleLastSymbolsCount,
+    align = 'left',
+    ...restProps
+  } = props;
+
+  const typographyProps = {
+    ...restProps,
+    ref,
+    align,
+    children,
+    rowsCount,
+    hasMultipleRows: rowsCount > DEFAULT_ROWS_COUNT,
+  };
 
-    const typographyProps = {
-      ...props,
-      ref,
-      children,
-      rowsCount,
-      hasMultipleRows: rowsCount > DEFAULT_ROWS_COUNT,
-    };
+  if (isTruncatedStringVisible) {
+    return (
+      <Tooltip title={children} disableInteractive {...tooltipProps}>
+        <Wrapper $align={align}>
+          <StyledTypography
+            component="span"
+            children={firstPartLabel}
+            ref={ref}
+            hasMultipleRows={false}
+            rowsCount={1}
+            {...restProps}
+          />
+          <Typography
+            children={secondPartLabel}
+            {...restProps}
+            component="span"
+          />
+        </Wrapper>
+      </Tooltip>
+    );
+  }
 
-    if (children && isOverflowed) {
-      return (
-        <Tooltip title={children} disableInteractive {...tooltipProps}>
-          <StyledTypography {...typographyProps} />
-        </Tooltip>
-      );
-    }
+  if (children && isOverflowed) {
+    return (
+      <Tooltip title={children} disableInteractive {...tooltipProps}>
+        <StyledTypography {...typographyProps} />
+      </Tooltip>
+    );
+  }
 
-    return <StyledTypography {...typographyProps} />;
-  },
-);
+  return <StyledTypography {...typographyProps} />;
+});

packages/components/src/OverflowTypography/styles.ts

@@ -26,3 +26,12 @@ export const StyledTypography = styled(Typography, {
     hasMultipleRows ? 'vertical' : ''};
   -webkit-line-clamp: ${({ rowsCount }) => rowsCount};
 `;
+
+export const Wrapper = styled(Typography, {
+  shouldForwardProp: (prop) => !['$align'].includes(prop),
+})<{ $align: string }>`
+  display: flex;
+  justify-content: ${({ $align }) => $align};
+
+  white-space: nowrap;
+`;

packages/components/src/OverflowTypography/useLogic/index.ts

@@ -0,0 +1 @@
+export * from './useLogic';

packages/components/src/OverflowTypography/useLogic/useLogic.ts

@@ -0,0 +1,35 @@
+import { type ForwardedRef } from 'react';
+
+import { useOverflowed } from '../hooks';
+import { type OverflowedTypographyProps } from '../OverflowTypography';
+import { truncateString } from '../utils';
+
+type UseLogicParams = OverflowedTypographyProps & {
+  forwardedRef: ForwardedRef<HTMLElement>;
+};
+
+export const useLogic = ({
+  forwardedRef,
+  children,
+  visibleLastSymbolsCount,
+}: UseLogicParams) => {
+  const { ref, isOverflowed } = useOverflowed(forwardedRef);
+
+  const canSlice = children && typeof children === 'string';
+
+  const { firstPartLabel, secondPartLabel } =
+    canSlice && isOverflowed && visibleLastSymbolsCount
+      ? truncateString(visibleLastSymbolsCount, children)
+      : { firstPartLabel: '', secondPartLabel: '' };
+
+  const isTruncatedStringVisible =
+    canSlice && isOverflowed && Boolean(visibleLastSymbolsCount);
+
+  return {
+    isTruncatedStringVisible,
+    isOverflowed,
+    ref,
+    firstPartLabel,
+    secondPartLabel,
+  };
+};

packages/components/src/OverflowTypography/utils/index.ts

@@ -0,0 +1 @@
+export { truncateString } from './truncateString';

packages/components/src/OverflowTypography/utils/truncateString/index.ts

@@ -0,0 +1 @@
+export * from './truncateString';

packages/components/src/OverflowTypography/utils/truncateString/truncateString.ts

@@ -0,0 +1,9 @@
+export const truncateString = (
+  visibleLastSymbolsCount: number,
+  label: string,
+) => {
+  const firstPartLabel = label.slice(0, -visibleLastSymbolsCount);
+  const secondPartLabel = label.slice(-visibleLastSymbolsCount);
+
+  return { firstPartLabel, secondPartLabel };
+};