COM-162: Add EllipsisTooltip component to admin
#1548
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
c71d745 to
a41ebbd
Compare
a41ebbd to
e2483d8
Compare
f1f61cd to
c7442a0
Compare
c7442a0 to
2fe2fc3
Compare
johnnyomair
reviewed
Jan 24, 2024
Comment on lines
+57
to
+63
| {renderWithTooltip ? ( | ||
| <Tooltip PopperProps={{ anchorEl: rootRef.current }} title={children}> | ||
| {content} | ||
| </Tooltip> | ||
| ) : ( | ||
| content | ||
| )} |
There was a problem hiding this comment.
Instead of this conditional render you could render the Tooltip all the time and use undefined for title if the content fits into the container. I believe this would simplify the ref handling
Comment on lines
+15
to
+21
| const updateRenderWithTooltip = React.useCallback(() => { | ||
| if (rootRef.current && contentRef.current) { | ||
| setRenderWithTooltip(contentRef.current.offsetWidth > rootRef.current.clientWidth); | ||
| } | ||
| // The dependency array items must be `.current`, otherwise the callback will not be called, when the html-element is rendered. | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [rootRef.current, contentRef.current]); |
There was a problem hiding this comment.
You could define the function inside the useEffect for simplicity. Also, if you always render the tooltip, the refs wouldn't need to be in the dependency array
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Used to automatically add a tooltip to text that is too long to fit in its container.
This is useful for displaying text in a table or data grid when the text might be too long to fit in the column.
Theming-Support is added in a separate PR (#1551 ) because of the theming-refactor (#1376).