luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: fix code style issues (#4857)

Browse Source
This commit is contained in:
EYHN
2023-11-08 13:51:08 +08:00
committed by GitHub
parent 83472cc682
commit b7edaab387
30 changed files with 423 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
packages/common/infra/src/__internal__/react.ts
View File

1
packages/common/infra/vite.config.ts
View File

@@ -22,7 +22,6 @@ export default defineConfig({
root, root,
'src/__internal__/workspace.ts' 'src/__internal__/workspace.ts'
), ),
'__internal__/react': resolve(root, 'src/__internal__/react.ts'),
'__internal__/plugin': resolve(root, 'src/__internal__/plugin.ts'), '__internal__/plugin': resolve(root, 'src/__internal__/plugin.ts'),
}, },
formats: ['es', 'cjs'], formats: ['es', 'cjs'],

2
packages/frontend/component/src/components/notification-center/index.jotai.ts
View File

@@ -9,7 +9,7 @@ export type Notification = {
theme?: 'light' | 'dark' | 'default'; theme?: 'light' | 'dark' | 'default';
timeout?: number; timeout?: number;
progressingBar?: boolean; progressingBar?: boolean;
multimedia?: React.ReactNode | JSX.Element | HTMLElement; multimedia?: React.ReactNode | JSX.Element;
// actions // actions
undo?: () => Promise<void>; undo?: () => Promise<void>;
}; };

10
packages/frontend/component/src/components/notification-center/index.tsx
View File

