Skip to content

Commit

Permalink
[sparkle] Supports ref in LinkWrapper and forward to <a> (#8466)
Browse files Browse the repository at this point in the history
  • Loading branch information
tdraier authored Nov 6, 2024
1 parent 06805d4 commit b7be308
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 44 deletions.
15 changes: 6 additions & 9 deletions sparkle/src/components/LinkWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,16 @@ export interface LinkWrapperProps {
target?: string;
}

export function LinkWrapper({
children,
href,
rel,
replace,
shallow,
target,
}: LinkWrapperProps) {
export const LinkWrapper = React.forwardRef<
HTMLAnchorElement,
LinkWrapperProps
>(({ children, href, rel, replace, shallow, target }, ref) => {
const { components } = React.useContext(SparkleContext);

if (href) {
return (
<components.link
ref={ref}
href={href}
target={target}
rel={rel}
Expand All @@ -36,4 +33,4 @@ export function LinkWrapper({
}

return children;
}
});
72 changes: 37 additions & 35 deletions sparkle/src/context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { ComponentType, MouseEvent, ReactNode } from "react";
import type { UrlObject } from "url";
import url from "url";

export type SparkleContextLinkType = ComponentType<{
type SparkleLinkProps = {
href: string | UrlObject;
className?: string;
children: ReactNode;
Expand All @@ -21,57 +21,59 @@ export type SparkleContextLinkType = ComponentType<{
shallow?: boolean;
target?: string;
rel?: string;
}>;
};

export type SparkleContextLinkType = ComponentType<
SparkleLinkProps & React.RefAttributes<HTMLAnchorElement>
>;

export type SparkleContextType = {
components: {
link: SparkleContextLinkType;
};
};

export const aLink: SparkleContextLinkType = ({
href,
className,
ariaCurrent,
ariaLabel,
onClick,
children,
target,
rel,
}) => {
const hrefAsString = typeof href !== "string" ? url.format(href) : href;
export const aLink: SparkleContextLinkType = React.forwardRef<
HTMLAnchorElement,
SparkleLinkProps
>(
(
{ href, className, ariaCurrent, ariaLabel, onClick, children, target, rel },
ref
) => {
const hrefAsString = typeof href !== "string" ? url.format(href) : href;

return (
<a
href={hrefAsString}
className={className}
aria-current={ariaCurrent}
aria-label={ariaLabel}
onClick={onClick}
target={target}
rel={rel}
>
{children}
</a>
);
};
return (
<a
ref={ref}
href={hrefAsString}
className={className}
aria-current={ariaCurrent}
aria-label={ariaLabel}
onClick={onClick}
target={target}
rel={rel}
>
{children}
</a>
);
}
);

export const noHrefLink: SparkleContextLinkType = ({
className,
ariaCurrent,
ariaLabel,
onClick,
children,
}) => (
export const noHrefLink: SparkleContextLinkType = React.forwardRef<
HTMLAnchorElement,
SparkleLinkProps
>(({ className, ariaCurrent, ariaLabel, onClick, children }, ref) => (
<a
ref={ref}
className={className}
aria-current={ariaCurrent}
aria-label={ariaLabel}
onClick={onClick}
>
{children}
</a>
);
));

export const SparkleContext = React.createContext<SparkleContextType>({
components: {
Expand Down

0 comments on commit b7be308

Please sign in to comment.