Revert Resize and FlotChart compontents to 6.0 (#15717)

- fixes #15672
- fixes #14353

src/core_plugins/metrics/public/visualizations/components/flot_chart.js

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { findDOMNode } from 'react-dom';
 import _ from 'lodash';
 import $ from 'ui/flot-charts';
 import eventBus from '../lib/events';
@@ -174,10 +175,14 @@ class FlotChart extends Component {
     return _.assign(opts, props.options);
   }
 
-  handleResize(width, height) {
-    this.size = { width, height };
+  handleResize() {
+    const resize = findDOMNode(this.resize);
+    if (!this.rendered) {
+      this.renderChart();
+      return;
+    }
 
-    if (this.size.height > 0 && this.size.width > 0) {
+    if (resize && resize.clientHeight > 0 && resize.clientHeight > 0) {
       if (!this.plot) return;
       this.plot.resize();
       this.plot.setupGrid();
@@ -187,15 +192,14 @@ class FlotChart extends Component {
   }
 
   renderChart() {
+    const resize = findDOMNode(this.resize);
 
-    if (this.size.height > 0 && this.size.width > 0) {
-
+    if (resize.clientWidth > 0 && resize.clientHeight > 0) {
       this.rendered = true;
       const { series } = this.props;
       const data = this.calculateData(series, this.props.show);
 
       this.plot = $.plot(this.target, data, this.getOptions(this.props));
-
       this.handleDraw(this.plot);
 
       _.defer(() => this.handleResize());
@@ -253,10 +257,16 @@ class FlotChart extends Component {
 
   render() {
     return (
-      <div className="rhythm_chart__timeseries-container">
-        <div ref={el => (this.target = el)} className="rhythm_chart__timeseries-container" />
-        <Resize onResize={this.handleResize} />
-      </div>
+      <Resize
+        onResize={this.handleResize}
+        ref={(el) => this.resize = el}
+        className="rhythm_chart__timeseries-container"
+      >
+        <div
+          ref={(el) => this.target = el}
+          className="rhythm_chart__timeseries-container"
+        />
+      </Resize>
     );
   }
 }

src/core_plugins/metrics/public/visualizations/components/resize.js

@@ -1,177 +1,66 @@
-/*
- * Please note: Much of this code is taken from the MIT licensed react-resize-detector module written by @maslianok
- */
-
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-
-const parentStyle = {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  overflow: 'hidden',
-  zIndex: -1,
-  visibility: 'hidden'
-};
-
-const shrinkChildStyle = {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  width: '200%',
-  height: '200%'
-};
-
-const expandChildStyle = {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  width: '100%',
-  height: '100%'
-};
-
+import { findDOMNode } from 'react-dom';
 class Resize extends Component {
-  constructor() {
-    super();
 
-    this.state = {
-      expandChildHeight: 0,
-      expandChildWidth: 0,
-      expandScrollLeft: 0,
-      expandScrollTop: 0,
-      shrinkScrollTop: 0,
-      shrinkScrollLeft: 0,
-      lastWidth: 0,
-      lastHeight: 0
-    };
-
-    this.reset = this.reset.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
-    this.forceUpdate();
+  checkSize() {
+    const el = findDOMNode(this.el);
+    if (!el) return;
+    this.timeout = setTimeout(() => {
+      const { currentHeight, currentWidth } = this.state;
+      if (currentHeight !== el.parentNode.clientHeight || currentWidth !== el.parentNode.clientWidth) {
+        this.setState({
+          currentWidth: el.parentNode.clientWidth,
+          currentHeight: el.parentNode.clientHeight
+        });
+        this.handleResize();
+      }
+      clearTimeout(this.timeout);
+      this.checkSize();
+    }, this.props.frequency);
   }
 
   componentDidMount() {
-    const [width, height] = this.containerSize();
-    this.reset(width, height);
-    this.props.onResize(width, height);
+    this.checkSize();
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.props !== nextProps || this.state !== nextState;
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
-  componentDidUpdate() {
-    this.expand.scrollLeft = this.expand.scrollWidth;
-    this.expand.scrollTop = this.expand.scrollHeight;
-
-    this.shrink.scrollLeft = this.shrink.scrollWidth;
-    this.shrink.scrollTop = this.shrink.scrollHeight;
-  }
-
-  containerSize() {
-    return [
-      this.props.handleWidth && this.container.parentElement.offsetWidth,
-      this.props.handleHeight && this.container.parentElement.offsetHeight
-    ];
-  }
-
-  reset(containerWidth, containerHeight) {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const parent = this.container.parentElement;
-
-    let position = 'static';
-    if (parent.currentStyle) {
-      position = parent.currentStyle.position;
-    } else if (window.getComputedStyle) {
-      position = window.getComputedStyle(parent).position;
-    }
-    if (position === 'static') {
-      parent.style.position = 'relative';
-    }
-
-    this.setState({
-      expandChildHeight: this.expand.offsetHeight + 10,
-      expandChildWidth: this.expand.offsetWidth + 10,
-      lastWidth: containerWidth,
-      lastHeight: containerHeight
-    });
-  }
-
-  handleScroll(e) {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopPropagation();
-
-    const { state } = this;
-
-    const [width, height] = this.containerSize();
-    if (width !== state.lastWidth || height !== state.lastHeight) {
-      this.props.onResize(width, height);
-    }
-
-    this.reset(width, height);
+  handleResize() {
+    if (this.props.onResize) this.props.onResize();
   }
 
   render() {
-    const { state } = this;
-
-    const expandStyle = {
-      ...expandChildStyle,
-      width: state.expandChildWidth,
-      height: state.expandChildHeight
-    };
-
-    return (
+    const style = this.props.style || {};
+    const className = this.props.className || '';
+    return(
       <div
-        style={parentStyle}
-        ref={e => {
-          this.container = e;
-        }}
+        style={style}
+        className={className}
+        ref={(el) => this.el = el}
       >
-        <div
-          style={parentStyle}
-          onScroll={this.handleScroll}
-          ref={e => {
-            this.expand = e;
-          }}
-        >
-          <div style={expandStyle} />
-        </div>
-        <div
-          style={parentStyle}
-          onScroll={this.handleScroll}
-          ref={e => {
-            this.shrink = e;
-          }}
-        >
-          <div style={shrinkChildStyle} />
-        </div>
+        {this.props.children}
       </div>
     );
   }
+
 }
 
+Resize.defaultProps = {
+  frequency: 500
+};
+
 Resize.propTypes = {
-  handleWidth: PropTypes.bool,
-  handleHeight: PropTypes.bool,
+  frequency: PropTypes.number,
   onResize: PropTypes.func
 };
 
-Resize.defaultProps = {
-  handleWidth: true,
-  handleHeight: true,
-  onResize: e => e
-};
-
 export default Resize;