@@ -7,7 +7,7 @@ import * as Toast from '@radix-ui/react-toast';
import { IconButton } from '@toeverything/components/button'; import { IconButton } from '@toeverything/components/button';
import clsx from 'clsx'; import clsx from 'clsx';
import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import type { ReactElement } from 'react'; import type { ReactNode } from 'react';
import { import {
useCallback, useCallback,
useEffect, useEffect,
@@ -70,7 +70,7 @@ const typeColorMap = {
}, },
}; };
function NotificationCard(props: NotificationCardProps): ReactElement { function NotificationCard(props: NotificationCardProps): ReactNode {
const removeNotification = useSetAtom(removeNotificationAtom); const removeNotification = useSetAtom(removeNotificationAtom);
const { notification, notifications, setHeights, heights, index } = props; const { notification, notifications, setHeights, heights, index } = props;
@@ -270,7 +270,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
> >
{notification.multimedia ? ( {notification.multimedia ? (
<div className={styles.notificationMultimediaStyle}> <div className={styles.notificationMultimediaStyle}>
<>{notification.multimedia}</> {notification.multimedia}
<IconButton className={styles.closeButtonWithMediaStyle}> <IconButton className={styles.closeButtonWithMediaStyle}>
<CloseIcon onClick={onClickRemove} /> <CloseIcon onClick={onClickRemove} />
</IconButton> </IconButton>
@@ -373,7 +373,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
); );
} }
export function NotificationCenter(): ReactElement { export function NotificationCenter(): ReactNode {
const notifications = useAtomValue(notificationsAtom); const notifications = useAtomValue(notificationsAtom);
const [expand, setExpand] = useAtom(expandNotificationCenterAtom); const [expand, setExpand] = useAtom(expandNotificationCenterAtom);
@@ -390,7 +390,7 @@ export function NotificationCenter(): ReactElement {
} }
}, [notifications, setExpand]); }, [notifications, setExpand]);
if (!notifications.length) return <></>; if (!notifications.length) return null;
return ( return (
<Toast.Provider swipeDirection="right"> <Toast.Provider swipeDirection="right">
{notifications.map((notification, index) => {notifications.map((notification, index) =>

2
packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx
View File

@@ -97,7 +97,7 @@ export const ExportMenuItems = ({
const items = itemMap.map(({ component: Component, props }) => ( const items = itemMap.map(({ component: Component, props }) => (
<Component key={props.label} {...props} /> <Component key={props.label} {...props} />
)); ));
return <>{items}</>; return items;
}; };
export const Export = ({ exportHandler, className }: ExportProps) => { export const Export = ({ exportHandler, className }: ExportProps) => {

2
packages/frontend/component/src/components/provider-composer/__tests__/provider-composer.spec.tsx
View File

@@ -15,7 +15,7 @@ test('ProviderComposer', async () => {
}; };
const ConsumerComponent = () => { const ConsumerComponent = () => {
const value = useContext(Context); const value = useContext(Context);
return <>{value}</>; return value;
}; };
const Component = () => { const Component = () => {
return ( return (

43
packages/frontend/component/src/components/share-menu/share-page.tsx
View File

@@ -38,30 +38,25 @@ export const LocalSharePage = (props: ShareMenuProps) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
return ( return (
<> <div className={styles.localSharePage}>
<div className={styles.localSharePage}> <div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
<div className={styles.columnContainerStyle} style={{ gap: '12px' }}> <div className={styles.descriptionStyle} style={{ maxWidth: '230px' }}>
<div {t['com.affine.share-menu.EnableCloudDescription']()}
className={styles.descriptionStyle}
style={{ maxWidth: '230px' }}
>
{t['com.affine.share-menu.EnableCloudDescription']()}
</div>
<div>
<Button
onClick={props.onEnableAffineCloud}
type="primary"
data-testid="share-menu-enable-affine-cloud-button"
>
{t['Enable AFFiNE Cloud']()}
</Button>
</div>
</div> </div>
<div className={styles.cloudSvgContainer}> <div>
<CloudSvg /> <Button
onClick={props.onEnableAffineCloud}
type="primary"
data-testid="share-menu-enable-affine-cloud-button"
>
{t['Enable AFFiNE Cloud']()}
</Button>
</div> </div>
</div> </div>
</> <div className={styles.cloudSvgContainer}>
<CloudSvg />
</div>
</div>
); );
}; };
@@ -218,11 +213,7 @@ export const SharePage = (props: ShareMenuProps) => {
if (props.workspace.flavour === WorkspaceFlavour.LOCAL) { if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
return <LocalSharePage {...props} />; return <LocalSharePage {...props} />;
} else if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) { } else if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
return ( return <AffineSharePage {...props} />;
<>
<AffineSharePage {...props} />
</>
);
} }
throw new Error('Unreachable'); throw new Error('Unreachable');
}; };

2
packages/frontend/component/src/components/workspace-list/index.tsx
View File

@@ -121,7 +121,7 @@ export const WorkspaceList = (props: WorkspaceListProps) => {
<SortableContext items={optimisticList}> <SortableContext items={optimisticList}>
{optimisticList.map(item => ( {optimisticList.map(item => (
<Suspense fallback={<WorkspaceCardSkeleton />} key={item.id}> <Suspense fallback={<WorkspaceCardSkeleton />} key={item.id}>
<SortableWorkspaceItem {...props} item={item} key={item.id} /> <SortableWorkspaceItem key={item.id} {...props} item={item} />
</Suspense> </Suspense>
))} ))}
</SortableContext> </SortableContext>

196
packages/frontend/component/src/ui/popper/popper.tsx
View File

@@ -171,109 +171,107 @@ export const Popper = ({
}} }}
> >
{showArrow ? ( {showArrow ? (
<> placement.indexOf('bottom') === 0 ? (
{placement.indexOf('bottom') === 0 ? ( <div
<div style={{
style={{ display: 'flex',
display: 'flex', flexDirection: 'column',
flexDirection: 'column', alignItems: 'center',
alignItems: 'center', }}
}} >
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" d="M6.38889 0.45C5.94444 -0.15 5.05555 -0.150001 4.61111 0.449999L0.499999 6L10.5 6L6.38889 0.45Z"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M6.38889 0.45C5.94444 -0.15 5.05555 -0.150001 4.61111 0.449999L0.499999 6L10.5 6L6.38889 0.45Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</div>
) : placement.indexOf('top') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
) : placement.indexOf('left') === 0 ? (
<>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
>
<path
d="M5.55 5.88889C6.15 5.44444 6.15 4.55555 5.55 4.11111L-4.76837e-07 0L-4.76837e-07 10L5.55 5.88889Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</>
) : placement.indexOf('right') === 0 ? (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
style={{ fill: 'var(--affine-tooltip)' }} style={{ fill: 'var(--affine-tooltip)' }}
> />
<path </svg>
d="M0.45 4.11111C-0.15 4.55556 -0.15 5.44445 0.45 5.88889L6 10V0L0.45 4.11111Z" {content}
style={{ fill: 'var(--affine-tooltip)' }} </div>
/> ) : placement.indexOf('top') === 0 ? (
</svg> <div
{content} style={{
</> display: 'flex',
) : ( flexDirection: 'column',
<div alignItems: 'center',
style={{ }}
display: 'flex', >
flexDirection: 'column', {content}
alignItems: 'center', <svg
}} xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
> >
{content} <path
<svg d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
xmlns="http://www.w3.org/2000/svg" style={{ fill: 'var(--affine-tooltip)' }}
width="11" />
height="6" </svg>
viewBox="0 0 11 6" </div>
fill="none" ) : placement.indexOf('left') === 0 ? (
> <>
<path {content}
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z" <svg
style={{ fill: 'var(--affine-tooltip)' }} xmlns="http://www.w3.org/2000/svg"
/> width="6"
</svg> height="10"
</div> viewBox="0 0 6 10"
)} fill="none"
</> >
<path
d="M5.55 5.88889C6.15 5.44444 6.15 4.55555 5.55 4.11111L-4.76837e-07 0L-4.76837e-07 10L5.55 5.88889Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</>
) : placement.indexOf('right') === 0 ? (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
style={{ fill: 'var(--affine-tooltip)' }}
>
<path
d="M0.45 4.11111C-0.15 4.55556 -0.15 5.44445 0.45 5.88889L6 10V0L0.45 4.11111Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</>
) : (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
)
) : ( ) : (
<>{content}</> content
)} )}
</div> </div>
</Grow> </Grow>

22
packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx
View File

@@ -76,17 +76,13 @@ export const TreeNodeItem = <RenderProps,>({
disableCollapse, disableCollapse,
allowDrop = true, allowDrop = true,
}: TreeNodeItemProps<RenderProps>) => { }: TreeNodeItemProps<RenderProps>) => {
return ( return node.render?.(node, {
<> isOver: isOver && allowDrop,
{node.render?.(node, { onAdd: () => onAdd?.(node.id),
isOver: isOver && allowDrop, onDelete: () => onDelete?.(node.id),
onAdd: () => onAdd?.(node.id), collapsed,
onDelete: () => onDelete?.(node.id), setCollapsed,
collapsed, isSelected: selectedId === node.id,
setCollapsed, disableCollapse,
isSelected: selectedId === node.id, });
disableCollapse,
})}
</>
);
}; };

14
packages/frontend/core/src/adapters/cloud/ui.tsx
View File

@@ -48,14 +48,12 @@ export const UI = {
); );
return ( return (
<> <PageDetailEditor
<PageDetailEditor pageId={currentPageId}
pageId={currentPageId} onInit={useCallback(async page => initEmptyPage(page), [])}
onInit={useCallback(async page => initEmptyPage(page), [])} onLoad={onLoad}
onLoad={onLoad} workspace={workspace.blockSuiteWorkspace}
workspace={workspace.blockSuiteWorkspace} />
/>
</>
); );
}, },
NewSettingsDetail: ({ NewSettingsDetail: ({

14
packages/frontend/core/src/adapters/local/index.tsx
View File

@@ -92,14 +92,12 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
throw new PageNotFoundError(workspace, currentPageId); throw new PageNotFoundError(workspace, currentPageId);
} }
return ( return (
<> <PageDetailEditor
<PageDetailEditor pageId={currentPageId}
pageId={currentPageId} onInit={useCallback(async page => initEmptyPage(page), [])}
onInit={useCallback(async page => initEmptyPage(page), [])} onLoad={onLoadEditor}
onLoad={onLoadEditor} workspace={workspace}
workspace={workspace} />
/>
</>
); );
}, },
NewSettingsDetail: ({ NewSettingsDetail: ({

14
packages/frontend/core/src/adapters/public-cloud/ui.tsx
View File

@@ -16,14 +16,12 @@ export const UI = {
throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId); throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
} }
return ( return (
<> <PageDetailEditor
<PageDetailEditor pageId={currentPageId}
pageId={currentPageId} onInit={useCallback(async page => initEmptyPage(page), [])}
onInit={useCallback(async page => initEmptyPage(page), [])} onLoad={onLoadEditor}
onLoad={onLoadEditor} workspace={workspace.blockSuiteWorkspace}
workspace={workspace.blockSuiteWorkspace} />
/>
</>
); );
}, },
NewSettingsDetail: () => { NewSettingsDetail: () => {

2
packages/frontend/core/src/components/affine/auth/use-captcha.tsx
View File

@@ -43,7 +43,7 @@ export const Captcha = () => {
const [response] = useAtom(responseAtom); const [response] = useAtom(responseAtom);
if (!runtimeConfig.enableCaptcha) { if (!runtimeConfig.enableCaptcha) {
return <></>; return null;
} }
if (environment.isDesktop) { if (environment.isDesktop) {

4
packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
View File

@@ -2,7 +2,7 @@ import { SubscriptionPlan } from '@affine/graphql';
import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useAFFiNEI18N } from '@affine/i18n/hooks';
import Tooltip from '@toeverything/components/tooltip'; import Tooltip from '@toeverything/components/tooltip';
import { useSetAtom } from 'jotai'; import { useSetAtom } from 'jotai';
import React, { useCallback } from 'react'; import { useCallback } from 'react';
import { withErrorBoundary } from 'react-error-boundary'; import { withErrorBoundary } from 'react-error-boundary';
import { openSettingModalAtom } from '../../../atoms'; import { openSettingModalAtom } from '../../../atoms';
@@ -39,5 +39,5 @@ const UserPlanButtonWithData = () => {
// If fetch user data failed, just render empty. // If fetch user data failed, just render empty.
export const UserPlanButton = withErrorBoundary(UserPlanButtonWithData, { export const UserPlanButton = withErrorBoundary(UserPlanButtonWithData, {
fallbackRender: () => <React.Fragment />, fallbackRender: () => null,
}); });

20
packages/frontend/core/src/components/affine/new-workspace-setting-detail/export.tsx
View File

@@ -86,16 +86,14 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
}, [pushNotification, syncing, t, workspace, workspaceId]); }, [pushNotification, syncing, t, workspace, workspaceId]);
return ( return (
<> <SettingRow name={t['Export']()} desc={t['Export Description']()}>
<SettingRow name={t['Export']()} desc={t['Export Description']()}> <Button
<Button data-testid="export-affine-backup"
data-testid="export-affine-backup" onClick={onExport}
onClick={onExport} disabled={syncing}
disabled={syncing} >
> {t['Export']()}
{t['Export']()} </Button>
</Button> </SettingRow>
</SettingRow>
</>
); );
}; };

