diff --git a/src/ContainerQueryCore.ts b/src/ContainerQueryCore.ts index 4a3b24f..8c31699 100644 --- 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 index 43b7bef..733a401 100644 --- 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 ( +
+ {this.state.renderChild && ( + + {(params) =>

{JSON.stringify(params)}

} +
+ )} +
+ ); + } + } + + const node = findDOMNode(render(
, $div)); + + setTimeout(() => { + expect(node.children[0].innerHTML).toBe('

{"mobile":true,"desktop":false}

'); + done(); + }, 200); + }); + }); describe('applyContainerQuery', function () {