Skeleton.propTypes= {
avatar: PropTypes.oneOfType([PropTypes.bool, PropTypes.Object]), // 是否显示头像占位图title: PropTypes.bool, // 是否显示标题占位图paragraph: PropTypes.oneOfType([PropTypes.bool, PropTypes.Object]), // 是否显示段落占位图show: PropTypes.bool, // 是否显示骨架屏，传 false 时会展示子组件内容active: PropTypes.bool, // 是否开启动画round: PropTypes.bool, // 是否将标题和段落显示为圆角风格};
Skeleton.defaultProps= {
avatar: false,
title: true,
paragraph: true,
show: true,
active: false,
round: false,
};

/** @name class前缀 */constprefixCls='fly-skeleton';
/** @name 根元素class */constrootCls=classnames(prefixCls, className, {
[`${prefixCls}--round`]: round,
[`${prefixCls}--active`]: active,
});
/** @name 内容class */constcontentCls=classnames(`${prefixCls}--content`);
return (
<>    {show? (
<divclassName={rootCls}>        {avatarContent()}
<divclassName={contentCls}>          {titleContent()}
          {paragraphContent()}
</div></div>    ) : (
children    )}
</>);

/** @name 是否展示头像 */consthasAvatar=!!avatar;
/** @name 尺寸枚举 */constsizgClsObj= {
large: 'lg',
small: 'sm',
default: null,
};
/** * 获取对象属性值 * @param {void} 无 * @return {render} 展示内容 */constgetTypeOfObject=prop=> {
if (prop&&typeofprop==='object') {
returnprop;
  }
return {};
};
/** * 头像展示 * @param {void} 无 * @return {render} 展示内容 */constavatarContent= () => {
if (hasAvatar) {
/** @name 头像对象数据 */letavatarObj= {
active: false,
shape: 'circle',
size: 'default',
...getTypeOfObject(avatar),
    };
/** @name 头像父容器class */constheadCls=classnames(`${prefixCls}__header`);
/** @name 头像class */constavatarCls=`${prefixCls}__avatar`;
/** @name 尺寸class */constsizeCls=sizgClsObj[avatarObj.size] &&classnames(`${avatarCls}--${sizgClsObj[avatarObj.size]}`);
/** @name 形状class */constshapeCls=classnames(`${avatarCls}--${avatarObj.shape}`);
/** @name 尺寸内联样式 */constsizeStyle=typeofavatarObj.size==='number'? {
width: avatarObj.size,
height: avatarObj.size,
lineHeight: `${avatarObj.size}px`,
          }
        : {};
return (
<divclassName={headCls}><spanclassName={classnames(avatarCls, sizeCls, shapeCls, className)} style={{ ...sizeStyle }} /></div>    );
  }
};

/** @name 是否展示标题 */consthasTitle=!!title;
/** * 获取对象属性值 * @param {void} 无 * @return {render} 展示内容 */constgetTypeOfObject=prop=> {
if (prop&&typeofprop==='object') {
returnprop;
  }
return {};
};
/** * 标题展示 * @param {void} 无 * @return {render} 展示内容 */consttitleContent= () => {
if (hasTitle) {
/** @name 标题class */consttitleCls=classnames(`${prefixCls}__title`);
/** @name 标题style */consttitleStyle= {
width: !hasAvatar?'35%' : '50%',
...getTypeOfObject(title),
    };
return<h3className={titleCls} style={titleStyle} />;
  }
};

/** @name 是否展示段落 */consthasParagraph=!!paragraph;
/** * 获取对象属性值 * @param {void} 无 * @return {render} 展示内容 */constgetTypeOfObject=prop=> {
if (prop&&typeofprop==='object') {
returnprop;
  }
return {};
};
/** * 段落-获取段落宽度 * @param {number} index 段落的索引 * @param {object} obj 段落的数据对象 * @return {number} 计算之后的宽度 */constgetParagraphWidth= (index, obj) => {
const { width, rows=2 } =obj;
// =>true: 如果width的值是数组时，设置每行对应宽度if (Array.isArray(width)) {
returnwidth[index];
  }
// =>true: 如果width的值不是数组时，设置为最后一行的宽度if (rows-1===index) {
returnwidth;
  }
returnundefined;
};
/** * 段落展示 * @param {void} 无 * @return {render} 展示内容 */constparagraphContent= () => {
if (hasParagraph) {
/** @name 段落class */constparagraphCls=classnames(`${prefixCls}__paragraph`);
letparagraphObj= {};
// =>true: 有标题但是没有头像，默认3行，其他是2行if (!hasAvatar&&hasTitle) {
paragraphObj.rows=3;
    } else {
paragraphObj.rows=2;
    }
// => true: 没有标题或者没有头像，最后一个段落的宽度是61%if (!hasAvatar||!hasTitle) {
paragraphObj.width='61%';
    }
// =>true: paragraph传参有值时，对默认值进行覆盖paragraphObj= {
...paragraphObj,
...getTypeOfObject(paragraph),
    };
/** @name 段落的行数组 */constrowList= [...Array(paragraphObj.rows)].map((_, index) =><likey={index} style={{ width: getParagraphWidth(index, paragraphObj) }} />);return<ulclassName={paragraphCls}>{rowList}</ul>;  }
};