80
packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
View File

@@ -121,48 +121,46 @@ export const AvatarAndName = () => {
}, [allowUpdate, input, user]); }, [allowUpdate, input, user]);
return ( return (
<> <SettingRow
<SettingRow name={t['com.affine.settings.profile']()}
name={t['com.affine.settings.profile']()} desc={t['com.affine.settings.profile.message']()}
desc={t['com.affine.settings.profile.message']()} spreadCol={false}
spreadCol={false} >
> <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
<FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center"> <Suspense>
<Suspense> <UserAvatar />
<UserAvatar /> </Suspense>
</Suspense>
<div className={style.profileInputWrapper}> <div className={style.profileInputWrapper}>
<label>{t['com.affine.settings.profile.name']()}</label> <label>{t['com.affine.settings.profile.name']()}</label>
<FlexWrapper alignItems="center"> <FlexWrapper alignItems="center">
<Input <Input
defaultValue={input} defaultValue={input}
data-testid="user-name-input" data-testid="user-name-input"
placeholder={t['com.affine.settings.profile.placeholder']()} placeholder={t['com.affine.settings.profile.placeholder']()}
maxLength={64} maxLength={64}
minLength={0} minLength={0}
width={280} width={280}
height={28} height={28}
onChange={setInput} onChange={setInput}
onEnter={handleUpdateUserName} onEnter={handleUpdateUserName}
/> />
{allowUpdate ? ( {allowUpdate ? (
<Button <Button
data-testid="save-user-name" data-testid="save-user-name"
onClick={handleUpdateUserName} onClick={handleUpdateUserName}
className={style.button} className={style.button}
style={{ style={{
marginLeft: '12px', marginLeft: '12px',
}} }}
> >
{t['com.affine.editCollection.save']()} {t['com.affine.editCollection.save']()}
</Button> </Button>
) : null} ) : null}
</FlexWrapper> </FlexWrapper>
</div> </div>
</FlexWrapper> </FlexWrapper>
</SettingRow> </SettingRow>
</>
); );
}; };

