refactor(skeleton): rewrite with hook (#23206)

* refactor(skeleton): rewrite with hook

* fix(skeleton): refine lint and compile issues

* fix(skeleton): refine compile issues

* chore: ignore eslint warning

.antd-tools.config.js

@@ -104,6 +104,7 @@ function finalizeDist() {
       path.join(process.cwd(), 'dist', 'theme.js'),
       `const defaultTheme = require('./default-theme.js');\n`,
     );
+    // eslint-disable-next-line no-console
     console.log('Built a entry less file to dist/antd.less');
     buildThemeFile('default', defaultVars);
     buildThemeFile('dark', darkVars);

components/skeleton/Avatar.tsx

@@ -8,17 +8,11 @@ export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
   shape?: 'circle' | 'square';
 }
 
-// eslint-disable-next-line react/prefer-stateless-function
+const SkeletonAvatar = (props: AvatarProps) => {
-class SkeletonAvatar extends React.Component<AvatarProps, any> {
+  const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
-  static defaultProps: Partial<AvatarProps> = {
+    const { prefixCls: customizePrefixCls, className, active } = props;
-    size: 'default',
-    shape: 'circle',
-  };
-
-  renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active } = this.props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(this.props, ['prefixCls']);
+    const otherProps = omit(props, ['prefixCls']);
     const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
       [`${prefixCls}-active`]: active,
     });
@@ -28,10 +22,12 @@ class SkeletonAvatar extends React.Component<AvatarProps, any> {
       </div>
     );
   };
-
+  return <ConfigConsumer>{renderSkeletonAvatar}</ConfigConsumer>;
-  render() {
-    return <ConfigConsumer>{this.renderSkeletonAvatar}</ConfigConsumer>;
-  }
 }
 
+SkeletonAvatar.defaultProps = {
+  size: 'default',
+  shape: 'circle',
+};
+
 export default SkeletonAvatar;

components/skeleton/Button.tsx

@@ -4,20 +4,15 @@ import classNames from 'classnames';
 import Element, { SkeletonElementProps } from './Element';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
-interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
+export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
   size?: 'large' | 'small' | 'default';
 }
 
-// eslint-disable-next-line react/prefer-stateless-function
+const SkeletonButton = (props: SkeletonButtonProps) => {
-class SkeletonButton extends React.Component<SkeletonButtonProps, any> {
+  const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
-  static defaultProps: Partial<SkeletonButtonProps> = {
+    const { prefixCls: customizePrefixCls, className, active } = props;
-    size: 'default',
-  };
-
-  renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active } = this.props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(this.props, ['prefixCls']);
+    const otherProps = omit(props, ['prefixCls']);
     const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
       [`${prefixCls}-active`]: active,
     });
@@ -27,10 +22,11 @@ class SkeletonButton extends React.Component<SkeletonButtonProps, any> {
       </div>
     );
   };
+  return <ConfigConsumer>{renderSkeletonButton}</ConfigConsumer>;
+};
 
-  render() {
+SkeletonButton.defaultProps = {
-    return <ConfigConsumer>{this.renderSkeletonButton}</ConfigConsumer>;
+  size: 'default',
-  }
+};
-}
 
 export default SkeletonButton;

components/skeleton/Element.tsx

@@ -10,37 +10,35 @@ export interface SkeletonElementProps {
   active?: boolean;
 }
 
-// eslint-disable-next-line react/prefer-stateless-function
+const Element = (props: SkeletonElementProps) => {
-class Element extends React.Component<SkeletonElementProps, any> {
+  const { prefixCls, className, style, size, shape } = props;
-  render() {
-    const { prefixCls, className, style, size, shape } = this.props;
 
-    const sizeCls = classNames({
+  const sizeCls = classNames({
-      [`${prefixCls}-lg`]: size === 'large',
+    [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
+    [`${prefixCls}-sm`]: size === 'small',
-    });
+  });
 
-    const shapeCls = classNames({
+  const shapeCls = classNames({
-      [`${prefixCls}-circle`]: shape === 'circle',
+    [`${prefixCls}-circle`]: shape === 'circle',
-      [`${prefixCls}-square`]: shape === 'square',
+    [`${prefixCls}-square`]: shape === 'square',
-      [`${prefixCls}-round`]: shape === 'round',
+    [`${prefixCls}-round`]: shape === 'round',
-    });
+  });
+
+  const sizeStyle: React.CSSProperties =
+    typeof size === 'number'
+      ? {
+        width: size,
+        height: size,
+        lineHeight: `${size}px`,
+      }
+      : {};
+  return (
+    <span
+      className={classNames(prefixCls, className, sizeCls, shapeCls)}
+      style={{ ...sizeStyle, ...style }}
+    />
+  );
+};
 
-    const sizeStyle: React.CSSProperties =
-      typeof size === 'number'
-        ? {
-            width: size,
-            height: size,
-            lineHeight: `${size}px`,
-          }
-        : {};
-    return (
-      <span
-        className={classNames(prefixCls, className, sizeCls, shapeCls)}
-        style={{ ...sizeStyle, ...style }}
-      />
-    );
-  }
-}
 
 export default Element;

components/skeleton/Input.tsx

@@ -4,20 +4,15 @@ import classNames from 'classnames';
 import Element, { SkeletonElementProps } from './Element';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
-interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
+export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
 }
 
