Merge pull request #7681 from VKCOM/e.muhamethanov/7636/add-text-elli…

…psis-title feat(EllipsisText): add title attribute
VKCOM · Oct 1, 2024 · dcd391a · dcd391a
2 parents 4bcec20 + 308fdda
commit dcd391a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.module.css b/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.module.css
@@ -4,6 +4,13 @@
   max-inline-size: 100%;
 }
 
+/* Хак для того, чтобы убрать системный тултип в Safari */
+.host.disableNativeTitle::after,
+.host.disableNativeTitle .content::after {
+  content: '';
+  display: block;
+}
+
 .content {
   min-inline-size: 1em;
   overflow: hidden;

diff --git a/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx b/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx
@@ -1,12 +1,13 @@
 import { useRef } from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { getTextFromChildren } from '../../../lib/children';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../../types';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
 import styles from './EllipsisText.module.css';
 
 export interface EllipsisTextProps
-  extends RootComponentProps<HTMLElement>,
+  extends Omit<RootComponentProps<HTMLElement>, 'title'>,
     HasRootRef<HTMLElement> {
   /**
    * Пользовательская маскимальная ширина.
@@ -22,6 +23,10 @@ export interface EllipsisTextProps
    * > @see [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
    */
   maxLines?: number;
+  /**
+   * Отключает отображение нативного тултипа с полным текстом
+   */
+  disableNativeTitle?: boolean;
 }
 
 /** Компонент ограничивает текстовый контент убирая его в многоточие.
@@ -35,6 +40,7 @@ const EllipsisText = ({
   children,
   maxWidth,
   maxLines = 1,
+  disableNativeTitle = false,
   ...restProps
 }: EllipsisTextProps): React.ReactNode => {
   const contentRef = useRef<HTMLSpanElement | null>(null);
@@ -46,7 +52,16 @@ const EllipsisText = ({
   }, [contentRef, maxLines]);
 
   return (
-    <span ref={getRootRef} className={classNames(styles.host, className)} {...restProps}>
+    <span
+      ref={getRootRef}
+      className={classNames(
+        styles.host,
+        disableNativeTitle && styles.disableNativeTitle,
+        className,
+      )}
+      title={disableNativeTitle ? undefined : getTextFromChildren(children)}
+      {...restProps}
+    >
       <span
         style={{ maxWidth }}
         ref={contentRef}