8
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
View File

@@ -9,7 +9,7 @@ import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useQuery } from '@affine/workspace/affine/gql'; import { useQuery } from '@affine/workspace/affine/gql';
import { useSetAtom } from 'jotai'; import { useSetAtom } from 'jotai';
import React, { Suspense, useEffect, useRef, useState } from 'react'; import { Suspense, useEffect, useRef, useState } from 'react';
import type { FallbackProps } from 'react-error-boundary'; import type { FallbackProps } from 'react-error-boundary';
import { SWRErrorBoundary } from '../../../../../components/pure/swr-error-bundary'; import { SWRErrorBoundary } from '../../../../../components/pure/swr-error-bundary';
@@ -205,9 +205,9 @@ const PlansErrorBoundary = ({ resetErrorBoundary }: FallbackProps) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const title = t['com.affine.payment.title'](); const title = t['com.affine.payment.title']();
const subtitle = <React.Fragment />; const subtitle = '';
const tabs = <React.Fragment />; const tabs = '';
const footer = <React.Fragment />; const footer = '';
const scroll = ( const scroll = (
<div className={styles.errorTip}> <div className={styles.errorTip}>

20
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
View File

@@ -406,17 +406,15 @@ const Upgrade = ({
}, [onClose]); }, [onClose]);
return ( return (
<> <Button
<Button className={styles.planAction}
className={styles.planAction} type="primary"
type="primary" onClick={upgrade}
onClick={upgrade} disabled={isMutating}
disabled={isMutating} loading={isMutating}
loading={isMutating} >
> {t['com.affine.payment.upgrade']()}
{t['com.affine.payment.upgrade']()} </Button>
</Button>
</>
); );
}; };

