@yandex/ui/Text/Text.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Text = exports.cnText = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var canUseDOM_1 = require("../lib/canUseDOM");
require("./Text.css");
exports.cnText = classname_1.cn('Text');
/**
 * Базовый примитив представления текстовых данных.
 * @param { TextProps }  props
 */
var Text = /** @class */ (function (_super) {
    tslib_1.__extends(Text, _super);
    function Text() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.textElement = null;
        return _this;
    }
    Text.getLineHeight = function (textElement) {
        return parseFloat(getComputedStyle(textElement).lineHeight);
    };
    Text.isFade = function (overflow) {
        return overflow === 'fade' || overflow === 'fade-horizontal';
    };
    Text.isEllipsis = function (overflow) {
        return overflow === 'ellipsis';
    };
    Text.prototype.componentDidMount = function () {
        this.updateText();
    };
    Text.prototype.componentWillUnmount = function () {
        this.textElement = null;
    };
    Text.prototype.componentDidUpdate = function (prevProps) {
        if (prevProps.typography !== this.props.typography) {
            this.updateText();
        }
    };
    Text.prototype.updateText = function () {
        var textElement = this.textElement;
        var overflow = this.props.overflow;
        if (textElement && overflow && Text.isFade(overflow) && canUseDOM_1.canUseDOM()) {
            this.forceUpdate();
        }
    };
    Text.prototype.getLineHeight = function () {
        if (this.textElement) {
            var lineHeightValue = Text.getLineHeight(this.textElement);
            if (!isNaN(lineHeightValue)) {
                return lineHeightValue;
            }
        }
    };
    Text.prototype.setTextElement = function (el) {
        this.textElement = el;
    };
    Text.prototype.render = function () {
        var _a = this.props, _b = _a.as, ElementType = _b === void 0 ? 'span' : _b, className = _a.className, align = _a.align, overflow = _a.overflow, _c = _a.maxLines, maxLines = _c === void 0 ? 1 : _c, _d = _a.style, style = _d === void 0 ? {} : _d, color = _a.color, typography = _a.typography, otherProps = tslib_1.__rest(_a, ["as", "className", "align", "overflow", "maxLines", "style", "color", "typography"]);
        if (overflow) {
            if (Text.isEllipsis(overflow)) {
                style.WebkitLineClamp = maxLines;
            }
            else if (Text.isFade(overflow)) {
                style.whiteSpace = maxLines === 1 ? 'nowrap' : undefined;
                if (maxLines > 1) {
                    var lineHeight = this.getLineHeight();
                    if (typeof lineHeight === 'number') {
                        style.maxHeight = maxLines * lineHeight + "px";
                    }
                }
            }
        }
        return (react_1.default.createElement(ElementType, tslib_1.__assign({ ref: this.setTextElement.bind(this), style: style, className: exports.cnText({
                color: color,
                align: align,
                overflow: overflow,
            }, [className]) }, otherProps)));
    };
    Text.displayName = exports.cnText();
    return Text;
}(react_1.PureComponent));
exports.Text = Text;