luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 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
3 changed files with 66 additions and 59 deletions
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 { 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 { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
import type { BlockSuiteWorkspace, RemWorkspace } from '../../../shared'; import type { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
@@ -12,61 +13,65 @@ interface AvatarProps {
style?: React.CSSProperties; style?: React.CSSProperties;
} }
export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>( export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
function Avatar({ size: _size, avatar_url, style, name, ...props }) { size: _size,
const size = _size || 20; avatar_url,
const sizeStr = size + 'px'; style,
name,
...props
}) {
const size = _size || 20;
const sizeStr = size + 'px';
return ( return (
<> <>
{avatar_url ? ( {avatar_url ? (
<div <div
{...props} {...props}
style={{ style={{
...style, ...style,
width: sizeStr, width: sizeStr,
height: sizeStr, height: sizeStr,
color: '#fff', color: '#fff',
borderRadius: '50%', borderRadius: '50%',
overflow: 'hidden', overflow: 'hidden',
display: 'inline-block', display: 'inline-block',
verticalAlign: 'middle', verticalAlign: 'middle',
}} }}
> >
<picture> <picture>
<img <img
style={{ width: sizeStr, height: sizeStr }} style={{ width: sizeStr, height: sizeStr }}
src={avatar_url} src={avatar_url}
alt="" alt=""
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
/> />
</picture> </picture>
</div> </div>
) : ( ) : (
<div <div
{...props} {...props}
style={{ style={{
...style, ...style,
width: sizeStr, width: sizeStr,
height: sizeStr, height: sizeStr,
border: '1px solid #fff', border: '1px solid #fff',
color: '#fff', color: '#fff',
fontSize: Math.ceil(0.5 * size) + 'px', fontSize: Math.ceil(0.5 * size) + 'px',
background: stringToColour(name || 'AFFiNE'), background: stringToColour(name || 'AFFiNE'),
borderRadius: '50%', borderRadius: '50%',
display: 'inline-flex', display: 'inline-flex',
lineHeight: '1', lineHeight: '1',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}} }}
> >
{(name || 'AFFiNE').substring(0, 1)} {(name || 'AFFiNE').substring(0, 1)}
</div> </div>
)} )}
</> </>
); );
} });
);
export type WorkspaceUnitAvatarProps = { export type WorkspaceUnitAvatarProps = {
size?: number; 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 type { SWRConfiguration } from 'swr';
import { SWRConfig } from 'swr'; import { SWRConfig } from 'swr';
@@ -9,7 +10,7 @@ const config: SWRConfiguration = {
fetcher, fetcher,
}; };
export const AffineSWRConfigProvider = React.memo<React.PropsWithChildren>( export const AffineSWRConfigProvider = memo<React.PropsWithChildren>(
function AffineSWRConfigProvider({ children }) { function AffineSWRConfigProvider({ children }) {
return <SWRConfig value={config}>{children}</SWRConfig>; 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 { GlobalStyles } from '@mui/material';
import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes'; import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
import type { PropsWithChildren } from 'react'; 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 { useCurrentPage } from '../hooks/current/use-current-page-id';
import { useCurrentWorkspace } from '../hooks/current/use-current-workspace'; import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
import { usePageMeta } from '../hooks/use-page-meta'; import { usePageMeta } from '../hooks/use-page-meta';
const ThemeInjector = React.memo<{ const ThemeInjector = memo<{
themeStyle: AffineTheme; themeStyle: AffineTheme;
}>(function ThemeInjector({ themeStyle }) { }>(function ThemeInjector({ themeStyle }) {
return ( return (