/**
 * @file Skeleton.tsx
 * @author lihuanji
 *
 * react 骨架渲染 占位图
 */
import React from 'react';
var styles = require('./style.module.styl');
import rem from '@doctorwork/write-easy/utils/rem';
var Skeleton = function (props) {
    var borderRadius = props.borderRadius, color = props.color, width = props.width, height = props.height, _a = props.count, count = _a === void 0 ? 0 : _a, _b = props.widthRandomness, widthRandomness = _b === void 0 ? 0 : _b, _c = props.heightRandomness, heightRandomness = _c === void 0 ? 0 : _c;
    var elements = [];
    for (var i = 0; i < count; i++) {
        var setWidth = '100%';
        var setHeight = '100%';
        if (width) {
            setWidth = rem(width - Math.random() * width * widthRandomness);
        }
        if (height) {
            setHeight = rem(height - Math.random() * height * heightRandomness);
        }
        elements.push(<span className={styles.Skeleton + " " + (props.animated ? styles.animated : '')} key={i} style={{
            width: setWidth,
            height: setHeight,
            borderRadius: borderRadius,
            backgroundColor: color
        }}>
                &zwnj;
            </span>);
        if (i !== count - 1) {
            elements.push(<br />);
        }
    }
    return <React.Fragment>{elements}</React.Fragment>;
};
Skeleton.defaultProps = {
    widthRandomness: 0,
    heightRandomness: 0,
    borderRadius: '8PX',
    color: '#EFF1F6',
    count: 1,
    animated: true
};
export default Skeleton;