react-container-query/lib/ContainerQueryCore.js

Container Query for React Component

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var resize_observer_lite_1 = require("resize-observer-lite");
var matchQueries_1 = require("container-query-toolkit/lib/matchQueries");
var isShallowEqual_1 = require("./isShallowEqual");
var ContainerQueryCore = /** @class */ (function () {
    function ContainerQueryCore(query, callback) {
        var _this = this;
        this.result = {};
        this.animationFrameRequestId = null;
        this.rol = new resize_observer_lite_1.default(function (size) {
            _this.animationFrameRequestId = window.requestAnimationFrame(function () {
                var result = matchQueries_1.default(query)(size);
                if (!isShallowEqual_1.default(_this.result, result)) {
                    callback(result);
                    _this.result = result;
                }
            });
        });
    }
    ContainerQueryCore.prototype.observe = function (element) {
        this.rol.observe(element);
    };
    ContainerQueryCore.prototype.disconnect = function () {
        if (this.animationFrameRequestId) {
            window.cancelAnimationFrame(this.animationFrameRequestId);
        }
        this.rol.disconnect();
    };
    return ContainerQueryCore;
}());
exports.default = ContainerQueryCore;
//# sourceMappingURL=ContainerQueryCore.js.map