Repository URL to install this package:
|
Version:
2.7.3 ▾
|
@skava/ui
/
dist
/
components
/
atoms
/
Placeholder
/
ParagraphPlaceholder
/
ParagraphPlaceholder.js
|
|---|
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const Vector_1 = tslib_1.__importDefault(require("../../Vector"));
const TextPlaceholder_1 = tslib_1.__importDefault(require("../TextPlaceholder"));
const deps_1 = require("../deps");
class ParagraphPlaceholder extends react_1.default.PureComponent {
constructor() {
super(...arguments);
this.getRowStyle = i => {
let {
rows,
widthList,
height,
itemHeight,
lineSpacing
} = this.props;
itemHeight = deps_1.stripMeasurement(itemHeight);
lineSpacing = deps_1.stripMeasurement(lineSpacing);
const lineYPosition = i * (itemHeight + lineSpacing);
return {
// maxHeight: `${100 / (rows * 2 - 1)}%`,
width: `${widthList[(i + widthList.length) % widthList.length]}%`,
height: itemHeight,
transform: `translate(0, ${lineYPosition}px)`
};
};
this.getRows = () => {
const {
rows,
lineSpacing
} = this.props;
const range = Array.apply(undefined, Array(rows));
return range.map((_, i) => react_1.default.createElement(TextPlaceholder_1.default, {
nowrap: true,
style: this.getRowStyle(i),
lineSpacing: i !== 0 ? lineSpacing : 0,
key: i
}));
};
}
render() {
let _a = this.props,
{
fill,
widthList,
rows,
height,
itemHeight,
lineSpacing
} = _a,
remainingProps = tslib_1.__rest(_a, ["fill", "widthList", "rows", "height", "itemHeight", "lineSpacing"]); // @note this
itemHeight = deps_1.stripMeasurement(itemHeight);
lineSpacing = deps_1.stripMeasurement(lineSpacing);
height = deps_1.stripMeasurement(height); // providing priority only to the rows
let itemLength = rows ? rows : widthList.length;
height = itemLength * (itemHeight + lineSpacing);
const viewBox = `0 0 100% ${height}`;
const attributes = Object.assign({
viewBox,
height
}, remainingProps);
return react_1.default.createElement(Vector_1.default, Object.assign({}, attributes), this.getRows());
}
}
ParagraphPlaceholder.defaultProps = {
widthList: [97, 100, 94, 90, 98, 95, 98, 40],
rows: 8,
width: '100%',
height: '100%',
itemHeight: 24,
lineSpacing: 10,
isDynamicViewBox: true
};
exports.ParagraphPlaceholder = ParagraphPlaceholder;
exports.default = ParagraphPlaceholder; //# sourceMappingURL=ParagraphPlaceholder.js.map