feat: new pop message on details page (#1392)

Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Alberto de la Cruz 2023-03-08 20:24:56 +01:00 committed by GitHub
parent 0db7868a6a
commit 7f77619515
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 17 deletions

View File

@ -26,6 +26,7 @@ export type OperationCellProps = {
onToggleFavoritePage: (pageId: string) => void;
onToggleTrashPage: (pageId: string) => void;
};
export const OperationCell: React.FC<OperationCellProps> = ({
pageMeta,
onOpenPageInNewTab,
@ -119,9 +120,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
onOpenPage,
}) => {
const { id, title } = pageMeta;
// const { openPage, getPageMeta } = usePageHelper();
// const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
// const confirm = useConfirm(store => store.confirm);
const { t } = useTranslation();
const [open, setOpen] = useState(false);
return (

View File

@ -1,5 +1,5 @@
// fixme(himself65): refactor this file
import { Menu, MenuItem } from '@affine/component';
import { Confirm, FlexWrapper, Menu, MenuItem } from '@affine/component';
import { IconButton } from '@affine/component';
import { toast } from '@affine/component';
import { useTranslation } from '@affine/i18n';
@ -14,6 +14,7 @@ import {
} from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store';
import { useTheme } from '@mui/material';
import { useState } from 'react';
import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
@ -23,7 +24,7 @@ import {
} from '../../../../hooks/use-page-meta';
import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/Icons';
const PopoverContent = () => {
export const EditorOptionMenu = () => {
const { t } = useTranslation();
const theme = useTheme();
@ -39,9 +40,9 @@ const PopoverContent = () => {
assertExists(pageMeta);
const { mode = 'page', favorite, trash } = pageMeta;
const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
//
const [open, setOpen] = useState(false);
return (
const EditMenu = (
<>
<MenuItem
data-testid="editor-option-menu-favorite"
@ -105,9 +106,7 @@ const PopoverContent = () => {
<MenuItem
data-testid="editor-option-menu-delete"
onClick={() => {
// fixme(himself65): regression that don't have conform dialog
setPageMeta(pageId, { trash: !trash, trashDate: +new Date() });
toast(t('Moved to Trash'));
setOpen(true);
}}
icon={<DeleteTemporarilyIcon />}
>
@ -115,14 +114,41 @@ const PopoverContent = () => {
</MenuItem>
</>
);
};
export const EditorOptionMenu = () => {
return (
<Menu content={<PopoverContent />} placement="bottom-end" trigger="click">
<IconButton data-testid="editor-option-menu" iconSize={[20, 20]}>
<MoreVerticalIcon />
</IconButton>
</Menu>
<>
<FlexWrapper alignItems="center" justifyContent="center">
<Menu
content={EditMenu}
placement="bottom-end"
disablePortal={true}
trigger="click"
>
<IconButton data-testid="editor-option-menu" iconSize={[20, 20]}>
<MoreVerticalIcon />
</IconButton>
</Menu>
</FlexWrapper>
<Confirm
title={t('Delete page?')}
content={t('will be moved to Trash', {
title: pageMeta.title || 'Untitled',
})}
confirmText={t('Delete')}
confirmType="danger"
open={open}
onConfirm={() => {
toast(t('Moved to Trash'));
setOpen(false);
setPageMeta(pageId, { trash: !trash, trashDate: +new Date() });
}}
onClose={() => {
setOpen(false);
}}
onCancel={() => {
setOpen(false);
}}
/>
</>
);
};