react-container-query/lib/index.js

Container Query for React Component

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var omit = require('lodash/omit');
var isEqual = require('lodash/isEqual');
var resize_observer_lite_1 = require('resize-observer-lite');
var matchQueries_1 = require('container-query-toolkit/lib/matchQueries');
var classnames = require('classnames');
/**
 * <ContainerQuery tagName='div' query={query}>
 *   {(params) => {
 *     <div className={classname(params.class)}></div>
 *   }}
 * </ContainerQuery>
 */
var ContainerQuery = (function (_super) {
    __extends(ContainerQuery, _super);
    function ContainerQuery(props) {
        _super.call(this, props);
        this.rol = null;
        this.state = {
            params: {}
        };
    }
    ContainerQuery.prototype.componentDidMount = function () {
        var _this = this;
        this.rol = new resize_observer_lite_1.default(function (size) {
            var params = matchQueries_1.default(_this.props.query)(size);
            if (!isEqual(_this.state.params, params)) {
                _this.setState({ params: params });
            }
        });
        this.rol.observe(this.refs.container);
    };
    ContainerQuery.prototype.render = function () {
        var children = null;
        if (this.props.children) {
            if (typeof this.props.children === 'function') {
                children = this.props.children(this.state.params);
            }
            else {
                children = this.props.children;
            }
        }
        var props = omit(this.props, ['children', 'tagName', 'query']);
        props.ref = 'container';
        props.className = classnames(this.props.className, this.state.params);
        if (children) {
            if (Array.isArray(children)) {
                return React.createElement.apply(React, [this.props.tagName || 'div', props].concat(children));
            }
            else {
                return React.createElement(this.props.tagName || 'div', props, children);
            }
        }
        else {
            return React.createElement(this.props.tagName || 'div', props);
        }
    };
    ContainerQuery.prototype.componentWillUnmount = function () {
        this.rol.disconnect();
        this.rol = null;
    };
    return ContainerQuery;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ContainerQuery;
//# sourceMappingURL=index.js.map