@snack-uikit/truncate-string - npm Package Compare versions

Comparing version 0.4.10 to 0.4.11-preview-1fcf96b1.0

dist/helperComponents/TruncateStringMiddle/TruncateStringMiddle.js

@@ -14,5 +14,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cn from 'classnames';
+import trottle from 'lodash.throttle';
 import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from '@snack-uikit/tooltip';
-import { extractSupportProps, useDebounce } from '@snack-uikit/utils';
+import { extractSupportProps } from '@snack-uikit/utils';
 import { isEllipsisActive, truncateStringMiddle } from '../../helpers';
@@ -26,12 +27,12 @@ import styles from './styles.module.css';
     const truncatedTextElementRef = useRef(null);
-    const toggleTruncateString = useDebounce(() => {
-        setTruncatedString(truncateStringMiddle({
-            text,
-            element: textElementRef.current,
-            truncatedElement: truncatedTextElementRef.current,
-        }));
-        setShowTooltip(isEllipsisActive(textElementRef.current));
-    }, 50);
     useEffect(() => {
-        const observer = new ResizeObserver(toggleTruncateString);
+        const setTruncate = trottle(() => {
+            setTruncatedString(truncateStringMiddle({
+                element: textElementRef.current,
+                truncatedElement: truncatedTextElementRef.current,
+                text,
+            }));
+            setShowTooltip(isEllipsisActive(textElementRef.current));
+        }, 50);
+        const observer = new ResizeObserver(setTruncate);
         if (textElementRef.current) {
@@ -43,5 +44,5 @@ observer.observe(textElementRef.current);
         };
-    }, [showTooltip, text, hideTooltip, toggleTruncateString]);
+    }, [showTooltip, text, hideTooltip]);
     const textElement = (_jsxs(_Fragment, { children: [_jsx("span", { ref: textElementRef, className: styles.fullText, children: text }), _jsx("span", { ref: truncatedTextElementRef, className: styles.truncatedText, "data-test-id": 'truncated-text', children: truncatedString })] }));
     return (_jsx("span", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: showTooltip && !hideTooltip ? (_jsx(Tooltip, { tip: text, placement: placement, hoverDelayOpen: 500, triggerClassName: styles.textContainer, children: textElement })) : (textElement) })));
 }

dist/helpers/truncateStringMiddle.js

 import { isEllipsisActive } from './isEllipsisActive';
 const CONFIG = [
+    { potentialDelimiterWidth: 0.5, leftHalfDelta: 0, rightHalfDelta: 0 },
+    { potentialDelimiterWidth: 1, leftHalfDelta: 0, rightHalfDelta: 0 },
+    { potentialDelimiterWidth: 1, leftHalfDelta: 0.5, rightHalfDelta: 0 },
+    { potentialDelimiterWidth: 1, leftHalfDelta: 0, rightHalfDelta: 0.5 },
     { potentialDelimiterWidth: 2, leftHalfDelta: 0, rightHalfDelta: 0 },
@@ -4,0 +8,0 @@ { potentialDelimiterWidth: 2, leftHalfDelta: 1, rightHalfDelta: 0 },

package.json

@@ -7,3 +7,3 @@ {
   "title": "Truncate String",
-  "version": "0.4.10",
+  "version": "0.4.11-preview-1fcf96b1.0",
   "sideEffects": [
@@ -35,8 +35,12 @@ "*.css",
   "scripts": {},
+  "devDependencies": {
+    "@types/lodash.throttle": "4.1.8"
+  },
   "dependencies": {
     "@snack-uikit/tooltip": "0.13.0",
     "@snack-uikit/utils": "3.2.0",
-    "classnames": "2.3.2"
+    "classnames": "2.3.2",
+    "lodash.throttle": "4.1.1"
   },
-  "gitHead": "e3c61ef3e153ad1bba80ed288019a90e60f1464e"
+  "gitHead": "6258f32293b256d090f415fbbecd88ac9b037fc8"
 }

src/helpers/truncateStringMiddle.ts

 import { isEllipsisActive } from './isEllipsisActive';
 
 const CONFIG = [
+  { potentialDelimiterWidth: 0.5, leftHalfDelta: 0, rightHalfDelta: 0 },
+  { potentialDelimiterWidth: 1, leftHalfDelta: 0, rightHalfDelta: 0 },
+  { potentialDelimiterWidth: 1, leftHalfDelta: 0.5, rightHalfDelta: 0 },
+  { potentialDelimiterWidth: 1, leftHalfDelta: 0, rightHalfDelta: 0.5 },
   { potentialDelimiterWidth: 2, leftHalfDelta: 0, rightHalfDelta: 0 },
@@ -5,0 +9,0 @@ { potentialDelimiterWidth: 2, leftHalfDelta: 1, rightHalfDelta: 0 },

No alert changes

Improved metrics

Total package byte prevSize

42846

increased by1.71%

Lines of code

473

increased by2.16%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

1

increased byInfinity%

Dependency changes

• + Addedlodash.throttle@4.1.1

• + Addedlodash.throttle@4.1.1(transitive)