22
packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
View File

@@ -218,17 +218,15 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
return null; return null;
} }
return ( return (
<> <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
<FlexWrapper alignItems="center" justifyContent="center" ref={ref}> <Menu
<Menu items={EditMenu}
items={EditMenu} contentOptions={{
contentOptions={{ align: 'center',
align: 'center', }}
}} >
> <HeaderDropDownButton />
<HeaderDropDownButton /> </Menu>
</Menu> </FlexWrapper>
</FlexWrapper>
</>
); );
}; };

6
packages/frontend/core/src/components/cloud/provider.tsx
View File

@@ -2,7 +2,7 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
import { assertExists } from '@blocksuite/global/utils'; import { assertExists } from '@blocksuite/global/utils';
import { GraphQLError } from 'graphql'; import { GraphQLError } from 'graphql';
import { useSetAtom } from 'jotai'; import { useSetAtom } from 'jotai';
import type { PropsWithChildren, ReactElement } from 'react'; import type { PropsWithChildren, ReactNode } from 'react';
import { useCallback } from 'react'; import { useCallback } from 'react';
import type { SWRConfiguration } from 'swr'; import type { SWRConfiguration } from 'swr';
import { SWRConfig } from 'swr'; import { SWRConfig } from 'swr';
@@ -49,9 +49,9 @@ const cloudConfig: SWRConfiguration = {
], ],
}; };
export const Provider = (props: PropsWithChildren): ReactElement => { export const Provider = (props: PropsWithChildren): ReactNode => {
if (!runtimeConfig.enableCloud) { if (!runtimeConfig.enableCloud) {
return <>{props.children}</>; return props.children;
} }
return <SWRConfig value={cloudConfig}>{props.children}</SWRConfig>; return <SWRConfig value={cloudConfig}>{props.children}</SWRConfig>;

8
packages/frontend/core/src/components/page-detail-editor.tsx
View File

@@ -328,10 +328,8 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
} }
return ( return (
<> <Suspense>
<Suspense> <LayoutPanel node={layout} editorProps={props} depth={0} />
<LayoutPanel node={layout} editorProps={props} depth={0} /> </Suspense>
</Suspense>
</>
); );
}; };

90
packages/frontend/core/src/components/pure/footer/index.tsx
View File

