Skip to content

Commit bd0a37b

Browse files
JonasBaJonasBa
committed
ref: put refs closer to typedef
1 parent c84cc1e commit bd0a37b

File tree

41 files changed

+106
-246
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+106
-246
lines changed

‎static/app/components/charts/barChart.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface BarChartProps extends BaseChartProps {
1616
animation?: boolean;
1717
barOpacity?: number;
1818
hideZeros?: boolean;
19+
ref?: React.Ref<ReactEchartsRef>;
1920
stacked?: boolean;
2021
}
2122

@@ -69,9 +70,7 @@ export function BarChart({
6970
xAxis,
7071
animation,
7172
...props
72-
}: BarChartProps & {
73-
ref?: React.Ref<ReactEchartsRef>;
74-
}) {
73+
}: BarChartProps) {
7574
const transformedSeries = useMemo(() => {
7675
return transformToBarSeries({barOpacity, hideZeros, series, stacked, animation});
7776
}, [animation, barOpacity, hideZeros, series, stacked]);

‎static/app/components/charts/heatMapChart.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './components/visualMap';
22

33
import type {HeatmapSeriesOption, VisualMapComponentOption} from 'echarts';
44

5-
import type {ReactEchartsRef, Series} from 'sentry/types/echarts';
5+
import type {Series} from 'sentry/types/echarts';
66

77
import HeatMapSeries from './series/heatMapSeries';
88
import type {BaseChartProps} from './baseChart';
@@ -20,12 +20,7 @@ interface HeatmapProps extends Omit<BaseChartProps, 'series'> {
2020
seriesOptions?: HeatmapSeriesOption;
2121
}
2222

23-
export default function HeatMapChart({
24-
ref,
25-
...props
26-
}: HeatmapProps & {
27-
ref?: React.Ref<ReactEchartsRef>;
28-
}) {
23+
export default function HeatMapChart({ref, ...props}: HeatmapProps) {
2924
const {series, seriesOptions, visualMaps, ...otherProps} = props;
3025
return (
3126
<BaseChart

‎static/app/components/core/avatar/actorAvatar.tsx

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {useTeamsById} from 'sentry/utils/useTeamsById';
1212

1313
export interface ActorAvatarProps extends BaseAvatarProps {
1414
actor: Actor;
15+
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
1516
}
1617

1718
export function ActorAvatar({
@@ -20,9 +21,7 @@ export function ActorAvatar({
2021
hasTooltip = true,
2122
actor,
2223
...props
23-
}: ActorAvatarProps & {
24-
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
25-
}) {
24+
}: ActorAvatarProps) {
2625
const otherProps = {
2726
size,
2827
hasTooltip,
@@ -51,15 +50,10 @@ export function ActorAvatar({
5150

5251
interface AsyncTeamAvatarProps extends Omit<TeamAvatarProps, 'team'> {
5352
teamId: string;
53+
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
5454
}
5555

56-
function AsyncTeamAvatar({
57-
ref,
58-
teamId,
59-
...props
60-
}: AsyncTeamAvatarProps & {
61-
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
62-
}) {
56+
function AsyncTeamAvatar({ref, teamId, ...props}: AsyncTeamAvatarProps) {
6357
const {teams, isLoading} = useTeamsById({ids: [teamId]});
6458
const team = teams.find(t => t.id === teamId);
6559

@@ -76,15 +70,10 @@ function AsyncTeamAvatar({
7670
*/
7771
interface AsyncMemberAvatarProps extends Omit<UserAvatarProps, 'user'> {
7872
userActor: Actor;
73+
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
7974
}
8075

81-
function AsyncMemberAvatar({
82-
ref,
83-
userActor,
84-
...props
85-
}: AsyncMemberAvatarProps & {
86-
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
87-
}) {
76+
function AsyncMemberAvatar({ref, userActor, ...props}: AsyncMemberAvatarProps) {
8877
const ids = useMemo(() => [userActor.id], [userActor.id]);
8978
const {members, fetching} = useMembers({ids});
9079
const member = members.find(u => u.id === userActor.id);

‎static/app/components/core/avatar/docIntegrationAvatar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import type {DocIntegration} from 'sentry/types/integrations';
44

55
export interface DocIntegrationAvatarProps extends BaseAvatarProps {
66
docIntegration?: DocIntegration;
7+
ref?: React.Ref<HTMLSpanElement>;
78
}
89

910
export function DocIntegrationAvatar({
1011
ref,
1112
docIntegration,
1213
...props
13-
}: DocIntegrationAvatarProps & {
14-
ref?: React.Ref<HTMLSpanElement>;
15-
}) {
14+
}: DocIntegrationAvatarProps) {
1615
if (!docIntegration?.avatar) {
1716
// @TODO(jonasbadalic): This is not passing a ref!
1817
return <PluginIcon size={props.size} pluginId={docIntegration?.slug ?? ''} />;

‎static/app/components/core/avatar/gravatar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ interface GravatarProps extends BaseAvatarComponentProps {
1515
onError?: () => void;
1616
onLoad?: () => void;
1717
placeholder?: string;
18+
ref?: React.Ref<HTMLImageElement>;
1819
}
1920

2021
export function Gravatar({
@@ -26,9 +27,7 @@ export function Gravatar({
2627
onError,
2728
onLoad,
2829
suggested,
29-
}: GravatarProps & {
30-
ref?: React.Ref<HTMLImageElement>;
31-
}) {
30+
}: GravatarProps) {
3231
const [sha256, setSha256] = useState<string | null>(null);
3332
useEffect(() => {
3433
if (!isCryptoSubtleDigestAvailable()) {

‎static/app/components/core/avatar/organizationAvatar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import {explodeSlug} from 'sentry/utils';
44

55
export interface OrganizationAvatarProps extends BaseAvatarProps {
66
organization?: OrganizationSummary;
7+
ref?: React.Ref<HTMLSpanElement>;
78
}
89

910
export function OrganizationAvatar({
1011
ref,
1112
organization,
1213
...props
13-
}: OrganizationAvatarProps & {
14-
ref?: React.Ref<HTMLSpanElement>;
15-
}) {
14+
}: OrganizationAvatarProps) {
1615
if (!organization) {
1716
// @TODO(jonasbadalic): Do we need a placeholder here?
1817
return null;

‎static/app/components/core/avatar/projectAvatar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type {AvatarProject} from 'sentry/types/project';
66
export interface ProjectAvatarProps extends BaseAvatarProps {
77
project: AvatarProject;
88
direction?: 'left' | 'right';
9+
ref?: React.Ref<HTMLDivElement>;
910
}
1011

1112
export function ProjectAvatar({
@@ -14,9 +15,7 @@ export function ProjectAvatar({
1415
hasTooltip,
1516
tooltip,
1617
...props
17-
}: ProjectAvatarProps & {
18-
ref?: React.Ref<HTMLDivElement>;
19-
}) {
18+
}: ProjectAvatarProps) {
2019
return (
2120
<Tooltip disabled={!hasTooltip} title={tooltip}>
2221
<PlatformList

‎static/app/components/core/avatar/sentryAppAvatar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {AvatarSentryApp} from 'sentry/types/integrations';
55
export interface SentryAppAvatarProps extends BaseAvatarProps {
66
isColor?: boolean;
77
isDefault?: boolean;
8+
ref?: React.Ref<HTMLSpanElement>;
89
sentryApp?: AvatarSentryApp;
910
}
1011

@@ -14,9 +15,7 @@ export function SentryAppAvatar({
1415
sentryApp,
1516
isDefault = false,
1617
...props
17-
}: SentryAppAvatarProps & {
18-
ref?: React.Ref<HTMLSpanElement>;
19-
}) {
18+
}: SentryAppAvatarProps) {
2019
const avatarDetails = sentryApp?.avatars?.find(({color}) => color === isColor);
2120

2221
// Render the default if the prop is provided, there is no existing avatar, or it has been reverted to 'default'

‎static/app/components/core/avatar/teamAvatar.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,10 @@ import {explodeSlug} from 'sentry/utils';
66

77
export interface TeamAvatarProps extends BaseAvatarProps {
88
team: Team | undefined;
9+
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
910
}
1011

11-
export function TeamAvatar({
12-
ref,
13-
team,
14-
tooltip: tooltipProp,
15-
...props
16-
}: TeamAvatarProps & {
17-
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
18-
}) {
12+
export function TeamAvatar({ref, team, tooltip: tooltipProp, ...props}: TeamAvatarProps) {
1913
if (!team) {
2014
// @TODO(jonasbadalic): Do we need a placeholder here?
2115
return null;

‎static/app/components/core/avatar/userAvatar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {isRenderFunc} from 'sentry/utils/isRenderFunc';
88

99
export interface UserAvatarProps extends BaseAvatarProps {
1010
gravatar?: boolean;
11+
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
1112
renderTooltip?: (user: AvatarUser | Actor) => React.ReactNode;
1213
user?: Actor | AvatarUser;
1314
}
@@ -24,9 +25,7 @@ export function UserAvatar({
2425
renderTooltip,
2526
user,
2627
...props
27-
}: UserAvatarProps & {
28-
ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
29-
}) {
28+
}: UserAvatarProps) {
3029
if (!user) {
3130
// @TODO(jonasbadalic): Do we need a placeholder here?
3231
return null;

‎static/app/components/core/badge/tag.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
2727
* Shows clickable IconClose on the right side.
2828
*/
2929
onDismiss?: () => void;
30+
ref?: React.Ref<HTMLDivElement>;
3031
/**
3132
* Dictates color scheme of the tag.
3233
*/
@@ -40,9 +41,7 @@ export function Tag({
4041
onDismiss,
4142
children,
4243
...props
43-
}: TagProps & {
44-
ref?: React.Ref<HTMLDivElement>;
45-
}) {
44+
}: TagProps) {
4645
return (
4746
<StyledTag type={type} data-test-id="tag-background" ref={ref} {...props}>
4847
{icon && (

‎static/app/components/core/input/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import type {FormSize} from 'sentry/utils/theme';
88

99
export interface InputProps
1010
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly'>,
11-
InputStylesProps {}
11+
InputStylesProps {
12+
ref?: React.Ref<HTMLInputElement>;
13+
}
1214

1315
export const inputStyles = (p: InputStylesProps & {theme: Theme}) =>
1416
p.theme.isChonk ? chonkInputStyles(p as any) : legacyInputStyles(p);
@@ -34,9 +36,7 @@ export const Input = styled(
3436
nativeSize,
3537

3638
...props
37-
}: InputProps & {
38-
ref?: React.Ref<HTMLInputElement>;
39-
}) => <input {...props} ref={ref} size={nativeSize} />,
39+
}: InputProps) => <input {...props} ref={ref} size={nativeSize} />,
4040
{shouldForwardProp: prop => typeof prop === 'string' && isPropValid(prop)}
4141
)`
4242
${inputStyles};

‎static/app/components/core/input/inputGroup.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,7 @@ export function InputGroup({children, ...props}: React.HTMLAttributes<HTMLDivEle
8080
);
8181
}
8282

83-
function Input({
84-
ref,
85-
size,
86-
disabled,
87-
...props
88-
}: InputProps & {
89-
ref?: React.Ref<HTMLInputElement>;
90-
}) {
83+
function Input({ref, size, disabled, ...props}: InputProps) {
9184
const {leadingWidth, trailingWidth, setInputProps} = useContext(InputGroupContext);
9285

9386
useLayoutEffect(() => {

‎static/app/components/core/input/numberInput.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ interface NumberInputProps
2323
> {
2424
max?: number;
2525
min?: number;
26+
ref?: React.Ref<HTMLInputElement>;
2627
}
2728

2829
export function NumberInput({
@@ -37,9 +38,7 @@ export function NumberInput({
3738
nativeSize,
3839
className,
3940
...props
40-
}: NumberInputProps & {
41-
ref?: React.Ref<HTMLInputElement>;
42-
}) {
41+
}: NumberInputProps) {
4342
const localRef = useRef<HTMLInputElement>(null);
4443

4544
const ariaProps = {

‎static/app/components/core/radio/index.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {growIn} from 'sentry/styles/animations';
88
export interface RadioProps
99
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
1010
nativeSize?: React.InputHTMLAttributes<HTMLInputElement>['size'];
11+
ref?: React.Ref<HTMLInputElement>;
1112
size?: 'sm';
1213
}
1314

@@ -23,9 +24,7 @@ export const Radio = styled(
2324
nativeSize,
2425

2526
...props
26-
}: RadioProps & {
27-
ref?: React.Ref<HTMLInputElement>;
28-
}) => <input type="radio" {...props} ref={ref} size={nativeSize} />,
27+
}: RadioProps) => <input type="radio" {...props} ref={ref} size={nativeSize} />,
2928
{
3029
shouldForwardProp: prop => typeof prop === 'string' && isPropValid(prop),
3130
}

‎static/app/components/core/switch/index.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,11 @@ import * as ChonkSwitch from './index.chonk';
66

77
export interface SwitchProps
88
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onClick'> {
9+
ref?: React.Ref<HTMLInputElement>;
910
size?: 'sm' | 'lg';
1011
}
1112

12-
export function Switch({
13-
ref,
14-
size = 'sm',
15-
...props
16-
}: SwitchProps & {
17-
ref?: React.Ref<HTMLInputElement>;
18-
}) {
13+
export function Switch({ref, size = 'sm', ...props}: SwitchProps) {
1914
return (
2015
<SwitchWrapper>
2116
{/* @TODO(jonasbadalic): if we name the prop size, it conflicts with the native input size prop,

‎static/app/components/core/textarea/index.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface TextAreaProps
2222
* Max number of rows to default to.
2323
*/
2424
maxRows?: number;
25+
ref?: React.Ref<HTMLTextAreaElement>;
2526
/**
2627
* Number of rows to default to.
2728
*/
@@ -36,9 +37,7 @@ function TextAreaControl({
3637
maxRows,
3738
size: _size,
3839
...p
39-
}: TextAreaProps & {
40-
ref?: React.Ref<HTMLTextAreaElement>;
41-
}) {
40+
}: TextAreaProps) {
4241
return autosize ? (
4342
<TextareaAutosize {...p} ref={ref} rows={rows} maxRows={maxRows} />
4443
) : (

‎static/app/components/events/eventDataSection.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export interface EventDataSectionProps {
3030
* you want the overlay to be interactive)
3131
*/
3232
isHelpHoverable?: boolean;
33+
ref?: React.Ref<HTMLDivElement>;
3334
/**
3435
* Should the permalink be enabled for this section?
3536
*

‎static/app/components/events/eventTagsAndScreenshot/tags.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ type Props = {
2828
*/
2929
additionalActions?: React.ReactNode;
3030
disableCollapsePersistence?: boolean;
31+
ref?: React.Ref<HTMLElement>;
3132
};
3233

3334
export function EventTagsDataSection({
@@ -36,9 +37,7 @@ export function EventTagsDataSection({
3637
projectSlug,
3738
additionalActions,
3839
disableCollapsePersistence,
39-
}: Props & {
40-
ref?: React.Ref<HTMLElement>;
41-
}) {
40+
}: Props) {
4241
const sentryTags = getSentryDefaultTags();
4342

4443
const [tagFilter, setTagFilter] = useState<TagFilter>(TagFilter.ALL);

0 commit comments

Comments
 (0)