refactor: use useContext in skeleton (#34699)

* feat: use useContext in skeleton * feat: use useContext in skeleton * feat: update for lint
2025-06-07 09:26:06 +08:00 · 2022-03-25 20:11:33 +08:00 · 2022-03-25 20:11:33 +08:00 · 9af935f7d3
commit 9af935f7d3
parent 1935ece582
5 changed files with 160 additions and 168 deletions
--- a/components/skeleton/Avatar.tsx
+++ b/components/skeleton/Avatar.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import Element, { SkeletonElementProps } from './Element';

 export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
@ -9,25 +9,24 @@ export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
 }

 const SkeletonAvatar = (props: AvatarProps) => {
-  const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active } = props;
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(props, ['prefixCls', 'className']);
-    const cls = classNames(
-      prefixCls,
-      `${prefixCls}-element`,
-      {
-        [`${prefixCls}-active`]: active,
-      },
-      className,
-    );
-    return (
-      <div className={cls}>
-        <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
-      </div>
-    );
-  };
-  return <ConfigConsumer>{renderSkeletonAvatar}</ConfigConsumer>;
+  const { prefixCls: customizePrefixCls, className, active } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+
+  const otherProps = omit(props, ['prefixCls', 'className']);
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-element`,
+    {
+      [`${prefixCls}-active`]: active,
+    },
+    className,
+  );
+  return (
+    <div className={cls}>
+      <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
+    </div>
+  );
 };

 SkeletonAvatar.defaultProps = {
--- a/components/skeleton/Button.tsx
+++ b/components/skeleton/Button.tsx
@ -2,7 +2,7 @@ import * as React from 'react';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
 import Element, { SkeletonElementProps } from './Element';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';

 export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
  size?: 'large' | 'small' | 'default';
@ -10,26 +10,25 @@ export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'>
 }

 const SkeletonButton = (props: SkeletonButtonProps) => {
-  const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active, block = false } = props;
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(props, ['prefixCls']);
-    const cls = classNames(
-      prefixCls,
-      `${prefixCls}-element`,
-      {
-        [`${prefixCls}-active`]: active,
-        [`${prefixCls}-block`]: block,
-      },
-      className,
-    );
-    return (
-      <div className={cls}>
-        <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
-      </div>
-    );
-  };
-  return <ConfigConsumer>{renderSkeletonButton}</ConfigConsumer>;
+  const { prefixCls: customizePrefixCls, className, active, block = false } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+
+  const otherProps = omit(props, ['prefixCls']);
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-element`,
+    {
+      [`${prefixCls}-active`]: active,
+      [`${prefixCls}-block`]: block,
+    },
+    className,
+  );
+  return (
+    <div className={cls}>
+      <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
+    </div>
+  );
 };

 SkeletonButton.defaultProps = {
--- a/components/skeleton/Image.tsx
+++ b/components/skeleton/Image.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { SkeletonElementProps } from './Element';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';

 export interface SkeletonImageProps
  extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {}
@ -10,26 +10,24 @@ const path =
  'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';

 const SkeletonImage = (props: SkeletonImageProps) => {
-  const renderSkeletonImage = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, style } = props;
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const cls = classNames(prefixCls, `${prefixCls}-element`, className);
+  const { prefixCls: customizePrefixCls, className, style } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const cls = classNames(prefixCls, `${prefixCls}-element`, className);

-    return (
-      <div className={cls}>
-        <div className={classNames(`${prefixCls}-image`, className)} style={style}>
-          <svg
-            viewBox="0 0 1098 1024"
-            xmlns="http://www.w3.org/2000/svg"
-            className={`${prefixCls}-image-svg`}
-          >
-            <path d={path} className={`${prefixCls}-image-path`} />
-          </svg>
-        </div>
+  return (
+    <div className={cls}>
+      <div className={classNames(`${prefixCls}-image`, className)} style={style}>
+        <svg
+          viewBox="0 0 1098 1024"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`${prefixCls}-image-svg`}
+        >
+          <path d={path} className={`${prefixCls}-image-path`} />
+        </svg>
      </div>
-    );
-  };
-  return <ConfigConsumer>{renderSkeletonImage}</ConfigConsumer>;
+    </div>
+  );
 };

 export default SkeletonImage;