@@ -49,53 +49,49 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
const size = props.size || 20; const size = props.size || 20;
const sizeStr = size + 'px'; const sizeStr = size + 'px';
return ( return props.avatar ? (
<> <div
{props.avatar ? ( style={{
<div ...props.style,
style={{ width: sizeStr,
...props.style, height: sizeStr,
width: sizeStr, color: '#fff',
height: sizeStr, borderRadius: '50%',
color: '#fff', overflow: 'hidden',
borderRadius: '50%', display: 'inline-block',
overflow: 'hidden', verticalAlign: 'middle',
display: 'inline-block', }}
verticalAlign: 'middle', ref={ref}
}} >
ref={ref} <picture>
> <img
<picture> style={{ width: sizeStr, height: sizeStr }}
<img src={props.avatar}
style={{ width: sizeStr, height: sizeStr }} alt=""
src={props.avatar} referrerPolicy="no-referrer"
alt="" />
referrerPolicy="no-referrer" </picture>
/> </div>
</picture> ) : (
</div> <div
) : ( style={{
<div ...props.style,
style={{ width: sizeStr,
...props.style, height: sizeStr,
width: sizeStr, border: '1px solid #fff',
height: sizeStr, color: '#fff',
border: '1px solid #fff', fontSize: Math.ceil(0.5 * size) + 'px',
color: '#fff', background: stringToColour(props.name || 'AFFiNE'),
fontSize: Math.ceil(0.5 * size) + 'px', borderRadius: '50%',
background: stringToColour(props.name || 'AFFiNE'), textAlign: 'center',
borderRadius: '50%', lineHeight: size + 'px',
textAlign: 'center', display: 'inline-block',
lineHeight: size + 'px', verticalAlign: 'middle',
display: 'inline-block', }}
verticalAlign: 'middle', ref={ref}
}} >
ref={ref} {(props.name || 'AFFiNE').substring(0, 1)}
> </div>
{(props.name || 'AFFiNE').substring(0, 1)}
</div>
)}
</>
); );
} }
); );

196
packages/frontend/core/src/components/root-app-sidebar/index.tsx
View File

