import React from 'react';
import ReactDOM from 'react-dom';
import { props, t } from '../utils';
import _ElementQueries from 'css-element-queries/src/ElementQueries';
import _ResizeSensor from 'css-element-queries/src/ResizeSensor';

@props({
  children: t.ReactChildren,
  onResize: t.Function
})
export default class ResizeSensor extends React.Component {

  attachResizeSensor = () => {
    const element = ReactDOM.findDOMNode(this);
    if (!element.resizedAttached) {
      this.resizeSensor = new _ResizeSensor(element, this.onResize);
    }
  }

  componentDidMount() {
    _ElementQueries.listen();
    this.attachResizeSensor();
  }

  componentDidUpdate() {
    this.attachResizeSensor();
  }

  onResize = () => this.props.onResize()

  render() {
    return this.props.children;
  }

  shouldComponentUpdate(nextProps) {
    /*
      we don't need to update if `onResize` has changed
      as we're using the constant `this.onResize` callback
    */
    return nextProps.children !== this.props.children;
  }
}

@@ -95,78 +95,8 @@
 s';%0A
-import _ElementQueries from 'css-element-queries/src/ElementQueries';%0A
 impo
@@ -484,35 +484,108 @@
 %0A%0A  
-componentDidMount() %7B%0A    _
+initElementQueries = () =%3E %7B%0A    if (!this.elementQueries) %7B%0A      require('css-element-queries/src/
 Elem
@@ -594,16 +594,18 @@
 tQueries
+')
 .listen(
@@ -611,39 +611,265 @@
 ();%0A    
-this.attachResizeSensor
+  this.elementQueries = true;%0A    %7D%0A  %7D%0A%0A  updateSensorAndQueries = () =%3E %7B%0A    if (typeof window !== 'undefined') %7B%0A      this.initElementQueries();%0A      this.attachResizeSensor();%0A    %7D%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.updateSensorAndQueries
 ();%0A  %7D%0A
@@ -903,34 +903,38 @@
    this.
-attachResizeSensor
+updateSensorAndQueries
 ();%0A  %7D%0A

make ResizeSensor universal compatible