Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 05:14:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: workspace avatar url won't update (#1817)

Browse Source
This commit is contained in:
Himself65
2023-04-04 12:46:33 -05:00
committed by GitHub
parent 37169ae37d
commit 89f53190db
18 changed files with 1189 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/component/src/components/block-suite-editor/index.stories.tsx
View File

@@ -51,12 +51,6 @@ const Template: StoryFn<EditorProps> = (args: EditorProps) => {
};
export const Empty = Template.bind({});
Empty.play = async ({ canvasElement }) => {
await new Promise<void>(resolve => {
document.addEventListener('blocksuite:ready', () => resolve(), {
once: true,
});
});
const editorContainer = canvasElement.querySelector(
'[data-testid="editor-test-page0"]'
) as HTMLDivElement;

19
packages/component/src/components/workspace-avatar/index.css.ts Normal file
View File

@@ -0,0 +1,19 @@
import { style } from '@vanilla-extract/css';
export const avatarStyle = style({
color: '#fff',
borderRadius: '50%',
overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
});
export const avatarTextStyle = style({
border: '1px solid #fff',
color: '#fff',
borderRadius: '50%',
display: 'inline-flex',
lineHeight: '1',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
});

42
packages/component/src/components/workspace-avatar/index.tsx
View File

@@ -1,9 +1,12 @@
import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
import type { Workspace } from '@blocksuite/store';
import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
import clsx from 'clsx';
import type React from 'react';
import { memo } from 'react';
import { avatarStyle, avatarTextStyle } from './index.css';
function stringToColour(str: string) {
str = str || 'affine';
let colour = '#';
@@ -29,13 +32,12 @@ interface AvatarProps {
size: number;
name: string;
avatar_url: string;
style?: React.CSSProperties;
className?: string;
}
export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
size: _size,
avatar_url,
style,
name,
...props
}) {
@@ -47,20 +49,16 @@ export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
{avatar_url ? (
<div
{...props}
className={clsx(avatarStyle, props.className)}
style={{
...style,
width: sizeStr,
height: sizeStr,
color: '#fff',
borderRadius: '50%',
overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
}}
>
<picture>
<img
style={{ width: sizeStr, height: sizeStr }}
width={size}
height={size}
src={avatar_url}
alt=""
referrerPolicy="no-referrer"
@@ -70,20 +68,12 @@ export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
) : (
<div
{...props}
className={avatarTextStyle}
style={{
...style,
width: sizeStr,
height: sizeStr,
border: '1px solid #fff',
color: '#fff',
fontSize: Math.ceil(0.5 * size) + 'px',
background: stringToColour(name || 'AFFiNE'),
borderRadius: '50%',
display: 'inline-flex',
lineHeight: '1',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
}}
>
{(name || 'AFFiNE').substring(0, 1)}
@@ -93,14 +83,14 @@ export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
);
});
export type WorkspaceUnitAvatarProps = {
export type WorkspaceAvatarProps = {
size?: number;
workspace: LocalWorkspace | AffineWorkspace | null;
style?: React.CSSProperties;
className?: string;
};
export type BlockSuiteWorkspaceAvatar = Omit<
WorkspaceUnitAvatarProps,
WorkspaceAvatarProps,
'workspace'
> & {
workspace: Workspace;
@@ -109,7 +99,6 @@ export type BlockSuiteWorkspaceAvatar = Omit<
export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
size = 20,
workspace,
style,
...props
}) => {
const [avatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
@@ -120,15 +109,13 @@ export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
size={size}
name={workspace.meta.name ?? 'Untitled'}
avatar_url={avatar ?? ''}
style={style}
/>
);
};
export const WorkspaceAvatar: React.FC<WorkspaceUnitAvatarProps> = ({
export const WorkspaceAvatar: React.FC<WorkspaceAvatarProps> = ({
size = 20,
workspace,
style,
...props
}) => {
if (workspace && 'blockSuiteWorkspace' in workspace) {
@@ -137,11 +124,8 @@ export const WorkspaceAvatar: React.FC<WorkspaceUnitAvatarProps> = ({
{...props}
size={size}
workspace={workspace.blockSuiteWorkspace}
style={style}
/>
);
}
return (
<Avatar {...props} size={size} name="UNKNOWN" avatar_url="" style={style} />
);
return <Avatar {...props} size={size} name="UNKNOWN" avatar_url="" />;
};