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

@@ -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;

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;

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 {

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';

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;

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 {

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 {

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;
   }
 

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,

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,

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;

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;

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,

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,

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 {

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;

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',

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;
 

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,

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.' +

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;