Skip to content

Commit

Permalink
fix(chart_resizer): debounce resize only after initial render (#229)
Browse files Browse the repository at this point in the history
Fix chart resize debounce to not wait 200ms for initial render

fixes issue #109
  • Loading branch information
nickofthyme authored Jun 7, 2019
1 parent c97e526 commit 96d3fd6
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 3 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,8 @@
"react-dom": "^16.8.3",
"react-konva": "16.8.3",
"react-spring": "^8.0.8",
"resize-observer-polyfill": "^1.5.1"
"resize-observer-polyfill": "^1.5.1",
"ts-debounce": "^1.0.0"
},
"peerDependencies": {
"@elastic/datemath": "^5.0.2",
Expand Down
16 changes: 14 additions & 2 deletions src/components/chart_resizer.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
import debounce from 'lodash/debounce';
import { inject, observer } from 'mobx-react';
import React, { RefObject } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
import { debounce } from 'ts-debounce';
import { ChartStore } from '../state/chart_state';

interface ResizerProps {
chartStore?: ChartStore;
}
class Resizer extends React.Component<ResizerProps> {
private initialResizeComplete = false;
private containerRef: RefObject<HTMLDivElement>;
private ro: ResizeObserver;
private onResizeDebounced: (entries: ResizeObserverEntry[]) => void;

constructor(props: ResizerProps) {
super(props);
this.containerRef = React.createRef();
this.ro = new ResizeObserver(debounce(this.onResize, 200));
this.onResizeDebounced = debounce(this.onResize, 200);
this.ro = new ResizeObserver(this.handleResize);
}

componentDidMount() {
Expand Down Expand Up @@ -47,6 +50,15 @@ class Resizer extends React.Component<ResizerProps> {
/>
);
}

private handleResize = (entries: ResizeObserverEntry[]) => {
if (this.initialResizeComplete) {
this.onResizeDebounced(entries);
} else {
this.initialResizeComplete = true;
this.onResize(entries);
}
}
}

export const ChartResizer = inject('chartStore')(observer(Resizer));
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -13217,6 +13217,11 @@ trough@^1.0.0:
dependencies:
glob "^7.1.2"

ts-debounce@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/ts-debounce/-/ts-debounce-1.0.0.tgz#e433301744ba75fe25466f7f23e1382c646aae6a"
integrity sha512-V+IzWj418IoqqxVJD6I0zjPtgIyvAJ8VyViqzcxZ0JRiJXsi5mCmy1yUKkWd2gUygT28a8JsVFCgqdrf2pLUHQ==

ts-jest@^24.0.0:
version "24.0.2"
resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.0.2.tgz#8dde6cece97c31c03e80e474c749753ffd27194d"
Expand Down

0 comments on commit 96d3fd6

Please sign in to comment.