eclipsesource / eclipsesource/tabris-js

Add ellipsize property to TextView

Open
#2,187 1 comment 0 reactions 0 assignees View on GitHub
feature
Dominant language
JavaScript
Stars
1.4k
Forks
171
PR merge metrics
No merged PRs in 30d

Description

### Feature description

In the native part, there is a very convenient tool for truncating text. It would be nice to see it in Tabris, because I am more than sure that no implementation in JS will work as fast as the native one.

### Proposed solution
Android - https://developer.android.com/reference/android/widget/TextView#setEllipsize(android.text.TextUtils.TruncateAt)
iOS - https://developer.apple.com/documentation/uikit/nslinebreakmode/nslinebreakbytruncatingtail

### Alternative solutions
```ts
// Doesn't work for a full-width widget.
// As soon as such an opportunity is needed in my project, I will post the updated code

import { Properties, TextView } from 'tabris';

export class CroppableText extends TextView {
constructor(props: Properties) {
super(props);

this.onResize.once(() => {
let thisIndex = this.parent().children().indexOf(this);
let prevChild = this.parent().children()[thisIndex - 1];
if (thisIndex == 0) return;
let fontSize = parseFloat(new RegExp(/(.*?)px/gm).exec(this.font.toString())[1]);
if (this.absoluteBounds.left <= prevChild.absoluteBounds.left + prevChild.absoluteBounds.width) {
let intersectionWidth = prevChild.absoluteBounds.left + prevChild.absoluteBounds.width - this.absoluteBounds.left;
let toRemove = Math.ceil(intersectionWidth / fontSize) + 3;
this.text = this.text.substr(0, this.text.length - toRemove) + '...';
}
});
}
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.