toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-22 18:42:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use explicit memo import (#1596)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
VictorNanka 2023-03-17 11:27:37 +09:00 committed by GitHub
parent 5a9498fe9b
commit d1722bc235
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
apps/web/src/components/pure/workspace-avatar/index.tsx
View File

@ -1,5 +1,6 @@
import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
import React from 'react';
import type React from 'react';
import { memo } from 'react';
import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
import type { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
@ -12,61 +13,65 @@ interface AvatarProps {
style?: React.CSSProperties;
}
export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
function Avatar({ size: _size, avatar_url, style, name, ...props }) {
const size = _size || 20;
const sizeStr = size + 'px';
export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
size: _size,
avatar_url,
style,
name,
...props
}) {
const size = _size || 20;
const sizeStr = size + 'px';
return (
<>
{avatar_url ? (
<div
{...props}
style={{
...style,
width: sizeStr,
height: sizeStr,
color: '#fff',
borderRadius: '50%',
overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
}}
>
<picture>
<img
style={{ width: sizeStr, height: sizeStr }}
src={avatar_url}
alt=""
referrerPolicy="no-referrer"
/>
</picture>
</div>
) : (
<div
{...props}
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',
}}
>
{(name || 'AFFiNE').substring(0, 1)}
</div>
)}
</>
);
}
);
return (
<>
{avatar_url ? (
<div
{...props}
style={{
...style,
width: sizeStr,
height: sizeStr,
color: '#fff',
borderRadius: '50%',
overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
}}
>
<picture>
<img
style={{ width: sizeStr, height: sizeStr }}
src={avatar_url}
alt=""
referrerPolicy="no-referrer"
/>
</picture>
</div>
) : (
<div
{...props}
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',
}}
>
{(name || 'AFFiNE').substring(0, 1)}
</div>
)}
</>
);
});
export type WorkspaceUnitAvatarProps = {
size?: number;

5
apps/web/src/providers/AffineSWRConfigProvider.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { memo } from 'react';
import type { SWRConfiguration } from 'swr';
import { SWRConfig } from 'swr';
@ -9,7 +10,7 @@ const config: SWRConfiguration = {
fetcher,
};
export const AffineSWRConfigProvider = React.memo<React.PropsWithChildren>(
export const AffineSWRConfigProvider = memo<React.PropsWithChildren>(
function AffineSWRConfigProvider({ children }) {
return <SWRConfig value={config}>{children}</SWRConfig>;
}

5
apps/web/src/providers/ThemeProvider.tsx
View File

@ -8,13 +8,14 @@ import {
import { GlobalStyles } from '@mui/material';
import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
import type { PropsWithChildren } from 'react';
import React, { memo, useEffect, useMemo, useState } from 'react';
import type React from 'react';
import { memo, useEffect, useMemo, useState } from 'react';
import { useCurrentPage } from '../hooks/current/use-current-page-id';
import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
import { usePageMeta } from '../hooks/use-page-meta';
const ThemeInjector = React.memo<{
const ThemeInjector = memo<{
themeStyle: AffineTheme;
}>(function ThemeInjector({ themeStyle }) {
return (