mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix infinite render loop in release details (#4710)
* Fix infinite render loop in release details by replacing stateful, UI-triggered releaseStore with reactive async computed Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Update injectable Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove unnecessary return Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove empty lines Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Allow injection of history Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make data required for opening of release details a dependency to make sure it's present Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove dead code Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make arriving release values not re-render whole details Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
1 parent
b7d29f8c49
commit
4f5a2988cb
33 files changed
+836
-600
No files matched your search
@@ -11,12 +11,13 @@ import { createPortal } from "react-dom";
|
||||
import { cssNames, noop, StorageHelper } from "../../utils";
|
||||
import { Icon } from "../icon";
|
||||
import { Animate, AnimateName } from "../animate";
|
||||
import { history } from "../../navigation";
|
||||
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
|
||||
import drawerStorageInjectable, {
|
||||
defaultDrawerWidth,
|
||||
} from "./drawer-storage/drawer-storage.injectable";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import historyInjectable from "../../navigation/history.injectable";
|
||||
import type { History } from "history";
|
||||
|
||||
export type DrawerPosition = "top" | "left" | "right" | "bottom";
|
||||
|
||||
@@ -59,6 +60,7 @@ resizingAnchorProps.set("top", [ResizeDirection.VERTICAL, ResizeSide.TRAILING, R
|
||||
resizingAnchorProps.set("bottom", [ResizeDirection.VERTICAL, ResizeSide.LEADING, ResizeGrowthDirection.BOTTOM_TO_TOP]);
|
||||
|
||||
interface Dependencies {
|
||||
history: History
|
||||
drawerStorage: StorageHelper<{ width: number }>;
|
||||
}
|
||||
|
||||
@@ -70,7 +72,7 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
|
||||
private scrollElem: HTMLElement;
|
||||
private scrollPos = new Map<string, number>();
|
||||
|
||||
private stopListenLocation = history.listen(() => {
|
||||
private stopListenLocation = this.props.history.listen(() => {
|
||||
this.restoreScrollPos();
|
||||
});
|
||||
|
||||
@@ -111,14 +113,14 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
|
||||
|
||||
saveScrollPos = () => {
|
||||
if (!this.scrollElem) return;
|
||||
const key = history.location.key;
|
||||
const key = this.props.history.location.key;
|
||||
|
||||
this.scrollPos.set(key, this.scrollElem.scrollTop);
|
||||
};
|
||||
|
||||
restoreScrollPos = () => {
|
||||
if (!this.scrollElem) return;
|
||||
const key = history.location.key;
|
||||
const key = this.props.history.location.key;
|
||||
|
||||
this.scrollElem.scrollTop = this.scrollPos.get(key) || 0;
|
||||
};
|
||||
@@ -232,6 +234,7 @@ export const Drawer = withInjectables<Dependencies, DrawerProps>(
|
||||
|
||||
{
|
||||
getProps: (di, props) => ({
|
||||
history: di.inject(historyInjectable),
|
||||
drawerStorage: di.inject(drawerStorageInjectable),
|
||||
...props,
|
||||
}),
|
||||
|
||||
Reference in new issue
Block a user