--- a/components/skeleton/Input.tsx
+++ b/components/skeleton/Input.tsx
@ -2,7 +2,7 @@ import * as React from 'react';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
 import Element, { SkeletonElementProps } from './Element';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';

 export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
  size?: 'large' | 'small' | 'default';
@ -10,26 +10,25 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
 }

 const SkeletonInput = (props: SkeletonInputProps) => {
-  const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active, block } = props;
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(props, ['prefixCls']);
-    const cls = classNames(
-      prefixCls,
-      `${prefixCls}-element`,
-      {
-        [`${prefixCls}-active`]: active,
-        [`${prefixCls}-block`]: block,
-      },
-      className,
-    );
-    return (
-      <div className={cls}>
-        <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
-      </div>
-    );
-  };
-  return <ConfigConsumer>{renderSkeletonInput}</ConfigConsumer>;
+  const { prefixCls: customizePrefixCls, className, active, block } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+
+  const otherProps = omit(props, ['prefixCls']);
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-element`,
+    {
+      [`${prefixCls}-active`]: active,
+      [`${prefixCls}-block`]: block,
+    },
+    className,
+  );
+  return (
+    <div className={cls}>
+      <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
+    </div>
+  );
 };

 SkeletonInput.defaultProps = {
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import Title, { SkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps } from './Paragraph';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import Element from './Element';
 import SkeletonAvatar, { AvatarProps } from './Avatar';
 import SkeletonButton from './Button';
@ -72,99 +72,96 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
 }

 const Skeleton = (props: SkeletonProps) => {
-  const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      loading,
-      className,
-      style,
-      children,
-      avatar,
-      title,
-      paragraph,
-      active,
-      round,
-    } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    loading,
+    className,
+    style,
+    children,
+    avatar,
+    title,
+    paragraph,
+    active,
+    round,
+  } = props;

-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);

-    if (loading || !('loading' in props)) {
-      const hasAvatar = !!avatar;
-      const hasTitle = !!title;
-      const hasParagraph = !!paragraph;
+  if (loading || !('loading' in props)) {
+    const hasAvatar = !!avatar;
+    const hasTitle = !!title;
+    const hasParagraph = !!paragraph;

-      // Avatar
-      let 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) {
-        // Title
-        let $title;
-        if (hasTitle) {
-          const titleProps: SkeletonTitleProps = {
-            prefixCls: `${prefixCls}-title`,
-            ...getTitleBasicProps(hasAvatar, hasParagraph),
-            ...getComponentProps(title),
-          };
-
-          $title = <Title {...titleProps} />;
-        }
-
-        // Paragraph
-        let 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} style={style}>
-          {avatarNode}
-          {contentNode}
+    // Avatar
+    let 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>
      );
    }

-    return children;
-  };
-  return <ConfigConsumer>{renderSkeleton}</ConfigConsumer>;
+    let contentNode;
+    if (hasTitle || hasParagraph) {
+      // Title
+      let $title;
+      if (hasTitle) {
+        const titleProps: SkeletonTitleProps = {
+          prefixCls: `${prefixCls}-title`,
+          ...getTitleBasicProps(hasAvatar, hasParagraph),
+          ...getComponentProps(title),
+        };
+
+        $title = <Title {...titleProps} />;
+      }
+
+      // Paragraph
+      let 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} style={style}>
+        {avatarNode}
+        {contentNode}
+      </div>
+    );
+  }
+  return React.isValidElement(children) ? children : null;
 };

 Skeleton.defaultProps = {