Commit 9cd00671 by Johannes Schill

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

parent a007730f
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 { ...@@ -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> { ...@@ -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> { ...@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment