-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Yuhsuan/react 18 upgrade #2426
Merged
Merged
Yuhsuan/react 18 upgrade #2426
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
aad6554
upgrade react and patch golden-layout
YuHsuan-Hwang a998e7f
migrate dialog workaround to react 18
YuHsuan-Hwang 49f5c43
migrate blueprint toaster to react 18
YuHsuan-Hwang 60129c3
upgrade react type definition; remove react-color type def; patch rea…
YuHsuan-Hwang 3e3822a
fix type
YuHsuan-Hwang 53d0c03
upgrade react-konva; fix types
YuHsuan-Hwang 49d41b3
fix key related warnings
YuHsuan-Hwang 8bf1f37
remove unused property
YuHsuan-Hwang e99bcb1
remove overrides
YuHsuan-Hwang 9ca659e
Revert "migrate blueprint toaster to react 18"
YuHsuan-Hwang 26e15af
migrate blueprint toaster to react 18
YuHsuan-Hwang 80d67cc
upgrade konva
YuHsuan-Hwang 90b25d8
upgrade react testing library
YuHsuan-Hwang 7e776ad
Merge branch 'dev' into yuhsuan/react_18_upgrade
YuHsuan-Hwang 582d34c
fix auto scroll not being triggered
YuHsuan-Hwang 7397ad4
Merge branch 'dev' into yuhsuan/react_18_upgrade
YuHsuan-Hwang File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
diff --git a/node_modules/golden-layout/dist/goldenlayout.js b/node_modules/golden-layout/dist/goldenlayout.js | ||
index 736f9ec..9c59284 100644 | ||
--- a/node_modules/golden-layout/dist/goldenlayout.js | ||
+++ b/node_modules/golden-layout/dist/goldenlayout.js | ||
@@ -5265,7 +5265,9 @@ lm.utils.copy( lm.utils.ReactComponentHandler.prototype, { | ||
* @returns {void} | ||
*/ | ||
_render: function() { | ||
- this._reactComponent = ReactDOM.render( this._getReactComponent(), this._container.getElement()[ 0 ] ); | ||
+ this._reactRoot = createRoot( this._container.getElement()[ 0 ] ); | ||
+ this._reactRoot.render( this._getReactComponent() ); | ||
+ this._reactComponent = this._getReactComponent(); | ||
this._originalComponentWillUpdate = this._reactComponent.componentWillUpdate || function() { | ||
}; | ||
this._reactComponent.componentWillUpdate = this._onUpdate.bind( this ); | ||
@@ -5281,7 +5283,7 @@ lm.utils.copy( lm.utils.ReactComponentHandler.prototype, { | ||
* @returns {void} | ||
*/ | ||
_destroy: function() { | ||
- ReactDOM.unmountComponentAtNode( this._container.getElement()[ 0 ] ); | ||
+ this._reactRoot.unmount(); | ||
this._container.off( 'open', this._render, this ); | ||
this._container.off( 'destroy', this._destroy, this ); | ||
}, |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
diff --git a/node_modules/react-split-pane/index.d.ts b/node_modules/react-split-pane/index.d.ts | ||
index d116f54..54452b7 100644 | ||
--- a/node_modules/react-split-pane/index.d.ts | ||
+++ b/node_modules/react-split-pane/index.d.ts | ||
@@ -5,6 +5,7 @@ export type Size = string | number; | ||
export type Split = 'vertical' | 'horizontal'; | ||
|
||
export type SplitPaneProps = { | ||
+ children: React.ReactNode[]; | ||
allowResize?: boolean; | ||
className?: string; | ||
primary?: 'first' | 'second'; | ||
@@ -59,6 +60,7 @@ declare class SplitPane extends React.Component< | ||
export default SplitPane; | ||
|
||
export type PaneProps = { | ||
+ children: React.ReactNode; | ||
className?: string; | ||
size?: Size; | ||
split?: Split; |
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
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
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
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
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
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
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
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
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
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From React documentation:
Therefore,
FilterableTableComponent
updates the ref whenever the table re-renders because there is an additional arrow function in the ref callback.Moreover, the ref is set to null and then to the DOM node in the process. Before react 18, we use the ref after the two calls are complete. With react 18, the re-render timing somehow changes and we use the ref between the two calls —— the ref is (temporarily) null and the auto scroll is not triggered.
I remove the additional arrow function to avoid unnecessary reset of the ref, avoiding the entire issue.