@@ -170,109 +170,105 @@ export const RootAppSidebar = ({
useRegisterBlocksuiteEditorCommands(router.back, router.forward); useRegisterBlocksuiteEditorCommands(router.back, router.forward);
const userInfo = useDeleteCollectionInfo(); const userInfo = useDeleteCollectionInfo();
return ( return (
<> <AppSidebar
<AppSidebar router={router}
router={router} hasBackground={
hasBackground={ !(
!( appSettings.enableBlurBackground &&
appSettings.enableBlurBackground && environment.isDesktop &&
environment.isDesktop && environment.isMacOs
environment.isMacOs )
) }
} generalShortcutsInfo={generalShortcutsInfo}
generalShortcutsInfo={generalShortcutsInfo} >
> <MoveToTrash.ConfirmModal
<MoveToTrash.ConfirmModal open={trashConfirmOpen}
open={trashConfirmOpen} onConfirm={handleOnConfirm}
onConfirm={handleOnConfirm} onOpenChange={onTrashConfirmOpenChange}
onOpenChange={onTrashConfirmOpenChange} titles={deletePageTitles}
titles={deletePageTitles} />
/> <SidebarContainer>
<SidebarContainer> <Menu
<Menu rootOptions={{
rootOptions={{ open: openUserWorkspaceList,
open: openUserWorkspaceList, }}
}} items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
items={ contentOptions={{
<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} /> // hide trigger
} sideOffset: -58,
contentOptions={{ onInteractOutside: closeUserWorkspaceList,
// hide trigger onEscapeKeyDown: closeUserWorkspaceList,
sideOffset: -58, style: {
onInteractOutside: closeUserWorkspaceList, width: '300px',
onEscapeKeyDown: closeUserWorkspaceList, },
style: { }}
width: '300px', >
}, <WorkspaceCard
}} currentWorkspace={currentWorkspace}
> onClick={useCallback(() => {
<WorkspaceCard setOpenUserWorkspaceList(true);
currentWorkspace={currentWorkspace} }, [setOpenUserWorkspaceList])}
onClick={useCallback(() => {
setOpenUserWorkspaceList(true);
}, [setOpenUserWorkspaceList])}
/>
</Menu>
<QuickSearchInput
data-testid="slider-bar-quick-search-button"
onClick={onOpenQuickSearchModal}
/> />
<RouteMenuLinkItem </Menu>
icon={<FolderIcon />} <QuickSearchInput
currentPath={currentPath} data-testid="slider-bar-quick-search-button"
path={paths.all(currentWorkspaceId)} onClick={onOpenQuickSearchModal}
onClick={backToAll} />
<RouteMenuLinkItem
icon={<FolderIcon />}
currentPath={currentPath}
path={paths.all(currentWorkspaceId)}
onClick={backToAll}
>
<span data-testid="all-pages">
{t['com.affine.workspaceSubPath.all']()}
</span>
</RouteMenuLinkItem>
{runtimeConfig.enableNewSettingModal ? (
<MenuItem
data-testid="slider-bar-workspace-setting-button"
icon={<SettingsIcon />}
onClick={onOpenSettingModal}
> >
<span data-testid="all-pages"> <span data-testid="settings-modal-trigger">
{t['com.affine.workspaceSubPath.all']()} {t['com.affine.settingSidebar.title']()}
</span> </span>
</RouteMenuLinkItem> </MenuItem>
{runtimeConfig.enableNewSettingModal ? ( ) : null}
<MenuItem </SidebarContainer>
data-testid="slider-bar-workspace-setting-button"
icon={<SettingsIcon />}
onClick={onOpenSettingModal}
>
<span data-testid="settings-modal-trigger">
{t['com.affine.settingSidebar.title']()}
</span>
</MenuItem>
) : null}
</SidebarContainer>
<SidebarScrollableContainer> <SidebarScrollableContainer>
<CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}> <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
<AddFavouriteButton workspace={blockSuiteWorkspace} /> <AddFavouriteButton workspace={blockSuiteWorkspace} />
</CategoryDivider> </CategoryDivider>
<FavoriteList workspace={blockSuiteWorkspace} /> <FavoriteList workspace={blockSuiteWorkspace} />
<CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}> <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
<AddCollectionButton /> <AddCollectionButton />
</CategoryDivider> </CategoryDivider>
<CollectionsList workspace={blockSuiteWorkspace} info={userInfo} /> <CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
<CategoryDivider label={t['com.affine.rootAppSidebar.others']()} /> <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
{/* fixme: remove the following spacer */} {/* fixme: remove the following spacer */}
<div style={{ height: '4px' }} /> <div style={{ height: '4px' }} />
<RouteMenuLinkItem <RouteMenuLinkItem
ref={trashDroppable.setNodeRef} ref={trashDroppable.setNodeRef}
isDraggedOver={trashDroppable.isOver} isDraggedOver={trashDroppable.isOver}
icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />} icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
currentPath={currentPath} currentPath={currentPath}
path={paths.trash(currentWorkspaceId)} path={paths.trash(currentWorkspaceId)}
> >
<span data-testid="trash-page"> <span data-testid="trash-page">
{t['com.affine.workspaceSubPath.trash']()} {t['com.affine.workspaceSubPath.trash']()}
</span> </span>
</RouteMenuLinkItem> </RouteMenuLinkItem>
{blockSuiteWorkspace && ( {blockSuiteWorkspace && (
<ImportPage blocksuiteWorkspace={blockSuiteWorkspace} /> <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
)} )}
</SidebarScrollableContainer> </SidebarScrollableContainer>
<SidebarContainer> <SidebarContainer>
{environment.isDesktop && <AppUpdaterButton />} {environment.isDesktop && <AppUpdaterButton />}
<div style={{ height: '4px' }} /> <div style={{ height: '4px' }} />
<AddPageButton onClick={onClickNewPage} /> <AddPageButton onClick={onClickNewPage} />
</SidebarContainer> </SidebarContainer>
</AppSidebar> </AppSidebar>
</>
); );
}; };

6
packages/frontend/core/src/layouts/workspace-layout.tsx
View File

