Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: typo

Browse Source
This commit is contained in:
DiamondThree
2022-07-27 16:52:43 +08:00
parent 499b673406
commit 6f8ad3fa77
1 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
libs/components/editor-plugins/src/menu/command-menu/Container.tsx
View File

@@ -19,6 +19,7 @@ import { domToRect } from '@toeverything/utils';
import { MenuCategories } from './Categories'; import { MenuCategories } from './Categories';
import { menuItemsMap, CommandMenuCategories } from './config'; import { menuItemsMap, CommandMenuCategories } from './config';
import { QueryResult } from '../../search'; import { QueryResult } from '../../search';
import { MuiClickAwayListener as ClickAwayListener } from '@toeverything/components/ui';
export type CommandMenuContainerProps = { export type CommandMenuContainerProps = {
editor: Virgo; editor: Virgo;
@@ -43,31 +44,30 @@ export const CommandMenuContainer = ({
searchBlocks, searchBlocks,
style, style,
}: CommandMenuContainerProps) => { }: CommandMenuContainerProps) => {
const menu_ref = useRef<HTMLDivElement>(null); const menuRef = useRef<HTMLDivElement>(null);
const [current_item, set_current_item] = useState< const [currentItem, setCurrentItem] = useState<
BlockFlavorKeys | string | undefined BlockFlavorKeys | string | undefined
>(); >();
const [need_check_into_view, set_need_check_into_view] = const [needCheckIntoView, setNeedCheckIntoView] = useState<boolean>(false);
useState<boolean>(false);
const current_category = useMemo( const current_category = useMemo(
() => () =>
(Object.entries(menuItemsMap).find( (Object.entries(menuItemsMap).find(
([, infos]) => ([, infos]) =>
infos.findIndex(info => current_item === info.type) !== -1 infos.findIndex(info => currentItem === info.type) !== -1
)?.[0] || CommandMenuCategories.pages) as CommandMenuCategories, )?.[0] || CommandMenuCategories.pages) as CommandMenuCategories,
[current_item] [currentItem]
); );
useEffect(() => { useEffect(() => {
if (need_check_into_view) { if (needCheckIntoView) {
if (current_item && menu_ref.current) { if (currentItem && menuRef.current) {
const item_ele = const item_ele =
menu_ref.current.querySelector<HTMLButtonElement>( menuRef.current.querySelector<HTMLButtonElement>(
`.item-${current_item}` `.item-${currentItem}`
); );
const scroll_ele = const scroll_ele =
menu_ref.current.querySelector<HTMLButtonElement>( menuRef.current.querySelector<HTMLButtonElement>(
`.${commonListContainer}` `.${commonListContainer}`
); );
if (item_ele) { if (item_ele) {
@@ -84,13 +84,13 @@ export const CommandMenuContainer = ({
} }
} }
} }
set_need_check_into_view(false); setNeedCheckIntoView(false);
} }
}, [need_check_into_view, current_item]); }, [needCheckIntoView, currentItem]);
useEffect(() => { useEffect(() => {
if (isShow && types) { if (isShow && types) {
set_current_item(types[0]); setCurrentItem(types[0]);
} }
if (!isShow) { if (!isShow) {
onclose && onclose(); onclose && onclose();
@@ -99,89 +99,89 @@ export const CommandMenuContainer = ({
useEffect(() => { useEffect(() => {
if (isShow && types) { if (isShow && types) {
if (!types.includes(current_item)) { if (!types.includes(currentItem)) {
set_need_check_into_view(true); setNeedCheckIntoView(true);
if (types.length) { if (types.length) {
set_current_item(types[0]); setCurrentItem(types[0]);
} else { } else {
set_current_item(undefined); setCurrentItem(undefined);
} }
} }
} }
}, [isShow, types, current_item]); }, [isShow, types, currentItem]);
const handle_click_up = useCallback( const handleClickUp = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
if (isShow && types && event.code === 'ArrowUp') { if (isShow && types && event.code === 'ArrowUp') {
event.preventDefault(); event.preventDefault();
if (!current_item && types.length) { if (!currentItem && types.length) {
set_current_item(types[types.length - 1]); setCurrentItem(types[types.length - 1]);
} }
if (current_item) { if (currentItem) {
const idx = types.indexOf(current_item); const idx = types.indexOf(currentItem);
if (idx > 0) { if (idx > 0) {
set_need_check_into_view(true); setNeedCheckIntoView(true);
set_current_item(types[idx - 1]); setCurrentItem(types[idx - 1]);
} }
} }
} }
}, },
[isShow, types, current_item] [isShow, types, currentItem]
); );
const handle_click_down = useCallback( const handleClickDown = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
if (isShow && types && event.code === 'ArrowDown') { if (isShow && types && event.code === 'ArrowDown') {
event.preventDefault(); event.preventDefault();
if (!current_item && types.length) { if (!currentItem && types.length) {
set_current_item(types[0]); setCurrentItem(types[0]);
} }
if (current_item) { if (currentItem) {
const idx = types.indexOf(current_item); const idx = types.indexOf(currentItem);
if (idx < types.length - 1) { if (idx < types.length - 1) {
set_need_check_into_view(true); setNeedCheckIntoView(true);
set_current_item(types[idx + 1]); setCurrentItem(types[idx + 1]);
} }
} }
} }
}, },
[isShow, types, current_item] [isShow, types, currentItem]
); );
const handle_click_enter = useCallback( const handleClickEnter = useCallback(
async (event: React.KeyboardEvent<HTMLDivElement>) => { async (event: React.KeyboardEvent<HTMLDivElement>) => {
if (isShow && event.code === 'Enter' && current_item) { if (isShow && event.code === 'Enter' && currentItem) {
event.preventDefault(); event.preventDefault();
onSelected && onSelected(current_item); onSelected && onSelected(currentItem);
} }
}, },
[isShow, current_item, onSelected] [isShow, currentItem, onSelected]
); );
const handle_key_down = useCallback( const handleKeyDown = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
handle_click_up(event); handleClickUp(event);
handle_click_down(event); handleClickDown(event);
handle_click_enter(event); handleClickEnter(event);
}, },
[handle_click_up, handle_click_down, handle_click_enter] [handleClickUp, handleClickDown, handleClickEnter]
); );
useEffect(() => { useEffect(() => {
hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handle_key_down); hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handleKeyDown);
return () => { return () => {
hooks.removeHook( hooks.removeHook(
HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE,
handle_key_down handleKeyDown
); );
}; };
}, [hooks, handle_key_down]); }, [hooks, handleKeyDown]);
const handleSetCategories = (type: CommandMenuCategories) => { const handleSetCategories = (type: CommandMenuCategories) => {
const newItem = menuItemsMap[type][0].type; const newItem = menuItemsMap[type][0].type;
set_need_check_into_view(true); setNeedCheckIntoView(true);
set_current_item(newItem); setCurrentItem(newItem);
}; };
const items = useMemo(() => { const items = useMemo(() => {
@@ -216,9 +216,9 @@ export const CommandMenuContainer = ({
return isShow ? ( return isShow ? (
<div <div
ref={menu_ref} ref={menuRef}
className={styles('rootContainer')} className={styles('rootContainer')}
onKeyDownCapture={handle_key_down} onKeyDownCapture={handleKeyDown}
style={style} style={style}
> >
<div className={styles('contentContainer')}> <div className={styles('contentContainer')}>
@@ -230,8 +230,8 @@ export const CommandMenuContainer = ({
<CommonList <CommonList
items={items} items={items}
onSelected={type => onSelected?.(type)} onSelected={type => onSelected?.(type)}
currentItem={current_item} currentItem={currentItem}
setCurrentItem={set_current_item} setCurrentItem={setCurrentItem}
/> />
</div> </div>
</div> </div>