-// eslint-disable-next-line react/prefer-stateless-function
+const SkeletonInput = (props: SkeletonInputProps) => {
-class SkeletonInput extends React.Component<SkeletonInputProps, any> {
+  const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
-  static defaultProps: Partial<SkeletonInputProps> = {
+    const { prefixCls: customizePrefixCls, className, active } = props;
-    size: 'default',
-  };
-
-  renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active } = this.props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(this.props, ['prefixCls']);
+    const otherProps = omit(props, ['prefixCls']);
     const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
       [`${prefixCls}-active`]: active,
     });
@@ -27,10 +22,11 @@ class SkeletonInput extends React.Component<SkeletonInputProps, any> {
       </div>
     );
   };
+  return <ConfigConsumer>{renderSkeletonInput}</ConfigConsumer>;
+};
 
-  render() {
+SkeletonInput.defaultProps = {
-    return <ConfigConsumer>{this.renderSkeletonInput}</ConfigConsumer>;
+  size: 'default',
-  }
+};
-}
 
 export default SkeletonInput;

components/skeleton/Paragraph.tsx

@@ -11,9 +11,9 @@ export interface SkeletonParagraphProps {
   rows?: number;
 }
 
-class Paragraph extends React.Component<SkeletonParagraphProps, {}> {
+const Paragraph = (props: SkeletonParagraphProps) => {
-  getWidth(index: number) {
+  const getWidth = (index: number) => {
-    const { width, rows = 2 } = this.props;
+    const { width, rows = 2 } = props;
     if (Array.isArray(width)) {
       return width[index];
     }
@@ -22,20 +22,17 @@ class Paragraph extends React.Component<SkeletonParagraphProps, {}> {
       return width;
     }
     return undefined;
-  }
+  };
-
+  const { prefixCls, className, style, rows } = props;
-  render() {
+  const rowList = [...Array(rows)].map((_, index) => (
-    const { prefixCls, className, style, rows } = this.props;
+    // eslint-disable-next-line react/no-array-index-key
-    const rowList = [...Array(rows)].map((_, index) => (
+    <li key={index} style={{ width: getWidth(index) }}/>
-      // eslint-disable-next-line react/no-array-index-key
+  ));
-      <li key={index} style={{ width: this.getWidth(index) }} />
+  return (
-    ));
+    <ul className={classNames(prefixCls, className)} style={style}>
-    return (
+      {rowList}
-      <ul className={classNames(prefixCls, className)} style={style}>
+    </ul>
-        {rowList}
+  );
-      </ul>
+};
-    );
-  }
-}
 
 export default Paragraph;

components/skeleton/Skeleton.tsx

@@ -3,13 +3,14 @@ import classNames from 'classnames';
 import Title, { SkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps } from './Paragraph';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import SkeletonButton from './Button';
 import Element from './Element';
 import SkeletonAvatar, { AvatarProps } from './Avatar';
+import SkeletonButton from './Button';
 import SkeletonInput from './Input';
 
 /* This only for skeleton internal. */
-interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {}
+interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {
+}
 
 export interface SkeletonProps {
   active?: boolean;
@@ -68,20 +69,8 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
   return basicProps;
 }
 
-class Skeleton extends React.Component<SkeletonProps, any> {
+const Skeleton = (props: SkeletonProps) => {
-  static Button: typeof SkeletonButton;
+  const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-
-  static Avatar: typeof SkeletonAvatar;
-
-  static Input: typeof SkeletonInput;
-
-  static defaultProps: Partial<SkeletonProps> = {
-    avatar: false,
-    title: true,
-    paragraph: true,
-  };
-
-  renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
       loading,
@@ -91,11 +80,11 @@ class Skeleton extends React.Component<SkeletonProps, any> {
       title,
       paragraph,
       active,
-    } = this.props;
+    } = props;
 
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
-    if (loading || !('loading' in this.props)) {
+    if (loading || !('loading' in props)) {
       const hasAvatar = !!avatar;
       const hasTitle = !!title;
       const hasParagraph = !!paragraph;
@@ -166,10 +155,17 @@ class Skeleton extends React.Component<SkeletonProps, any> {
 
     return children;
   };
+  return <ConfigConsumer>{renderSkeleton}</ConfigConsumer>;
+};
 
-  render() {
+Skeleton.defaultProps = {
-    return <ConfigConsumer>{this.renderSkeleton}</ConfigConsumer>;
+  avatar: false,
-  }
+  title: true,
-}
+  paragraph: true,
+};
+
+Skeleton.Button = SkeletonButton;
+Skeleton.Avatar = SkeletonAvatar;
+Skeleton.Input = SkeletonInput;
 
 export default Skeleton;

components/skeleton/index.tsx

@@ -1,11 +1,5 @@
 import Skeleton from './Skeleton';
-import SkeletonButton from './Button';
-import SkeletonAvatar from './Avatar';
-import SkeletonInput from './Input';
 
 export { SkeletonProps } from './Skeleton';
 
-Skeleton.Button = SkeletonButton;
-Skeleton.Avatar = SkeletonAvatar;
-Skeleton.Input = SkeletonInput;
 export default Skeleton;