kamotive_ui 1.2.25 → 1.2.26

package/dist/components/Link/Link.js

@@ -1,14 +1,48 @@
-import React from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import styles from './Link.module.css';
 import { Typography } from '../Typography/Typography';
 import { ETypographyVariants } from '../Typography/enums';
 import { Tooltip } from '../Tooltip/Tooltip';
-export const Link = ({ href, children, title, className, style, underline = 'hover', variant = ETypographyVariants.Body1, color = 'var(--text-dark)', maxWidth, }) => {
-    const stylesUnderline = underline === 'hover' && styles.linkHover;
+export const Link = ({ href, onClick, children, title, className, style, underline = 'hover', variant = ETypographyVariants.Body1, color = 'var(--text-dark)', maxWidth, size, widthInPixels, }) => {
+    const stylesUnderline = underline === 'hover' ? styles.linkHover : underline === 'none' ? styles.linkNone : '';
     const stylesTooltipWidth = maxWidth ? { maxWidth: maxWidth } : {};
+    const textRef = useRef(null);
+    const [measuredSize, setMeasuredSize] = useState(0);
     const linkStyle = Object.assign(Object.assign({}, style), { color: color, textDecorationColor: color });
-    const link = (React.createElement("a", { href: href, title: title, className: classNames(stylesUnderline, maxWidth && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth) },
-        React.createElement(Typography, { variant: variant, color: color }, children)));
-    return maxWidth ? (React.createElement(Tooltip, { label: children, opacity: 0.4, displayDelay: 0, style: { maxWidth: '500px' } }, link)) : (link);
+    useLayoutEffect(() => {
+        if (!size && textRef.current) {
+            const textWidth = textRef.current.scrollWidth;
+            setMeasuredSize(textWidth);
+        }
+    }, [children, size, variant]);
+    const actualSize = size || measuredSize;
+    const isTooltipVisible = useMemo(() => {
+        if (!actualSize || !widthInPixels) {
+            return false;
+        }
+        const shouldShow = actualSize > widthInPixels;
+        return shouldShow;
+    }, [actualSize, widthInPixels, size]);
+    const linkContent = (React.createElement(Typography, { variant: variant, color: color }, children));
+    const link = onClick ? (React.createElement("div", { onClick: onClick, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth) },
+        !size && (React.createElement("div", { ref: textRef, style: {
+                position: 'absolute',
+                visibility: 'hidden',
+                height: 0,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                pointerEvents: 'none',
+            } }, linkContent)),
+        linkContent)) : (React.createElement("a", { href: href, title: title, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth) },
+        !size && (React.createElement("div", { ref: textRef, style: {
+                position: 'absolute',
+                visibility: 'hidden',
+                height: 0,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                pointerEvents: 'none',
+            } }, linkContent)),
+        linkContent));
+    return isTooltipVisible ? (React.createElement(Tooltip, { key: `${size}-${widthInPixels}`, label: children, opacity: 0.4, displayDelay: 0, style: { maxWidth: '500px' } }, link)) : (link);
 };

package/dist/components/Link/Link.module.css

@@ -1,16 +1,24 @@
+.link {
+  cursor: pointer;
+}
 .linkHover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .linkHover:hover {
-    text-decoration: underline;
+  text-decoration: underline;
+}
+.linkNone {
+  text-decoration: none;
+}
+.linkNone:hover {
+  text-decoration: none;
 }
 
 .tooltipStyle {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: context-menu;
-    display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: context-menu;
+  display: inline-block;
 }
-

package/dist/types/index.d.ts

@@ -619,7 +619,9 @@ export interface CommentProps {
 }
 export interface LinkProps {
     /**Гипертекстовая ссылка */
-    href: string;
+    href?: string;
+    /** Обработчик клика */
+    onClick?: () => void;
     /** Дочерние элементы */
     children: ReactNode;
     /**Заголовок, содержащий дополнительную информацию о ссылке */
@@ -629,11 +631,14 @@ export interface LinkProps {
     /** Стили передаваемые напрямую */
     style?: CSSProperties;
     /**Подчеркивание */
-    underline?: 'hover' | 'underline';
+    underline?: 'hover' | 'underline' | 'none';
     /** Вариант шрифта */
     variant?: `${ETypographyVariants}`;
     /** Цвет текста */
     color?: CSSProperties['color'];
     /**Максимальная ширина - нужна для отображения тултипа */
     maxWidth?: string;
+    /** Размер - для отображения тултипа */
+    size?: number;
+    widthInPixels?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.25",
+  "version": "1.2.26",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [