Fix insible log entries by replacing react-addons-css-transition-grou…

…p with react-transition-group Just tried to follow the migration guide: https://github.com/reactjs/react-transition-group/blob/HEAD/Migration.md This commit addresses the issue that the invisibl log-entries experienced with Nextcloud v24 are caused by pulling in conflicting version of react-dom. See issue nextcloud#699. Signed-off-by: Claus-Justus Heine <[email protected]>
rotdrop · Nov 9, 2022 · 46fcaab · 46fcaab
1 parent 46ec5b5
commit 46fcaab
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
 		"postcss-nested": "^5.0.6",
 		"postcss-preset-env": "^7.4.3",
 		"react-a11y": "1.1.0",
-		"react-addons-css-transition-group": "^15.6.2",
+		"react-transition-group": "^4.4.2",
 		"strip-loader": "^0.1.2",
 		"style-loader": "^3.3.1",
 		"webpack": "^5.72.0",

diff --git a/src/Components/LogTable.js b/src/Components/LogTable.js
@@ -4,7 +4,8 @@ import {LogLevel} from './LogLevel.js';
 import MediaQuery from 'react-responsive';
 import {convertDateFormat} from '../DateFormatConverter.js'
 import {Settings} from './Settings';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import ReactTransitionGroup from 'react-transition-group/TransitionGroup';
+import ReactCSSTransition from 'react-transition-group/CSSTransition';
 import {copyTextToClipboard} from '../Providers/ClipboardProvider';
 import {ExceptionParser} from '../ExceptionParser';
 import moment from '@nextcloud/moment';
@@ -64,6 +65,11 @@ export class LogTable extends Component {
 			};
 
 			return (
+				<ReactCSSTransition
+					key={i}
+					classNames="highlight"
+					timeout={{ enter: 15000, exit: 1500 }}
+				>
 				<tr className={className + (this.state.copyActive === entry.id ? ' ' + style.active : '')}
 					key={entry.id}
 					onClick={this.highlightRequest.bind(this, entry.reqId)}>
@@ -102,6 +108,7 @@ export class LogTable extends Component {
 					<td className={timeClass}
 						title={this.formatDate(entry, !this.props.relative)}>{this.formatDate(entry, this.props.relative)}</td>
 				</tr>
+				</ReactCSSTransition>
 			)
 		});
 
@@ -174,14 +181,9 @@ export class LogTable extends Component {
 							</th>
 						</tr>
 						</thead>
-						<ReactCSSTransitionGroup
-							transitionName="highlight"
-							transitionEnterTimeout={1500}
-							transitionLeaveTimeout={1500}
-							component="tbody"
-						>
+						<ReactTransitionGroup component="tbody">
 							{rows}
-						</ReactCSSTransitionGroup>
+						</ReactTransitionGroup>
 					</table>
 				</MediaQuery>
 				<MediaQuery maxWidth={768}>