fix(skeleton): fix skeleton row and width (#1772)

Co-authored-by: maxin <maxin@growingio.com>

src/skeleton/Skeleton.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
 import { usePrefixCls } from '@gio-design/utils';
+import { isArray, isObject } from 'lodash';
 import Avatar from '../avatar';
 import useDebounceLoading from '../utils/hooks/useDebounceLoading';
 import { SkeletonProps } from './interface';
 import SkeletonImage from './Image';
+import WithSubComponent from '../utils/withSubComponent';
 
-const Skeleton = (props: SkeletonProps) => {
-  const { prefixCls: customizePrefixCls, delay = 0, loading = true, children, active = true, className, style } = props;
+const InnerSkeleton = React.forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    delay = 0,
+    loading = true,
+    children,
+    active = true,
+    className,
+    paragraph,
+    title,
+    ...otherProps
+  } = props;
   const prefixCls = usePrefixCls('skeleton', customizePrefixCls);
   const shouldLoading = useDebounceLoading(loading, delay);
 
@@ -26,20 +38,21 @@ const Skeleton = (props: SkeletonProps) => {
     );
   };
   const renderSkeletonParagraph = () => {
-    const { paragraph = true, title = true } = props;
     if (!paragraph && !title) {
       return null;
     }
-    const row = 3;
+    const { row, width } = isObject(paragraph) ? paragraph : { row: 3, width: '100%' };
+
     return (
       <div className={`${prefixCls}-content`}>
         {title && <div className={`${prefixCls}-title`} />}
         {paragraph && (
           <div className={`${prefixCls}-paragraph`}>
             {Array(row)
               .fill(0)
-              .map((...args) => (
-                <p key={args[1]} />
+              .map((_, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <p key={index} style={{ width: isArray(width) ? width[index] : width }} />
               ))}
           </div>
         )}
@@ -52,16 +65,20 @@ const Skeleton = (props: SkeletonProps) => {
       className={classNames(prefixCls, className, {
         [`${prefixCls}-active`]: active,
       })}
-      style={style}
+      ref={ref}
+      data-testid="skeleton"
+      {...otherProps}
     >
       {renderSkeletonAvatar()}
       {renderSkeletonParagraph()}
     </div>
   ) : (
     <>{children}</>
   );
-};
+});
 
-Skeleton.Image = SkeletonImage;
+const Skeleton = WithSubComponent(InnerSkeleton, {
+  Image: SkeletonImage,
+});
 
 export default Skeleton;

src/skeleton/demos/Skeleton.stories.tsx

@@ -26,8 +26,9 @@ export const Default = Template.bind({});
 Default.args = {
   loading: true,
   delay: 1000,
-  avatar: true,
+  avatar: false,
   active: true,
+  paragraph: { row: 5, width: [100, 200, 300, 400, 500] },
 };
 
 const TemplateImage: Story<SkeletonImageProps> = (args) => (

src/skeleton/interface.ts

@@ -2,7 +2,17 @@ import { AvatarProps } from '../avatar';
 
 export type SkeletonAvatarProps = Pick<AvatarProps, 'size'>;
 export interface SkeletonParagraphProps {
+  /**
+   * 段落展位图行数
+   * @default 3
+   */
   row?: number;
+
+  /**
+   * 设置段落占位图的宽度，若为数组时则为对应的每行宽度
+   * @default 100%
+   */
+  width?: string | number | (string | number)[];
 }
 
 export interface SkeletonImageProps {
@@ -34,9 +44,7 @@ export interface SkeletonImageProps {
   color?: string;
 }
 
-export interface SkeletonProps {
-  className?: string;
-  style?: React.CSSProperties;
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    替代组件的类前缀
    */

src/skeleton/style/index.less

@@ -1,4 +1,4 @@
-@import '../../stylesheet/index.less';
+@import (reference) '../../stylesheet/index.less';
 
 @skeleton-prefix-cls: ~'@{component-prefix}-skeleton';