mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-25 07:22:39 +03:00
refactor: use radix ui on workspace avatar (#1819)
This commit is contained in:
parent
a24b747ee8
commit
ae4339ea28
@ -49,6 +49,7 @@ __metadata:
|
||||
"@mui/base": 5.0.0-alpha.124
|
||||
"@mui/icons-material": ^5.11.16
|
||||
"@mui/material": ^5.11.16
|
||||
"@radix-ui/react-avatar": ^1.0.2
|
||||
"@storybook/addon-actions": ^7.0.2
|
||||
"@storybook/addon-coverage": ^0.0.8
|
||||
"@storybook/addon-essentials": ^7.0.2
|
||||
@ -1633,7 +1634,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
|
||||
"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
|
||||
version: 7.21.0
|
||||
resolution: "@babel/runtime@npm:7.21.0"
|
||||
dependencies:
|
||||
@ -4006,6 +4007,91 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-avatar@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "@radix-ui/react-avatar@npm:1.0.2"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-context": 1.0.0
|
||||
"@radix-ui/react-primitive": 1.0.2
|
||||
"@radix-ui/react-use-callback-ref": 1.0.0
|
||||
"@radix-ui/react-use-layout-effect": 1.0.0
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: 5351bd8763b1d0f2450e79a443b8525a652c89921321c25b93afad666b56a7eb00fcedfc801d5f284c78a7cbebea658f04e4fee6d305d7def57a562d9518dbdb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-compose-refs@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-context@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-context@npm:1.0.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: 43c6b6f2183398161fe6b109e83fff240a6b7babbb27092b815932342a89d5ca42aa9806bfae5927970eed5ff90feed04c67aa29c6721f84ae826f17fcf34ce0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-primitive@npm:1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "@radix-ui/react-primitive@npm:1.0.2"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-slot": 1.0.1
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: 070b1770749eb629425ef959c4cdbd86957b83c5286ae4423e55ab1a89fa286a51f5aeee44e3a13eb6ca44771415ac1acbaeb0ba03013b49ecb5253e1a5a8996
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-slot@npm:1.0.1":
|
||||
version: 1.0.1
|
||||
resolution: "@radix-ui/react-slot@npm:1.0.1"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-compose-refs": 1.0.0
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-use-callback-ref@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: a8dda76ba0a26e23dc6ab5003831ad7439f59ba9d696a517643b9ee6a7fb06b18ae7a8f5a3c00c530d5c8104745a466a077b7475b99b4c0f5c15f5fc29474471
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-use-layout-effect@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-use-layout-effect@npm:1.0.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: fcdc8cfa79bd45766ebe3de11039c58abe3fed968cb39c12b2efce5d88013c76fe096ea4cee464d42576d02fe7697779b682b4268459bca3c4e48644f5b4ac5e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@react-dnd/asap@npm:^5.0.1":
|
||||
version: 5.0.2
|
||||
resolution: "@react-dnd/asap@npm:5.0.2"
|
||||
|
@ -29,6 +29,7 @@
|
||||
"@mui/base": "5.0.0-alpha.124",
|
||||
"@mui/icons-material": "^5.11.16",
|
||||
"@mui/material": "^5.11.16",
|
||||
"@radix-ui/react-avatar": "^1.0.2",
|
||||
"@toeverything/hooks": "workspace:*",
|
||||
"clsx": "^1.2.1",
|
||||
"lit": "^2.7.1",
|
||||
|
@ -1,5 +1,7 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const avatarStyle = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
color: '#fff',
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
@ -7,8 +9,18 @@ export const avatarStyle = style({
|
||||
verticalAlign: 'middle',
|
||||
});
|
||||
|
||||
export const avatarImageStyle = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center',
|
||||
});
|
||||
|
||||
export const avatarTextStyle = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: '1px solid #fff',
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
borderRadius: '50%',
|
||||
display: 'inline-flex',
|
||||
|
@ -1,11 +1,12 @@
|
||||
import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
|
||||
import type { Workspace } from '@blocksuite/store';
|
||||
import * as RadixAvatar from '@radix-ui/react-avatar';
|
||||
import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
|
||||
import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
|
||||
import clsx from 'clsx';
|
||||
import type React from 'react';
|
||||
import { memo } from 'react';
|
||||
|
||||
import { avatarStyle, avatarTextStyle } from './index.css';
|
||||
import { avatarImageStyle, avatarStyle, avatarTextStyle } from './index.css';
|
||||
|
||||
function stringToColour(str: string) {
|
||||
str = str || 'affine';
|
||||
@ -28,61 +29,6 @@ function stringToColour(str: string) {
|
||||
return colour;
|
||||
}
|
||||
|
||||
interface AvatarProps {
|
||||
size: number;
|
||||
name: string;
|
||||
avatar_url: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
|
||||
size: _size,
|
||||
avatar_url,
|
||||
name,
|
||||
...props
|
||||
}) {
|
||||
const size = _size || 20;
|
||||
const sizeStr = size + 'px';
|
||||
|
||||
return (
|
||||
<>
|
||||
{avatar_url ? (
|
||||
<div
|
||||
{...props}
|
||||
className={clsx(avatarStyle, props.className)}
|
||||
style={{
|
||||
width: sizeStr,
|
||||
height: sizeStr,
|
||||
}}
|
||||
>
|
||||
<picture>
|
||||
<img
|
||||
width={size}
|
||||
height={size}
|
||||
src={avatar_url}
|
||||
alt=""
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
{...props}
|
||||
className={avatarTextStyle}
|
||||
style={{
|
||||
width: sizeStr,
|
||||
height: sizeStr,
|
||||
fontSize: Math.ceil(0.5 * size) + 'px',
|
||||
background: stringToColour(name || 'AFFiNE'),
|
||||
}}
|
||||
>
|
||||
{(name || 'AFFiNE').substring(0, 1)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export type WorkspaceAvatarProps = {
|
||||
size?: number;
|
||||
workspace: LocalWorkspace | AffineWorkspace | null;
|
||||
@ -97,19 +43,32 @@ export type BlockSuiteWorkspaceAvatar = Omit<
|
||||
};
|
||||
|
||||
export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
|
||||
size = 20,
|
||||
size,
|
||||
workspace,
|
||||
...props
|
||||
}) => {
|
||||
const [avatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
|
||||
const [name] = useBlockSuiteWorkspaceName(workspace);
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
<RadixAvatar.Root
|
||||
{...props}
|
||||
size={size}
|
||||
name={workspace.meta.name ?? 'Untitled'}
|
||||
avatar_url={avatar ?? ''}
|
||||
/>
|
||||
className={clsx(avatarStyle, props.className)}
|
||||
style={{
|
||||
height: size,
|
||||
width: size,
|
||||
}}
|
||||
>
|
||||
<RadixAvatar.Image className={avatarImageStyle} src={avatar} alt={name} />
|
||||
<RadixAvatar.Fallback
|
||||
className={avatarTextStyle}
|
||||
style={{
|
||||
backgroundColor: stringToColour(name),
|
||||
}}
|
||||
>
|
||||
{name.substring(0, 1)}
|
||||
</RadixAvatar.Fallback>
|
||||
</RadixAvatar.Root>
|
||||
);
|
||||
};
|
||||
|
||||
@ -127,5 +86,23 @@ export const WorkspaceAvatar: React.FC<WorkspaceAvatarProps> = ({
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <Avatar {...props} size={size} name="UNKNOWN" avatar_url="" />;
|
||||
return (
|
||||
<RadixAvatar.Root
|
||||
{...props}
|
||||
className={clsx(avatarStyle, props.className)}
|
||||
style={{
|
||||
height: size,
|
||||
width: size,
|
||||
}}
|
||||
>
|
||||
<RadixAvatar.Fallback
|
||||
className={avatarTextStyle}
|
||||
style={{
|
||||
backgroundColor: stringToColour('A'),
|
||||
}}
|
||||
>
|
||||
A
|
||||
</RadixAvatar.Fallback>
|
||||
</RadixAvatar.Root>
|
||||
);
|
||||
};
|
||||
|
@ -77,3 +77,11 @@ export const BlobExample: StoryFn<WorkspaceAvatarProps> = props => {
|
||||
BlobExample.args = {
|
||||
size: 40,
|
||||
};
|
||||
|
||||
export const Empty: StoryFn<WorkspaceAvatarProps> = props => {
|
||||
return <WorkspaceAvatar {...props} workspace={null} />;
|
||||
};
|
||||
|
||||
Empty.args = {
|
||||
size: 40,
|
||||
};
|
||||
|
42
yarn.lock
42
yarn.lock
@ -49,6 +49,7 @@ __metadata:
|
||||
"@mui/base": 5.0.0-alpha.124
|
||||
"@mui/icons-material": ^5.11.16
|
||||
"@mui/material": ^5.11.16
|
||||
"@radix-ui/react-avatar": ^1.0.2
|
||||
"@storybook/addon-actions": ^7.0.2
|
||||
"@storybook/addon-coverage": ^0.0.8
|
||||
"@storybook/addon-essentials": ^7.0.2
|
||||
@ -4141,6 +4142,22 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-avatar@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "@radix-ui/react-avatar@npm:1.0.2"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-context": 1.0.0
|
||||
"@radix-ui/react-primitive": 1.0.2
|
||||
"@radix-ui/react-use-callback-ref": 1.0.0
|
||||
"@radix-ui/react-use-layout-effect": 1.0.0
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: 5351bd8763b1d0f2450e79a443b8525a652c89921321c25b93afad666b56a7eb00fcedfc801d5f284c78a7cbebea658f04e4fee6d305d7def57a562d9518dbdb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-compose-refs@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
|
||||
@ -4284,6 +4301,19 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-primitive@npm:1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "@radix-ui/react-primitive@npm:1.0.2"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-slot": 1.0.1
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: 070b1770749eb629425ef959c4cdbd86957b83c5286ae4423e55ab1a89fa286a51f5aeee44e3a13eb6ca44771415ac1acbaeb0ba03013b49ecb5253e1a5a8996
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-slot@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-slot@npm:1.0.0"
|
||||
@ -4296,6 +4326,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-slot@npm:1.0.1":
|
||||
version: 1.0.1
|
||||
resolution: "@radix-ui/react-slot@npm:1.0.1"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-compose-refs": 1.0.0
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-use-callback-ref@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
|
||||
|
Loading…
Reference in New Issue
Block a user