mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 21:27:20 +00:00
refactor: remove unused code (#2484)
This commit is contained in:
Himself65
@@ -1,166 +0,0 @@
|
||||
import { IconButton, Tooltip, TreeView } from '@affine/component';
|
||||
import { useAFFiNEI18N } from '@affine/i18n/hooks';
|
||||
import {
|
||||
ArrowRightSmallIcon,
|
||||
CollapseIcon,
|
||||
ExpandIcon,
|
||||
MoreHorizontalIcon,
|
||||
} from '@blocksuite/icons';
|
||||
import type { PageMeta } from '@blocksuite/store';
|
||||
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
|
||||
import { useRouter } from 'next/router';
|
||||
import type { MouseEvent } from 'react';
|
||||
import { Fragment, useCallback, useMemo, useState } from 'react';
|
||||
|
||||
import type { PinboardNode } from '../../../../hooks/use-pinboard-data';
|
||||
import { usePinboardData } from '../../../../hooks/use-pinboard-data';
|
||||
import { useRouterHelper } from '../../../../hooks/use-router-helper';
|
||||
import type { BlockSuiteWorkspace } from '../../../../shared';
|
||||
import { PinboardRender } from '../../../affine/pinboard';
|
||||
import {
|
||||
StyledNavigationPathContainer,
|
||||
StyledNavPathExtendContainer,
|
||||
StyledNavPathLink,
|
||||
} from './styles';
|
||||
import { calcHowManyPathShouldBeShown, findPath } from './utils';
|
||||
|
||||
export const NavigationPath = ({
|
||||
blockSuiteWorkspace,
|
||||
pageId: propsPageId,
|
||||
onJumpToPage,
|
||||
}: {
|
||||
blockSuiteWorkspace: BlockSuiteWorkspace;
|
||||
pageId?: string;
|
||||
onJumpToPage?: (pageId: string) => void;
|
||||
}) => {
|
||||
const metas = useBlockSuitePageMeta(blockSuiteWorkspace);
|
||||
const router = useRouter();
|
||||
const t = useAFFiNEI18N();
|
||||
|
||||
const [openExtend, setOpenExtend] = useState(false);
|
||||
const pageId = propsPageId ?? router.query.pageId;
|
||||
const { jumpToPage } = useRouterHelper(router);
|
||||
const pathData = useMemo(() => {
|
||||
const meta = metas.find(m => m.id === pageId);
|
||||
const path = meta ? findPath(metas, meta) : [];
|
||||
|
||||
const actualPath = calcHowManyPathShouldBeShown(path);
|
||||
return {
|
||||
hasEllipsis: path.length !== actualPath.length,
|
||||
path: actualPath,
|
||||
};
|
||||
}, [metas, pageId]);
|
||||
|
||||
if (pathData.path.length < 2) {
|
||||
// Means there is no parent page
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<StyledNavigationPathContainer data-testid="navigation-path">
|
||||
{openExtend ? (
|
||||
<span>{t['Navigation Path']()}</span>
|
||||
) : (
|
||||
pathData.path.map((meta, index) => {
|
||||
const isLast = index === pathData.path.length - 1;
|
||||
const showEllipsis = pathData.hasEllipsis && index === 1;
|
||||
return (
|
||||
<Fragment key={meta.id}>
|
||||
{showEllipsis && (
|
||||
<>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setOpenExtend(true)}
|
||||
>
|
||||
<MoreHorizontalIcon />
|
||||
</IconButton>
|
||||
<ArrowRightSmallIcon className="path-arrow" />
|
||||
</>
|
||||
)}
|
||||
<StyledNavPathLink
|
||||
data-testid="navigation-path-link"
|
||||
active={isLast}
|
||||
onClick={() => {
|
||||
if (isLast) return;
|
||||
jumpToPage(blockSuiteWorkspace.id, meta.id);
|
||||
onJumpToPage?.(meta.id);
|
||||
}}
|
||||
title={meta.title}
|
||||
>
|
||||
{meta.title}
|
||||
</StyledNavPathLink>
|
||||
{!isLast && <ArrowRightSmallIcon className="path-arrow" />}
|
||||
</Fragment>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Tooltip
|
||||
content={
|
||||
openExtend
|
||||
? t['Back to Quick Search']()
|
||||
: t['View Navigation Path']()
|
||||
}
|
||||
placement="top"
|
||||
disablePortal={true}
|
||||
>
|
||||
<IconButton
|
||||
data-testid="navigation-path-expand-btn"
|
||||
size="small"
|
||||
className="collapse-btn"
|
||||
onClick={() => {
|
||||
setOpenExtend(!openExtend);
|
||||
}}
|
||||
>
|
||||
{openExtend ? <CollapseIcon /> : <ExpandIcon />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</StyledNavigationPathContainer>
|
||||
<NavigationPathExtendPanel
|
||||
open={openExtend}
|
||||
blockSuiteWorkspace={blockSuiteWorkspace}
|
||||
metas={metas}
|
||||
onJumpToPage={onJumpToPage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const NavigationPathExtendPanel = ({
|
||||
open,
|
||||
metas,
|
||||
blockSuiteWorkspace,
|
||||
onJumpToPage,
|
||||
}: {
|
||||
open: boolean;
|
||||
metas: PageMeta[];
|
||||
blockSuiteWorkspace: BlockSuiteWorkspace;
|
||||
onJumpToPage?: (pageId: string) => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { jumpToPage } = useRouterHelper(router);
|
||||
|
||||
const handlePinboardClick = useCallback(
|
||||
(e: MouseEvent<HTMLDivElement>, node: PinboardNode) => {
|
||||
jumpToPage(blockSuiteWorkspace.id, node.id);
|
||||
onJumpToPage?.(node.id);
|
||||
},
|
||||
[blockSuiteWorkspace.id, jumpToPage, onJumpToPage]
|
||||
);
|
||||
|
||||
const { data } = usePinboardData({
|
||||
metas,
|
||||
pinboardRender: PinboardRender,
|
||||
blockSuiteWorkspace: blockSuiteWorkspace,
|
||||
onClick: handlePinboardClick,
|
||||
asPath: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledNavPathExtendContainer
|
||||
show={open}
|
||||
data-testid="navigation-path-expand-panel"
|
||||
>
|
||||
<TreeView data={data} indent={10} disableCollapse={true} />
|
||||
</StyledNavPathExtendContainer>
|
||||
);
|
||||
};
|
||||
@@ -1,63 +0,0 @@
|
||||
import { displayFlex, styled, textEllipsis } from '@affine/component';
|
||||
|
||||
export const StyledNavigationPathContainer = styled('div')(() => {
|
||||
return {
|
||||
height: '46px',
|
||||
...displayFlex('flex-start', 'center'),
|
||||
background: 'var(--affine-background-secondary-color)',
|
||||
padding: '0 40px 0 20px',
|
||||
position: 'relative',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
zIndex: 2,
|
||||
'.collapse-btn': {
|
||||
position: 'absolute',
|
||||
right: '12px',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
margin: 'auto',
|
||||
},
|
||||
'.path-arrow': {
|
||||
fontSize: '16px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
|
||||
({ active }) => {
|
||||
return {
|
||||
color: active
|
||||
? 'var(--affine-text-primary-color)'
|
||||
: 'var(--affine-text-secondary-color)',
|
||||
cursor: active ? 'auto' : 'pointer',
|
||||
maxWidth: '160px',
|
||||
...textEllipsis(1),
|
||||
padding: '0 4px',
|
||||
transition: 'background .15s',
|
||||
':hover': active
|
||||
? {}
|
||||
: {
|
||||
background: 'var(--affine-hover-color)',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export const StyledNavPathExtendContainer = styled('div')<{ show: boolean }>(
|
||||
({ show }) => {
|
||||
return {
|
||||
position: 'absolute',
|
||||
left: '0',
|
||||
top: show ? '0' : '-100%',
|
||||
zIndex: '1',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
background: 'var(--affine-background-secondary-color)',
|
||||
transition: 'top .15s',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
padding: '46px 12px 0 15px',
|
||||
};
|
||||
}
|
||||
);
|
||||
@@ -1,60 +0,0 @@
|
||||
import type { PageMeta } from '@blocksuite/store';
|
||||
|
||||
export function findPath(metas: PageMeta[], meta: PageMeta): PageMeta[] {
|
||||
function helper(group: PageMeta[]): PageMeta[] {
|
||||
const last = group[group.length - 1];
|
||||
const parent = metas.find(m => (m.subpageIds ?? []).includes(last.id));
|
||||
if (parent) {
|
||||
return helper([...group, parent]);
|
||||
}
|
||||
return group;
|
||||
}
|
||||
|
||||
return helper([meta]).reverse();
|
||||
}
|
||||
|
||||
function getPathItemWidth(content: string) {
|
||||
// padding is 8px, arrow is 16px, and each char is 10px
|
||||
// the max width is 160px
|
||||
const charWidth = 10;
|
||||
const w = content.length * charWidth + 8 + 16;
|
||||
return w > 160 ? 160 : w;
|
||||
}
|
||||
|
||||
// XXX: this is a static way to calculate the path width, not get the real width
|
||||
export function calcHowManyPathShouldBeShown(path: PageMeta[]): PageMeta[] {
|
||||
if (path.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const first = path[0];
|
||||
const last = path[path.length - 1];
|
||||
// 20 is the ellipsis icon width
|
||||
const maxWidth = 550 - 20;
|
||||
if (first.id === last.id) {
|
||||
return [first];
|
||||
}
|
||||
|
||||
function getMiddlePath(restWidth: number, restPath: PageMeta[]): PageMeta[] {
|
||||
if (restPath.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const last = restPath[restPath.length - 1];
|
||||
const w = getPathItemWidth(last.title);
|
||||
if (restWidth - w > 80) {
|
||||
return [
|
||||
...getMiddlePath(restWidth - w, restPath.slice(0, restPath.length - 1)),
|
||||
last,
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
return [
|
||||
first,
|
||||
...getMiddlePath(
|
||||
maxWidth - getPathItemWidth(first.title),
|
||||
path.slice(1, -1)
|
||||
),
|
||||
last,
|
||||
];
|
||||
}
|
||||
@@ -1,25 +1,5 @@
|
||||
import type { Page } from '@blocksuite/store';
|
||||
|
||||
import type { AllWorkspace } from '../../../shared';
|
||||
|
||||
export type FavoriteListProps = {
|
||||
currentWorkspace: AllWorkspace;
|
||||
};
|
||||
|
||||
export type WorkSpaceSliderBarProps = {
|
||||
isPublicWorkspace: boolean;
|
||||
onOpenQuickSearchModal: () => void;
|
||||
onOpenWorkspaceListModal: () => void;
|
||||
currentWorkspace: AllWorkspace | null;
|
||||
currentPageId: string | null;
|
||||
openPage: (pageId: string) => void;
|
||||
createPage: () => Page;
|
||||
currentPath: string;
|
||||
paths: {
|
||||
all: (workspaceId: string) => string;
|
||||
favorite: (workspaceId: string) => string;
|
||||
trash: (workspaceId: string) => string;
|
||||
setting: (workspaceId: string) => string;
|
||||
shared: (workspaceId: string) => string;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { TreeView } from '@affine/component';
|
||||
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
|
||||
import type { MouseEvent } from 'react';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import type { PinboardNode } from '../../../hooks/use-pinboard-data';
|
||||
import { usePinboardData } from '../../../hooks/use-pinboard-data';
|
||||
import { usePinboardHandler } from '../../../hooks/use-pinboard-handler';
|
||||
import type { BlockSuiteWorkspace } from '../../../shared';
|
||||
import { PinboardRender } from '../../affine/pinboard';
|
||||
|
||||
export type PinboardProps = {
|
||||
blockSuiteWorkspace: BlockSuiteWorkspace;
|
||||
openPage: (pageId: string) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export const Pinboard = ({ blockSuiteWorkspace, openPage }: PinboardProps) => {
|
||||
const allMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
|
||||
const handlePinboardClick = useCallback(
|
||||
(e: MouseEvent<HTMLDivElement>, node: PinboardNode) => {
|
||||
openPage(node.id);
|
||||
},
|
||||
[openPage]
|
||||
);
|
||||
const onAdd = useCallback(
|
||||
(id: string) => {
|
||||
openPage(id);
|
||||
},
|
||||
[openPage]
|
||||
);
|
||||
|
||||
const { data } = usePinboardData({
|
||||
metas: allMetas,
|
||||
pinboardRender: PinboardRender,
|
||||
blockSuiteWorkspace: blockSuiteWorkspace,
|
||||
onClick: handlePinboardClick,
|
||||
showOperationButton: true,
|
||||
});
|
||||
|
||||
const { addPin, deletePin, dropPin } = usePinboardHandler({
|
||||
blockSuiteWorkspace: blockSuiteWorkspace,
|
||||
metas: allMetas,
|
||||
onAdd,
|
||||
});
|
||||
|
||||
if (!data.length) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div data-testid="sidebar-pinboard-container">
|
||||
<TreeView
|
||||
data={data}
|
||||
onAdd={addPin}
|
||||
onDelete={deletePin}
|
||||
onDrop={dropPin}
|
||||
indent={16}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Pinboard;
|
||||
Reference in New Issue
Block a user