mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactoring: replace deprecated React.SFC with React.FunctionComponent (#22691)

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

* refactoring: use typedef FC
This commit is contained in:
Rustin 2020-03-28 11:56:57 +08:00 committed by GitHub
parent 9e38928379
commit 7b94e0bfb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/button/button-group.tsx
View File

@ -10,7 +10,7 @@ export interface ButtonGroupProps {
prefixCls?: string; prefixCls?: string;
} }
const ButtonGroup: React.SFC<ButtonGroupProps> = props => ( const ButtonGroup: React.FC<ButtonGroupProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls, direction }: ConfigConsumerProps) => { {({ getPrefixCls, direction }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, size, className, ...others } = props; const { prefixCls: customizePrefixCls, size, className, ...others } = props;

2
components/card/Grid.tsx
View File

@ -9,7 +9,7 @@ export interface CardGridProps {
hoverable?: boolean; hoverable?: boolean;
} }
const Grid: React.SFC<CardGridProps> = props => ( const Grid: React.FC<CardGridProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => { {({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, className, hoverable = true, ...others } = props; const { prefixCls: customizePrefixCls, className, hoverable = true, ...others } = props;

2
components/card/Meta.tsx
View File

@ -11,7 +11,7 @@ export interface CardMetaProps {
description?: React.ReactNode; description?: React.ReactNode;
} }
const Meta: React.SFC<CardMetaProps> = props => ( const Meta: React.FC<CardMetaProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => { {({ getPrefixCls }: ConfigConsumerProps) => {
const { const {

4
components/config-provider/context.tsx
View File

@ -54,7 +54,7 @@ interface ConstructorProps {
export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) { export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
return function withConfigConsumerFunc<ComponentDef>( return function withConfigConsumerFunc<ComponentDef>(
Component: IReactComponent, 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 // Wrap with ConfigConsumer. Since we need compatible with react 15, be care when using ref methods
const SFC = ((props: ExportProps) => ( const SFC = ((props: ExportProps) => (
<ConfigConsumer> <ConfigConsumer>
@ -66,7 +66,7 @@ export function withConfigConsumer<ExportProps extends BasicExportProps>(config:
return <Component {...configProps} {...props} prefixCls={prefixCls} />; return <Component {...configProps} {...props} prefixCls={prefixCls} />;
}} }}
</ConfigConsumer> </ConfigConsumer>
)) as React.SFC<ExportProps> & ComponentDef; )) as React.FC<ExportProps> & ComponentDef;
const cons: ConstructorProps = Component.constructor as ConstructorProps; const cons: ConstructorProps = Component.constructor as ConstructorProps;
const name = (cons && cons.displayName) || Component.name || 'Component'; const name = (cons && cons.displayName) || Component.name || 'Component';

3
components/descriptions/Item.tsx
View File

@ -9,7 +9,6 @@ export interface DescriptionsItemProps {
span?: number; span?: number;
} }
const DescriptionsItem: React.SFC<DescriptionsItemProps> = ({ children }) => const DescriptionsItem: React.FC<DescriptionsItemProps> = ({ children }) => children as JSX.Element;
children as JSX.Element;
export default DescriptionsItem; export default DescriptionsItem;

2
components/divider/index.tsx
View File

@ -12,7 +12,7 @@ export interface DividerProps {
style?: React.CSSProperties; style?: React.CSSProperties;
} }
const Divider: React.SFC<DividerProps> = props => ( const Divider: React.FC<DividerProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => { {({ getPrefixCls }: ConfigConsumerProps) => {
const { const {

2
components/page-header/index.tsx
View File

@ -97,7 +97,7 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => {
return <div className={`${prefixCls}-content`}>{children}</div>; return <div className={`${prefixCls}-content`}>{children}</div>;
}; };
const PageHeader: React.SFC<PageHeaderProps> = props => ( const PageHeader: React.FC<PageHeaderProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls, pageHeader, direction }: ConfigConsumerProps) => { {({ getPrefixCls, pageHeader, direction }: ConfigConsumerProps) => {
const { const {

5
components/progress/Circle.tsx
View File

@ -28,7 +28,7 @@ function getStrokeColor({ successPercent, strokeColor }: CircleProps) {
return [null, color]; return [null, color];
} }
const Circle: React.SFC<CircleProps> = props => { const Circle: React.FC<CircleProps> = props => {
const { const {
prefixCls, prefixCls,
width, width,
@ -52,8 +52,7 @@ const Circle: React.SFC<CircleProps> = props => {
let gapDeg; let gapDeg;
if (gapDegree || gapDegree === 0) { if (gapDegree || gapDegree === 0) {
gapDeg = gapDegree; gapDeg = gapDegree;
} } else if (type === 'dashboard') {
else if (type === 'dashboard') {
gapDeg = 75; gapDeg = 75;
} }

2
components/progress/Line.tsx
View File

@ -57,7 +57,7 @@ export const handleGradient = (strokeColor: ProgressGradient) => {
return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` }; return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
}; };
const Line: React.SFC<LineProps> = props => { const Line: React.FC<LineProps> = props => {
const { const {
prefixCls, prefixCls,
percent, percent,

2
components/progress/Steps.tsx
View File

@ -6,7 +6,7 @@ interface StepsProps extends ProgressProps {
size?: ProgressSize; size?: ProgressSize;
} }
const Steps: React.SFC<StepsProps> = props => { const Steps: React.FC<StepsProps> = props => {
const { const {
size = 'default', size = 'default',
steps, steps,

2
components/result/index.tsx
View File

@ -77,7 +77,7 @@ const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
const renderExtra = (prefixCls: string, { extra }: ResultProps) => const renderExtra = (prefixCls: string, { extra }: ResultProps) =>
extra && <div className={`${prefixCls}-extra`}>{extra}</div>; 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_404: React.ReactNode;
PRESENTED_IMAGE_403: React.ReactNode; PRESENTED_IMAGE_403: React.ReactNode;
PRESENTED_IMAGE_500: React.ReactNode; PRESENTED_IMAGE_500: React.ReactNode;

2
components/statistic/Number.tsx
View File

@ -6,7 +6,7 @@ interface NumberProps extends FormatConfig {
value: valueType; value: valueType;
} }
const StatisticNumber: React.SFC<NumberProps> = props => { const StatisticNumber: React.FC<NumberProps> = props => {
const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props; const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props;
let valueNode: React.ReactNode; let valueNode: React.ReactNode;

2
components/statistic/Statistic.tsx
View File

@ -23,7 +23,7 @@ export interface StatisticProps extends FormatConfig {
suffix?: React.ReactNode; suffix?: React.ReactNode;
} }
const Statistic: React.SFC<StatisticProps & ConfigConsumerProps> = props => { const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
const { const {
prefixCls, prefixCls,
className, className,

2
components/timeline/Timeline.tsx
View File

@ -17,7 +17,7 @@ export interface TimelineProps {
} }
export default class Timeline extends React.Component<TimelineProps, any> { export default class Timeline extends React.Component<TimelineProps, any> {
static Item: React.SFC<TimeLineItemProps> = TimelineItem; static Item: React.FC<TimeLineItemProps> = TimelineItem;
static defaultProps = { static defaultProps = {
reverse: false, reverse: false,

2
components/timeline/TimelineItem.tsx
View File

@ -14,7 +14,7 @@ export interface TimeLineItemProps {
label?: React.ReactNode; label?: React.ReactNode;
} }
const TimelineItem: React.SFC<TimeLineItemProps> = props => ( const TimelineItem: React.FC<TimeLineItemProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => { {({ getPrefixCls }: ConfigConsumerProps) => {
const { const {

2
components/typography/Paragraph.tsx
View File

@ -3,6 +3,6 @@ import Base, { BlockProps } from './Base';
export interface ParagraphProps extends BlockProps {} 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; export default Paragraph;

2
components/typography/Text.tsx
View File

@ -6,7 +6,7 @@ export interface TextProps extends BlockProps {
ellipsis?: boolean; ellipsis?: boolean;
} }
const Text: React.SFC<TextProps> = ({ ellipsis, ...restProps }) => { const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
warning( warning(
typeof ellipsis !== 'object', typeof ellipsis !== 'object',
'Typography.Text', 'Typography.Text',

2
components/typography/Title.tsx
View File

@ -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'>; 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; const { level = 1, ...restProps } = props;
let component: string; let component: string;

2
site/theme/template/IconDisplay/CopyableIcon.tsx
View File

@ -17,7 +17,7 @@ export interface CopyableIconProps {
onCopied: (type: string, text: string) => any; onCopied: (type: string, text: string) => any;
} }
const CopyableIcon: React.SFC<CopyableIconProps> = ({ const CopyableIcon: React.FC<CopyableIconProps> = ({
name, name,
isNew, isNew,
justCopied, justCopied,

6
site/theme/template/IconDisplay/themeIcons.tsx
View File

@ -12,7 +12,7 @@ interface CustomIconComponentProps {
['aria-hidden']?: React.AriaAttributes['aria-hidden']; ['aria-hidden']?: React.AriaAttributes['aria-hidden'];
} }
export const FilledIcon: React.SFC<CustomIconComponentProps> = props => { export const FilledIcon: React.FC<CustomIconComponentProps> = props => {
const path = const path =
'M864 64H160C107 64 64 107 64 160v' + 'M864 64H160C107 64 64 107 64 160v' +
'704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' + '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 = const path =
'M864 64H160C107 64 64 107 64 160v7' + 'M864 64H160C107 64 64 107 64 160v7' +
'04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' + '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 = const path =
'M16 512c0 273.932 222.066 496 496 49' + 'M16 512c0 273.932 222.066 496 496 49' +
'6s496-222.068 496-496S785.932 16 512 16 16 238.' + '6s496-222.068 496-496S785.932 16 512 16 16 238.' +

2
typings/custom-typings.d.ts vendored
View File

@ -2,7 +2,7 @@
declare module '*.svg' { declare module '*.svg' {
import * as React from 'react'; import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string; const src: string;
export default src; export default src;