Skip to content

Commit 2c5a51e

Browse files
huijieweihuijiewei
committed
refactor: simplify component exports and improve file organization
1 parent 874deab commit 2c5a51e

File tree

7 files changed

+79
-80
lines changed

7 files changed

+79
-80
lines changed

‎packages/react-ui/src/components/avatar/avatar-root.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { isNumber } from "@resolid/utils";
2+
import { type CSSProperties, useState } from "react";
3+
import type { ImageLoadStatus } from "../../hooks";
4+
import type { PrimitiveProps } from "../../primitives";
5+
import { tx } from "../../utils";
6+
import { AvatarContext, AvatarStatusContext } from "./avatar-context";
7+
import { type AvatarBaseProps, useAvatarGroup } from "./avatar-group-context";
8+
9+
export type AvatarRootProps = {
10+
/**
11+
* 头像的人名
12+
*/
13+
name?: string;
14+
} & AvatarBaseProps;
15+
16+
export const AvatarRoot = (props: PrimitiveProps<"div", AvatarRootProps>) => {
17+
const group = useAvatarGroup(true);
18+
19+
const {
20+
name,
21+
size = group?.size ?? 64,
22+
radius = group?.radius ?? "full",
23+
className,
24+
style,
25+
children,
26+
...rest
27+
} = props;
28+
29+
const sizeStyle = isNumber(size) ? `${size}px` : size;
30+
const radiusStyle = isNumber(radius) && radius > 0 ? `${radius}px` : undefined;
31+
const radiusClass = radiusStyle
32+
? "rounded-(--rv)"
33+
: radius == "full"
34+
? "rounded-full"
35+
: radius == true
36+
? "rounded-md"
37+
: "";
38+
39+
const [imageLoadStatus, setImageLoadStatus] = useState<ImageLoadStatus>("idle");
40+
41+
return (
42+
<div
43+
style={{ ...style, "--sv": sizeStyle, "--rv": radiusStyle } as CSSProperties}
44+
className={tx(
45+
"size-(--sv) relative inline-flex shrink-0 select-none items-center justify-center",
46+
radiusClass,
47+
group && "border-bg-normal not-first:ms-(--pv) border-2",
48+
!className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-subtlest",
49+
className,
50+
)}
51+
{...rest}
52+
>
53+
<AvatarContext value={{ name, radiusClass }}>
54+
<AvatarStatusContext value={{ imageLoadStatus, setImageLoadStatus }}>{children}</AvatarStatusContext>
55+
</AvatarContext>
56+
</div>
57+
);
58+
};

‎packages/react-ui/src/components/avatar/avatar.tsx

+6-55
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,9 @@
1-
import { isNumber } from "@resolid/utils";
2-
import { type CSSProperties, useState } from "react";
3-
import type { ImageLoadStatus } from "../../hooks";
4-
import type { PrimitiveProps } from "../../primitives";
5-
import { tx } from "../../utils";
6-
import { AvatarContext, AvatarStatusContext } from "./avatar-context";
7-
import { type AvatarBaseProps, useAvatarGroup } from "./avatar-group-context";
1+
import { AvatarRoot, type AvatarRootProps } from "./avatar-root";
82

9-
export type AvatarProps = {
10-
/**
11-
* 头像的人名
12-
*/
13-
name?: string;
14-
} & AvatarBaseProps;
3+
export type AvatarProps = AvatarRootProps;
154

16-
export const Avatar = (props: PrimitiveProps<"div", AvatarProps>) => {
17-
const group = useAvatarGroup(true);
5+
export const Avatar = AvatarRoot;
186

19-
const {
20-
name,
21-
size = group?.size ?? 64,
22-
radius = group?.radius ?? "full",
23-
className,
24-
style,
25-
children,
26-
...rest
27-
} = props;
28-
29-
const sizeStyle = isNumber(size) ? `${size}px` : size;
30-
const radiusStyle = isNumber(radius) && radius > 0 ? `${radius}px` : undefined;
31-
const radiusClass = radiusStyle
32-
? "rounded-(--rv)"
33-
: radius == "full"
34-
? "rounded-full"
35-
: radius == true
36-
? "rounded-md"
37-
: "";
38-
39-
const [imageLoadStatus, setImageLoadStatus] = useState<ImageLoadStatus>("idle");
40-
41-
return (
42-
<div
43-
style={{ ...style, "--sv": sizeStyle, "--rv": radiusStyle } as CSSProperties}
44-
className={tx(
45-
"size-(--sv) relative inline-flex shrink-0 select-none items-center justify-center",
46-
radiusClass,
47-
group && "border-bg-normal not-first:ms-(--pv) border-2",
48-
!className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-subtlest",
49-
className,
50-
)}
51-
{...rest}
52-
>
53-
<AvatarContext value={{ name, radiusClass }}>
54-
<AvatarStatusContext value={{ imageLoadStatus, setImageLoadStatus }}>{children}</AvatarStatusContext>
55-
</AvatarContext>
56-
</div>
57-
);
58-
};
7+
export { AvatarFallback } from "./avatar-fallback";
8+
export { AvatarImage } from "./avatar-image";
9+
export { AvatarIndicator } from "./avatar-indicator";

