textTruncateChild on same line?
reintroducing opened this issue · 8 comments
Sorry, I don't mean to keep spamming you with issues but the more I use this component obviously the more I get to imagining. It's not uncommon to have the link to the "more" or "read more" or whatever be on the same line as the truncated text. Is it possible to add this functionality? So instead of:
This is truncated text...
more
you'd have:
This is truncated text... more
This would obviously require calculating the width of the textTruncateChild and subtracting it from the last truncated line and truncating at that point.
Thoughts?
No worry bro. You make this component better. You are right but may have some case should place textTruncateChild in different line. I will keep both by detect nodeType.
@reintroducing, if textTruncateChild tagName is A or SPAN will be same line now.
@ShinyChang Thanks!
Just curious why you chose to do it this way? Sometimes that more (or whatever) button may be a custom component and this is rather limiting. I looked at the change for this and it seems like the only reason to do this is to check for if one of those tags is in the array and if so then add to childText. You can probably accomplish the same thing but just adding a prop (something like textTruncateChildInline: bool and avoid doing that check while being more flexible in what can be used as the more button.
Unless I'm completely misreading the code in which case ignore this :)
@reintroducing ,
This is because canvas can only measure plain text width. textTruncateChild may be effected by CSS . And If textTruncateChild is component that will be more complex.
If want more flexible, I think drop canvas measure is must. Another measure way is getBoundingClientRect. But this way have heavy DOM manipulation. May cause performance issue.
I'm not sure which way is better, what you think? Or you know some special way to fix this problem?
Ah, that makes sense. That being said, I don't think a getBoundingClientRect would be too heavy (unless you've got a ton of these components on a page, but even then the calculation only happens once for each, unless you're constantly resizing the window which is not a realistic thing to continue to do). Even if a user resizes you can run the calculations on a debounce. I would expect that these "more" links would be quite small regardless so I don't think they'd be too crazy to use gBCR with.
I guess the other thing I'd worry about is its not uncommon to have a "Read more" link with an icon (be it SVG or icon font) pointing to the right in which case the current solution would not handle it properly I believe. Another reason to move to getBoundingClientRect in my opinion.
Gotcha, I will refactoring this component by getBoundingClientRect in the future.
Thank you so much :)
No problem, thank YOU for being proactive and garnering the feedback, much appreciated!