refactor: use useContext in skeleton (#34699)

* feat: use useContext in skeleton * feat: use useContext in skeleton * feat: update for lint
ant-design · Mar 25, 2022 · 9af935f · 9af935f
1 parent 1935ece
commit 9af935f
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 166 deletions.
diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx
@@ -1,33 +1,32 @@
 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'> {
   shape?: 'circle' | 'square';
 }
 
 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 = {

diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx
@@ -2,34 +2,33 @@ 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';
   block?: boolean;
 }
 
 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 = {

diff --git 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;
diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx
@@ -2,34 +2,33 @@ 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';
   block?: boolean;
 }
 
 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 = {