zent
Version:
一套前端设计语言和基于React的实现
37 lines (36 loc) • 1.76 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { PureComponent } from 'react';
import cx from 'classnames';
import sample from '../../utils/sample';
import { DEFAULT_SEGMENTS } from './consts';
var TextRowDashed = (function (_super) {
__extends(TextRowDashed, _super);
function TextRowDashed(props) {
var _this = _super.call(this, props) || this;
_this.state = {
segments: sample(DEFAULT_SEGMENTS),
};
return _this;
}
TextRowDashed.prototype.render = function () {
var _a = this.props, className = _a.className, lineSpacing = _a.lineSpacing, animate = _a.animate, segments = _a.segments, style = _a.style;
var defaultStyles = {
marginTop: lineSpacing,
};
var classes = cx('zent-placeholder-text-row-dashed', className);
var segmengtClasses = cx('zent-placeholder-shape', {
'zent-placeholder-shape--animate': animate,
});
var rawSegments = Array.isArray(segments)
? segments
: this.state.segments;
return (_jsx("div", __assign({ className: classes, style: __assign(__assign({}, defaultStyles), style), "data-zv": '10.0.17' }, { children: rawSegments.map(function (seg, i) { return (_jsx("div", __assign({ className: "zent-placeholder-text-row-dashed-segment", style: { width: seg + "%", paddingLeft: i === 0 ? 0 : '0.3em' }, "data-zv": '10.0.17' }, { children: _jsx("div", { className: segmengtClasses, "data-zv": '10.0.17' }, void 0) }), i)); }) }), void 0));
};
TextRowDashed.defaultProps = {
lineSpacing: '0.7em',
animate: true,
};
return TextRowDashed;
}(PureComponent));
export default TextRowDashed;