toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 10:05:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: Intra-line double link interaction

Browse Source
This commit is contained in:
xiaodong zuo 2022-08-19 11:41:53 +08:00
parent 2406f9556f
commit 9411422faf
1 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
libs/components/editor-plugins/src/menu/double-link-menu/Container.tsx
View File

@ -19,14 +19,10 @@ export type DoubleLinkMenuContainerProps = {
items?: CommonListItem[]; items?: CommonListItem[];
}; };
export const DoubleLinkMenuContainer = ({ export const DoubleLinkMenuContainer = (
hooks, props: DoubleLinkMenuContainerProps
onSelected, ) => {
onClose, const { hooks, onSelected, onClose, types, style, items } = props;
types,
style,
items,
}: DoubleLinkMenuContainerProps) => {
const menuRef = useRef<HTMLDivElement>(null); const menuRef = useRef<HTMLDivElement>(null);
const [currentItem, setCurrentItem] = useState<string | undefined>(); const [currentItem, setCurrentItem] = useState<string | undefined>();
const [needCheckIntoView, setNeedCheckIntoView] = useState<boolean>(false); const [needCheckIntoView, setNeedCheckIntoView] = useState<boolean>(false);
@ -79,42 +75,37 @@ export const DoubleLinkMenuContainer = ({
} }
}, [types, currentItem]); }, [types, currentItem]);
const handleClickUp = useCallback( const handleUpDownKey = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
if (types && event.code === 'ArrowUp') { if (types && ['ArrowUp', 'ArrowDown'].includes(event.code)) {
event.preventDefault(); event.preventDefault();
const isUpkey = event.code === 'ArrowUp';
if (!currentItem && types.length) { if (!currentItem && types.length) {
setCurrentItem(types[types.length - 1]); setCurrentItem(types[isUpkey ? types.length - 1 : 0]);
} }
if (currentItem) { if (currentItem) {
const idx = types.indexOf(currentItem); const idx = types.indexOf(currentItem);
if (idx > 0) { if (isUpkey ? idx > 0 : idx < types.length - 1) {
setNeedCheckIntoView(true); setNeedCheckIntoView(true);
setCurrentItem(types[idx - 1]); setCurrentItem(types[isUpkey ? idx - 1 : idx + 1]);
} }
} }
} }
}, },
[types, currentItem] [currentItem, types]
);
const handleClickUp = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
handleUpDownKey(event);
},
[handleUpDownKey]
); );
const handleClickDown = useCallback( const handleClickDown = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
if (types && event.code === 'ArrowDown') { handleUpDownKey(event);
event.preventDefault();
if (!currentItem && types.length) {
setCurrentItem(types[0]);
}
if (currentItem) {
const idx = types.indexOf(currentItem);
if (idx < types.length - 1) {
setNeedCheckIntoView(true);
setCurrentItem(types[idx + 1]);
}
}
}
}, },
[types, currentItem] [handleUpDownKey]
); );
const handleClickEnter = useCallback( const handleClickEnter = useCallback(