From 7b94e0bfb2bc84461b4bc3692e3893d1a7fa669f Mon Sep 17 00:00:00 2001
From: Rustin <rustin.liu@gmail.com>
Date: Sat, 28 Mar 2020 11:56:57 +0800
Subject: [PATCH] refactoring: replace deprecated React.SFC with
 React.FunctionComponent (#22691)

* refactor: replace deprecated React.SFC with React.FunctionComponent

* refactoring: use typedef FC
---
 components/button/button-group.tsx               | 2 +-
 components/card/Grid.tsx                         | 2 +-
 components/card/Meta.tsx                         | 2 +-
 components/config-provider/context.tsx           | 4 ++--
 components/descriptions/Item.tsx                 | 3 +--
 components/divider/index.tsx                     | 2 +-
 components/page-header/index.tsx                 | 2 +-
 components/progress/Circle.tsx                   | 5 ++---
 components/progress/Line.tsx                     | 2 +-
 components/progress/Steps.tsx                    | 2 +-
 components/result/index.tsx                      | 2 +-
 components/statistic/Number.tsx                  | 2 +-
 components/statistic/Statistic.tsx               | 2 +-
 components/timeline/Timeline.tsx                 | 2 +-
 components/timeline/TimelineItem.tsx             | 2 +-
 components/typography/Paragraph.tsx              | 2 +-
 components/typography/Text.tsx                   | 2 +-
 components/typography/Title.tsx                  | 2 +-
 site/theme/template/IconDisplay/CopyableIcon.tsx | 2 +-
 site/theme/template/IconDisplay/themeIcons.tsx   | 6 +++---
 typings/custom-typings.d.ts                      | 2 +-
 21 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index 0549a6f899..8a7a8ea319 100644
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -10,7 +10,7 @@ export interface ButtonGroupProps {
   prefixCls?: string;
 }
 
-const ButtonGroup: React.SFC<ButtonGroupProps> = props => (
+const ButtonGroup: React.FC<ButtonGroupProps> = props => (
   <ConfigConsumer>
     {({ getPrefixCls, direction }: ConfigConsumerProps) => {
       const { prefixCls: customizePrefixCls, size, className, ...others } = props;
diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx
index 562860edb1..7ae68c1e87 100644
--- a/components/card/Grid.tsx
+++ b/components/card/Grid.tsx
@@ -9,7 +9,7 @@ export interface CardGridProps {
   hoverable?: boolean;
 }
 
-const Grid: React.SFC<CardGridProps> = props => (
+const Grid: React.FC<CardGridProps> = props => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const { prefixCls: customizePrefixCls, className, hoverable = true, ...others } = props;
diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx
index 51b38d1869..b36c1bbc50 100644
--- a/components/card/Meta.tsx
+++ b/components/card/Meta.tsx
@@ -11,7 +11,7 @@ export interface CardMetaProps {
   description?: React.ReactNode;
 }
 
-const Meta: React.SFC<CardMetaProps> = props => (
+const Meta: React.FC<CardMetaProps> = props => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const {
diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx
index a57198740a..3a89db99b0 100644
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@@ -54,7 +54,7 @@ interface ConstructorProps {
 export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
   return function withConfigConsumerFunc<ComponentDef>(
     Component: IReactComponent,
-  ): React.SFC<ExportProps> & ComponentDef {
+  ): React.FC<ExportProps> & ComponentDef {
     // Wrap with ConfigConsumer. Since we need compatible with react 15, be care when using ref methods
     const SFC = ((props: ExportProps) => (
       <ConfigConsumer>
@@ -66,7 +66,7 @@ export function withConfigConsumer<ExportProps extends BasicExportProps>(config:
           return <Component {...configProps} {...props} prefixCls={prefixCls} />;
         }}
       </ConfigConsumer>
-    )) as React.SFC<ExportProps> & ComponentDef;
+    )) as React.FC<ExportProps> & ComponentDef;
 
     const cons: ConstructorProps = Component.constructor as ConstructorProps;
     const name = (cons && cons.displayName) || Component.name || 'Component';
diff --git a/components/descriptions/Item.tsx b/components/descriptions/Item.tsx
index 5b8095789b..078b071c78 100644
--- a/components/descriptions/Item.tsx
+++ b/components/descriptions/Item.tsx
@@ -9,7 +9,6 @@ export interface DescriptionsItemProps {
   span?: number;
 }
 
-const DescriptionsItem: React.SFC<DescriptionsItemProps> = ({ children }) =>
-  children as JSX.Element;
+const DescriptionsItem: React.FC<DescriptionsItemProps> = ({ children }) => children as JSX.Element;
 
 export default DescriptionsItem;
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index d72918fe0d..a76ddcadbc 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -12,7 +12,7 @@ export interface DividerProps {
   style?: React.CSSProperties;
 }
 
-const Divider: React.SFC<DividerProps> = props => (
+const Divider: React.FC<DividerProps> = props => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const {
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index 3ab64a3ff5..eaa3fa7a43 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -97,7 +97,7 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => {
   return <div className={`${prefixCls}-content`}>{children}</div>;
 };
 
-const PageHeader: React.SFC<PageHeaderProps> = props => (
+const PageHeader: React.FC<PageHeaderProps> = props => (
   <ConfigConsumer>
     {({ getPrefixCls, pageHeader, direction }: ConfigConsumerProps) => {
       const {
diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx
index 203f53d6a8..d5f1d91fed 100644
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@@ -28,7 +28,7 @@ function getStrokeColor({ successPercent, strokeColor }: CircleProps) {
   return [null, color];
 }
 
-const Circle: React.SFC<CircleProps> = props => {
+const Circle: React.FC<CircleProps> = props => {
   const {
     prefixCls,
     width,
@@ -52,8 +52,7 @@ const Circle: React.SFC<CircleProps> = props => {
   let gapDeg;
   if (gapDegree || gapDegree === 0) {
     gapDeg = gapDegree;
-  }
-  else if (type === 'dashboard') {
+  } else if (type === 'dashboard') {
     gapDeg = 75;
   }
 
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
index 9de5dc9f79..b36f8d3b17 100644
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -57,7 +57,7 @@ export const handleGradient = (strokeColor: ProgressGradient) => {
   return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
 };
 
-const Line: React.SFC<LineProps> = props => {
+const Line: React.FC<LineProps> = props => {
   const {
     prefixCls,
     percent,
diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx
index 4c10cadfbf..1f594f317b 100644
--- a/components/progress/Steps.tsx
+++ b/components/progress/Steps.tsx
@@ -6,7 +6,7 @@ interface StepsProps extends ProgressProps {
   size?: ProgressSize;
 }
 
-const Steps: React.SFC<StepsProps> = props => {
+const Steps: React.FC<StepsProps> = props => {
   const {
     size = 'default',
     steps,
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 44ea37c039..86b412eb2e 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -77,7 +77,7 @@ const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
 const renderExtra = (prefixCls: string, { extra }: ResultProps) =>
   extra && <div className={`${prefixCls}-extra`}>{extra}</div>;
 
-export interface ResultType extends React.SFC<ResultProps> {
+export interface ResultType extends React.FC<ResultProps> {
   PRESENTED_IMAGE_404: React.ReactNode;
   PRESENTED_IMAGE_403: React.ReactNode;
   PRESENTED_IMAGE_500: React.ReactNode;
diff --git a/components/statistic/Number.tsx b/components/statistic/Number.tsx
index 24ab3b7181..39b01e2ad5 100644
--- a/components/statistic/Number.tsx
+++ b/components/statistic/Number.tsx
@@ -6,7 +6,7 @@ interface NumberProps extends FormatConfig {
   value: valueType;
 }
 
-const StatisticNumber: React.SFC<NumberProps> = props => {
+const StatisticNumber: React.FC<NumberProps> = props => {
   const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props;
 
   let valueNode: React.ReactNode;
diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index 2478c39397..cf15d6ff5d 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -23,7 +23,7 @@ export interface StatisticProps extends FormatConfig {
   suffix?: React.ReactNode;
 }
 
-const Statistic: React.SFC<StatisticProps & ConfigConsumerProps> = props => {
+const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
   const {
     prefixCls,
     className,
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index e82db2c3b0..7f2f902c43 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -17,7 +17,7 @@ export interface TimelineProps {
 }
 
 export default class Timeline extends React.Component<TimelineProps, any> {
-  static Item: React.SFC<TimeLineItemProps> = TimelineItem;
+  static Item: React.FC<TimeLineItemProps> = TimelineItem;
 
   static defaultProps = {
     reverse: false,
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index 1e5692bd9b..16c4c0be7d 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -14,7 +14,7 @@ export interface TimeLineItemProps {
   label?: React.ReactNode;
 }
 
-const TimelineItem: React.SFC<TimeLineItemProps> = props => (
+const TimelineItem: React.FC<TimeLineItemProps> = props => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const {
diff --git a/components/typography/Paragraph.tsx b/components/typography/Paragraph.tsx
index 3d566fda17..1096eaa30e 100644
--- a/components/typography/Paragraph.tsx
+++ b/components/typography/Paragraph.tsx
@@ -3,6 +3,6 @@ import Base, { BlockProps } from './Base';
 
 export interface ParagraphProps extends BlockProps {}
 
-const Paragraph: React.SFC<ParagraphProps> = props => <Base {...props} component="div" />;
+const Paragraph: React.FC<ParagraphProps> = props => <Base {...props} component="div" />;
 
 export default Paragraph;
diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx
index 25c816521a..27dadfbefb 100644
--- a/components/typography/Text.tsx
+++ b/components/typography/Text.tsx
@@ -6,7 +6,7 @@ export interface TextProps extends BlockProps {
   ellipsis?: boolean;
 }
 
-const Text: React.SFC<TextProps> = ({ ellipsis, ...restProps }) => {
+const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
   warning(
     typeof ellipsis !== 'object',
     'Typography.Text',
diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx
index a78d8bee66..37b6943061 100644
--- a/components/typography/Title.tsx
+++ b/components/typography/Title.tsx
@@ -7,7 +7,7 @@ const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4);
 
 export type TitleProps = Omit<BlockProps & { level?: typeof TITLE_ELE_LIST[number] }, 'strong'>;
 
-const Title: React.SFC<TitleProps> = props => {
+const Title: React.FC<TitleProps> = props => {
   const { level = 1, ...restProps } = props;
   let component: string;
 
diff --git a/site/theme/template/IconDisplay/CopyableIcon.tsx b/site/theme/template/IconDisplay/CopyableIcon.tsx
index 46dbc2778b..5aec8bb492 100644
--- a/site/theme/template/IconDisplay/CopyableIcon.tsx
+++ b/site/theme/template/IconDisplay/CopyableIcon.tsx
@@ -17,7 +17,7 @@ export interface CopyableIconProps {
   onCopied: (type: string, text: string) => any;
 }
 
-const CopyableIcon: React.SFC<CopyableIconProps> = ({
+const CopyableIcon: React.FC<CopyableIconProps> = ({
   name,
   isNew,
   justCopied,
diff --git a/site/theme/template/IconDisplay/themeIcons.tsx b/site/theme/template/IconDisplay/themeIcons.tsx
index 7b16a3bf47..15ef13b1aa 100644
--- a/site/theme/template/IconDisplay/themeIcons.tsx
+++ b/site/theme/template/IconDisplay/themeIcons.tsx
@@ -12,7 +12,7 @@ interface CustomIconComponentProps {
   ['aria-hidden']?: React.AriaAttributes['aria-hidden'];
 }
 
-export const FilledIcon: React.SFC<CustomIconComponentProps> = props => {
+export const FilledIcon: React.FC<CustomIconComponentProps> = props => {
   const path =
     'M864 64H160C107 64 64 107 64 160v' +
     '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
@@ -24,7 +24,7 @@ export const FilledIcon: React.SFC<CustomIconComponentProps> = props => {
   );
 };
 
-export const OutlinedIcon: React.SFC<CustomIconComponentProps> = props => {
+export const OutlinedIcon: React.FC<CustomIconComponentProps> = props => {
   const path =
     'M864 64H160C107 64 64 107 64 160v7' +
     '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
@@ -38,7 +38,7 @@ export const OutlinedIcon: React.SFC<CustomIconComponentProps> = props => {
   );
 };
 
-export const TwoToneIcon: React.SFC<CustomIconComponentProps> = props => {
+export const TwoToneIcon: React.FC<CustomIconComponentProps> = props => {
   const path =
     'M16 512c0 273.932 222.066 496 496 49' +
     '6s496-222.068 496-496S785.932 16 512 16 16 238.' +
diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts
index cf1f4766d8..05245aa613 100644
--- a/typings/custom-typings.d.ts
+++ b/typings/custom-typings.d.ts
@@ -2,7 +2,7 @@
 declare module '*.svg' {
   import * as React from 'react';
 
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
 
   const src: string;
   export default src;