toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 00:11:33 +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[];
};
export const DoubleLinkMenuContainer = ({
hooks,
onSelected,
onClose,
types,
style,
items,
}: DoubleLinkMenuContainerProps) => {
export const DoubleLinkMenuContainer = (
props: DoubleLinkMenuContainerProps
) => {
const { hooks, onSelected, onClose, types, style, items } = props;
const menuRef = useRef<HTMLDivElement>(null);
const [currentItem, setCurrentItem] = useState<string | undefined>();
const [needCheckIntoView, setNeedCheckIntoView] = useState<boolean>(false);
@ -79,42 +75,37 @@ export const DoubleLinkMenuContainer = ({
}
}, [types, currentItem]);
const handleClickUp = useCallback(
const handleUpDownKey = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (types && event.code === 'ArrowUp') {
if (types && ['ArrowUp', 'ArrowDown'].includes(event.code)) {
event.preventDefault();
const isUpkey = event.code === 'ArrowUp';
if (!currentItem && types.length) {
setCurrentItem(types[types.length - 1]);
setCurrentItem(types[isUpkey ? types.length - 1 : 0]);
}
if (currentItem) {
const idx = types.indexOf(currentItem);
if (idx > 0) {
if (isUpkey ? idx > 0 : idx < types.length - 1) {
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(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (types && event.code === 'ArrowDown') {
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]);
}
}
}
handleUpDownKey(event);
},
[types, currentItem]
[handleUpDownKey]
);
const handleClickEnter = useCallback(