opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 05:31:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite old useStyles2 pattern to use new pattern (#76136)

Browse Source 
* Rewrite old useStyles2 pattern to use new pattern

* fix lint from used imports
This commit is contained in:
Josh Hunt
2023-10-09 09:49:08 +00:00
committed by GitHub
parent d3f69fd34a
commit 07266aa983
23 changed files with 37 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/Divider/Divider.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useCallback } from 'react';
import React from 'react';
import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
@ -11,7 +11,7 @@ interface DividerProps {
}
export const Divider = ({ direction = 'horizontal', spacing = 2 }: DividerProps) => {
const styles = useStyles2(useCallback((theme) => getStyles(theme, spacing), [spacing]));
const styles = useStyles2(getStyles, spacing);
if (direction === 'vertical') {
return <div className={styles.verticalDivider}></div>;

6
packages/grafana-ui/src/components/Forms/InlineLabel.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { useCallback } from 'react';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@ -34,9 +34,7 @@ export const InlineLabel = ({
as: Component = 'label',
...rest
}: Props) => {
const styles = useStyles2(
useCallback((theme) => getInlineLabelStyles(theme, transparent, width), [transparent, width])
);
const styles = useStyles2(getInlineLabelStyles, transparent, width);
return (
<Component className={cx(styles.label, className)} {...rest}>

2
packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx
View File

@ -12,7 +12,7 @@ export interface Props {
/** @beta */
export const InlineSegmentGroup = ({ children, className, grow, ...htmlProps }: React.PropsWithChildren<Props>) => {
const styles = useStyles2((theme) => getStyles(theme, grow));
const styles = useStyles2(getStyles, grow);
return (
<div className={cx(styles.container, className)} {...htmlProps}>

11
packages/grafana-ui/src/components/Layout/Layout.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { HTMLProps, useCallback } from 'react';
import React, { HTMLProps } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@ -41,12 +41,7 @@ export const Layout = ({
height = '100%',
...rest
}: LayoutProps) => {
const styles = useStyles2(
useCallback(
(theme) => getStyles(theme, orientation, spacing, justify, align, wrap),
[align, justify, orientation, spacing, wrap]
)
);
const styles = useStyles2(getStyles, orientation, spacing, justify, align, wrap);
return (
<div className={styles.layout} style={{ width, height }} {...rest}>
@ -105,7 +100,7 @@ export const VerticalGroup = ({
);
export const Container = ({ children, padding, margin, grow, shrink }: React.PropsWithChildren<ContainerProps>) => {
const styles = useStyles2(useCallback((theme) => getContainerStyles(theme, padding, margin), [padding, margin]));
const styles = useStyles2(getContainerStyles, padding, margin);
return (
<div

2
packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
View File

@ -20,7 +20,7 @@ const MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;
export function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {
const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);
const styles = useStyles2((theme) => getStyles(theme, delay, durationMs));
const styles = useStyles2(getStyles, delay, durationMs);
const containerStyles: CSSProperties = {
overflow: 'hidden',
};

18
packages/grafana-ui/src/components/Text/Text.tsx
View File

@ -1,14 +1,5 @@
import { css } from '@emotion/css';
import React, {
createElement,
CSSProperties,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useRef,
useState,
} from 'react';
import React, { createElement, CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import ReactDomServer from 'react-dom/server';
import { GrafanaTheme2, ThemeTypographyVariantTypes } from '@grafana/data';
@ -38,12 +29,7 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'clas
export const Text = React.forwardRef<HTMLElement, TextProps>(
({ element = 'span', variant, weight, color, truncate, italic, textAlignment, children, ...restProps }, ref) => {
const styles = useStyles2(
useCallback(
(theme) => getTextStyles(theme, element, variant, color, weight, truncate, italic, textAlignment),
[color, textAlignment, truncate, italic, weight, variant, element]
)
);
const styles = useStyles2(getTextStyles, element, variant, color, weight, truncate, italic, textAlignment);
const [isOverflowing, setIsOverflowing] = useState(false);
const internalRef = useRef<HTMLElement>(null);

2
public/app/core/components/RolePicker/RolePickerInput.tsx
View File

@ -35,7 +35,7 @@ export const RolePickerInput = ({
onQueryChange,
...rest
}: InputProps): JSX.Element => {
const styles = useStyles2((theme) => getRolePickerInputStyles(theme, false, !!isFocused, !!disabled, false));
const styles = useStyles2(getRolePickerInputStyles, false, !!isFocused, !!disabled, false);
const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {

2
public/app/core/components/Upgrade/UpgradeBox.tsx
View File

@ -25,7 +25,7 @@ export const UpgradeBox = ({
size = 'md',
...htmlProps
}: Props) => {
const styles = useStyles2((theme) => getUpgradeBoxStyles(theme, size));
const styles = useStyles2(getUpgradeBoxStyles, size);
useEffect(() => {
reportExperimentView(`feature-highlights-${featureId}`, 'test', eventVariant);

2
public/app/features/alerting/unified/components/AlertLabels.tsx
View File

@ -15,7 +15,7 @@ interface Props {
}
export const AlertLabels = ({ labels, commonLabels = {}, size }: Props) => {
const styles = useStyles2((theme) => getStyles(theme, size));
const styles = useStyles2(getStyles, size);
const [showCommonLabels, setShowCommonLabels] = useState(false);
const labelsToShow = chain(labels)

2
public/app/features/alerting/unified/components/AlertStateDot.tsx
View File

@ -6,7 +6,7 @@ import { ComponentSize, Tooltip, useStyles2 } from '@grafana/ui';
import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
const AlertStateDot = (props: DotStylesProps) => {
const styles = useStyles2((theme) => getDotStyles(theme, props));
const styles = useStyles2(getDotStyles, props);
return (
<Tooltip content={String(props.state)} placement="top">

2
public/app/features/alerting/unified/components/Label.tsx
View File

@ -18,7 +18,7 @@ interface Props {
// TODO allow customization with color prop
const Label = ({ label, value, icon, color, size = 'md' }: Props) => {
const styles = useStyles2((theme) => getStyles(theme, color, size));
const styles = useStyles2(getStyles, color, size);
return (
<div className={styles.wrapper} role="listitem">

2
public/app/features/datasources/components/picker/DataSourceDropdown.tsx
View File

@ -72,7 +72,7 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
...restProps
} = props;
const styles = useStyles2((theme: GrafanaTheme2) => getStylesDropdown(theme, props));
const styles = useStyles2(getStylesDropdown, props);
const [isOpen, setOpen] = useState(false);
const [inputHasFocus, setInputHasFocus] = useState(false);
const [filterTerm, setFilterTerm] = useState<string>('');

2
public/app/features/explore/PrometheusListView/ItemLabels.tsx
View File

@ -32,7 +32,7 @@ export const formatValueName = (name: string): string => {
};
export const ItemLabels = ({ valueLabels, expanded }: { valueLabels: Field[]; expanded: boolean }) => {
const styles = useStyles2((theme) => getItemLabelsStyles(theme, expanded));
const styles = useStyles2(getItemLabelsStyles, expanded);
return (
<div className={styles.itemLabelsWrap}>

2
public/app/features/explore/PrometheusListView/ItemValues.tsx
View File

@ -53,7 +53,7 @@ export const ItemValues = ({
values: RawListValue[];
hideFieldsWithoutValues: boolean;
}) => {
const styles = useStyles2((theme) => getStyles(theme, totalNumberOfValues));
const styles = useStyles2(getStyles, totalNumberOfValues);
return (
<div role={'cell'} className={styles.rowValuesWrap}>
{values?.map((value) => {

2
public/app/features/explore/PrometheusListView/RawListItem.tsx
View File

@ -101,7 +101,7 @@ const RawListItem = ({ listItemData, listKey, totalNumberOfValues, valueLabels,
const { __name__, ...allLabels } = listItemData;
const [_, copyToClipboard] = useCopyToClipboard();
const displayLength = valueLabels?.length ?? totalNumberOfValues;
const styles = useStyles2((theme) => getStyles(theme, displayLength, isExpandedView));
const styles = useStyles2(getStyles, displayLength, isExpandedView);
const { values, attributeValues } = getQueryValues(allLabels);
/**

4
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useEffect, useCallback } from 'react';
import React, { useEffect } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { config } from '@grafana/runtime';
@ -126,7 +126,7 @@ export function RichHistoryQueriesTab(props: RichHistoryQueriesTabProps) {
activeDatasourceInstance,
} = props;
const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, height), [height]));
const styles = useStyles2(getStyles, height);
const listOfDatasources = createDatasourcesList();

4
public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
View File

@ -41,7 +41,7 @@ export const LibraryPanelsSearch = ({
showSort = false,
showSecondaryActions = false,
}: LibraryPanelsSearchProps): JSX.Element => {
const styles = useStyles2(useCallback((theme) => getStyles(theme, variant), [variant]));
const styles = useStyles2(getStyles, variant);
const [searchQuery, setSearchQuery] = useState('');
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
@ -149,7 +149,7 @@ const SearchControls = React.memo(
onFolderFilterChange,
onPanelFilterChange,
}: SearchControlsProps) => {
const styles = useStyles2(useCallback((theme) => getRowStyles(theme, variant), [variant]));
const styles = useStyles2(getRowStyles, variant);
const panelFilterChanged = useCallback(
(plugins: PanelPluginMeta[]) => onPanelFilterChange(plugins.map((p) => p.id)),
[onPanelFilterChange]

4
public/app/features/search/page/components/FolderSection.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useCallback, useId, useState } from 'react';
import React, { useId, useState } from 'react';
import { useAsync } from 'react-use';
import { GrafanaTheme2, toIconName } from '@grafana/data';
@ -59,7 +59,7 @@ export const FolderSection = ({
const uid = section.uid;
const editable = selectionToggle != null;
const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getSectionHeaderStyles(theme, editable), [editable]));
const styles = useStyles2(getSectionHeaderStyles, editable);
const [sectionExpanded, setSectionExpanded] = useState(() => {
const lastExpandedFolder = window.localStorage.getItem(SEARCH_EXPANDED_FOLDER_STORAGE_KEY);
return lastExpandedFolder === uid;

4
public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/Stack.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { CSSProperties, useCallback } from 'react';
import React, { CSSProperties } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
@ -14,7 +14,7 @@ interface StackProps {
}
export function Stack(props: StackProps) {
const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
const styles = useStyles2(getStyles, props);
return <div className={styles.root}>{props.children}</div>;
}

4
public/app/plugins/datasource/parca/QueryEditor/Stack.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { CSSProperties, useCallback } from 'react';
import React, { CSSProperties } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
@ -14,7 +14,7 @@ interface StackProps {
}
export function Stack(props: StackProps) {
const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
const styles = useStyles2(getStyles, props);
return <div className={styles.root}>{props.children}</div>;
}

6
public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useCallback } from 'react';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
@ -13,8 +13,8 @@ interface Props {
}
export const DocsCard = ({ card }: Props) => {
const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
const styles = useStyles2(getStyles, card.done);
const iconStyles = useStyles2(iconStyle, card.done);
return (
<div className={styles.card}>

6
public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { MouseEvent, useCallback } from 'react';
import React, { MouseEvent } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
@ -14,8 +14,8 @@ interface Props {
}
export const TutorialCard = ({ card }: Props) => {
const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
const styles = useStyles2(getStyles, card.done);
const iconStyles = useStyles2(iconStyle, card.done);
return (
<a

2
public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
View File

@ -48,7 +48,7 @@ export const ThresholdDragHandle = ({
}
const disabled = typeof onChange !== 'function';
const styles = useStyles2((theme) => getStyles(theme, step, outOfBounds, disabled));
const styles = useStyles2(getStyles, step, outOfBounds, disabled);
const [currentValue, setCurrentValue] = useState(step.value);
const textColor = useMemo(() => {