Add elideMode to Text component

nodegui · Oct 14, 2021 · 79fa540 · 79fa540
1 parent 45626c4
commit 79fa540
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/src/components/Text/RNText.ts b/src/components/Text/RNText.ts
@@ -1,11 +1,12 @@
-import { QLabel, NodeWidget, QLabelSignals, TextInteractionFlag } from '@nodegui/nodegui';
+import { QLabel, NodeWidget, QLabelSignals, TextInteractionFlag, QFontMetrics, TextElideMode, WidgetEventTypes } from '@nodegui/nodegui';
 import { ViewProps, setViewProps } from '../View/RNView';
 import { RNWidget } from '../config';
 import { throwUnsupported } from '../../utils/helpers';
 
 export interface TextProps extends ViewProps<QLabelSignals> {
   children?: string | number | Array<string | number>;
   wordWrap?: boolean;
+  elideMode?: TextElideMode;
   scaledContents?: boolean;
   openExternalLinks?: boolean;
   textInteractionFlags?: TextInteractionFlag;
@@ -23,7 +24,22 @@ export const setTextProps = (
     set children(text: string | number | Array<string | number>) {
       text = Array.isArray(text) ? text.join('') : text;
 
-      widget.setText(text);
+      if (this.elideMode !== undefined) {
+        const elideMode = this.elideMode;
+        const elidedText = () => {
+          const metrics = new QFontMetrics(widget.font());
+          const lines = widget.wordWrap() ? Math.floor(widget.size().height() / metrics.lineSpacing()) : 1;
+          return metrics.elidedText(`${text}`, elideMode, (widget.size().width() - metrics.maxWidth()) * lines);
+        }
+
+        widget.addEventListener(WidgetEventTypes.Resize, () => {
+          widget.setText(elidedText());
+        });
+
+        widget.setText(elidedText());
+      } else {
+        widget.setText(text);
+      }
     },
     set wordWrap(shouldWrap: boolean) {
       widget.setWordWrap(shouldWrap);
@@ -34,7 +50,7 @@ export const setTextProps = (
     set openExternalLinks(shouldOpenExternalLinks: boolean) {
       widget.setProperty('openExternalLinks', shouldOpenExternalLinks);
     },
-    set textInteractionFlags(interactionFlag: TextInteractionFlag){
+    set textInteractionFlags(interactionFlag: TextInteractionFlag) {
       widget.setProperty('textInteractionFlags', interactionFlag);
     }
   };