fix(frontend): forward refs through shadcn bridge buttons

This commit is contained in:
Sagit
2026-02-19 05:55:54 +00:00
parent b6c2159614
commit 2308b25bcf
3 changed files with 71 additions and 54 deletions
@@ -46,3 +46,4 @@
- [2026-02-19] 完成 S7:删除全部 HeroUI/NextUI 依赖,补齐 `@internationalized/date` 与 `@react-aria/i18n` 显式依赖 - [2026-02-19] 完成 S7:删除全部 HeroUI/NextUI 依赖,补齐 `@internationalized/date` 与 `@react-aria/i18n` 显式依赖
- [2026-02-19] 完成 S8:构建验收通过(`npm run build`),`package.json` 已无 `heroui/nextui` 依赖 - [2026-02-19] 完成 S8:构建验收通过(`npm run build`),`package.json` 已无 `heroui/nextui` 依赖
- [2026-02-19] 验证结果:业务代码中 `@heroui/*` 导入为 `0`,已统一替换为 `@/shadcn-bridge/heroui/*`(22 文件,106 处) - [2026-02-19] 验证结果:业务代码中 `@heroui/*` 导入为 `0`,已统一替换为 `@/shadcn-bridge/heroui/*`(22 文件,106 处)
- [2026-02-19] 后续修复:`src/components/ui/button.tsx` 与 `src/shadcn-bridge/heroui/button.tsx` 改为 `forwardRef`,消除 `DropdownMenuTrigger asChild` 场景 ref 警告;复构建通过
+7 -2
View File
@@ -37,16 +37,21 @@ type ButtonProps = React.ComponentProps<"button"> &
asChild?: boolean; asChild?: boolean;
}; };
function Button({ asChild = false, className, size, variant, ...props }: ButtonProps) { const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ asChild = false, className, size, variant, ...props }, ref) => {
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
className={cn(buttonVariants({ className, size, variant }))} className={cn(buttonVariants({ className, size, variant }))}
data-slot="button" data-slot="button"
ref={ref}
{...props} {...props}
/> />
); );
} },
);
Button.displayName = "Button";
export { Button, buttonVariants }; export { Button, buttonVariants };
@@ -57,7 +57,14 @@ function mapSize(size: HeroButtonSize, isIconOnly: boolean): "default" | "sm" |
return "default"; return "default";
} }
export function Button({ export const Button = React.forwardRef<
HTMLButtonElement,
ButtonProps & {
isDisabled?: boolean;
}
>(
(
{
children, children,
className, className,
color = "default", color = "default",
@@ -73,9 +80,9 @@ export function Button({
type = "button", type = "button",
variant = "solid", variant = "solid",
...props ...props
}: ButtonProps & { },
isDisabled?: boolean; ref,
}) { ) => {
const resolvedVariant = mapVariant(color, variant); const resolvedVariant = mapVariant(color, variant);
const resolvedSize = mapSize(size, isIconOnly); const resolvedSize = mapSize(size, isIconOnly);
const resolvedDisabled = Boolean(disabled || isDisabled || isLoading); const resolvedDisabled = Boolean(disabled || isDisabled || isLoading);
@@ -89,6 +96,7 @@ export function Button({
<BaseButton <BaseButton
className={cn(isIconOnly ? "p-0" : "", className)} className={cn(isIconOnly ? "p-0" : "", className)}
disabled={resolvedDisabled} disabled={resolvedDisabled}
ref={ref}
size={resolvedSize} size={resolvedSize}
type={type} type={type}
variant={resolvedVariant} variant={resolvedVariant}
@@ -102,4 +110,7 @@ export function Button({
{endContent} {endContent}
</BaseButton> </BaseButton>
); );
} },
);
Button.displayName = "HeroBridgeButton";