‎packages/react-ui/src/components/avatar/tests/avatar.test.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { cleanup, render } from "@testing-library/react";
22
import { afterEach, describe, expect, test } from "vitest";
33
import { axe } from "vitest-axe";
4-
import { Avatar, type AvatarProps } from "../avatar";
5-
import { AvatarFallback } from "../avatar-fallback";
6-
import { AvatarImage } from "../avatar-image";
4+
import { Avatar, AvatarFallback, AvatarImage, type AvatarProps } from "../avatar";
75

86
const ComponentUnderTest = (props: AvatarProps) => {
97
return (

‎packages/react-ui/src/components/context-menu/context-menu.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@ export const ContextMenu = (props: ContextMenuProps) => {
1212
return <MenuRoot preventScroll {...props} />;
1313
};
1414

15+
export { ContextMenuCheckboxItem } from "./context-menu-checkbox-item";
16+
export { ContextMenuItem } from "./context-menu-item";
17+
export { ContextMenuRadioGroup } from "./context-menu-radio-group";
18+
export { ContextMenuRadioItem } from "./context-menu-radio-item";
1519
export { ContextMenuTrigger } from "./context-menu-trigger";
1620

1721
export const ContextMenuContent = MenuContent;
1822
export const ContextMenuSeparator = MenuSeparator;
19-
2023
export const ContextMenuGroup = MenuGroup;
2124
export const ContextMenuLabel = MenuLabel;
22-
2325
export const ContextMenuItemIndicator = MenuItemIndicator;
24-
2526
export const ContextMenuSubTrigger = MenuSubTrigger;

‎packages/react-ui/src/components/dropdown-menu/dropdown-menu.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@ import { PopperArrow } from "../../primitives/popper/popper-arrow";
1111
export type DropdownMenuProps = MenuRootProps;
1212

1313
export const DropdownMenu = MenuRoot;
14-
export const DropdownMenuTrigger = MenuTrigger;
1514

15+
export { DropdownMenuCheckboxItem } from "./dropdown-menu-checkbox-item";
16+
export { DropdownMenuItem } from "./dropdown-menu-item";
17+
export { DropdownMenuRadioGroup } from "./dropdown-menu-radio-group";
18+
export { DropdownMenuRadioItem } from "./dropdown-menu-radio-item";
19+
20+
export const DropdownMenuTrigger = MenuTrigger;
1621
export const DropdownMenuContent = MenuContent;
1722
export const DropdownMenuArrow = PopperArrow;
1823
export const DropdownMenuSeparator = MenuSeparator;
19-
2024
export const DropdownMenuGroup = MenuGroup;
2125
export const DropdownMenuLabel = MenuLabel;
22-
2326
export const DropdownMenuItemIndicator = MenuItemIndicator;
24-
2527
export const DropdownMenuSubTrigger = MenuSubTrigger;

‎packages/react-ui/src/components/dropdown-menu/tests/dropdown-menu.test.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ import { axe } from "vitest-axe";
55
import {
66
DropdownMenu,
77
DropdownMenuArrow,
8+
DropdownMenuCheckboxItem,
89
DropdownMenuContent,
910
DropdownMenuGroup,
11+
DropdownMenuItem,
1012
DropdownMenuItemIndicator,
1113
DropdownMenuLabel,
1214
type DropdownMenuProps,
15+
DropdownMenuRadioGroup,
16+
DropdownMenuRadioItem,
1317
DropdownMenuSeparator,
1418
DropdownMenuSubTrigger,
1519
DropdownMenuTrigger,
1620
} from "../dropdown-menu";
17-
import { DropdownMenuCheckboxItem } from "../dropdown-menu-checkbox-item";
18-
import { DropdownMenuItem } from "../dropdown-menu-item";
19-
import { DropdownMenuRadioGroup } from "../dropdown-menu-radio-group";
20-
import { DropdownMenuRadioItem } from "../dropdown-menu-radio-item";
2121

2222
const ComponentUnderTest = (
2323
props: DropdownMenuProps & {

‎packages/react-ui/src/components/index.ts

-11
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
export * from "./accordion/accordion";
22
export * from "./alert/alert";
33
export * from "./avatar/avatar";
4-
export * from "./avatar/avatar-fallback";
54
export * from "./avatar/avatar-group";
6-
export * from "./avatar/avatar-image";
7-
export * from "./avatar/avatar-indicator";
85
export * from "./badge/badge";
96
export * from "./breadcrumb/breadcrumb";
107
export * from "./button/button";
@@ -14,17 +11,9 @@ export * from "./checkbox/checkbox-group";
1411
export * from "./close-button/close-button";
1512
export * from "./collapsible/collapsible";
1613
export * from "./context-menu/context-menu";
17-
export * from "./context-menu/context-menu-checkbox-item";
18-
export * from "./context-menu/context-menu-item";
19-
export * from "./context-menu/context-menu-radio-group";
20-
export * from "./context-menu/context-menu-radio-item";
2114
export * from "./dialog/dialog";
2215
export * from "./drawer/drawer";
2316
export * from "./dropdown-menu/dropdown-menu";
24-
export * from "./dropdown-menu/dropdown-menu-checkbox-item";
25-
export * from "./dropdown-menu/dropdown-menu-item";
26-
export * from "./dropdown-menu/dropdown-menu-radio-group";
27-
export * from "./dropdown-menu/dropdown-menu-radio-item";
2817
export * from "./input/input";
2918
export * from "./input/input-addon";
3019
export * from "./input/input-group";

0 commit comments

Comments
 (0)