react-resize-reporter/object.js

Lightweight React Component that reports width and height changes when its parent resizes.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResizeReporter = void 0;
const react_1 = __importStar(require("react"));
const check_parent_1 = require("./check-parent");
const containerStyles = {
    overflow: 'hidden',
    position: 'absolute',
    zIndex: -1000,
    top: '0',
    right: '0',
    width: '100%',
    height: '100%',
    opacity: 0,
    pointerEvents: 'none'
};
/**
 * HTML <object> version of the resize reporter
 */
class ResizeReporter extends react_1.PureComponent {
    constructor() {
        super(...arguments);
        this.lastWidth = -1;
        this.lastHeight = -1;
        this.onLoad = (e) => {
            if (process.env.NODE_ENV !== 'production') {
                check_parent_1.checkParent(e.currentTarget.parentElement);
            }
            // clean up if there is a previous element
            this.cleanUp();
            this.$container = e.currentTarget;
            const win = e.currentTarget.contentDocument &&
                e.currentTarget.contentDocument.defaultView;
            if (win) {
                win.addEventListener('resize', this.onResize);
            }
            if (this.props.reportInit) {
                this.checkSize();
            }
            else {
                const rect = e.currentTarget.getBoundingClientRect();
                this.lastWidth = rect.width;
                this.lastHeight = rect.height;
            }
        };
        this.checkSize = () => {
            if (this.$container) {
                const newRect = this.$container.getBoundingClientRect();
                const { width: newWidth, height: newHeight } = newRect;
                if (this.props.onSizeChanged) {
                    if (newWidth !== this.lastWidth || newHeight !== this.lastHeight) {
                        this.props.onSizeChanged(newWidth, newHeight, newRect);
                    }
                }
                if (this.props.onWidthChanged && newWidth !== this.lastWidth) {
                    this.props.onWidthChanged(newWidth, newRect);
                }
                if (this.props.onHeightChanged && newHeight !== this.lastHeight) {
                    this.props.onHeightChanged(newHeight, newRect);
                }
                this.lastWidth = newWidth;
                this.lastHeight = newHeight;
            }
        };
        this.onResize = () => {
            if (this._debounceTicket) {
                window.clearTimeout(this._debounceTicket);
                this._debounceTicket = null;
            }
            if (this.props.debounce) {
                this._debounceTicket = window.setTimeout(this.checkSize, this.props.debounce);
            }
            else {
                this.checkSize();
            }
        };
        this.cleanUp = () => {
            if (this._debounceTicket) {
                window.clearTimeout(this._debounceTicket);
                this._debounceTicket = null;
            }
            const win = this.$container &&
                this.$container.contentDocument &&
                this.$container.contentDocument.defaultView;
            if (win) {
                win.removeEventListener('resize', this.onResize);
            }
        };
    }
    componentWillUnmount() {
        this.cleanUp();
    }
    render() {
        const { reportInit, debounce, onSizeChanged, onWidthChanged, onHeightChanged, children, ...restProps } = this.props;
        return (react_1.default.createElement("object", Object.assign({ "aria-hidden": true, "aria-label": "react-resize-reporter", tabIndex: -1 }, restProps, { style: containerStyles, onLoad: this.onLoad, type: "text/html", data: "about:blank" })));
    }
}
exports.ResizeReporter = ResizeReporter;
exports.default = ResizeReporter;
//# sourceMappingURL=object.js.map