mui-extended/dist/ResizableBox.js

Extended UI Components built on Material UI

import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Box } from "@mui/material";
import { Component, createRef } from "react";
var ResizableBox = /** @class */ (function (_super) {
    __extends(ResizableBox, _super);
    function ResizableBox(props) {
        var _this = _super.call(this, props) || this;
        _this.privateRef = createRef();
        _this.resizeJob = _this.resizeJob.bind(_this);
        _this.resizeAction = _this.resizeAction.bind(_this);
        return _this;
    }
    ResizableBox.prototype.resizeAction = function () {
        this.jobId = undefined;
        this.props.onResize(this.width, this.height);
    };
    ResizableBox.prototype.resizeJob = function (width, height) {
        if (this.jobId !== undefined) {
            clearTimeout(this.jobId);
        }
        this.width = width;
        this.height = height;
        this.jobId = setTimeout(this.resizeAction, 100);
    };
    ResizableBox.prototype.componentDidMount = function () {
        var _this = this;
        var ref = this.props.boxRef || this.privateRef;
        if (ref.current) {
            this.resizeObserver = new ResizeObserver(function (entries) {
                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                    var entry = entries_1[_i];
                    _this.resizeJob(entry.contentRect.width, entry.contentRect.height);
                }
            });
            this.resizeObserver.observe(ref.current);
        }
    };
    ResizableBox.prototype.componentWillUnmount = function () {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    };
    ResizableBox.prototype.render = function () {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        var _a = this.props, onResize = _a.onResize, children = _a.children, boxProps = __rest(_a, ["onResize", "children"]);
        return (_jsx(Box, __assign({}, boxProps, { ref: this.props.boxRef || this.privateRef, children: children })));
    };
    return ResizableBox;
}(Component));
export { ResizableBox };