From 43f597e61d9adad47a93d5a994b495e4c01bffa1 Mon Sep 17 00:00:00 2001 From: "Y." Date: Fri, 16 Aug 2024 18:46:34 +0800 Subject: [PATCH] feat(Skeleton): add delay props (#455) * feat(Skeleton): add delay props * test: update csr and ssr snap --- src/_util/helper.ts | 9 + src/skeleton/Skeleton.tsx | 230 ++++++----- src/skeleton/_example/animation.tsx | 30 ++ src/skeleton/_example/avatar-text.jsx | 7 - src/skeleton/_example/base.jsx | 6 - src/skeleton/_example/cell-group.tsx | 23 ++ src/skeleton/_example/flashed.jsx | 6 - src/skeleton/_example/gradient.jsx | 6 - src/skeleton/_example/grid.tsx | 27 ++ src/skeleton/_example/image-group.tsx | 16 + src/skeleton/_example/index.jsx | 50 +-- src/skeleton/_example/pic-text.jsx | 35 -- src/skeleton/_example/style/index.less | 38 +- src/skeleton/_example/theme.tsx | 40 ++ src/skeleton/defaultProps.ts | 7 + src/skeleton/skeleton.en-US.md | 17 + src/skeleton/skeleton.md | 16 +- src/skeleton/style/index.js | 2 +- src/skeleton/type.ts | 15 +- test/snap/__snapshots__/csr.test.jsx.snap | 475 ++++++++++++++++++++-- test/snap/__snapshots__/ssr.test.jsx.snap | 12 +- 21 files changed, 809 insertions(+), 258 deletions(-) create mode 100644 src/skeleton/_example/animation.tsx delete mode 100644 src/skeleton/_example/avatar-text.jsx delete mode 100644 src/skeleton/_example/base.jsx create mode 100644 src/skeleton/_example/cell-group.tsx delete mode 100644 src/skeleton/_example/flashed.jsx delete mode 100644 src/skeleton/_example/gradient.jsx create mode 100644 src/skeleton/_example/grid.tsx create mode 100644 src/skeleton/_example/image-group.tsx delete mode 100644 src/skeleton/_example/pic-text.jsx create mode 100644 src/skeleton/_example/theme.tsx create mode 100644 src/skeleton/defaultProps.ts create mode 100644 src/skeleton/skeleton.en-US.md diff --git a/src/_util/helper.ts b/src/_util/helper.ts index f57baa3c..5ef0f6cc 100644 --- a/src/_util/helper.ts +++ b/src/_util/helper.ts @@ -39,3 +39,12 @@ export function getCharacterLength(str: string, maxCharacter?: number) { } return len; } + +/** + * 兼容样式中支持 number/string 类型的传值 得出最后的结果。 + * @param param number 或 string 类型的可用于样式上的值 + * @returns 可使用的样式值。 + */ +export function pxCompat(param: string | number) { + return typeof param === 'number' ? `${param}px` : param; +} diff --git a/src/skeleton/Skeleton.tsx b/src/skeleton/Skeleton.tsx index c4ea8266..404c10c5 100644 --- a/src/skeleton/Skeleton.tsx +++ b/src/skeleton/Skeleton.tsx @@ -1,121 +1,139 @@ -import React from 'react'; +import React, { forwardRef, useState, useEffect } from 'react'; import classNames from 'classnames'; import isNumber from 'lodash/isNumber'; +import isArray from 'lodash/isArray'; import { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type'; import { StyledProps, Styles } from '../common'; -import useConfig from '../_util/useConfig'; - -export type SkeletonProps = TdSkeletonProps & StyledProps; - -const Skeleton: React.FC = (props) => { - const { animation, loading = true, rowCol, theme = 'text' } = props; - const { classPrefix } = useConfig(); - const name = `${classPrefix}-skeleton`; - - const completeContent = props.content || props.default || props.children; - const rootClasses = classNames(`${name}`, `${name}--${theme}`); - const defaultRowcols: SkeletonRowCol = [1, 1, 1, { width: '70%' }]; - const rowCols: SkeletonRowCol = []; - if (theme === 'avatar-text') { - rowCols.push(...defaultRowcols); - } else if (rowCol) { - rowCols.push(...rowCol); - } else { - rowCols.push(...defaultRowcols); - } +import { skeletonDefaultProps } from './defaultProps'; +import { pxCompat } from '../_util/helper'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; + +export interface SkeletonProps extends TdSkeletonProps, StyledProps {} + +const ThemeMap: Record = { + avatar: [{ type: 'circle', size: '48px' }], + image: [{ type: 'rect', size: '72px' }], + text: [ + [ + { width: '24%', height: '16px', marginRight: '16px' }, + { width: '76%', height: '16px' }, + ], + 1, + ], + paragraph: [1, 1, 1, { width: '55%' }], +}; + +const Skeleton = forwardRef((props) => { + const skeletonClass = usePrefixClass('skeleton'); + const { className, style, children, animation, delay, loading, rowCol, theme } = useDefaultProps( + props, + skeletonDefaultProps, + ); + + const renderCols = (_cols: Number | SkeletonRowColObj | Array) => { + let cols: Array = []; + if (isArray(_cols)) { + cols = _cols; + } else if (isNumber(_cols)) { + cols = new Array(_cols).fill({ type: 'text' }); + } else { + cols = [_cols as SkeletonRowColObj]; + } + + const getColItemClass = (obj: SkeletonRowColObj) => + classNames(`${skeletonClass}__col`, `${skeletonClass}--type-${obj.type || 'text'}`, { + [`${skeletonClass}--animation-${animation}`]: animation, + }); - const rowClass = `${name}__row`; - const colClass = classNames(`${name}__col`, `${name}--type-text`, { - [`${name}--animation-${animation}`]: animation, - }); - - const getColItemStyle = (obj: SkeletonRowColObj): Styles => { - const styleName = [ - 'width', - 'height', - 'marginRight', - 'marginLeft', - 'margin', - 'size', - 'background', - 'backgroundColor', - 'borderRadius', - ]; - - return styleName.reduce((style, currentStyle) => { - const accStyle = style; - if (currentStyle in obj) { - const px = isNumber(obj[currentStyle]) ? `${obj[currentStyle]}px` : obj[currentStyle]; - if (currentStyle === 'size') { - [accStyle.width, accStyle.height] = [px, px]; + const getColItemStyle = (obj: SkeletonRowColObj): Styles => { + const styleName = [ + 'width', + 'height', + 'marginRight', + 'marginLeft', + 'margin', + 'size', + 'background', + 'backgroundColor', + 'borderRadius', + ]; + const style: Styles = {}; + styleName.forEach((name) => { + if (name in obj) { + const px = pxCompat(obj[name]); + if (name === 'size') { + [style.width, style.height] = [px, px]; + } else { + style[name] = px; + } } - accStyle[currentStyle] = px; - } - return accStyle; - }, {} as Styles); + }); + return style; + }; + + return cols.map((obj, index) => ( +
+ {parseTNode(obj.content)} +
+ )); }; - const parsedRowcols = rowCols.map((item) => { - if (isNumber(item)) { - return [ - { - type: 'text', - style: {}, - }, - ]; - } - if (Array.isArray(item)) { - return item.map((col) => ({ - ...col, - style: getColItemStyle(col), - })); + const renderRowCol = (_rowCol?: SkeletonRowCol) => { + const renderedRowCol: SkeletonRowCol = _rowCol || rowCol; + + return renderedRowCol.map((item, index) => ( +
+ {renderCols(item)} +
+ )); + }; + + const [isLoading, setIsLoading] = useState(loading); + + useEffect(() => { + if (delay > 0 && !loading) { + const timeout = setTimeout(() => { + setIsLoading(loading); + }, delay); + return () => clearTimeout(timeout); } - const nItem = item as SkeletonRowColObj; - return [ - { - ...nItem, - style: getColItemStyle(nItem), - }, - ]; - }); + setIsLoading(loading); + }, [delay, loading]); + + if (!isLoading) { + return <>{parseTNode(children)}; + } + + const childrenContent: React.ReactNode[] = []; + + // 保持优先级： rowCol > theme，增加默认值兜底 + if (rowCol) { + childrenContent.push(renderRowCol(rowCol)); + } else if (props.theme) { + childrenContent.push(renderRowCol(ThemeMap[theme])); + } else if (!theme && !rowCol) { + // 什么都不传时，传入默认 rowCol + childrenContent.push( + renderRowCol([ + [ + { width: '24%', height: '16px', marginRight: '16px' }, + { width: '76%', height: '16px' }, + ], + 1, + ]), + ); + } return ( - <> -
- {!loading && completeContent} - - {loading && theme === 'avatar-text' && ( - <> - {/* avater-text */} -
-
- {parsedRowcols.map((item, index) => ( -
- {item.map((subItem, subIndex) => ( -
- ))} -
- ))} -
- - )} - - {loading && theme === 'text' && ( - <> - {/* text */} - {parsedRowcols.map((item, index) => ( -
- {item.map((subItem, subIndex) => ( -
- ))} -
- ))} - - )} -
- +
+ {childrenContent} +
); -}; +}); + +Skeleton.displayName = 'Skeleton'; export default Skeleton; diff --git a/src/skeleton/_example/animation.tsx b/src/skeleton/_example/animation.tsx new file mode 100644 index 00000000..a22654f1 --- /dev/null +++ b/src/skeleton/_example/animation.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Skeleton } from 'tdesign-mobile-react'; + +const animations = [ + { + title: '渐变加载效果', + value: 'gradient', + loading: true, + }, + { + title: '闪烁加载效果', + value: 'flashed', + loading: true, + }, +] as const; + +export default function AnimationSkeleton() { + return ( +
+ {animations.map((animation, index) => ( +
+
{animation.title}
+
+ +
+
+ ))} +
+ ); +} diff --git a/src/skeleton/_example/avatar-text.jsx b/src/skeleton/_example/avatar-text.jsx deleted file mode 100644 index 33ed55a9..00000000 --- a/src/skeleton/_example/avatar-text.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Skeleton } from 'tdesign-mobile-react'; - -export default function AvaterText() { - const rowCols = [1, 1, 1, { width: '70%' }]; - return ; -} diff --git a/src/skeleton/_example/base.jsx b/src/skeleton/_example/base.jsx deleted file mode 100644 index 38c36139..00000000 --- a/src/skeleton/_example/base.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Skeleton } from 'tdesign-mobile-react'; - -export default function Base() { - return ; -} diff --git a/src/skeleton/_example/cell-group.tsx b/src/skeleton/_example/cell-group.tsx new file mode 100644 index 00000000..735bdd30 --- /dev/null +++ b/src/skeleton/_example/cell-group.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Skeleton } from 'tdesign-mobile-react'; +import type { SkeletonProps } from 'tdesign-mobile-react'; + +const rowColsAvater: SkeletonProps['rowCol'] = [{ size: '48px', type: 'circle' }]; +const rowColsImage: SkeletonProps['rowCol'] = [{ size: '48px', type: 'rect' }]; +const rowColsContent: SkeletonProps['rowCol'] = [{ width: '50%' }, { width: '100%' }]; + +export default function CellGroupSkeleton() { + return ( + <> +
+ + +
+ +
+ + +
+ + ); +} diff --git a/src/skeleton/_example/flashed.jsx b/src/skeleton/_example/flashed.jsx deleted file mode 100644 index b753ce0f..00000000 --- a/src/skeleton/_example/flashed.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Skeleton } from 'tdesign-mobile-react'; - -export default function Flashed() { - return ; -} diff --git a/src/skeleton/_example/gradient.jsx b/src/skeleton/_example/gradient.jsx deleted file mode 100644 index 4704dba1..00000000 --- a/src/skeleton/_example/gradient.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Skeleton } from 'tdesign-mobile-react'; - -export default function Gradient() { - return ; -} diff --git a/src/skeleton/_example/grid.tsx b/src/skeleton/_example/grid.tsx new file mode 100644 index 00000000..55e8c312 --- /dev/null +++ b/src/skeleton/_example/grid.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Skeleton } from 'tdesign-mobile-react'; + +const grid = [ + [ + { width: '48px', height: '48px', borderRadius: '6px' }, + { width: '48px', height: '48px', borderRadius: '6px' }, + { width: '48px', height: '48px', borderRadius: '6px' }, + { width: '48px', height: '48px', borderRadius: '6px' }, + { width: '48px', height: '48px', borderRadius: '6px' }, + ], + [ + { width: '48px', height: '16px', borderRadius: '3px' }, + { width: '48px', height: '16px', borderRadius: '3px' }, + { width: '48px', height: '16px', borderRadius: '3px' }, + { width: '48px', height: '16px', borderRadius: '3px' }, + { width: '48px', height: '16px', borderRadius: '3px' }, + ], +]; + +export default function GridSkeleton() { + return ( + <> + + + ); +} diff --git a/src/skeleton/_example/image-group.tsx b/src/skeleton/_example/image-group.tsx new file mode 100644 index 00000000..26c64622 --- /dev/null +++ b/src/skeleton/_example/image-group.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Skeleton } from 'tdesign-mobile-react'; +import './style/index.less'; + +const rowCols = [{ size: '163.5px', borderRadius: '12px' }, 1, { width: '61%' }]; + +export default function ImageGroupSkeleton() { + return ( + <> +
+ + +
+ + ); +} diff --git a/src/skeleton/_example/index.jsx b/src/skeleton/_example/index.jsx index accffddf..8f6694f7 100644 --- a/src/skeleton/_example/index.jsx +++ b/src/skeleton/_example/index.jsx @@ -1,48 +1,36 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import ThemeSkeleton from './theme'; +import AnimationSkeleton from './animation'; +import CellGroupSkeleton from './cell-group'; +import GridSkeleton from './grid'; +import ImageGroupSkeleton from './image-group'; + import './style/index.less'; -import Base from './base'; -import AvatarText from './avatar-text'; -import PicText from './pic-text'; -import Flashed from './flashed'; -import Gradient from './gradient'; -export default function () { +export default function SkeletonDemo() { return (
- -
- -
+ + - - -
- -
+ + - - -
- -
+ + - - -
- -
+ + - - -
- -
+ +
); diff --git a/src/skeleton/_example/pic-text.jsx b/src/skeleton/_example/pic-text.jsx deleted file mode 100644 index e3acf465..00000000 --- a/src/skeleton/_example/pic-text.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { Skeleton } from 'tdesign-mobile-react'; -import './style/index.less'; - -export default function PicText() { - const rowCols = [ - { - height: '171px', - borderRadius: '8px', - }, - 1, - { - width: '80%', - }, - [ - { - width: '60%', - }, - { - width: '20%', - }, - ], - ]; - return ( - <> -
- {Array.from(Array(2), (item, key) => ( -
- -
- ))} -
- - ); -} diff --git a/src/skeleton/_example/style/index.less b/src/skeleton/_example/style/index.less index c40ca845..885aa0cb 100644 --- a/src/skeleton/_example/style/index.less +++ b/src/skeleton/_example/style/index.less @@ -1,11 +1,37 @@ -.demo-content { - padding: 0 16px; +.tdesign-mobile-demo { + background-color: #fff; } -.pic-compose { +.demo-section__desc { + font-size: 14px; + color: var(--td-text-color-disabled, rgba(0, 0, 0, 0.4)); + margin-top: 8px; + line-height: 22px; +} + +.demo-section__content { + margin-top: 16px; + margin-bottom: 24px; +} + +// CellGroupSkeleton +.cell-group { display: flex; - justify-content: space-between; - .item { - width: 47%; + align-items: center; + margin-top: 16px; + + &-avatar { + margin-right: 12px; } + + &-content { + width: 283px; + } +} + +// ImageGroup +.image-group { + display: flex; + justify-content: space-between; + margin-top: 16px; } diff --git a/src/skeleton/_example/theme.tsx b/src/skeleton/_example/theme.tsx new file mode 100644 index 00000000..e29547ff --- /dev/null +++ b/src/skeleton/_example/theme.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Skeleton } from 'tdesign-mobile-react'; + +const themeList = [ + { + title: '头像骨架屏', + value: 'avatar', + loading: true, + }, + { + title: '图片骨架屏', + value: 'image', + loading: true, + }, + { + title: '文本骨架屏', + value: 'text', + loading: true, + }, + { + title: '段落骨架屏', + value: 'paragraph', + loading: true, + }, +] as const; + +export default function ThemeSkeleton() { + return ( + <> + {themeList.map((theme, index) => ( +
+
{theme.title}
+
+ +
+
+ ))} + + ); +} diff --git a/src/skeleton/defaultProps.ts b/src/skeleton/defaultProps.ts new file mode 100644 index 00000000..01f7d0e5 --- /dev/null +++ b/src/skeleton/defaultProps.ts @@ -0,0 +1,7 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdSkeletonProps } from './type'; + +export const skeletonDefaultProps: TdSkeletonProps = { animation: 'none', delay: 0, loading: true, theme: 'text' }; diff --git a/src/skeleton/skeleton.en-US.md b/src/skeleton/skeleton.en-US.md new file mode 100644 index 00000000..f05235fa --- /dev/null +++ b/src/skeleton/skeleton.en-US.md @@ -0,0 +1,17 @@ +:: BASE_DOC :: + +## API + + +### Skeleton Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +animation | String | none | options: gradient/flashed/none | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +delay | Number | 0 | \- | N +loading | Boolean | true | \- | N +rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/skeleton/type.ts) | N +theme | String | text | options: avatar/image/text/paragraph | N diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md index 7da92c7c..bf41feef 100644 --- a/src/skeleton/skeleton.md +++ b/src/skeleton/skeleton.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### Skeleton Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -animation | String | - | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画。可选项：gradient/flashed | N -default | TNode | - | 加载完成的内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 加载完成的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -delay | Number | 0 | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N +children | TNode | - | 加载完成的内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N -rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string | TNode; type?: 'rect' | 'circle' | 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/skeleton/type.ts) | N -theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：text/avatar-text | N +rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/skeleton/type.ts) | N +theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N diff --git a/src/skeleton/style/index.js b/src/skeleton/style/index.js index 7a8da86c..e14531eb 100644 --- a/src/skeleton/style/index.js +++ b/src/skeleton/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/skeleton/_index.less'; +import '../../_common/style/mobile/components/skeleton/v2/_index.less'; diff --git a/src/skeleton/type.ts b/src/skeleton/type.ts index 66f0ac0a..eb2a04f5 100644 --- a/src/skeleton/type.ts +++ b/src/skeleton/type.ts @@ -8,19 +8,16 @@ import { TNode } from '../common'; export interface TdSkeletonProps { /** - * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画 + * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画 + * @default none */ - animation?: 'gradient' | 'flashed'; + animation?: 'gradient' | 'flashed' | 'none'; /** * 加载完成的内容，同 content */ - default?: TNode; + children?: TNode; /** - * 加载完成的内容 - */ - content?: TNode; - /** - * 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 + * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 * @default 0 */ delay?: number; @@ -37,7 +34,7 @@ export interface TdSkeletonProps { * 骨架图风格，有基础、头像组合等两大类 * @default text */ - theme?: 'text' | 'avatar-text'; + theme?: 'avatar' | 'image' | 'text' | 'paragraph'; } export type SkeletonRowCol = Array>; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index e582b2bf..0a91d394 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -100,14 +100,12 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
-
+
@@ -115,14 +113,14 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = ` class="t-skeleton__row" >
@@ -131,14 +129,12 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
-
+
@@ -146,14 +142,14 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = ` class="t-skeleton__row" >
@@ -162,14 +158,12 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
-
+
@@ -177,14 +171,14 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = ` class="t-skeleton__row" >
@@ -193,14 +187,12 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
-
+
@@ -208,14 +200,14 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = ` class="t-skeleton__row" >
@@ -224,14 +216,12 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
-
+
@@ -239,14 +229,14 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = ` class="t-skeleton__row" >
@@ -255,14 +245,12 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
-
+
@@ -270,14 +258,14 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = ` class="t-skeleton__row" >
@@ -6570,6 +6558,409 @@ exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/skeleton/_example/animation.tsx 1`] = ` +
+
+
+
+ 渐变加载效果 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 闪烁加载效果 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/skeleton/_example/cell-group.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/skeleton/_example/grid.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/skeleton/_example/image-group.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/skeleton/_example/theme.tsx 1`] = ` +
+
+
+ 头像骨架屏 +
+
+
+
+
+
+
+
+
+
+
+ 图片骨架屏 +
+
+
+
+
+
+
+
+
+
+
+ 文本骨架屏 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 段落骨架屏 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/sticky/_example/base.tsx 1`] = `
csr test src/tag/_example/type.tsx 1`] = ` exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; @@ -8448,6 +8839,16 @@ exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"
ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; +exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/cell-group.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/grid.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; + exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 19259eb2..10456527 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -2,7 +2,7 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; @@ -78,6 +78,16 @@ exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"
ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; +exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/cell-group.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/grid.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; + exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`;