Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: quick search tips follow when resize (#1580)

Browse Source 
Co-authored-by: himself65 <himself65@outlook.com>
This commit is contained in:
Whitewater
2023-03-15 09:27:38 -07:00
committed by GitHub
parent 5ac6632276
commit bc32b07bf0
6 changed files with 190 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
apps/web/src/components/blocksuite/header/index.tsx
View File

@@ -1,13 +1,14 @@
import { QuickSearchTips } from '@affine/component';
import { PopperProps, QuickSearchTips } from '@affine/component';
import { getEnvironment } from '@affine/env';
import { ArrowDownSmallIcon } from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store';
import { useSetAtom } from 'jotai';
import React from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { forwardRef, HTMLAttributes, useCallback, useRef } from 'react';
import { openQuickSearchModalAtom } from '../../../atoms';
import { currentEditorAtom, openQuickSearchModalAtom } from '../../../atoms';
import { useOpenTips } from '../../../hooks/affine/use-is-first-load';
import { usePageMeta } from '../../../hooks/use-page-meta';
import { useElementResizeEffect } from '../../../hooks/use-workspaces';
import { BlockSuiteWorkspace } from '../../../shared';
import { PageNotFoundError } from '../../affine/affine-error-eoundary';
import { QuickSearchButton } from '../../pure/quick-search-button';
@@ -30,32 +31,45 @@ export type BlockSuiteEditorHeaderProps = React.PropsWithChildren<{
isPreview?: boolean;
}>;
export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
blockSuiteWorkspace,
pageId,
children,
isPublic,
isPreview,
}) => {
const page = blockSuiteWorkspace.getPage(pageId);
// fixme(himself65): remove this atom and move it to props
const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
if (!page) {
throw new PageNotFoundError(blockSuiteWorkspace, pageId);
}
const pageMeta = usePageMeta(blockSuiteWorkspace).find(
meta => meta.id === pageId
);
assertExists(pageMeta);
const title = pageMeta.title;
const { trash: isTrash } = pageMeta;
const [openTips, setOpenTips] = useOpenTips();
const isMac = () => {
const env = getEnvironment();
return env.isBrowser && env.isMacOs;
};
const tipsContent = () => {
return (
export const BlockSuiteEditorHeader = forwardRef<
HTMLDivElement,
BlockSuiteEditorHeaderProps & HTMLAttributes<HTMLDivElement>
>(
(
{ blockSuiteWorkspace, pageId, children, isPublic, isPreview, ...props },
ref
) => {
const page = blockSuiteWorkspace.getPage(pageId);
// fixme(himself65): remove this atom and move it to props
const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
if (!page) {
throw new PageNotFoundError(blockSuiteWorkspace, pageId);
}
const pageMeta = usePageMeta(blockSuiteWorkspace).find(
meta => meta.id === pageId
);
assertExists(pageMeta);
const title = pageMeta.title;
const { trash: isTrash } = pageMeta;
const [openTips, setOpenTips] = useOpenTips();
const isMac = () => {
const env = getEnvironment();
return env.isBrowser && env.isMacOs;
};
const popperRef: PopperProps['popperRef'] = useRef(null);
useElementResizeEffect(
useAtomValue(currentEditorAtom),
useCallback(() => {
if (!openTips || !popperRef.current) {
return;
}
popperRef.current.update();
}, [openTips])
);
const TipsContent = (
<StyledQuickSearchTipContent>
<div>
Click button
@@ -81,50 +95,56 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
</StyledQuickSearchTipButton>
</StyledQuickSearchTipContent>
);
};
return (
<Header
rightItems={
// fixme(himself65): other right items not supported in public mode
isPublic || isPreview
? ['themeModeSwitch']
: isTrash
? ['trashButtonGroup']
: ['syncUser', 'themeModeSwitch', 'editorOptionMenu']
}
>
{children}
{!isPublic && (
<StyledTitleContainer data-tauri-drag-region>
<StyledTitleWrapper>
<StyledSwitchWrapper>
<EditorModeSwitch
blockSuiteWorkspace={blockSuiteWorkspace}
pageId={pageId}
style={{
marginRight: '12px',
}}
/>
</StyledSwitchWrapper>
<StyledTitle>{title || 'Untitled'}</StyledTitle>
<QuickSearchTips
data-testid="quick-search-tips"
content={tipsContent()}
placement="bottom"
open={openTips}
offset={[0, -5]}
>
<StyledSearchArrowWrapper>
<QuickSearchButton
onClick={() => {
setOpenQuickSearch(true);
return (
<Header
ref={ref}
rightItems={
// fixme(himself65): other right items not supported in public mode
isPublic || isPreview
? ['themeModeSwitch']
: isTrash
? ['trashButtonGroup']
: ['syncUser', 'themeModeSwitch', 'editorOptionMenu']
}
{...props}
>
{children}
{!isPublic && (
<StyledTitleContainer data-tauri-drag-region>
<StyledTitleWrapper>
<StyledSwitchWrapper>
<EditorModeSwitch
blockSuiteWorkspace={blockSuiteWorkspace}
pageId={pageId}
style={{
marginRight: '12px',
}}
/>
</StyledSearchArrowWrapper>
</QuickSearchTips>
</StyledTitleWrapper>
</StyledTitleContainer>
)}
</Header>
);
};
</StyledSwitchWrapper>
<StyledTitle>{title || 'Untitled'}</StyledTitle>
<QuickSearchTips
data-testid="quick-search-tips"
content={TipsContent}
placement="bottom"
popperRef={popperRef}
open={openTips}
offset={[0, -5]}
>
<StyledSearchArrowWrapper>
<QuickSearchButton
onClick={() => {
setOpenQuickSearch(true);
}}
/>
</StyledSearchArrowWrapper>
</QuickSearchTips>
</StyledTitleWrapper>
</StyledTitleContainer>
)}
</Header>
);
}
);
BlockSuiteEditorHeader.displayName = 'BlockSuiteEditorHeader';