Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-26 14:58:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: clean all pages component (#2176)

Browse Source 
Co-authored-by: himself65 <himself65@outlook.com>
This commit is contained in:
Whitewater
2023-05-04 20:59:16 -07:00
committed by GitHub
parent 2c49c774af
commit 84b36c1d35
32 changed files with 772 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/affine/operation-menu-items/CopyLink.tsx
-31
View File
@@ -1,31 +0,0 @@
import { MenuItem } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { CopyIcon } from '@blocksuite/icons';
import { useCallback } from 'react';
//
import { toast } from '../../../utils';
import type { CommonMenuItemProps } from './types';
export const CopyLink = ({ onItemClick, onSelect }: CommonMenuItemProps) => {
const t = useAFFiNEI18N();
const copyUrl = useCallback(() => {
navigator.clipboard.writeText(window.location.href);
toast(t['Copied link to clipboard']());
}, [t]);
return (
<MenuItem
data-testid="copy-link"
onClick={() => {
copyUrl();
onItemClick?.();
onSelect?.();
}}
icon={<CopyIcon />}
>
{t['Copy Link']()}
</MenuItem>
);
};
apps/web/src/components/affine/operation-menu-items/DisablePublicSharing.tsx
-58
View File
@@ -1,58 +0,0 @@
import { MenuItem, styled } from '@affine/component';
import type { PublicLinkDisableProps } from '@affine/component/share-menu';
import { PublicLinkDisableModal } from '@affine/component/share-menu';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ShareIcon } from '@blocksuite/icons';
import type { CommonMenuItemProps } from './types';
const StyledMenuItem = styled(MenuItem)(({ theme }) => {
return {
div: {
color: theme.palette.error.main,
svg: {
color: theme.palette.error.main,
},
},
':hover': {
div: {
color: theme.palette.error.main,
svg: {
color: theme.palette.error.main,
},
},
},
};
});
export const DisablePublicSharing = ({
onSelect,
onItemClick,
testId,
}: CommonMenuItemProps) => {
const t = useAFFiNEI18N();
return (
<>
<StyledMenuItem
data-testid={testId}
onClick={() => {
onItemClick?.();
onSelect?.();
}}
style={{ color: 'red' }}
icon={<ShareIcon />}
>
{t['Disable Public Sharing']()}
</StyledMenuItem>
</>
);
};
const DisablePublicSharingModal = ({
page,
open,
onClose,
}: PublicLinkDisableProps) => {
return <PublicLinkDisableModal page={page} open={open} onClose={onClose} />;
};
DisablePublicSharing.DisablePublicSharingModal = DisablePublicSharingModal;
apps/web/src/components/affine/operation-menu-items/Export.tsx
-73
View File
@@ -1,73 +0,0 @@
import { Menu, MenuItem } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ContentParser } from '@blocksuite/blocks/content-parser';
import {
ArrowRightSmallIcon,
ExportIcon,
ExportToHtmlIcon,
ExportToMarkdownIcon,
} from '@blocksuite/icons';
import { useRef } from 'react';
import type { CommonMenuItemProps } from './types';
export const Export = ({
onSelect,
onItemClick,
}: CommonMenuItemProps<{ type: 'markdown' | 'html' }>) => {
const t = useAFFiNEI18N();
const contentParserRef = useRef<ContentParser>();
return (
<Menu
width={248}
placement="left"
trigger="click"
content={
<>
<MenuItem
data-testid="export-to-html"
onClick={() => {
if (!contentParserRef.current) {
contentParserRef.current = new ContentParser(
globalThis.currentEditor!.page
);
}
contentParserRef.current.onExportHtml();
onSelect?.({ type: 'html' });
}}
icon={<ExportToHtmlIcon />}
>
{t['Export to HTML']()}
</MenuItem>
<MenuItem
data-testid="export-to-markdown"
onClick={() => {
if (!contentParserRef.current) {
contentParserRef.current = new ContentParser(
globalThis.currentEditor!.page
);
}
contentParserRef.current.onExportMarkdown();
onSelect?.({ type: 'markdown' });
}}
icon={<ExportToMarkdownIcon />}
>
{t['Export to Markdown']()}
</MenuItem>
</>
}
>
<MenuItem
data-testid="export-menu"
icon={<ExportIcon />}
endIcon={<ArrowRightSmallIcon />}
onClick={e => {
e.stopPropagation();
onItemClick?.();
}}
>
{t.Export()}
</MenuItem>
</Menu>
);
};
apps/web/src/components/affine/operation-menu-items/MoveTo.tsx
-60
View File
@@ -1,60 +0,0 @@
import { MenuItem } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ArrowRightSmallIcon, MoveToIcon } from '@blocksuite/icons';
import type { PageMeta } from '@blocksuite/store';
import { useRef, useState } from 'react';
import type { BlockSuiteWorkspace } from '../../../shared';
import { PinboardMenu } from '../pinboard';
import type { CommonMenuItemProps } from './types';
export type MoveToProps = CommonMenuItemProps<{
dragId: string;
dropId: string;
}> & {
metas: PageMeta[];
currentMeta: PageMeta;
blockSuiteWorkspace: BlockSuiteWorkspace;
};
/**
* @deprecated
*/
export const MoveTo = ({
metas,
currentMeta,
blockSuiteWorkspace,
onSelect,
onItemClick,
}: MoveToProps) => {
const t = useAFFiNEI18N();
const ref = useRef<HTMLButtonElement>(null);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const open = anchorEl !== null;
return (
<>
<MenuItem
ref={ref}
onClick={e => {
e.stopPropagation();
setAnchorEl(ref.current);
onItemClick?.();
}}
icon={<MoveToIcon />}
endIcon={<ArrowRightSmallIcon />}
data-testid="move-to-menu-item"
>
{t['Move to']()}
</MenuItem>
<PinboardMenu
anchorEl={anchorEl}
open={open}
placement="left"
metas={metas}
currentMeta={currentMeta}
blockSuiteWorkspace={blockSuiteWorkspace}
onPinboardClick={onSelect}
/>
</>
);
};
apps/web/src/components/affine/operation-menu-items/MoveToTrash.tsx
-53
View File
@@ -1,53 +0,0 @@
import type { ConfirmProps } from '@affine/component';
import { Confirm, MenuItem } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { DeleteTemporarilyIcon } from '@blocksuite/icons';
import type { PageMeta } from '@blocksuite/store';
import type { CommonMenuItemProps } from './types';
export const MoveToTrash = ({
onSelect,
onItemClick,
testId,
}: CommonMenuItemProps) => {
const t = useAFFiNEI18N();
return (
<>
<MenuItem
data-testid={testId}
onClick={() => {
onItemClick?.();
onSelect?.();
}}
icon={<DeleteTemporarilyIcon />}
>
{t['Move to Trash']()}
</MenuItem>
</>
);
};
const ConfirmModal = ({
meta,
...confirmModalProps
}: {
meta: PageMeta;
} & ConfirmProps) => {
const t = useAFFiNEI18N();
return (
<Confirm
title={t['Delete page?']()}
content={t['will be moved to Trash']({
title: meta.title || 'Untitled',
})}
confirmText={t.Delete()}
confirmType="danger"
{...confirmModalProps}
/>
);
};
MoveToTrash.ConfirmModal = ConfirmModal;
apps/web/src/components/affine/operation-menu-items/index.ts
-5
View File
@@ -1,5 +0,0 @@
export * from './CopyLink';
export * from './DisablePublicSharing';
export * from './Export';
export * from './MoveTo';
export * from './MoveToTrash';
apps/web/src/components/affine/operation-menu-items/types.ts
-7
View File
@@ -1,7 +0,0 @@
export type CommonMenuItemProps<SelectParams = undefined> = {
// onItemClick is triggered when the item is clicked, sometimes after item click, it still has some internal logic to run(like popover a new menu), so we need to have a separate callback for that
onItemClick?: () => void;
// onSelect is triggered when the item is selected, it's the final callback for the item click
onSelect?: (params?: SelectParams) => void;
testId?: string;
};
apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
+2 -2
View File
@@ -1,4 +1,5 @@
import { MenuItem, MuiClickAwayListener, PureMenu } from '@affine/component';
import { CopyLink, MoveToTrash } from '@affine/component/page-list';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
MoreVerticalIcon,
@@ -13,7 +14,6 @@ import { useMemo, useRef, useState } from 'react';
import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
import type { BlockSuiteWorkspace } from '../../../../shared';
import { toast } from '../../../../utils';
import { CopyLink, MoveToTrash } from '../../operation-menu-items';
import { PinboardMenu } from '../pinboard-menu/';
import { StyledOperationButton } from '../styles';
@@ -152,7 +152,7 @@ export const OperationButton = ({
/>
<MoveToTrash.ConfirmModal
open={confirmModalOpen}
meta={currentMeta}
title={currentMeta.title}
onConfirm={() => {
toast(t['Moved to Trash']());
removeToTrash(currentMeta.id);