eclipsesource / eclipsesource/tabris-js
Add ellipsize property to TextView
- 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
Assessment
This issue has not been assessed yet.