Skip to content

Remove uses of React.forwardRef #1215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shepmaster merged 1 commit into from
May 6, 2026
+62 −74
Merged

Remove uses of React.forwardRef #1215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 46 additions & 52 deletions ui/frontend/ButtonSet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,66 +22,60 @@ interface ButtonProps extends HTMLButton {
iconRight?: React.FC;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{
isPrimary = false,
isSmall = false,
iconLeft: IconLeft,
iconRight: IconRight,
children,
...props
},
ref,
) => {
const iconLeft = IconLeft && (
<span className={styles.iconLeft}>
<IconLeft />
</span>
);
const iconRight = IconRight && (
<span className={styles.iconRight}>
<IconRight />
</span>
);
const ordinalStyle = isPrimary ? styles.primary : styles.secondary;
const smallStyle = isSmall ? styles.small : '';
export const Button: React.FC<ButtonProps> = ({
isPrimary = false,
isSmall = false,
iconLeft: IconLeft,
iconRight: IconRight,
children,
ref,
...props
}) => {
const iconLeft = IconLeft && (
<span className={styles.iconLeft}>
<IconLeft />
</span>
);
const iconRight = IconRight && (
<span className={styles.iconRight}>
<IconRight />
</span>
);
const ordinalStyle = isPrimary ? styles.primary : styles.secondary;
const smallStyle = isSmall ? styles.small : '';

return (
<button ref={ref} className={`${ordinalStyle} ${smallStyle}`} {...props}>
{iconLeft}
{children}
{iconRight}
</button>
);
},
);
Button.displayName = 'Button';
return (
<button ref={ref} className={`${ordinalStyle} ${smallStyle}`} {...props}>
{iconLeft}
{children}
{iconRight}
</button>
);
};

export const Rule: React.FC = () => <span className={styles.rule} />;

interface IconButtonProps extends HTMLButton {
isSmall?: boolean;
}

export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
({ isSmall = false, children, ...props }, ref) => {
const smallStyle = isSmall ? styles.small : '';
export const IconButton: React.FC<IconButtonProps> = ({
ref,
isSmall = false,
children,
...props
}) => {
const smallStyle = isSmall ? styles.small : '';

return (
<button ref={ref} className={`${styles.icon} ${smallStyle}`} {...props}>
{children}
</button>
);
},
);
IconButton.displayName = 'IconButton';

export const IconLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
({ children, ...props }, ref) => (
<Link ref={ref} className={styles.icon} {...props}>
return (
<button ref={ref} className={`${styles.icon} ${smallStyle}`} {...props}>
{children}
</Link>
),
</button>
);
};

export const IconLink: React.FC<LinkProps> = ({ children, ref, ...props }) => (
<Link ref={ref} className={styles.icon} {...props}>
{children}
</Link>
);
IconLink.displayName = 'IconLink';
30 changes: 12 additions & 18 deletions ui/frontend/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,20 +87,19 @@ const ExecuteButton: React.FC = () => {
};

const BuildMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => (
const Button: React.FC<ButtonProps> = ({ toggle, ref }) => (
<IconButton type="button" title="Select what to build" ref={ref} onClick={toggle}>
<MoreOptionsIcon />
</IconButton>
));
Button.displayName = 'BuildMenuButton.Button';
);

return <PopButton Button={Button} Menu={BuildMenu} menuContainer={menuContainer} />;
};

const ModeMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
const label = useAppSelector(selectors.getModeLabel);

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => (
const Button: React.FC<ButtonProps> = ({ toggle, ref }) => (
<OneButton
type="button"
title="Mode &mdash; Choose the optimization level"
Expand All @@ -110,16 +109,15 @@ const ModeMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
>
{label}
</OneButton>
));
Button.displayName = 'ModeMenuButton.Button';
);

return <PopButton Button={Button} Menu={ModeMenu} menuContainer={menuContainer} />;
};

const ChannelMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
const label = useAppSelector(selectors.getChannelLabel);

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => (
const Button: React.FC<ButtonProps> = ({ toggle, ref }) => (
<OneButton
type="button"
title="Channel &mdash; Choose the Rust version"
Expand All @@ -129,21 +127,19 @@ const ChannelMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
>
{label}
</OneButton>
));
Button.displayName = 'ChannelMenuButton.Button';
);

return <PopButton Button={Button} Menu={ChannelMenu} menuContainer={menuContainer} />;
};

const AdvancedOptionsMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
const advancedOptionsSet = useAppSelector(selectors.getAdvancedOptionsSet);

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => (
const Button: React.FC<ButtonProps> = ({ toggle, ref }) => (
<IconButton type="button" title="Advanced compilation flags" ref={ref} onClick={toggle}>
{advancedOptionsSet ? <MoreOptionsActiveIcon /> : <MoreOptionsIcon />}
</IconButton>
));
Button.displayName = 'AdvancedOptionsMenuButton.Button';
);

return <PopButton Button={Button} Menu={AdvancedOptionsMenu} menuContainer={menuContainer} />;
};
Expand All @@ -160,7 +156,7 @@ const ShareButton: React.FC = () => {
};

const ToolsMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => (
const Button: React.FC<ButtonProps> = ({ toggle, ref }) => (
<OneButton
type="button"
title="Run extra tools on the source code"
Expand All @@ -170,14 +166,13 @@ const ToolsMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
>
Tools
</OneButton>
));
Button.displayName = 'ToolsMenuButton.Button';
);

return <PopButton Button={Button} Menu={ToolsMenu} menuContainer={menuContainer} />;
};

const ConfigMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => (
const Button: React.FC<ButtonProps> = ({ toggle, ref }) => (
<OneButton
type="button"
title="Show the configuration options"
Expand All @@ -188,8 +183,7 @@ const ConfigMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
>
Config
</OneButton>
));
Button.displayName = 'ConfigMenuButton.Button';
);

return <PopButton Button={Button} Menu={ConfigMenu} menuContainer={menuContainer} />;
};
Expand Down
3 changes: 2 additions & 1 deletion ui/frontend/PopButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@ import * as styles from './PopButton.module.css';

export interface ButtonProps {
toggle: () => void;
ref: React.Ref<HTMLButtonElement>;
}

export interface MenuProps {
close: () => void;
}

interface NewPopProps {
Button: React.ComponentType<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
Button: React.ComponentType<ButtonProps>;
Menu: React.ComponentType<MenuProps>;
menuContainer?: React.RefObject<HTMLDivElement | null>;
}
Expand Down
5 changes: 2 additions & 3 deletions ui/frontend/Stdin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const Stdin: React.FC = () => {
);
};

const MoreButton = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle }, ref) => {
const MoreButton: React.FC<ButtonProps> = ({ toggle, ref }) => {
const disabled = !useAppSelector(enableStdinSelector);

return (
Expand All @@ -104,8 +104,7 @@ const MoreButton = React.forwardRef<HTMLButtonElement, ButtonProps>(({ toggle },
⋮
</IconButton>
);
});
MoreButton.displayName = 'MoreButton';
};

const MoreMenu: React.FC<MenuProps> = ({ close }) => {
const dispatch = useAppDispatch();
Expand Down
Loading