diff --git a/src/skeleton/Skeleton.tsx b/src/skeleton/Skeleton.tsx index f485c9f397..4a06849eb6 100644 --- a/src/skeleton/Skeleton.tsx +++ b/src/skeleton/Skeleton.tsx @@ -8,6 +8,7 @@ import useConfig from '../hooks/useConfig'; import { pxCompat } from '../_util/helper'; import parseTNode from '../_util/parseTNode'; import { skeletonDefaultProps } from './defaultProps'; +import useDefaultProps from '../hooks/useDefaultProps'; export type SkeletonProps = TdSkeletonProps & StyledProps & { children: React.ReactNode }; @@ -24,9 +25,9 @@ const ThemeMap: Record = { ], }; -const Skeleton = (props: SkeletonProps) => { +const Skeleton: React.FC = (originalProps) => { + const props = useDefaultProps(originalProps, skeletonDefaultProps); const { animation, loading, rowCol, theme, className, style, delay = 0, children } = props; - const { classPrefix } = useConfig(); const name = `${classPrefix}-skeleton`; // t-skeleton @@ -70,7 +71,7 @@ const Skeleton = (props: SkeletonProps) => { cols = [_cols as SkeletonRowColObj]; } - return cols.map((item, index) => ( + return cols.map((item, index) => (
{parseTNode(item.content)}
@@ -80,7 +81,7 @@ const Skeleton = (props: SkeletonProps) => { const renderRowCol = (_rowCol?: SkeletonRowCol) => { const renderedRowCol: SkeletonRowCol = _rowCol || rowCol; - return renderedRowCol.map((item, index) => ( + return renderedRowCol.map((item, index) => (
{renderCols(item)}
@@ -104,7 +105,7 @@ const Skeleton = (props: SkeletonProps) => { return <>{children}; } - const childrenContent = []; + const childrenContent: React.ReactNode[] = []; if (theme && !rowCol) { childrenContent.push(renderRowCol(ThemeMap[theme])); } @@ -124,6 +125,5 @@ const Skeleton = (props: SkeletonProps) => { }; Skeleton.displayName = 'Skeleton'; -Skeleton.defaultProps = skeletonDefaultProps; export default Skeleton;