react-container-query · natevoci · Mar 8, 2018 · d6u · Mar 14, 2018 · natevoci
diff --git a/src/ContainerQueryCore.ts b/src/ContainerQueryCore.ts
@@ -1,4 +1,4 @@
-import ResizeObserverLite from 'resize-observer-lite';
+import ResizeObserverLite, {ResizeObserverSize} from 'resize-observer-lite';
 import matchQueries from 'container-query-toolkit/lib/matchQueries';
 import {Params, Query} from './interfaces';
 import isShallowEqual from './isShallowEqual';
@@ -7,21 +7,39 @@ export default class ContainerQueryCore {
  private rol: ResizeObserverLite;
  private result: Params = {};

-  constructor(query: Query, callback: (params: Params) => void) {
+  constructor(private query: Query, private callback: (params: Params) => void) {
    this.rol = new ResizeObserverLite((size) => {
-      const result = matchQueries(query)(size);
-      if (!isShallowEqual(this.result, result)) {
-        callback(result);
-        this.result = result;
-      }
+      this._processSize(size);
    });
  }

  observe(element: Element) {
-    this.rol.observe(element);
+    // Check its an Element node. It could be null, or a Text node if the props.children function returns a string
+    if (element instanceof Element) {
+      const styles = window.getComputedStyle(element);
+      this._processSize({
+        width: this._getNumber(styles.width),
+        height: this._getNumber(styles.height),
+      });
+
+      this.rol.observe(element);
+    }
  }

  disconnect() {
    this.rol.disconnect();
  }
+
+  private _processSize(size: ResizeObserverSize) {
+    const result = matchQueries(this.query)(size);
+    if (!isShallowEqual(this.result, result)) {
+      this.callback(result);
+      this.result = result;
+    }
+  }
+
+  private _getNumber(str: string | null) {
+    const m = str ? /^([0-9\.]+)px$/.exec(str) : null;
+    return m ? parseFloat(m[1]) : 0;
+  }
 }
diff --git a/test/client/index.js b/test/client/index.js
@@ -179,6 +179,44 @@ describe('ContainerQuery', function () {
    }, 100);
  });

+  it('sets params when mounted after resize events', function (done) {
+    class TestApp extends Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          renderChild: false
+        };
+      }
+
+      componentDidMount() {
+        setTimeout(() => {
+          this.setState({
+            renderChild: true
+          });
+        }, 200);
+      }
+
+      render() {
+        return (
+          <div style={{width: '200px'}}>
+            {this.state.renderChild && (
+              <ContainerQuery query={query}>
+                {(params) => <p>{JSON.stringify(params)}</p>}
+              </ContainerQuery>
+            )}
+          </div>
+        );
+      }
+    }
+
+    const node = findDOMNode(render(<div><TestApp/></div>, $div));
+
+    setTimeout(() => {
+      expect(node.children[0].innerHTML).toBe('<p>{"mobile":true,"desktop":false}</p>');
+      done();
+    }, 200);
+  });
+
 });

 describe('applyContainerQuery', function () {