zent/es/placeholder/presets/TextBlock.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { PureComponent } from 'react';
import cx from 'classnames';
import TextRow from '../shapes/TextRow';
import TextRowDashed from '../shapes/TextRowDashed';
import { DEFAULT_SEGMENTS } from '../shapes/consts';
var TextBlock = (function (_super) {
    __extends(TextBlock, _super);
    function TextBlock() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.getRowStyle = function (i) {
            var widths = _this.props.widths;
            return {
                width: widths[i % widths.length] + "%",
            };
        };
        _this.getRows = function () {
            var _a = _this.props, rows = _a.rows, lineSpacing = _a.lineSpacing, animate = _a.animate, dashed = _a.dashed, dashSegments = _a.dashSegments;
            var textRows = [];
            for (var i = 0; i < rows; i++) {
                var Comp = dashed ? TextRowDashed : TextRow;
                var props = {
                    style: _this.getRowStyle(i),
                    lineSpacing: i ? lineSpacing : 0,
                    animate: animate,
                };
                if (dashed) {
                    props.segments = dashSegments[i % dashSegments.length];
                }
                textRows.push(_jsx(Comp, __assign({}, props), i));
            }
            return textRows;
        };
        return _this;
    }
    TextBlock.prototype.render = function () {
        var _a = this.props, style = _a.style, className = _a.className;
        var classes = cx('zent-placeholder-text-block', className);
        return (_jsx("div", __assign({ className: classes, style: __assign(__assign({}, style), { width: '100%' }), "data-zv": '10.0.18' }, { children: this.getRows() }), void 0));
    };
    TextBlock.defaultProps = {
        widths: [97, 99, 94, 92, 96, 95, 98, 60],
        dashSegments: DEFAULT_SEGMENTS,
        animate: true,
        dashed: true,
        lineSpacing: '0.7em',
    };
    return TextBlock;
}(PureComponent));
export default TextBlock;