IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add min/max height when resizing and replace debounce with throttle

Browse Source
This commit is contained in:
Johannes Schill 2018-12-19 09:08:56 +01:00
parent a007730f5d
commit 9cd0067187
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/features/dashboard/dashgrid/PanelResizer.tsx
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { debounce, throttle } from 'lodash'; import { throttle } from 'lodash';
import Draggable from 'react-draggable'; import Draggable from 'react-draggable';
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
@ -17,8 +17,8 @@ interface State {
export class PanelResizer extends PureComponent<Props, State> { export class PanelResizer extends PureComponent<Props, State> {
initialHeight: number = Math.floor(document.documentElement.scrollHeight * 0.4); initialHeight: number = Math.floor(document.documentElement.scrollHeight * 0.4);
prevEditorHeight: number; prevEditorHeight: number;
debouncedChangeHeight: (height: number) => void; throttledChangeHeight: (height: number) => void;
debouncedResizeDone: () => void; throttledResizeDone: () => void;
constructor(props) { constructor(props) {
super(props); super(props);
@ -28,13 +28,25 @@ export class PanelResizer extends PureComponent<Props, State> {
editorHeight: this.initialHeight, editorHeight: this.initialHeight,
}; };
this.debouncedChangeHeight = throttle(this.changeHeight, 20, { trailing: true }); this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true });
this.debouncedResizeDone = debounce(() => { this.throttledResizeDone = throttle(() => {
panel.resizeDone(); panel.resizeDone();
}, 200); }, 50);
}
get largestHeight() {
return document.documentElement.scrollHeight * 0.9;
}
get smallestHeight() {
return 100;
} }
changeHeight = height => { changeHeight = height => {
const sh = this.smallestHeight;
const lh = this.largestHeight;
height = height < sh ? sh : height;
height = height > lh ? lh : height;
this.prevEditorHeight = this.state.editorHeight; this.prevEditorHeight = this.state.editorHeight;
this.setState({ this.setState({
editorHeight: height, editorHeight: height,
@ -43,8 +55,8 @@ export class PanelResizer extends PureComponent<Props, State> {
onDrag = (evt, data) => { onDrag = (evt, data) => {
const newHeight = this.state.editorHeight + data.y; const newHeight = this.state.editorHeight + data.y;
this.debouncedChangeHeight(newHeight); this.throttledChangeHeight(newHeight);
this.debouncedResizeDone(); this.throttledResizeDone();
}; };
render() { render() {