[7.x] Update deprecated React.SFC and React.StatelessComponent types (#50852) (#51336)

This commit is contained in:
patrykkopycinski 2019-11-22 13:12:30 +01:00 committed by GitHub
parent b0de8b18ff
commit 9efe076d04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
127 changed files with 217 additions and 210 deletions

View file

@ -21,7 +21,7 @@ The first thing that will probably happen when you convert a `.js` file in our s
declare module '@elastic/eui' {
// Add your types here
export const EuiPopoverTitle: React.SFC<EuiPopoverTitleProps>;
export const EuiPopoverTitle: React.FC<EuiPopoverTitleProps>;
...
}
```
@ -47,13 +47,13 @@ Since `@elastic/eui` already ships with a module declaration, any local addition
// file `typings/@elastic/eui/index.d.ts`
import { CommonProps } from '@elastic/eui';
import { SFC } from 'react';
import { FC } from 'react';
declare module '@elastic/eui' {
export type EuiNewComponentProps = CommonProps & {
additionalProp: string;
};
export const EuiNewComponent: SFC<EuiNewComponentProps>;
export const EuiNewComponent: FC<EuiNewComponentProps>;
}
```

View file

@ -71,7 +71,26 @@ module.exports = {
// Old recommended tslint rules
'@typescript-eslint/adjacent-overload-signatures': 'error',
'@typescript-eslint/array-type': ['error', { default: 'array-simple', readonly: 'array-simple' }],
'@typescript-eslint/ban-types': 'error',
'@typescript-eslint/ban-types': ['error', {
types: {
SFC: {
message: 'Use FC or FunctionComponent instead.',
fixWith: 'FC'
},
'React.SFC': {
message: 'Use FC or FunctionComponent instead.',
fixWith: 'React.FC'
},
StatelessComponent: {
message: 'Use FunctionComponent instead.',
fixWith: 'FunctionComponent'
},
'React.StatelessComponent': {
message: 'Use FunctionComponent instead.',
fixWith: 'React.FunctionComponent'
}
}
}],
'camelcase': 'off',
'@typescript-eslint/camelcase': ['error', {
'properties': 'never',

View file

@ -28,7 +28,7 @@
"intl-messageformat": "^2.2.0",
"intl-relativeformat": "^2.1.0",
"prop-types": "^15.6.2",
"react": "^16.6.0",
"react": "^16.8.0",
"react-intl": "^2.8.0"
}
}

View file

@ -19,7 +19,7 @@
"focus-trap-react": "^3.1.1",
"lodash": "npm:@elastic/lodash@3.10.1-kibana3",
"prop-types": "15.6.0",
"react": "^16.2.0",
"react": "^16.8.0",
"react-ace": "^5.9.0",
"react-color": "^2.13.8",
"tabbable": "1.1.3",
@ -57,7 +57,7 @@
"postcss": "^7.0.5",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.1.0",
"react-dom": "^16.2.0",
"react-dom": "^16.8.0",
"react-redux": "^5.0.6",
"react-router": "^3.2.0",
"react-router-redux": "^4.0.8",

View file

@ -39,7 +39,7 @@ interface Props {
redirectTo?: (path: string) => void;
}
export const AppRouter: React.StatelessComponent<Props> = ({
export const AppRouter: React.FunctionComponent<Props> = ({
history,
redirectTo = (path: string) => (window.location.href = path),
...otherProps

View file

@ -19,7 +19,7 @@
import { EuiBadge, useInnerText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { SFC } from 'react';
import React, { FC } from 'react';
import { FilterLabel } from '../filter_editor/lib/filter_label';
import { esFilters } from '../../../../../../../plugins/data/public';
@ -29,7 +29,7 @@ interface Props {
[propName: string]: any;
}
export const FilterView: SFC<Props> = ({
export const FilterView: FC<Props> = ({
filter,
iconOnClick,
onClick,

View file

@ -35,18 +35,18 @@ import { injectUICapabilities } from './inject_ui_capabilities';
import { UICapabilitiesProvider } from './ui_capabilities_provider';
describe('injectUICapabilities', () => {
it('provides UICapabilities to SFCs', () => {
interface SFCProps {
it('provides UICapabilities to FCs', () => {
interface FCProps {
uiCapabilities: UICapabilities;
}
const MySFC = injectUICapabilities(({ uiCapabilities }: SFCProps) => {
const MyFC = injectUICapabilities(({ uiCapabilities }: FCProps) => {
return <span>{uiCapabilities.uiCapability2.nestedProp}</span>;
});
const wrapper = mount(
<UICapabilitiesProvider>
<MySFC />
<MyFC />
</UICapabilitiesProvider>
);

View file

@ -35,18 +35,18 @@ import { injectUICapabilities } from './inject_ui_capabilities';
import { UICapabilitiesProvider } from './ui_capabilities_provider';
describe('injectUICapabilities', () => {
it('provides UICapabilities to SFCs', () => {
interface SFCProps {
it('provides UICapabilities to FCs', () => {
interface FCProps {
uiCapabilities: UICapabilities;
}
const MySFC = injectUICapabilities(({ uiCapabilities }: SFCProps) => {
const MyFC = injectUICapabilities(({ uiCapabilities }: FCProps) => {
return <span>{uiCapabilities.uiCapability2.nestedProp}</span>;
});
const wrapper = mount(
<UICapabilitiesProvider>
<MySFC />
<MyFC />
</UICapabilitiesProvider>
);

View file

@ -21,7 +21,7 @@ import React from 'react';
import { UICapabilitiesContext } from './ui_capabilities_context';
import { capabilities } from '..';
export const UICapabilitiesProvider: React.SFC = props => (
export const UICapabilitiesProvider: React.FC = props => (
<UICapabilitiesContext.Provider value={capabilities.get()}>
{props.children}
</UICapabilitiesContext.Provider>

View file

@ -27,7 +27,7 @@ import { npStart } from 'ui/new_platform';
export const I18nContext = npStart.core.i18n.Context;
export function wrapInI18nContext<P>(ComponentToWrap: React.ComponentType<P>) {
const ContextWrapper: React.SFC<P> = props => {
const ContextWrapper: React.FC<P> = props => {
return (
<I18nContext>
<ComponentToWrap {...props} />

View file

@ -21,10 +21,10 @@ declare module 'ui/management' {
export const PAGE_TITLE_COMPONENT: string;
export const PAGE_SUBTITLE_COMPONENT: string;
export const PAGE_FOOTER_COMPONENT: string;
export const SidebarNav: React.SFC<any>;
export const SidebarNav: React.FC<any>;
export function registerSettingsComponent(
id: string,
component: string | React.SFC<any>,
component: string | React.FC<any>,
allowOverride: boolean
): void;
export const management: any; // TODO - properly provide types

View file

@ -21,9 +21,9 @@ import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
// TODO: Remove once typescript definitions are in EUI
declare module '@elastic/eui' {
export const EuiSideNav: React.SFC<any>;
export const EuiDescribedFormGroup: React.SFC<any>;
export const EuiCodeEditor: React.SFC<any>;
export const EuiSideNav: React.FC<any>;
export const EuiDescribedFormGroup: React.FC<any>;
export const EuiCodeEditor: React.FC<any>;
export const Query: any;
export interface EuiTableCriteria {

View file

@ -21,7 +21,7 @@ import { useTrackPageview } from '../../../../../infra/public';
import { PROJECTION } from '../../../../common/projections/typings';
import { LocalUIFilters } from '../../shared/LocalUIFilters';
const ErrorGroupOverview: React.SFC = () => {
const ErrorGroupOverview: React.FC = () => {
const { urlParams, uiFilters } = useUrlParams();
const { serviceName, start, end, sortField, sortDirection } = urlParams;

View file

@ -19,7 +19,7 @@ interface Props {
previewHeight: number;
}
export const TruncateHeightSection: React.SFC<Props> = ({
export const TruncateHeightSection: React.FC<Props> = ({
children,
previewHeight
}) => {

View file

@ -112,7 +112,7 @@ interface SpanActionToolTipProps {
item?: IWaterfallItem;
}
const SpanActionToolTip: React.SFC<SpanActionToolTipProps> = ({
const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
item,
children
}) => {

View file

@ -110,7 +110,7 @@ interface Props {
isLoading: boolean;
}
export const WaterfallWithSummmary: React.SFC<Props> = ({
export const WaterfallWithSummmary: React.FC<Props> = ({
urlParams,
location,
waterfall,

View file

@ -14,7 +14,7 @@ interface Props {
hideSubheading?: boolean;
}
const EmptyMessage: React.SFC<Props> = ({
const EmptyMessage: React.FC<Props> = ({
heading = i18n.translate('xpack.apm.emptyMessage.noDataFoundLabel', {
defaultMessage: 'No data found.'
}),

View file

@ -6,7 +6,7 @@
import React, { useEffect, useRef } from 'react';
export const HeightRetainer: React.SFC = props => {
export const HeightRetainer: React.FC = props => {
const containerElement = useRef<HTMLDivElement>(null);
const minHeight = useRef<number>(0);

View file

@ -32,7 +32,7 @@ function getDiscoverQuery(error: APMError, kuery?: string) {
};
}
const DiscoverErrorLink: React.SFC<{
const DiscoverErrorLink: React.FC<{
readonly error: APMError;
readonly kuery?: string;
}> = ({ error, kuery, children }) => {

View file

@ -22,7 +22,7 @@ function getDiscoverQuery(span: Span) {
};
}
export const DiscoverSpanLink: React.SFC<{
export const DiscoverSpanLink: React.FC<{
readonly span: Span;
}> = ({ span, children }) => {
return <DiscoverLink query={getDiscoverQuery(span)} children={children} />;

View file

@ -32,7 +32,7 @@ export function getDiscoverQuery(transaction: Transaction) {
};
}
export const DiscoverTransactionLink: React.SFC<{
export const DiscoverTransactionLink: React.FC<{
readonly transaction: Transaction;
}> = ({ transaction, children }) => {
return (

View file

@ -13,7 +13,7 @@ interface Props {
transactionType?: string;
}
export const MLJobLink: React.SFC<Props> = ({
export const MLJobLink: React.FC<Props> = ({
serviceName,
transactionType,
children

View file

@ -30,7 +30,7 @@ interface Props {
isLibraryFrame: boolean;
}
const FrameHeading: React.SFC<Props> = ({ stackframe, isLibraryFrame }) => {
const FrameHeading: React.FC<Props> = ({ stackframe, isLibraryFrame }) => {
const FileDetail = isLibraryFrame
? LibraryFrameFileDetail
: AppFrameFileDetail;

View file

@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
import { asDuration, asInteger } from '../../../../../utils/formatters';
import { fontSizes } from '../../../../../style/variables';
export const ChoroplethToolTip: React.SFC<{
export const ChoroplethToolTip: React.FC<{
name: string;
value: number;
docCount: number;

View file

@ -65,7 +65,7 @@ const getMin = (items: ChoroplethItem[]) =>
const getMax = (items: ChoroplethItem[]) =>
Math.max(...items.map(item => item.value));
export const ChoroplethMap: React.SFC<Props> = props => {
export const ChoroplethMap: React.FC<Props> = props => {
const { items } = props;
const containerRef = useRef<HTMLDivElement>(null);

View file

@ -11,7 +11,7 @@ import { useAvgDurationByCountry } from '../../../../../hooks/useAvgDurationByCo
import { ChoroplethMap } from '../ChoroplethMap';
export const DurationByCountryMap: React.SFC = () => {
export const DurationByCountryMap: React.FC = () => {
const { data } = useAvgDurationByCountry();
return (

View file

@ -265,7 +265,7 @@ const withSuggestionsHidden = (state: AutocompleteFieldState) => ({
selectedIndex: null,
});
const FixedEuiFieldSearch: React.SFC<React.InputHTMLAttributes<HTMLInputElement> &
const FixedEuiFieldSearch: React.FC<React.InputHTMLAttributes<HTMLInputElement> &
EuiFieldSearchProps & {
inputRef?: (element: HTMLInputElement | null) => void;
onSearch: (value: string) => void;

View file

@ -18,7 +18,7 @@ interface SuggestionItemProps {
suggestion: AutocompleteSuggestion;
}
export const SuggestionItem: React.SFC<SuggestionItemProps> = props => {
export const SuggestionItem: React.FC<SuggestionItemProps> = props => {
const { isSelected, onClick, onMouseEnter, suggestion } = props;
return (

View file

@ -28,7 +28,7 @@ const pagination = {
hidePerPageOptions: true,
};
const ConfigListUi: React.SFC<ComponentProps> = props => (
const ConfigListUi: React.FC<ComponentProps> = props => (
<EuiBasicTable
items={props.configs.list || []}
itemId="id"

View file

@ -14,7 +14,7 @@ import { CommonProps } from '@elastic/eui/src/components/common';
import { FormsyInputProps, withFormsy } from 'formsy-react';
import React, { Component, InputHTMLAttributes } from 'react';
const FixedSelect = EuiSelect as React.SFC<any>;
const FixedSelect = EuiSelect as React.FC<any>;
interface ComponentProps extends FormsyInputProps, CommonProps {
instantValidation: boolean;

View file

@ -14,7 +14,7 @@ interface LayoutProps {
modalClosePath?: string;
}
export const NoDataLayout: React.SFC<LayoutProps> = withRouter<any>(
export const NoDataLayout: React.FC<LayoutProps> = withRouter<any>(
({ actionSection, title, modalClosePath, children, history }) => {
return (
<EuiFlexGroup justifyContent="spaceAround">

View file

@ -24,7 +24,7 @@ interface LayoutProps {
activePath: string;
}
export const WalkthroughLayout: React.SFC<LayoutProps> = ({
export const WalkthroughLayout: React.FC<LayoutProps> = ({
walkthroughSteps,
title,
activePath,

View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
import * as React from 'react';
export const Loading: React.SFC<{}> = () => (
export const Loading: React.FC<{}> = () => (
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" />

View file

@ -48,7 +48,7 @@ interface BreadcrumbProps extends RouteProps {
parentBreadcrumbs?: BreadcrumbData[];
}
export const Breadcrumb: React.SFC<BreadcrumbProps> = ({ title, path, parentBreadcrumbs }) => (
export const Breadcrumb: React.FC<BreadcrumbProps> = ({ title, path, parentBreadcrumbs }) => (
<BreadcrumbConsumer>
{context => (
<BreadcrumbManager

View file

@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { SFC } from 'react';
import React, { FC } from 'react';
import { Route, Switch } from 'react-router-dom';
interface RouteConfig {
@ -12,7 +12,7 @@ interface RouteConfig {
routes?: RouteConfig[];
}
export const ChildRoutes: SFC<{
export const ChildRoutes: FC<{
routes?: RouteConfig[];
useSwitch?: boolean;
[other: string]: any;

View file

@ -18,7 +18,7 @@ interface ComponentProps extends ControlSchema {
actionHandler(action: AssignmentActionType, payload?: any): void;
}
export const OptionControl: React.SFC<ComponentProps> = (props: ComponentProps) => {
export const OptionControl: React.FC<ComponentProps> = (props: ComponentProps) => {
switch (props.type) {
case ActionComponentType.Action:
if (!props.action) {

View file

@ -90,7 +90,7 @@ export const WithURLState = withRouter<any>(WithURLStateComponent);
export function withUrlState<OP>(
UnwrappedComponent: React.ComponentType<OP & URLStateProps>
): React.SFC<any> {
): React.FC<any> {
return (origProps: OP) => {
return (
<WithURLState>

View file

@ -17,7 +17,7 @@ type Props = AppPageProps & {
intl: InjectedIntl;
};
const InitialWalkthroughPageComponent: React.SFC<Props> = props => {
const InitialWalkthroughPageComponent: React.FC<Props> = props => {
if (props.location.pathname === '/walkthrough/initial') {
return (
<NoDataLayout

View file

@ -11,6 +11,6 @@
import * as eui from '@elastic/eui';
import { Moment } from 'moment';
import { ChangeEventHandler, MouseEventHandler, ReactType, Ref, SFC } from 'react';
import { ChangeEventHandler, MouseEventHandler, ReactType, Ref, FC } from 'react';
declare module '@elastic/eui' {}

View file

@ -5,8 +5,8 @@
*/
declare module 'formsy-react' {
import React, { SFC } from 'react';
let Formsy: SFC<any>;
import React, { FC } from 'react';
let Formsy: FC<any>;
export interface FormsyInputProps {
getErrorMessage(): any;
getValue(): any;
@ -43,6 +43,6 @@ declare module 'formsy-react' {
// function withFormsy<ComponentProps = any>(
// component:
// | React.Component<IFormsyDecorator & ComponentProps>
// | SFC<IFormsyDecorator & ComponentProps>
// | FC<IFormsyDecorator & ComponentProps>
// ): React.Component<IFormsyDecorator & ComponentProps>;
}

View file

@ -80,10 +80,10 @@ function areAllElementsInResolvedArgs(workpad: Workpad, resolvedArgs: ResolvedAr
export const withUnconnectedElementsLoadedTelemetry = function<P extends object>(
Component: React.ComponentType<P>,
trackMetric = trackCanvasUiMetric
): React.SFC<P & ElementsLoadedTelemetryProps> {
): React.FC<P & ElementsLoadedTelemetryProps> {
return function ElementsLoadedTelemetry(
props: P & ElementsLoadedTelemetryProps
): React.SFCElement<P> {
): React.FunctionComponentElement<P> {
const { telemetryElementCounts, workpad, telemetryResolvedArgs, ...other } = props;
const [currentWorkpadId, setWorkpadId] = useState<string | undefined>(undefined);

View file

@ -302,7 +302,7 @@ const withUnfocused = (state: AutocompleteFieldState) => ({
isFocused: false,
});
const FixedEuiFieldSearch: React.SFC<React.InputHTMLAttributes<HTMLInputElement> &
const FixedEuiFieldSearch: React.FC<React.InputHTMLAttributes<HTMLInputElement> &
EuiFieldSearchProps & {
inputRef?: (element: HTMLInputElement | null) => void;
onSearch: (value: string) => void;

View file

@ -18,7 +18,7 @@ interface Props {
suggestion: AutocompleteSuggestion;
}
export const SuggestionItem: React.SFC<Props> = props => {
export const SuggestionItem: React.FC<Props> = props => {
const { isSelected, onClick, onMouseEnter, suggestion } = props;
return (

View file

@ -17,7 +17,7 @@ interface NoDataProps {
testString?: string;
}
export const NoData: React.SFC<NoDataProps> = ({
export const NoData: React.FC<NoDataProps> = ({
titleText,
bodyText,
refetchText,

View file

@ -16,7 +16,7 @@ interface NoIndicesProps {
'data-test-subj'?: string;
}
export const NoIndices: React.SFC<NoIndicesProps> = ({ actions, message, title, ...rest }) => (
export const NoIndices: React.FC<NoIndicesProps> = ({ actions, message, title, ...rest }) => (
<CenteredEmptyPrompt
title={<h2>{title}</h2>}
body={<p>{message}</p>}

View file

@ -24,7 +24,7 @@ interface Props {
shortMessage: React.ReactNode;
}
export const ErrorPage: React.SFC<Props> = ({ detailedMessage, retry, shortMessage }) => (
export const ErrorPage: React.FC<Props> = ({ detailedMessage, retry, shortMessage }) => (
<FlexPage>
<EuiPageBody>
<MinimumPageContent

View file

@ -20,7 +20,7 @@ interface DensityChartProps {
height: number;
}
export const DensityChart: React.SFC<DensityChartProps> = ({
export const DensityChart: React.FC<DensityChartProps> = ({
buckets,
start,
end,

View file

@ -17,7 +17,7 @@ interface HighlightedIntervalProps {
target: number | null;
}
export const HighlightedInterval: React.SFC<HighlightedIntervalProps> = ({
export const HighlightedInterval: React.FC<HighlightedIntervalProps> = ({
className,
end,
getPositionOfTime,

View file

@ -17,7 +17,7 @@ interface TimeRulerProps {
width: number;
}
export const TimeRuler: React.SFC<TimeRulerProps> = ({ end, height, start, tickCount, width }) => {
export const TimeRuler: React.FC<TimeRulerProps> = ({ end, height, start, tickCount, width }) => {
const yScale = scaleTime()
.domain([start, end])
.range([0, height]);

View file

@ -114,7 +114,7 @@ interface ProgressEntryProps {
isLoading: boolean;
}
const ProgressEntry: React.SFC<ProgressEntryProps> = props => {
const ProgressEntry: React.FC<ProgressEntryProps> = props => {
const { alignment, children, className, color, isLoading } = props;
// NOTE: styled-components seems to make all props in EuiProgress required, so this

View file

@ -35,7 +35,7 @@ const createTickRender = (bounds: InfraWaffleMapBounds, formatter: InfraFormatte
);
};
export const GradientLegend: React.SFC<Props> = ({ legend, bounds, formatter }) => {
export const GradientLegend: React.FC<Props> = ({ legend, bounds, formatter }) => {
const maxValue = legend.rules.reduce((acc, rule) => {
return acc < rule.value ? rule.value : acc;
}, 0);

View file

@ -26,7 +26,7 @@ interface Props {
timeRange: InfraTimerangeInput;
}
export const GroupOfGroups: React.SFC<Props> = props => {
export const GroupOfGroups: React.FC<Props> = props => {
return (
<GroupOfGroupsContainer>
<GroupName group={props.group} onDrilldown={props.onDrilldown} options={props.options} />

View file

@ -27,7 +27,7 @@ interface Props {
timeRange: InfraTimerangeInput;
}
export const GroupOfNodes: React.SFC<Props> = ({
export const GroupOfNodes: React.FC<Props> = ({
group,
options,
formatter,

View file

@ -24,7 +24,7 @@ interface LegendControlOptions {
bounds: InfraWaffleMapBounds;
}
export const Legend: React.SFC<Props> = ({ dataBounds, legend, bounds, formatter }) => {
export const Legend: React.FC<Props> = ({ dataBounds, legend, bounds, formatter }) => {
return (
<LegendContainer>
<WithWaffleOptions>

View file

@ -30,7 +30,7 @@ interface Props {
dataBounds: InfraWaffleMapBounds;
}
export const Map: React.SFC<Props> = ({
export const Map: React.FC<Props> = ({
nodes,
options,
timeRange,

View file

@ -43,7 +43,7 @@ const createStep = (formatter: InfraFormatter) => (rule: InfraWaffleMapStepRule,
);
};
export const StepLegend: React.SFC<Props> = ({ legend, formatter }) => {
export const StepLegend: React.FC<Props> = ({ legend, formatter }) => {
return <StepLegendContainer>{legend.rules.map(createStep(formatter))}</StepLegendContainer>;
};

View file

@ -63,7 +63,7 @@ type LogFilterUrlState = ReturnType<typeof logFilterSelectors.selectLogFilterQue
type WithLogFilterUrlStateProps = WithLogFilterProps;
export const WithLogFilterUrlState: React.SFC<WithLogFilterUrlStateProps> = ({ indexPattern }) => (
export const WithLogFilterUrlState: React.FC<WithLogFilterUrlStateProps> = ({ indexPattern }) => (
<WithLogFilter indexPattern={indexPattern}>
{({ applyFilterQuery, filterQuery }) => (
<UrlStateContainer

View file

@ -63,7 +63,7 @@ type WaffleFilterUrlState = ReturnType<typeof waffleFilterSelectors.selectWaffle
type WithWaffleFilterUrlStateProps = WithWaffleFilterProps;
export const WithWaffleFilterUrlState: React.SFC<WithWaffleFilterUrlStateProps> = ({
export const WithWaffleFilterUrlState: React.FC<WithWaffleFilterUrlStateProps> = ({
indexPattern,
}) => (
<WithWaffleFilter indexPattern={indexPattern}>

View file

@ -28,7 +28,7 @@ interface Props {
message: string;
}
export const Error: React.SFC<Props> = ({ message }) => {
export const Error: React.FC<Props> = ({ message }) => {
return (
<ColumnarPage>
<Header />
@ -39,7 +39,7 @@ export const Error: React.SFC<Props> = ({ message }) => {
);
};
export const ErrorPageBody: React.SFC<{ message: string }> = ({ message }) => {
export const ErrorPageBody: React.FC<{ message: string }> = ({ message }) => {
return (
<EuiPage style={{ flex: '1 0 auto' }}>
<EuiPageBody>

View file

@ -14,7 +14,7 @@ import { WithOptions } from '../../../containers/with_options';
import { WithSource } from '../../../containers/with_source';
import { Layout } from '../../../components/inventory/layout';
export const SnapshotPageContent: React.SFC = () => (
export const SnapshotPageContent: React.FC = () => (
<WithSource>
{({ configuration, createDerivedIndexPattern, sourceId }) => (
<WithOptions>

View file

@ -16,7 +16,7 @@ interface LinkToPageProps {
match: RouteMatch<{}>;
}
export const LinkToPage: React.SFC<LinkToPageProps> = props => (
export const LinkToPage: React.FC<LinkToPageProps> = props => (
<Switch>
<Route
path={`${props.match.url}/:sourceId?/:nodeType(host|container|pod)-logs/:nodeId`}

View file

@ -22,7 +22,7 @@ interface RouterProps {
uiCapabilities: UICapabilities;
}
const PageRouterComponent: React.SFC<RouterProps> = ({ history, uiCapabilities }) => {
const PageRouterComponent: React.FC<RouterProps> = ({ history, uiCapabilities }) => {
return (
<Router history={history}>
<Switch>

View file

@ -41,7 +41,7 @@ declare module '@elastic/eui' {
toggleOpenOnMobile?: () => void;
isOpenOnMobile?: boolean;
};
export const EuiSideNav: React.SFC<EuiSideNavProps>;
export const EuiSideNav: React.FC<EuiSideNavProps>;
type EuiErrorBoundaryProps = CommonProps & {
children: React.ReactNode;
@ -69,5 +69,5 @@ declare module '@elastic/eui' {
cellProps?: any;
responsive?: boolean;
};
export const EuiInMemoryTable: React.SFC<EuiInMemoryTableProps>;
export const EuiInMemoryTable: React.FC<EuiInMemoryTableProps>;
}

View file

@ -20,7 +20,7 @@ declare module '@elastic/eui/lib/experimental' {
animateData?: boolean;
marginLeft?: number;
};
export const EuiSeriesChart: React.SFC<EuiSeriesChartProps>;
export const EuiSeriesChart: React.FC<EuiSeriesChartProps>;
type EuiSeriesProps = CommonProps & {
data: Array<{ x: number; y: number; y0?: number }>;
@ -29,21 +29,21 @@ declare module '@elastic/eui/lib/experimental' {
color?: string;
marginLeft?: number;
};
export const EuiLineSeries: React.SFC<EuiSeriesProps>;
export const EuiAreaSeries: React.SFC<EuiSeriesProps>;
export const EuiBarSeries: React.SFC<EuiSeriesProps>;
export const EuiLineSeries: React.FC<EuiSeriesProps>;
export const EuiAreaSeries: React.FC<EuiSeriesProps>;
export const EuiBarSeries: React.FC<EuiSeriesProps>;
type EuiYAxisProps = CommonProps & {
tickFormat: (value: number) => string;
marginLeft?: number;
};
export const EuiYAxis: React.SFC<EuiYAxisProps>;
export const EuiYAxis: React.FC<EuiYAxisProps>;
type EuiXAxisProps = CommonProps & {
tickFormat?: (value: number) => string;
marginLeft?: number;
};
export const EuiXAxis: React.SFC<EuiXAxisProps>;
export const EuiXAxis: React.FC<EuiXAxisProps>;
export interface EuiDataPoint {
seriesIndex: number;
@ -66,5 +66,5 @@ declare module '@elastic/eui/lib/experimental' {
titleFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue | undefined;
itemsFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue[];
};
export const EuiCrosshairX: React.SFC<EuiCrosshairXProps>;
export const EuiCrosshairX: React.FC<EuiCrosshairXProps>;
}

View file

@ -17,7 +17,7 @@ interface Props {
isVisible: boolean;
}
export const DeleteAnnotationModal: React.SFC<Props> = ({
export const DeleteAnnotationModal: React.FC<Props> = ({
cancelAction,
deleteAction,
isVisible,

View file

@ -77,7 +77,7 @@ interface GetDataFrameAnalyticsResponse {
const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
const ExplorationTitle: React.SFC<{ jobId: string }> = ({ jobId }) => (
const ExplorationTitle: React.FC<{ jobId: string }> = ({ jobId }) => (
<EuiTitle size="xs">
<span>
{i18n.translate('xpack.ml.dataframe.analytics.exploration.jobIdTitle', {

View file

@ -26,7 +26,7 @@ const LoadingPanel: FC = () => (
</EuiPanel>
);
export const ExplorationTitle: React.SFC<{ jobId: string }> = ({ jobId }) => (
export const ExplorationTitle: React.FC<{ jobId: string }> = ({ jobId }) => (
<EuiTitle size="xs">
<span>
{i18n.translate('xpack.ml.dataframe.analytics.regressionExploration.jobIdTitle', {

View file

@ -20,7 +20,7 @@ describe('observable_utils', () => {
const observable$ = new BehaviorSubject('initial text');
// a simple stateless component that just renders some text
const TestComponent: React.SFC<Props> = ({ testProp }) => {
const TestComponent: React.FC<Props> = ({ testProp }) => {
return <span>{testProp}</span>;
};

View file

@ -6,7 +6,7 @@
// TODO: Remove once typescript definitions are in EUI
declare module '@elastic/eui' {
export const EuiBasicTable: React.SFC<any>;
export const EuiBasicTable: React.FC<any>;
}
import { i18n } from '@kbn/i18n';

View file

@ -11,7 +11,7 @@ interface Props {
title: React.ReactNode;
}
export const AuthenticationStatePage: React.SFC<Props> = props => (
export const AuthenticationStatePage: React.FC<Props> = props => (
<div className="secAuthenticationStatePage">
<header className="secAuthenticationStatePage__header">
<div className="secAuthenticationStatePage__content eui-textCenter">

View file

@ -13,7 +13,7 @@ interface Props {
user: AuthenticatedUser;
}
export const AccountManagementPage: React.SFC<Props> = props => (
export const AccountManagementPage: React.FC<Props> = props => (
<EuiPage>
<EuiPageBody restrictWidth>
<EuiPanel>

View file

@ -12,7 +12,7 @@ interface Props {
message: ReactNode;
}
export const DisabledLoginForm: React.SFC<Props> = props => (
export const DisabledLoginForm: React.FC<Props> = props => (
<EuiPanel>
<EuiText color="danger" style={{ textAlign: 'center' }}>
<p>{props.title}</p>

View file

@ -6,7 +6,7 @@
import { EuiIcon, EuiIconTip, EuiText, IconType, PropsOf, EuiToolTip } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import _ from 'lodash';
import React, { ReactNode, SFC } from 'react';
import React, { ReactNode, FC } from 'react';
import {
PRIVILEGE_SOURCE,
PrivilegeExplanation,
@ -21,7 +21,7 @@ interface Props extends PropsOf<typeof EuiText> {
tooltipContent?: ReactNode;
}
export const PrivilegeDisplay: SFC<Props> = (props: Props) => {
export const PrivilegeDisplay: FC<Props> = (props: Props) => {
const { explanation } = props;
if (!explanation) {
@ -39,7 +39,7 @@ export const PrivilegeDisplay: SFC<Props> = (props: Props) => {
return <SimplePrivilegeDisplay {...props} />;
};
const SimplePrivilegeDisplay: SFC<Props> = (props: Props) => {
const SimplePrivilegeDisplay: FC<Props> = (props: Props) => {
const { privilege, iconType, iconTooltipContent, explanation, tooltipContent, ...rest } = props;
const text = (
@ -55,7 +55,7 @@ const SimplePrivilegeDisplay: SFC<Props> = (props: Props) => {
return text;
};
export const SupersededPrivilegeDisplay: SFC<Props> = (props: Props) => {
export const SupersededPrivilegeDisplay: FC<Props> = (props: Props) => {
const { supersededPrivilege, actualPrivilegeSource } =
props.explanation || ({} as PrivilegeExplanation);
@ -77,7 +77,7 @@ export const SupersededPrivilegeDisplay: SFC<Props> = (props: Props) => {
);
};
export const EffectivePrivilegeDisplay: SFC<Props> = (props: Props) => {
export const EffectivePrivilegeDisplay: FC<Props> = (props: Props) => {
const { explanation, ...rest } = props;
const source = getReadablePrivilegeSource(explanation!.actualPrivilegeSource);

View file

@ -13,7 +13,7 @@ interface Props {
children: React.ReactNode;
}
export const DataPlaceholder: React.SFC<Props> = ({ data, children }) => {
export const DataPlaceholder: React.FC<Props> = ({ data, children }) => {
const {
core: { i18n },
} = useAppDependencies();

View file

@ -14,7 +14,7 @@ interface Props {
[key: string]: any;
}
export const RepositoryTypeLogo: React.SFC<Props> = ({ type, ...rest }) => {
export const RepositoryTypeLogo: React.FC<Props> = ({ type, ...rest }) => {
const typeLogoMap: { [key: string]: any } = {
[REPOSITORY_TYPES.fs]: 'storage',
[REPOSITORY_TYPES.url]: 'eye',

View file

@ -15,7 +15,7 @@ interface Props {
state: any;
}
export const SnapshotState: React.SFC<Props> = ({ state }) => {
export const SnapshotState: React.FC<Props> = ({ state }) => {
const {
core: { i18n },
} = useAppDependencies();

View file

@ -16,7 +16,7 @@ interface Props {
snapshotState: string;
}
export const TabFailures: React.SFC<Props> = ({ indexFailures, snapshotState }) => {
export const TabFailures: React.FC<Props> = ({ indexFailures, snapshotState }) => {
const {
core: {
i18n: { FormattedMessage },

View file

@ -30,7 +30,7 @@ interface Props {
snapshotDetails: SnapshotDetails;
}
export const TabSummary: React.SFC<Props> = ({ snapshotDetails }) => {
export const TabSummary: React.FC<Props> = ({ snapshotDetails }) => {
const {
core: {
i18n: { FormattedMessage },

View file

@ -5,7 +5,7 @@
*/
import { EuiAvatar, isValidHex } from '@elastic/eui';
import React, { SFC } from 'react';
import React, { FC } from 'react';
import { MAX_SPACE_INITIALS } from '../../common';
import { Space } from '../../common/model/space';
import { getSpaceColor, getSpaceInitials, getSpaceImageUrl } from '../lib/space_attributes';
@ -17,7 +17,7 @@ interface Props {
announceSpaceName?: boolean;
}
export const SpaceAvatar: SFC<Props> = (props: Props) => {
export const SpaceAvatar: FC<Props> = (props: Props) => {
const { space, size, announceSpaceName, ...rest } = props;
const spaceName = space.name ? space.name.trim() : '';

View file

@ -14,7 +14,7 @@ interface Props {
intl: InjectedIntl;
}
const ConfirmAlterActiveSpaceModalUI: React.SFC<Props> = props => (
const ConfirmAlterActiveSpaceModalUI: React.FC<Props> = props => (
<EuiOverlayMask>
<EuiConfirmModal
onConfirm={props.onConfirm}

View file

@ -5,7 +5,7 @@
*/
import { EuiContextMenuPanel, EuiText } from '@elastic/eui';
import React, { SFC } from 'react';
import React, { FC } from 'react';
import { ManageSpacesButton } from '../../../components';
import { getSpacesFeatureDescription } from '../../../lib/constants';
@ -13,7 +13,7 @@ interface Props {
onManageSpacesClick: () => void;
}
export const SpacesDescription: SFC<Props> = (props: Props) => {
export const SpacesDescription: FC<Props> = (props: Props) => {
const panelProps = {
className: 'spcDescription',
title: 'Spaces',

View file

@ -11,7 +11,7 @@ import {
import React from 'react';
import { ButtonProps } from '../types';
export const SpacesHeaderNavButton: React.SFC<ButtonProps> = props => (
export const SpacesHeaderNavButton: React.FC<ButtonProps> = props => (
<EuiHeaderSectionItemButton
aria-controls="headerSpacesMenuList"
aria-expanded={props.spaceSelectorShown}

View file

@ -15,7 +15,7 @@ interface Props {
testSubj?: string;
}
export const DropDown: React.SFC<Props> = ({
export const DropDown: React.FC<Props> = ({
changeHandler,
options,
placeholder = 'Search ...',

View file

@ -22,7 +22,7 @@ interface Props {
onChange(item: PivotAggsConfig): void;
}
export const AggLabelForm: React.SFC<Props> = ({
export const AggLabelForm: React.FC<Props> = ({
deleteHandler,
item,
otherAggNames,

View file

@ -24,12 +24,7 @@ export interface AggListProps {
onChange(previousAggName: AggName, item: PivotAggsConfig): void;
}
export const AggListForm: React.SFC<AggListProps> = ({
deleteHandler,
list,
onChange,
options,
}) => {
export const AggListForm: React.FC<AggListProps> = ({ deleteHandler, list, onChange, options }) => {
const listKeys = Object.keys(list);
return (
<Fragment>

View file

@ -14,7 +14,7 @@ export interface AggListSummaryProps {
list: PivotAggsConfigDict;
}
export const AggListSummary: React.SFC<AggListSummaryProps> = ({ list }) => {
export const AggListSummary: React.FC<AggListSummaryProps> = ({ list }) => {
const aggNames = Object.keys(list);
return (
<EuiForm>

View file

@ -40,12 +40,7 @@ interface Props {
onChange(d: PivotAggsConfig): void;
}
export const PopoverForm: React.SFC<Props> = ({
defaultData,
otherAggNames,
onChange,
options,
}) => {
export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onChange, options }) => {
const isUnsupportedAgg = !isPivotAggsConfigWithUiSupport(defaultData);
const [aggName, setAggName] = useState(defaultData.aggName);

View file

@ -28,7 +28,7 @@ interface Props {
onChange(item: PivotGroupByConfig): void;
}
export const GroupByLabelForm: React.SFC<Props> = ({
export const GroupByLabelForm: React.FC<Props> = ({
deleteHandler,
item,
otherAggNames,

View file

@ -15,7 +15,7 @@ interface Props {
optionsDataId: string;
}
export const GroupByLabelSummary: React.SFC<Props> = ({ item, optionsDataId }) => {
export const GroupByLabelSummary: React.FC<Props> = ({ item, optionsDataId }) => {
let interval: string | undefined;
if (isGroupByDateHistogram(item)) {

View file

@ -24,7 +24,7 @@ interface ListProps {
onChange(id: string, item: PivotGroupByConfig): void;
}
export const GroupByListForm: React.SFC<ListProps> = ({
export const GroupByListForm: React.FC<ListProps> = ({
deleteHandler,
list,
onChange,

View file

@ -16,7 +16,7 @@ interface ListProps {
list: PivotGroupByConfigDict;
}
export const GroupByListSummary: React.SFC<ListProps> = ({ list }) => {
export const GroupByListSummary: React.FC<ListProps> = ({ list }) => {
const listKeys = Object.keys(list);
return (
<Fragment>

View file

@ -92,12 +92,7 @@ interface Props {
onChange(item: PivotGroupByConfig): void;
}
export const PopoverForm: React.SFC<Props> = ({
defaultData,
otherAggNames,
onChange,
options,
}) => {
export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onChange, options }) => {
const isUnsupportedAgg = !isPivotGroupByConfigWithUiSupport(defaultData);
const [agg, setAgg] = useState(defaultData.agg);

View file

@ -10,7 +10,7 @@ import { EuiBadge, EuiText } from '@elastic/eui';
import { EsDoc } from '../../../../common';
export const ExpandedRow: React.SFC<{ item: EsDoc }> = ({ item }) => (
export const ExpandedRow: React.FC<{ item: EsDoc }> = ({ item }) => (
<EuiText>
{Object.entries(item._source).map(([k, value]) => (
<span key={k}>

View file

@ -61,7 +61,7 @@ const CELL_CLICK_ENABLED = false;
interface SourceIndexPreviewTitle {
indexPatternTitle: string;
}
const SourceIndexPreviewTitle: React.SFC<SourceIndexPreviewTitle> = ({ indexPatternTitle }) => (
const SourceIndexPreviewTitle: React.FC<SourceIndexPreviewTitle> = ({ indexPatternTitle }) => (
<EuiTitle size="xs">
<span>
{i18n.translate('xpack.transform.sourceIndexPreview.sourceIndexPatternTitle', {
@ -77,7 +77,7 @@ interface Props {
cellClick?(search: string): void;
}
export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, query }) => {
export const SourceIndexPreview: React.FC<Props> = React.memo(({ cellClick, query }) => {
const [clearTable, setClearTable] = useState(false);
const indexPattern = useCurrentIndexPattern();

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { SFC } from 'react';
import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
@ -22,7 +22,7 @@ interface TestHookProps {
callback: Callback;
}
const TestHook: SFC<TestHookProps> = ({ callback }) => {
const TestHook: FC<TestHookProps> = ({ callback }) => {
callback();
return null;
};

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, SFC, useContext, useEffect, useState } from 'react';
import React, { Fragment, FC, useContext, useEffect, useState } from 'react';
import { i18n } from '@kbn/i18n';
import { toastNotifications } from 'ui/notify';
@ -60,7 +60,7 @@ interface Props {
onChange(s: StepDetailsExposedState): void;
}
export const StepCreateForm: SFC<Props> = React.memo(
export const StepCreateForm: FC<Props> = React.memo(
({ createIndexPattern, transformConfig, transformId, onChange, overrides }) => {
const defaults = { ...getDefaultStepCreateState(), ...overrides };

View file

@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { SFC } from 'react';
import React, { FC } from 'react';
export const StepCreateSummary: SFC = React.memo(() => {
export const StepCreateSummary: FC = React.memo(() => {
return null;
});

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { SFC, useEffect, useRef, useState } from 'react';
import React, { FC, useEffect, useRef, useState } from 'react';
import moment from 'moment-timezone';
import { i18n } from '@kbn/i18n';
@ -68,7 +68,7 @@ interface PreviewTitleProps {
previewRequest: PreviewRequestBody;
}
const PreviewTitle: SFC<PreviewTitleProps> = ({ previewRequest }) => {
const PreviewTitle: FC<PreviewTitleProps> = ({ previewRequest }) => {
const euiCopyText = i18n.translate('xpack.transform.pivotPreview.copyClipboardTooltip', {
defaultMessage: 'Copy Dev Console statement of the pivot preview to the clipboard.',
});
@ -102,7 +102,7 @@ interface ErrorMessageProps {
message: string;
}
const ErrorMessage: SFC<ErrorMessageProps> = ({ message }) => (
const ErrorMessage: FC<ErrorMessageProps> = ({ message }) => (
<EuiCodeBlock language="json" fontSize="s" paddingSize="s" isCopyable>
{message}
</EuiCodeBlock>
@ -114,7 +114,7 @@ interface PivotPreviewProps {
query: PivotQuery;
}
export const PivotPreview: SFC<PivotPreviewProps> = React.memo(({ aggs, groupBy, query }) => {
export const PivotPreview: FC<PivotPreviewProps> = React.memo(({ aggs, groupBy, query }) => {
const [clearTable, setClearTable] = useState(false);
const indexPattern = useCurrentIndexPattern();

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, SFC, useContext, useEffect, useState } from 'react';
import React, { Fragment, FC, useContext, useEffect, useState } from 'react';
import { i18n } from '@kbn/i18n';
@ -195,7 +195,7 @@ interface Props {
onChange(s: StepDefineExposedState): void;
}
export const StepDefineForm: SFC<Props> = React.memo(({ overrides = {}, onChange }) => {
export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange }) => {
const kibanaContext = useContext(KibanaContext);
const defaults = { ...getDefaultStepDefineState(kibanaContext), ...overrides };

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { SFC } from 'react';
import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { SimpleQuery } from '../../../../common';
@ -23,7 +23,7 @@ interface TestHookProps {
callback: Callback;
}
const TestHook: SFC<TestHookProps> = ({ callback }) => {
const TestHook: FC<TestHookProps> = ({ callback }) => {
callback();
return null;
};

Some files were not shown because too many files have changed in this diff Show more