pixel-react 1.21.99 → 1.22.1

package/lib/utils/truncateText/truncateText.js

@@ -1,12 +1,18 @@
 const DEFAULT_FONT_SIZE = 12;
 const DEFAULT_FONT_FAMILY = 'Poppins';
+// One canvas for every measurement. Components call this on each render (e.g.
+// in every table row), and a new canvas and 2D context per call was most of
+// the cost.
+let canvasContext;
 const getCanvasContext = (fontSize = DEFAULT_FONT_SIZE, fontFamily = DEFAULT_FONT_FAMILY) => {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (context) {
-        context.font = `${fontSize}px ${fontFamily}`;
+    if (canvasContext === undefined) {
+        canvasContext = document.createElement('canvas').getContext('2d');
     }
-    return context;
+    const font = `${fontSize}px ${fontFamily}`;
+    if (canvasContext && canvasContext.font !== font) {
+        canvasContext.font = font;
+    }
+    return canvasContext;
 };
 export const truncateText = (text, maxLimit = 100, truncateType = 'count', fontSize = DEFAULT_FONT_SIZE, fontFamily = DEFAULT_FONT_FAMILY, letterSpacing = 0) => {
     if (!text || maxLimit <= 0)
@@ -25,17 +31,25 @@ export const truncateText = (text, maxLimit = 100, truncateType = 'count', fontS
     const totalLetterSpacing = letterSpacing > 0 ? letterSpacing * Math.max(0, text.length - 1) : 0;
     if (baseWidth + totalLetterSpacing <= maxLimit)
         return text;
-    let truncated = '';
-    for (let i = 0; i < text.length; i++) {
-        const temp = text.slice(0, i + 1);
-        const baseWidth = context.measureText(temp).width;
-        const spacingWidth = letterSpacing > 0 ? letterSpacing * i : 0;
-        if (baseWidth + spacingWidth + ellipsisWidth > maxLimit) {
-            return `${truncated}${ellipsis}`;
-        }
-        truncated = temp;
+    // The longest prefix that fits with the ellipsis. Width only grows with
+    // length, so a binary search finds it in log(n) measurements, not n.
+    const fits = (length) => {
+        const spacingWidth = letterSpacing > 0 ? letterSpacing * (length - 1) : 0;
+        return (context.measureText(text.slice(0, length)).width +
+            spacingWidth +
+            ellipsisWidth <=
+            maxLimit);
+    };
+    let low = 0;
+    let high = text.length;
+    while (low < high) {
+        const middle = Math.ceil((low + high) / 2);
+        if (fits(middle))
+            low = middle;
+        else
+            high = middle - 1;
     }
-    return truncated;
+    return low === text.length ? text : `${text.slice(0, low)}${ellipsis}`;
 };
 export const isTextTruncated = (text, maxLimit = 100, truncateType = 'count', fontSize = DEFAULT_FONT_SIZE, fontFamily = DEFAULT_FONT_FAMILY) => {
     if (!text || maxLimit <= 0)

package/lib/utils/truncateText/truncateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"truncateText.js","sourceRoot":"","sources":["../../../src/utils/truncateText/truncateText.ts"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAEtC,MAAM,gBAAgB,GAAG,CACvB,WAAmB,iBAAiB,EACpC,aAAqB,mBAAmB,EACP,EAAE;IACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,GAAG,GAAG,QAAQ,MAAM,UAAU,EAAE,CAAC;IAC/C,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAY,EACZ,WAAmB,GAAG,EACtB,eAAkC,OAAO,EACzC,WAAmB,iBAAiB,EACpC,aAAqB,mBAAmB,EACxC,gBAAwB,CAAC,EACjB,EAAE;IACV,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAEtC,MAAM,QAAQ,GAAG,KAAK,CAAC;IAEvB,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC,MAAM,GAAG,QAAQ;YAC3B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAE;YACzC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IACvD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IAE1D,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAClD,MAAM,kBAAkB,GACtB,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,IAAI,SAAS,GAAG,kBAAkB,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE5D,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAClC,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QAClD,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/D,IAAI,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,EAAE,CAAC;YACxD,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,CAAC;QACnC,CAAC;QACD,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAY,EACZ,WAAmB,GAAG,EACtB,eAAkC,OAAO,EACzC,WAAmB,iBAAiB,EACpC,aAAqB,mBAAmB,EAC/B,EAAE;IACX,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,KAAK,CAAC;IACzC,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IAChC,CAAC;IACD,MAAM,OAAO,GAAG,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IACvD,IAAI,CAAC,OAAO;QAAE,OAAO,KAAK,CAAC;IAE3B,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;AACpD,CAAC,CAAC"}
+{"version":3,"file":"truncateText.js","sourceRoot":"","sources":["../../../src/utils/truncateText/truncateText.ts"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAEtC,8EAA8E;AAC9E,4EAA4E;AAC5E,YAAY;AACZ,IAAI,aAA0D,CAAC;AAE/D,MAAM,gBAAgB,GAAG,CACvB,WAAmB,iBAAiB,EACpC,aAAqB,mBAAmB,EACP,EAAE;IACnC,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QAChC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpE,CAAC;IACD,MAAM,IAAI,GAAG,GAAG,QAAQ,MAAM,UAAU,EAAE,CAAC;IAC3C,IAAI,aAAa,IAAI,aAAa,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;QACjD,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC;IAC5B,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAY,EACZ,WAAmB,GAAG,EACtB,eAAkC,OAAO,EACzC,WAAmB,iBAAiB,EACpC,aAAqB,mBAAmB,EACxC,gBAAwB,CAAC,EACjB,EAAE;IACV,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAEtC,MAAM,QAAQ,GAAG,KAAK,CAAC;IAEvB,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC,MAAM,GAAG,QAAQ;YAC3B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAE;YACzC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IACvD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IAE1D,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAClD,MAAM,kBAAkB,GACtB,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,IAAI,SAAS,GAAG,kBAAkB,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE5D,wEAAwE;IACxE,qEAAqE;IACrE,MAAM,IAAI,GAAG,CAAC,MAAc,EAAE,EAAE;QAC9B,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,OAAO,CACL,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK;YAC9C,YAAY;YACZ,aAAa;YACf,QAAQ,CACT,CAAC;IACJ,CAAC,CAAC;IACF,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC;IACvB,OAAO,GAAG,GAAG,IAAI,EAAE,CAAC;QAClB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3C,IAAI,IAAI,CAAC,MAAM,CAAC;YAAE,GAAG,GAAG,MAAM,CAAC;;YAC1B,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC;IACzB,CAAC;IAED,OAAO,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,QAAQ,EAAE,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAY,EACZ,WAAmB,GAAG,EACtB,eAAkC,OAAO,EACzC,WAAmB,iBAAiB,EACpC,aAAqB,mBAAmB,EAC/B,EAAE;IACX,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,KAAK,CAAC;IACzC,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IAChC,CAAC;IACD,MAAM,OAAO,GAAG,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IACvD,IAAI,CAAC,OAAO;QAAE,OAAO,KAAK,CAAC;IAE3B,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;AACpD,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.21.99",
+  "version": "1.22.01",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",