[Logs UI] Shrink log stream when window is resized (#38937)
* [Logs UI] Shrink log stream when window is resized * Avoid using window resize events for width
This commit is contained in:
parent
071a52d4d4
commit
e22d7d795a
|
@ -19,7 +19,7 @@ interface Measurements {
|
|||
}
|
||||
|
||||
interface AutoSizerProps {
|
||||
detectAnyWindowResize?: boolean;
|
||||
detectAnyWindowResize?: boolean | 'height' | 'width';
|
||||
bounds?: boolean;
|
||||
content?: boolean;
|
||||
onResize?: (size: Measurements) => void;
|
||||
|
@ -37,6 +37,7 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
|
|||
public element: HTMLElement | null = null;
|
||||
public resizeObserver: ResizeObserver | null = null;
|
||||
public windowWidth: number = -1;
|
||||
public windowHeight: number = -1;
|
||||
|
||||
public readonly state = {
|
||||
boundsMeasurement: {
|
||||
|
@ -87,22 +88,31 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
|
|||
const boundsRect = bounds ? this.element.getBoundingClientRect() : null;
|
||||
const boundsMeasurement = boundsRect
|
||||
? {
|
||||
height: this.element.getBoundingClientRect().height,
|
||||
width: this.element.getBoundingClientRect().width,
|
||||
height: boundsRect.height,
|
||||
width: boundsRect.width,
|
||||
}
|
||||
: previousBoundsMeasurement;
|
||||
|
||||
if (
|
||||
this.props.detectAnyWindowResize &&
|
||||
boundsMeasurement &&
|
||||
boundsMeasurement.width &&
|
||||
this.windowWidth !== -1 &&
|
||||
this.windowWidth > window.innerWidth
|
||||
) {
|
||||
const gap = this.windowWidth - window.innerWidth;
|
||||
boundsMeasurement.width = boundsMeasurement.width - gap;
|
||||
if (this.props.detectAnyWindowResize && boundsMeasurement) {
|
||||
if (
|
||||
boundsMeasurement.width &&
|
||||
this.windowWidth !== -1 &&
|
||||
this.windowWidth > window.innerWidth
|
||||
) {
|
||||
const gap = this.windowWidth - window.innerWidth;
|
||||
boundsMeasurement.width = boundsMeasurement.width - gap;
|
||||
}
|
||||
if (
|
||||
boundsMeasurement.height &&
|
||||
this.windowHeight !== -1 &&
|
||||
this.windowHeight > window.innerHeight
|
||||
) {
|
||||
const gap = this.windowHeight - window.innerHeight;
|
||||
boundsMeasurement.height = boundsMeasurement.height - gap;
|
||||
}
|
||||
}
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.windowHeight = window.innerHeight;
|
||||
const contentRect = content && entry ? entry.contentRect : null;
|
||||
const contentMeasurement =
|
||||
contentRect && entry
|
||||
|
@ -111,7 +121,6 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
|
|||
width: entry.contentRect.width,
|
||||
}
|
||||
: previousContentMeasurement;
|
||||
|
||||
if (
|
||||
isEqual(boundsMeasurement, previousBoundsMeasurement) &&
|
||||
isEqual(contentMeasurement, previousContentMeasurement)
|
||||
|
@ -138,7 +147,6 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
|
|||
public render() {
|
||||
const { children } = this.props;
|
||||
const { boundsMeasurement, contentMeasurement } = this.state;
|
||||
|
||||
return children({
|
||||
bounds: boundsMeasurement,
|
||||
content: contentMeasurement,
|
||||
|
@ -146,11 +154,25 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
|
|||
});
|
||||
}
|
||||
|
||||
private updateMeasurement = () => {
|
||||
window.setTimeout(() => {
|
||||
this.measure(null);
|
||||
}, 0);
|
||||
};
|
||||
private updateMeasurement = () =>
|
||||
requestAnimationFrame(() => {
|
||||
const { detectAnyWindowResize } = this.props;
|
||||
if (!detectAnyWindowResize) return;
|
||||
switch (detectAnyWindowResize) {
|
||||
case 'height':
|
||||
if (this.windowHeight !== window.innerHeight) {
|
||||
this.measure(null);
|
||||
}
|
||||
break;
|
||||
case 'width':
|
||||
if (this.windowWidth !== window.innerWidth) {
|
||||
this.measure(null);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
this.measure(null);
|
||||
}
|
||||
});
|
||||
|
||||
private storeRef = (element: HTMLElement | null) => {
|
||||
if (this.element && this.resizeObserver) {
|
||||
|
|
|
@ -155,8 +155,8 @@ class ScrollableLogTextStreamViewClass extends React.PureComponent<
|
|||
columnWidths={columnWidths}
|
||||
showColumnConfiguration={showColumnConfiguration}
|
||||
/>
|
||||
<AutoSizer content>
|
||||
{({ measureRef, content: { width = 0, height = 0 } }) => (
|
||||
<AutoSizer bounds content detectAnyWindowResize="height">
|
||||
{({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => (
|
||||
<ScrollPanelSizeProbe innerRef={measureRef}>
|
||||
<VerticalScrollPanel
|
||||
height={height}
|
||||
|
|
|
@ -111,8 +111,8 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
|
|||
</WithStreamItems>
|
||||
)}
|
||||
</WithLogPosition>
|
||||
<AutoSizer content>
|
||||
{({ measureRef, content: { width = 0, height = 0 } }) => {
|
||||
<AutoSizer content bounds detectAnyWindowResize="height">
|
||||
{({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => {
|
||||
return (
|
||||
<LogPageMinimapColumn innerRef={measureRef}>
|
||||
<WithSummary>
|
||||
|
|
Loading…
Reference in a new issue