@yandex/ui/esm/Text/Text.js

Yandex UI components

import { __assign, __extends, __rest } from "tslib";
import React, { PureComponent } from 'react';
import { cn } from '@bem-react/classname';
import { canUseDOM } from '../lib/canUseDOM';
import './Text.css';
export var cnText = cn('Text');
/**
 * Базовый примитив представления текстовых данных.
 * @param { TextProps }  props
 */
var Text = /** @class */ (function (_super) {
    __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()) {
            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 = __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.createElement(ElementType, __assign({ ref: this.setTextElement.bind(this), style: style, className: cnText({
                color: color,
                align: align,
                overflow: overflow,
            }, [className]) }, otherProps)));
    };
    Text.displayName = cnText();
    return Text;
}(PureComponent));
export { Text };