style: code optimization (#37743)

components/skeleton/Avatar.tsx

@@ -9,8 +9,14 @@ export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
   shape?: 'circle' | 'square';
 }
 
-const SkeletonAvatar = (props: AvatarProps) => {
-  const { prefixCls: customizePrefixCls, className, active } = props;
+const SkeletonAvatar: React.FC<AvatarProps> = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    active,
+    shape = 'circle',
+    size = 'default',
+  } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
@@ -25,14 +31,9 @@ const SkeletonAvatar = (props: AvatarProps) => {
   );
   return (
     <div className={cls}>
-      <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
+      <Element prefixCls={`${prefixCls}-avatar`} shape={shape} size={size} {...otherProps} />
     </div>
   );
 };
 
-SkeletonAvatar.defaultProps = {
-  size: 'default',
-  shape: 'circle',
-};
-
 export default SkeletonAvatar;

components/skeleton/Button.tsx

@@ -10,8 +10,14 @@ export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'>
   block?: boolean;
 }
 
-const SkeletonButton = (props: SkeletonButtonProps) => {
-  const { prefixCls: customizePrefixCls, className, active, block = false } = props;
+const SkeletonButton: React.FC<SkeletonButtonProps> = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    active,
+    block = false,
+    size = 'default',
+  } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
@@ -27,13 +33,9 @@ const SkeletonButton = (props: SkeletonButtonProps) => {
   );
   return (
     <div className={cls}>
-      <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
+      <Element prefixCls={`${prefixCls}-button`} size={size} {...otherProps} />
     </div>
   );
 };
 
-SkeletonButton.defaultProps = {
-  size: 'default',
-};
-
 export default SkeletonButton;

components/skeleton/Element.tsx

@@ -10,7 +10,7 @@ export interface SkeletonElementProps {
   active?: boolean;
 }
 
-const Element = (props: SkeletonElementProps) => {
+const Element: React.FC<SkeletonElementProps> = props => {
   const { prefixCls, className, style, size, shape } = props;
 
   const sizeCls = classNames({
@@ -24,14 +24,17 @@ const Element = (props: SkeletonElementProps) => {
     [`${prefixCls}-round`]: shape === 'round',
   });
 
-  const sizeStyle: React.CSSProperties =
-    typeof size === 'number'
-      ? {
-          width: size,
-          height: size,
-          lineHeight: `${size}px`,
-        }
-      : {};
+  const sizeStyle = React.useMemo<React.CSSProperties>(
+    () =>
+      typeof size === 'number'
+        ? {
+            width: size,
+            height: size,
+            lineHeight: `${size}px`,
+          }
+        : {},
+    [size],
+  );
 
   return (
     <span

components/skeleton/Image.tsx

@@ -8,7 +8,7 @@ export interface SkeletonImageProps extends Omit<SkeletonElementProps, 'size' |
 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 SkeletonImage: React.FC<SkeletonImageProps> = props => {
   const { prefixCls: customizePrefixCls, className, style, active } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);

components/skeleton/Input.tsx

@@ -10,8 +10,8 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
   block?: boolean;
 }
 
-const SkeletonInput = (props: SkeletonInputProps) => {
-  const { prefixCls: customizePrefixCls, className, active, block } = props;
+const SkeletonInput: React.FC<SkeletonInputProps> = props => {
+  const { prefixCls: customizePrefixCls, className, active, block, size = 'default' } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
@@ -27,13 +27,9 @@ const SkeletonInput = (props: SkeletonInputProps) => {
   );
   return (
     <div className={cls}>
-      <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
+      <Element prefixCls={`${prefixCls}-input`} size={size} {...otherProps} />
     </div>
   );
 };
 
-SkeletonInput.defaultProps = {
-  size: 'default',
-};
-
 export default SkeletonInput;

components/skeleton/Node.tsx

@@ -10,7 +10,7 @@ export interface SkeletonNodeProps extends Omit<SkeletonElementProps, 'size' | '
 }
 
 const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
-  const { prefixCls: customizePrefixCls, className, style, active } = props;
+  const { prefixCls: customizePrefixCls, className, style, active, children } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
@@ -23,7 +23,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
     className,
   );
 
-  const content = props.children ?? <DotChartOutlined />;
+  const content = children ?? <DotChartOutlined />;
 
   return (
     <div className={cls}>

components/skeleton/Paragraph.tsx

@@ -11,7 +11,7 @@ export interface SkeletonParagraphProps {
   rows?: number;
 }
 
-const Paragraph = (props: SkeletonParagraphProps) => {
+const Paragraph: React.FC<SkeletonParagraphProps> = props => {
   const getWidth = (index: number) => {
     const { width, rows = 2 } = props;
     if (Array.isArray(width)) {

components/skeleton/Skeleton.tsx

@@ -75,16 +75,24 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
   return basicProps;
 }
 
-const Skeleton = (props: SkeletonProps) => {
+interface CompoundedComponent {
+  Button: typeof SkeletonButton;
+  Avatar: typeof SkeletonAvatar;
+  Input: typeof SkeletonInput;
+  Image: typeof SkeletonImage;
+  Node: typeof SkeletonNode;
+}
+
+const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = props => {
   const {
     prefixCls: customizePrefixCls,
     loading,
     className,
     style,
     children,
-    avatar,
-    title,
-    paragraph,
+    avatar = false,
+    title = true,
+    paragraph = true,
     active,
     round,
   } = props;
@@ -98,7 +106,7 @@ const Skeleton = (props: SkeletonProps) => {
     const hasParagraph = !!paragraph;
 
     // Avatar
-    let avatarNode;
+    let avatarNode: React.ReactNode;
     if (hasAvatar) {
       const avatarProps: SkeletonAvatarProps = {
         prefixCls: `${prefixCls}-avatar`,
@@ -113,10 +121,10 @@ const Skeleton = (props: SkeletonProps) => {
       );
     }
 
-    let contentNode;
+    let contentNode: React.ReactNode;
     if (hasTitle || hasParagraph) {
       // Title
-      let $title;
+      let $title: React.ReactNode;
       if (hasTitle) {
         const titleProps: SkeletonTitleProps = {
           prefixCls: `${prefixCls}-title`,
@@ -128,7 +136,7 @@ const Skeleton = (props: SkeletonProps) => {
       }
 
       // Paragraph
-      let paragraphNode;
+      let paragraphNode: React.ReactNode;
       if (hasParagraph) {
         const paragraphProps: SkeletonParagraphProps = {
           prefixCls: `${prefixCls}-paragraph`,
@@ -168,12 +176,6 @@ const Skeleton = (props: SkeletonProps) => {
   return typeof children !== 'undefined' ? (children as React.ReactElement) : null;
 };
 
-Skeleton.defaultProps = {
-  avatar: false,
-  title: true,
-  paragraph: true,
-};
-
 Skeleton.Button = SkeletonButton;
 Skeleton.Avatar = SkeletonAvatar;
 Skeleton.Input = SkeletonInput;

components/skeleton/Title.tsx

@@ -9,7 +9,7 @@ export interface SkeletonTitleProps {
   width?: number | string;
 }
 
-const Title = ({ prefixCls, className, width, style }: SkeletonTitleProps) => (
+const Title: React.FC<SkeletonTitleProps> = ({ prefixCls, className, width, style }) => (
   <h3 className={classNames(prefixCls, className)} style={{ width, ...style }} />
 );