From 6f8ad3fa7770f458c907bb4855af78b230556c5d Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Wed, 27 Jul 2022 16:52:43 +0800 Subject: [PATCH] fix: typo --- .../src/menu/command-menu/Container.tsx | 106 +++++++++--------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx index b8e48b85fd..5875931904 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx @@ -19,6 +19,7 @@ import { domToRect } from '@toeverything/utils'; import { MenuCategories } from './Categories'; import { menuItemsMap, CommandMenuCategories } from './config'; import { QueryResult } from '../../search'; +import { MuiClickAwayListener as ClickAwayListener } from '@toeverything/components/ui'; export type CommandMenuContainerProps = { editor: Virgo; @@ -43,31 +44,30 @@ export const CommandMenuContainer = ({ searchBlocks, style, }: CommandMenuContainerProps) => { - const menu_ref = useRef(null); - const [current_item, set_current_item] = useState< + const menuRef = useRef(null); + const [currentItem, setCurrentItem] = useState< BlockFlavorKeys | string | undefined >(); - const [need_check_into_view, set_need_check_into_view] = - useState(false); + const [needCheckIntoView, setNeedCheckIntoView] = useState(false); const current_category = useMemo( () => (Object.entries(menuItemsMap).find( ([, infos]) => - infos.findIndex(info => current_item === info.type) !== -1 + infos.findIndex(info => currentItem === info.type) !== -1 )?.[0] || CommandMenuCategories.pages) as CommandMenuCategories, - [current_item] + [currentItem] ); useEffect(() => { - if (need_check_into_view) { - if (current_item && menu_ref.current) { + if (needCheckIntoView) { + if (currentItem && menuRef.current) { const item_ele = - menu_ref.current.querySelector( - `.item-${current_item}` + menuRef.current.querySelector( + `.item-${currentItem}` ); const scroll_ele = - menu_ref.current.querySelector( + menuRef.current.querySelector( `.${commonListContainer}` ); 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(() => { if (isShow && types) { - set_current_item(types[0]); + setCurrentItem(types[0]); } if (!isShow) { onclose && onclose(); @@ -99,89 +99,89 @@ export const CommandMenuContainer = ({ useEffect(() => { if (isShow && types) { - if (!types.includes(current_item)) { - set_need_check_into_view(true); + if (!types.includes(currentItem)) { + setNeedCheckIntoView(true); if (types.length) { - set_current_item(types[0]); + setCurrentItem(types[0]); } 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) => { if (isShow && types && event.code === 'ArrowUp') { event.preventDefault(); - if (!current_item && types.length) { - set_current_item(types[types.length - 1]); + if (!currentItem && types.length) { + setCurrentItem(types[types.length - 1]); } - if (current_item) { - const idx = types.indexOf(current_item); + if (currentItem) { + const idx = types.indexOf(currentItem); if (idx > 0) { - set_need_check_into_view(true); - set_current_item(types[idx - 1]); + setNeedCheckIntoView(true); + setCurrentItem(types[idx - 1]); } } } }, - [isShow, types, current_item] + [isShow, types, currentItem] ); - const handle_click_down = useCallback( + const handleClickDown = useCallback( (event: React.KeyboardEvent) => { if (isShow && types && event.code === 'ArrowDown') { event.preventDefault(); - if (!current_item && types.length) { - set_current_item(types[0]); + if (!currentItem && types.length) { + setCurrentItem(types[0]); } - if (current_item) { - const idx = types.indexOf(current_item); + if (currentItem) { + const idx = types.indexOf(currentItem); if (idx < types.length - 1) { - set_need_check_into_view(true); - set_current_item(types[idx + 1]); + setNeedCheckIntoView(true); + setCurrentItem(types[idx + 1]); } } } }, - [isShow, types, current_item] + [isShow, types, currentItem] ); - const handle_click_enter = useCallback( + const handleClickEnter = useCallback( async (event: React.KeyboardEvent) => { - if (isShow && event.code === 'Enter' && current_item) { + if (isShow && event.code === 'Enter' && currentItem) { 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) => { - handle_click_up(event); - handle_click_down(event); - handle_click_enter(event); + handleClickUp(event); + handleClickDown(event); + handleClickEnter(event); }, - [handle_click_up, handle_click_down, handle_click_enter] + [handleClickUp, handleClickDown, handleClickEnter] ); useEffect(() => { - hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handle_key_down); + hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handleKeyDown); return () => { hooks.removeHook( HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, - handle_key_down + handleKeyDown ); }; - }, [hooks, handle_key_down]); + }, [hooks, handleKeyDown]); const handleSetCategories = (type: CommandMenuCategories) => { const newItem = menuItemsMap[type][0].type; - set_need_check_into_view(true); - set_current_item(newItem); + setNeedCheckIntoView(true); + setCurrentItem(newItem); }; const items = useMemo(() => { @@ -216,9 +216,9 @@ export const CommandMenuContainer = ({ return isShow ? (
@@ -230,8 +230,8 @@ export const CommandMenuContainer = ({ onSelected?.(type)} - currentItem={current_item} - setCurrentItem={set_current_item} + currentItem={currentItem} + setCurrentItem={setCurrentItem} />