Ant-Design源码分析——Skeleton（二）

2021SC@SDUSC

paragraph部分

接口部分，定义了一些变量

export interface SkeletonParagraphProps {// 前缀prefixCls?: string;// 类名className?: string;// 样式style?: React.CSSProperties;// 宽度width?: widthUnit | Array<widthUnit>;// 列数rows?: number;
}

const Paragraph = (props: SkeletonParagraphProps) => {// 一个返回宽度的函数，输入第几列，返回该列宽度const getWidth = (index: number) => {const { width, rows = 2 } = props;if (Array.isArray(width)) {return width[index];}// last paragraphif (rows - 1 === index) {return width;}return undefined;};const { prefixCls, className, style, rows } = props;const rowList = [...Array(rows)].map((_, index) => (// eslint-disable-next-line react/no-array-index-key<li key={index} style={{ width: getWidth(index) }} />));// 返回组件return (<ul className={classNames(prefixCls, className)} style={style}>{rowList}</ul>);
};

 Skeleton部分

接口信息

export interface SkeletonProps {// 是否演示动画active?: boolean;// 是否直接展示组件loading?: boolean;// 前缀prefixCls?: string;// 类名className?: string;// 子类对象children?: React.ReactNode;// 头像avatar?: SkeletonAvatarProps | boolean;// 标题title?: SkeletonTitleProps | boolean;// 段落paragraph?: SkeletonParagraphProps | boolean;// 组件是否为圆角round?: boolean;
}

用户获取组件的函数

function getComponentProps<T>(prop: T | boolean | undefined): T | {} {if (prop && typeof prop === 'object') {return prop;}return {};
}

获取头像的基本信息

function getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): SkeletonAvatarProps {// 若有标题且无段落内容，则返回大尺寸方形，否则小尺寸圆形if (hasTitle && !hasParagraph) {// Square avatarreturn { size: 'large', shape: 'square' };}return { size: 'large', shape: 'circle' };
}

获取标题的基本信息

function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): SkeletonTitleProps {// 若无有头像和段落内容，返回30%if (!hasAvatar && hasParagraph) {return { width: '38%' };}// 若有头像和段落内容，返回50%if (hasAvatar && hasParagraph) {return { width: '50%' };}return {};
}

获取段落的基本信息

function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): SkeletonParagraphProps {const basicProps: SkeletonParagraphProps = {};// Widthif (!hasAvatar || !hasTitle) {basicProps.width = '61%';}// Rowsif (!hasAvatar && hasTitle) {basicProps.rows = 3;} else {basicProps.rows = 2;}return basicProps;
}

const Skeleton = (props: SkeletonProps) => {const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => {const {prefixCls: customizePrefixCls,loading,className,children,avatar,title,paragraph,active,round,} = props;const prefixCls = getPrefixCls('skeleton', customizePrefixCls);if (loading || !('loading' in props)) {// 均强制转化为Boolean类型const hasAvatar = !!avatar;const hasTitle = !!title;const hasParagraph = !!paragraph;// Avatarlet avatarNode;// 存在头像则根据其基本信息返回头像组件if (hasAvatar) {const avatarProps: SkeletonAvatarProps = {prefixCls: `${prefixCls}-avatar`,...getAvatarBasicProps(hasTitle, hasParagraph),...getComponentProps(avatar),};// We direct use SkeletonElement as avatar in skeleton internal.avatarNode = (<div className={`${prefixCls}-header`}><Element {...avatarProps} /></div>);}let contentNode;if (hasTitle || hasParagraph) {// Titlelet $title;// 存在标题则根据其基本信息返回头像组件if (hasTitle) {const titleProps: SkeletonTitleProps = {prefixCls: `${prefixCls}-title`,...getTitleBasicProps(hasAvatar, hasParagraph),...getComponentProps(title),};$title = <Title {...titleProps} />;}// Paragraphlet paragraphNode;// 存在段落则根据其基本信息返回头像组件if (hasParagraph) {const paragraphProps: SkeletonParagraphProps = {prefixCls: `${prefixCls}-paragraph`,...getParagraphBasicProps(hasAvatar, hasTitle),...getComponentProps(paragraph),};paragraphNode = <Paragraph {...paragraphProps} />;}contentNode = (<div className={`${prefixCls}-content`}>{$title}{paragraphNode}</div>);}const cls = classNames(prefixCls,{[`${prefixCls}-with-avatar`]: hasAvatar,[`${prefixCls}-active`]: active,[`${prefixCls}-rtl`]: direction === 'rtl',[`${prefixCls}-round`]: round,},className,);return (<div className={cls}>{avatarNode}{contentNode}</div>);}return children;};return <ConfigConsumer>{renderSkeleton}</ConfigConsumer>;
};

Ant-Design源码分析——Skeleton（二）相关推荐

Ant Design源码分析（三）：Wave组件
Wave组件效果预览在上一篇文章Button组件的源码分析中遇到了一个Wave组件, Wave组件在Ant design中提供了通用的表单控件点击效果,在自己阅读源码之前,也并没有过更多留心过在这些 ...
Hhadoop-2.7.0中HDFS写文件源码分析（二）：客户端实现（1）
一.综述 HDFS写文件是整个Hadoop中最为复杂的流程之一,它涉及到HDFS中NameNode.DataNode.DFSClient等众多角色的分工与合作. 首先上一段代码,客户端是如何写文件的: ...
Spring Cloud源码分析（二）Ribbon（续）
因文章长度限制,故分为两篇.上一篇:<Spring Cloud源码分析(二)Ribbon> 负载均衡策略通过上一篇对Ribbon的源码解读,我们已经对Ribbon实现的负载均衡器以及其中 ...
Koa源码分析（二） -- co的实现
Abstract 本系列是关于Koa框架的文章,目前关注版本是Koa v1.主要分为以下几个方面: Koa源码分析(一) -- generator Koa源码分析(二) -- co的实现 Koa源码分 ...
阿里开源台柱 Ant Design 源码仓库被删了...
号外,号外,Ant Design 源码仓库被删除! 在广大中国人民还在欢天喜地过新年的时候,Ant Design项目组成员一定是焦头烂额. 因为就在2.15,也就是农历大年初四的时候,一位名叫Jegg ...
Flume 1.7 源码分析（二）整体架构
Flume 1.7 源码分析(一)源码编译 Flume 1.7 源码分析(二)整体架构 Flume 1.7 源码分析(三)程序入口 Flume 1.7 源码分析(四)从Source写数据到Channe ...
redux源码分析之二：combineReducers.js
欢迎关注redux源码分析系列文章: redux源码分析之一:createStore.js redux源码分析之二:combineReducers.js redux源码分析之三:bindActionC ...
bytebuddy实现原理分析源码分析（二）
bytebuddy实现原理分析 &源码分析四.字节码的操作(implementation ) pkg 4.1 bytecode :pkg 4.1.1 StackManipulation :c ...
kubelet源码分析（二）之 NewMainKubelet
本文个人博客地址:https://www.huweihuang.com/kubernetes-notes/code-analysis/kubelet/NewMainKubelet.html kubel ...
Raft源码分析（二） - Role转换
时光粒子源码分布式一致性/分布式存储等开源技术探讨, GitHub:raft | 时光粒子源码 Raft源码分析 - 关于 Raft源码分析(一) - State Raft源码分析(二) - Rol ...

Ant-Design源码分析——Skeleton（二）

Ant-Design源码分析——Skeleton（二）相关推荐

最新文章

热门文章