public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: Avoid explicit React.FC<Props> when possible (#64722)

Browse Source
This commit is contained in:
Ryan McKinley
2023-03-14 16:38:21 +02:00
committed by GitHub
parent cde1b5b162
commit d710507bc5
213 changed files with 485 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts
+2 -2
View File
@@ -1,8 +1,8 @@
export const componentTpl = `import React, { FC } from 'react';
export const componentTpl = `import React from 'react';
export interface Props {};
export const <%= name %>: FC<Props> = (props) => {
export const <%= name %> = (props: Props) => {
return (
<div>Hello world!</div>
)
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
@@ -18,7 +18,7 @@ export interface DataLinksListItemProps {
isEditing?: boolean;
}
export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, onRemove }) => {
export const DataLinksListItem = ({ link, onEdit, onRemove }: DataLinksListItemProps) => {
const theme = useTheme2();
const styles = getDataLinkListItemStyles(theme);
const { title = '', url = '' } = link;
packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { ChangeEvent, MouseEvent, FC } from 'react';
import React, { ChangeEvent, MouseEvent } from 'react';
import { Button } from '../Button';
import { InlineField } from '../Forms/InlineField';
@@ -15,7 +15,7 @@ interface Props {
onClick: (event: MouseEvent<HTMLButtonElement>) => void;
}
export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => {
export const CertificationKey = ({ hasCert, label, onChange, onClick, placeholder }: Props) => {
return (
<InlineFieldRow>
<InlineField label={label} labelWidth={14} disabled={hasCert}>
packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC, FormEvent, MouseEvent, useState } from 'react';
import React, { FormEvent, MouseEvent, useState } from 'react';
import { dateMath, dateTime, getDefaultTimeRange, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@@ -35,7 +35,7 @@ export interface TimeRangeInputProps {
const noop = () => {};
export const TimeRangeInput: FC<TimeRangeInputProps> = ({
export const TimeRangeInput = ({
value,
onChange,
onChangeTimeZone = noop,
@@ -46,7 +46,7 @@ export const TimeRangeInput: FC<TimeRangeInputProps> = ({
isReversed = true,
hideQuickRanges = false,
disabled = false,
}) => {
}: TimeRangeInputProps) => {
const [isOpen, setIsOpen] = useState(false);
const theme = useTheme2();
const styles = getStyles(theme, disabled);
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css';
import { isString } from 'lodash';
import React, { FC, useCallback, useState } from 'react';
import React, { useCallback, useState } from 'react';
import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@@ -23,7 +23,7 @@ interface Props {
onChangeFiscalYearStartMonth?: (month: number) => void;
}
export const TimePickerFooter: FC<Props> = (props) => {
export const TimePickerFooter = (props: Props) => {
const {
timeZone,
fiscalYearStartMonth,
packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@@ -9,7 +9,7 @@ export interface Props {
children: JSX.Element | string;
}
const EmptySearchResult: FC<Props> = ({ children }) => {
const EmptySearchResult = ({ children }: Props) => {
const styles = useStyles2(getStyles);
return <div className={styles.container}>{children}</div>;
};
packages/grafana-ui/src/components/Forms/FieldSet.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC, HTMLProps } from 'react';
import React, { HTMLProps } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@@ -13,7 +13,7 @@ export interface Props extends Omit<HTMLProps<HTMLFieldSetElement>, 'label'> {
label?: React.ReactNode;
}
export const FieldSet: FC<Props> = ({ label, children, className, ...rest }) => {
export const FieldSet = ({ label, children, className, ...rest }: Props) => {
const theme = useTheme2();
const styles = getStyles(theme);
packages/grafana-ui/src/components/Forms/InlineField.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { cx, css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@@ -29,7 +29,7 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
interactive?: boolean;
}
export const InlineField: FC<Props> = ({
export const InlineField = ({
children,
label,
tooltip,
@@ -46,7 +46,7 @@ export const InlineField: FC<Props> = ({
transparent,
interactive,
...htmlProps
}) => {
}: Props) => {
const theme = useTheme2();
const styles = getStyles(theme, grow, shrink);
const inputId = htmlFor ?? getChildId(children);
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC, ReactNode } from 'react';
import React, { ReactNode } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@@ -28,7 +28,7 @@ export interface Props {
}
/** @alpha */
export const PageToolbar: FC<Props> = React.memo(
export const PageToolbar = React.memo(
({
title,
section,
@@ -44,7 +44,7 @@ export const PageToolbar: FC<Props> = React.memo(
/** main nav-container aria-label **/
'aria-label': ariaLabel,
buttonOverflowAlignment = 'right',
}) => {
}: Props) => {
const styles = useStyles2(getStyles);
/**
packages/grafana-ui/src/components/Spinner/Spinner.tsx
+2 -3
View File
@@ -1,5 +1,5 @@
import { cx, css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { stylesFactory } from '../../themes';
import { Icon } from '../Icon/Icon';
@@ -28,8 +28,7 @@ export type Props = {
/**
* @public
*/
export const Spinner: FC<Props> = (props: Props) => {
const { className, inline = false, iconClassName, style, size = 16 } = props;
export const Spinner = ({ className, inline = false, iconClassName, style, size = 16 }: Props) => {
const styles = getStyles(size, inline);
return (
<div data-testid="Spinner" style={style} className={cx(styles.wrapper, className)}>
packages/grafana-ui/src/components/Table/BarGaugeCell.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { isFunction } from 'lodash';
import React, { FC } from 'react';
import React from 'react';
import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';
import { BarGaugeDisplayMode, BarGaugeValueMode } from '@grafana/schema';
@@ -24,7 +24,7 @@ const defaultScale: ThresholdsConfig = {
],
};
export const BarGaugeCell: FC<TableCellProps> = (props) => {
export const BarGaugeCell = (props: TableCellProps) => {
const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
const displayValue = field.display!(cell.value);
const cellOptions = getCellOptions(field);
packages/grafana-ui/src/components/Table/DefaultCell.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { cx } from '@emotion/css';
import React, { FC, ReactElement } from 'react';
import React, { ReactElement } from 'react';
import tinycolor from 'tinycolor2';
import { DisplayValue, formattedValueToString } from '@grafana/data';
@@ -15,7 +15,7 @@ import { TableStyles } from './styles';
import { TableCellDisplayMode, TableCellProps, TableFieldOptions } from './types';
import { getCellOptions } from './utils';
export const DefaultCell: FC<TableCellProps> = (props) => {
export const DefaultCell = (props: TableCellProps) => {
const { field, cell, tableStyles, row, cellProps } = props;
const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
packages/grafana-ui/src/components/Table/Filter.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { Field, GrafanaTheme2 } from '@grafana/data';
@@ -16,7 +16,7 @@ interface Props {
field?: Field;
}
export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
export const Filter = ({ column, field, tableStyles }: Props) => {
const ref = useRef<HTMLButtonElement>(null);
const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);
const styles = useStyles2(getStyles);
packages/grafana-ui/src/components/Table/FilterList.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { FC, useCallback, useMemo, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { FixedSizeList as List } from 'react-window';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
@@ -17,7 +17,7 @@ interface Props {
const ITEM_HEIGHT = 28;
const MIN_HEIGHT = ITEM_HEIGHT * 5;
export const FilterList: FC<Props> = ({ options, values, caseSensitive, onChange }) => {
export const FilterList = ({ options, values, caseSensitive, onChange }: Props) => {
const theme = useTheme2();
const styles = getStyles(theme);
const [searchFilter, setSearchFilter] = useState('');
packages/grafana-ui/src/components/Table/FilterPopup.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC, useCallback, useMemo, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
@@ -17,7 +17,7 @@ interface Props {
field?: Field;
}
export const FilterPopup: FC<Props> = ({ column: { preFilteredRows, filterValue, setFilter }, onClose, field }) => {
export const FilterPopup = ({ column: { preFilteredRows, filterValue, setFilter }, onClose, field }: Props) => {
const theme = useTheme2();
const uniqueValues = useMemo(() => calculateUniqueFieldValues(preFilteredRows, field), [preFilteredRows, field]);
const options = useMemo(() => valuesToOptions(uniqueValues), [uniqueValues]);
packages/grafana-ui/src/components/Table/ImageCell.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { cx } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { useStyles2 } from '../../themes';
import { getCellLinks } from '../../utils';
@@ -8,7 +8,7 @@ import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { TableCellProps } from './types';
export const ImageCell: FC<TableCellProps> = (props) => {
export const ImageCell = (props: TableCellProps) => {
const { field, cell, tableStyles, row, cellProps } = props;
const displayValue = field.display!(cell.value);
packages/grafana-ui/src/components/Table/SparklineCell.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { isArray } from 'lodash';
import React, { FC } from 'react';
import React from 'react';
import {
ArrayVector,
@@ -37,7 +37,7 @@ export const defaultSparklineCellConfig: GraphFieldConfig = {
showPoints: VisibilityMode.Never,
};
export const SparklineCell: FC<TableCellProps> = (props) => {
export const SparklineCell = (props: TableCellProps) => {
const { field, innerWidth, tableStyles, cell, cellProps } = props;
const sparkline = getSparkline(cell.value);
packages/grafana-ui/src/components/Table/TableCell.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React from 'react';
import { Cell } from 'react-table';
import { TableStyles } from './styles';
@@ -13,7 +13,7 @@ export interface Props {
userProps?: object;
}
export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, userProps }) => {
export const TableCell = ({ cell, tableStyles, onCellFilterAdded, userProps }: Props) => {
const cellProps = cell.getCellProps();
const field = (cell.column as unknown as GrafanaTableColumn).field;
packages/grafana-ui/src/components/Tabs/Counter.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { GrafanaTheme2, locale } from '@grafana/data';
@@ -24,7 +24,7 @@ export interface CounterProps {
value: number;
}
export const Counter: FC<CounterProps> = ({ value }) => {
export const Counter = ({ value }: CounterProps) => {
const styles = useStyles2(getStyles);
return <span className={styles.counter}>{locale(value, 0).text}</span>;
packages/grafana-ui/src/components/Tabs/TabContent.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { FC, HTMLAttributes, ReactNode } from 'react';
import React, { HTMLAttributes, ReactNode } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@@ -17,7 +17,7 @@ const getTabContentStyle = stylesFactory((theme: GrafanaTheme2) => {
};
});
export const TabContent: FC<Props> = ({ children, className, ...restProps }) => {
export const TabContent = ({ children, className, ...restProps }: Props) => {
const theme = useTheme2();
const styles = getTabContentStyle(theme);
packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { useTheme2 } from '../../themes';
@@ -7,7 +7,7 @@ export interface Props {
children?: React.ReactNode;
}
export const DashboardStoryCanvas: FC<Props> = ({ children }) => {
export const DashboardStoryCanvas = ({ children }: Props) => {
const theme = useTheme2();
const style = css`
width: 100%;
packages/grafana-ui/src/utils/storybook/StoryExample.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import React from 'react';
import { useTheme2 } from '../../themes/ThemeContext';
@@ -8,7 +8,7 @@ export interface Props {
children?: React.ReactNode;
}
export const StoryExample: FC<Props> = ({ name, children }) => {
export const StoryExample = ({ name, children }: Props) => {
const theme = useTheme2();
const style = css`
width: 100%;