@platform/react/lib/measure/MeasureSize.js

React refs and helpers.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MeasureSize = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ReactDOM = tslib_1.__importStar(require("react-dom"));
var css_1 = require("@platform/css");
var HIDDEN = {
    position: 'absolute',
    left: -999999,
    top: -999999,
};
var Measurer = (function () {
    function Measurer(props) {
        var _this = this;
        this.props = props;
        this.div = document.createElement('DIV');
        document.body.appendChild(this.div);
        var ref = function (el) { return (_this.component = el); };
        ReactDOM.render(React.createElement(MeasureSize, tslib_1.__assign({ ref: ref }, props, { style: HIDDEN })), this.div);
    }
    Measurer.measure = function (props) {
        var instance = new Measurer(props);
        var size = instance.size;
        instance.dispose();
        return size;
    };
    Measurer.prototype.dispose = function () {
        if (!this.isDisposed) {
            ReactDOM.unmountComponentAtNode(this.div);
            document.body.removeChild(this.div);
        }
    };
    Object.defineProperty(Measurer.prototype, "isDisposed", {
        get: function () {
            return !this.component;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Measurer.prototype, "width", {
        get: function () {
            return this.component ? this.component.width : -1;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Measurer.prototype, "height", {
        get: function () {
            return this.component ? this.component.height : -1;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Measurer.prototype, "size", {
        get: function () {
            var width = this.width;
            var height = this.height;
            return { width: width, height: height };
        },
        enumerable: false,
        configurable: true
    });
    Measurer.create = function (props) {
        return {
            props: props,
            size: function (content) { return Measurer.measure(tslib_1.__assign(tslib_1.__assign({}, props), { content: content })); },
        };
    };
    return Measurer;
}());
var MeasureSize = (function (_super) {
    tslib_1.__extends(MeasureSize, _super);
    function MeasureSize() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MeasureSize.measure = function (props) {
        return Measurer.measure(props);
    };
    MeasureSize.prototype.componentDidMount = function () {
        var el = ReactDOM.findDOMNode(this);
        this.el = el.firstChild;
    };
    Object.defineProperty(MeasureSize.prototype, "width", {
        get: function () {
            return this.el ? this.el.offsetWidth : -1;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MeasureSize.prototype, "height", {
        get: function () {
            return this.el ? this.el.offsetHeight : -1;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MeasureSize.prototype, "size", {
        get: function () {
            var width = this.width;
            var height = this.height;
            return { width: width, height: height };
        },
        enumerable: false,
        configurable: true
    });
    MeasureSize.prototype.render = function () {
        var _a = this.props, content = _a.content, fontFamily = _a.fontFamily, fontSize = _a.fontSize, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, width = _a.width;
        var styles = {
            text: (0, css_1.css)({
                display: 'inline-block',
                fontFamily: fontFamily,
                fontSize: fontSize,
                fontWeight: fontWeight,
                fontStyle: fontStyle,
                lineHeight: lineHeight,
                letterSpacing: letterSpacing,
                width: width,
            }),
        };
        return (React.createElement("div", tslib_1.__assign({ className: 'platform.MeasureText' }, (0, css_1.css)(this.props.style)),
            React.createElement("div", tslib_1.__assign({}, styles.text), content)));
    };
    MeasureSize.create = function (props) {
        return Measurer.create(props);
    };
    return MeasureSize;
}(React.PureComponent));
exports.MeasureSize = MeasureSize;