@@ -34,7 +34,7 @@ import { loadPage } from '@toeverything/hooks/use-block-suite-workspace-page';
import { currentWorkspaceIdAtom } from '@toeverything/infra/atom'; import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import type { PropsWithChildren, ReactElement } from 'react'; import type { PropsWithChildren, ReactNode } from 'react';
import { lazy, Suspense, useCallback, useEffect } from 'react'; import { lazy, Suspense, useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { Map as YMap } from 'yjs'; import { Map as YMap } from 'yjs';
@@ -101,7 +101,7 @@ const showList: IslandItemNames[] = environment.isDesktop
export const CurrentWorkspaceContext = ({ export const CurrentWorkspaceContext = ({
children, children,
}: PropsWithChildren): ReactElement => { }: PropsWithChildren): ReactNode => {
const workspaceId = useAtomValue(currentWorkspaceIdAtom); const workspaceId = useAtomValue(currentWorkspaceIdAtom);
const metadata = useAtomValue(rootWorkspacesMetadataAtom); const metadata = useAtomValue(rootWorkspacesMetadataAtom);
const exist = metadata.find(m => m.id === workspaceId); const exist = metadata.find(m => m.id === workspaceId);
@@ -114,7 +114,7 @@ export const CurrentWorkspaceContext = ({
if (!exist) { if (!exist) {
return <WorkspaceFallback key="workspace-not-found" />; return <WorkspaceFallback key="workspace-not-found" />;
} }
return <>{children}</>; return children;
}; };
type WorkspaceLayoutProps = { type WorkspaceLayoutProps = {

46
packages/frontend/core/src/pages/workspace/all-page.tsx
View File

@@ -108,30 +108,28 @@ const usePageOperationsRenderer = () => {
}); });
}; };
return ( return (
<> <OperationCell
<OperationCell favorite={!!page.favorite}
favorite={!!page.favorite} isPublic={!!page.isPublic}
isPublic={!!page.isPublic} onDisablePublicSharing={onDisablePublicSharing}
onDisablePublicSharing={onDisablePublicSharing} link={`/workspace/${currentWorkspace.id}/${page.id}`}
link={`/workspace/${currentWorkspace.id}/${page.id}`} onRemoveToTrash={() =>
onRemoveToTrash={() => setTrashModal({
setTrashModal({ open: true,
open: true, pageIds: [page.id],
pageIds: [page.id], pageTitles: [page.title],
pageTitles: [page.title], })
}) }
} onToggleFavoritePage={() => {
onToggleFavoritePage={() => { const status = page.favorite;
const status = page.favorite; toggleFavorite(page.id);
toggleFavorite(page.id); toast(
toast( status
status ? t['com.affine.toastMessage.removedFavorites']()
? t['com.affine.toastMessage.removedFavorites']() : t['com.affine.toastMessage.addedFavorites']()
: t['com.affine.toastMessage.addedFavorites']() );
); }}
}} />
/>
</>
); );
}, },
[currentWorkspace.id, setTrashModal, t, toggleFavorite] [currentWorkspace.id, setTrashModal, t, toggleFavorite]

46
packages/frontend/core/src/pages/workspace/trash-page.tsx
View File

@@ -59,31 +59,29 @@ export const TrashPage = () => {
[permanentlyDeletePage, restoreFromTrash, t] [permanentlyDeletePage, restoreFromTrash, t]
); );
return ( return (
<> <div className={styles.root}>
<div className={styles.root}> <WorkspaceHeader
<WorkspaceHeader currentWorkspaceId={currentWorkspace.id}
currentWorkspaceId={currentWorkspace.id} currentEntry={{
currentEntry={{ subPath: WorkspaceSubPath.TRASH,
subPath: WorkspaceSubPath.TRASH, }}
}} />
{filteredPageMetas.length > 0 ? (
<VirtualizedPageList
pages={filteredPageMetas}
rowAsLink
groupBy={false}
isPreferredEdgeless={isPreferredEdgeless}
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
pageOperationsRenderer={pageOperationsRenderer}
/> />
{filteredPageMetas.length > 0 ? ( ) : (
<VirtualizedPageList <EmptyPageList
pages={filteredPageMetas} type="trash"
rowAsLink blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
groupBy={false} />
isPreferredEdgeless={isPreferredEdgeless} )}
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace} </div>
pageOperationsRenderer={pageOperationsRenderer}
/>
) : (
<EmptyPageList
type="trash"
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
/>
)}
</div>
</>
); );
}; };

0
packages/frontend/workspace/src/affine/worker.ts
View File

10
tests/storybook/src/stories/app-sidebar.stories.tsx
View File

@@ -53,12 +53,10 @@ const Main = () => {
export const Default: StoryFn = () => { export const Default: StoryFn = () => {
return ( return (
<> <Container>
<Container> <AppSidebar />
<AppSidebar /> <Main />
<Main /> </Container>
</Container>
</>
); );
}; };

8
tests/storybook/src/stories/quick-search/quick-search-modal.stories.tsx
View File

@@ -28,10 +28,8 @@ export const CMDKModalStory: StoryFn = () => {
export const CMDKPanelStory: StoryFn = () => { export const CMDKPanelStory: StoryFn = () => {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
return ( return (
<> <CMDKModal open>
<CMDKModal open> <CMDKContainer open query={query} onQueryChange={setQuery} />
<CMDKContainer open query={query} onQueryChange={setQuery} /> </CMDKModal>
</CMDKModal>
</>
); );
}; };