Adding functionality to collapse long running messages #810
Conversation
…ssages. Height is broadcast out to parent on height toggle. See: gotify#790
…expand/collapse functionality.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #810 +/- ##
=======================================
Coverage 79.51% 79.51%
=======================================
Files 56 56
Lines 2641 2641
=======================================
Hits 2100 2100
Misses 450 450
Partials 91 91 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
jmattheis
left a comment
There was a problem hiding this comment.
Awesome, looks pretty good. Thanks! I've made some minor cleanup and fixed the height updating. See sub comments.
ui/src/message/Message.tsx
Outdated
|
|
||
| public togglePreviewHeight = () => { | ||
| this.setState({...this.state, expanded: !this.state.expanded}); | ||
| this.updateHeightInParent(); |
There was a problem hiding this comment.
This doesn't work, as setState is asynchronous, so the size change in the DOM has very likely not happened yet. I've changed this to
this.setState(
(state) => ({expanded: !state.expanded}),
() => this.updateHeightInParent(),
);
https://legacy.reactjs.org/docs/react-component.html#setstate
the callback should be executed after the setState was applied.
ui/src/message/Message.tsx
Outdated
| public componentDidMount = () => { | ||
| if (this.previewRef.current) { | ||
| this.setState({ | ||
| ...this.state, |
There was a problem hiding this comment.
This can be omitted, as react already does a shallow merge. (already changed)
ui/src/message/Message.tsx
Outdated
| <Typography | ||
| component="div" | ||
| ref={this.previewRef} | ||
| className={`${classes.content} content ${!this.state.isOverflowing ? 'loading' : this.state.expanded ? 'expanded' : 'collapsed'}`}> |
There was a problem hiding this comment.
I've simplified this to this.state.isOverflowing && this.state.expanded ? 'expanded' : ''
In reference to: #790
This PR adds a Collapse component to long running messages. The height of the message preview is configurable in the Message component, as is the animation timeout. The animation timeout is also used to determine when to recalculate the height of the Message so it can be sent to the parent component via the
heightfunction.I didn't see any test files for this component that needed to be updated, but lmk if there's anything that needs to be addressed there, or if anything else on the PR needs attention.
Thanks also to @jmattheis for the pointer to the
heightfunction.