luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Intra-line double link interaction

Browse Source
This commit is contained in:
xiaodong zuo
2022-08-19 11:56:57 +08:00
parent 9411422faf
commit c67d961d66
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,23 +30,22 @@ export const DoubleLinkMenuContainer = (
useEffect(() => { useEffect(() => {
if (needCheckIntoView) { if (needCheckIntoView) {
if (currentItem && menuRef.current) { if (currentItem && menuRef.current) {
const itemEle = const itemElement =
menuRef.current.querySelector<HTMLButtonElement>( menuRef.current.querySelector<HTMLButtonElement>(
`.item-${currentItem}` `.item-${currentItem}`
); );
const scrollEle = const scrollElement =
menuRef.current.querySelector<HTMLButtonElement>( menuRef.current.querySelector<HTMLButtonElement>(
`.${commonListContainer}` `.${commonListContainer}`
); );
if (itemEle) { if (itemElement) {
const itemRect = domToRect(itemEle); const itemRect = domToRect(itemElement);
const scrollRect = domToRect(scrollEle); const scrollRect = domToRect(scrollElement);
if ( if (
itemRect.top < scrollRect.top || itemRect.top < scrollRect.top ||
itemRect.bottom > scrollRect.bottom itemRect.bottom > scrollRect.bottom
) { ) {
// IMP: may be do it with self function itemElement.scrollIntoView({
itemEle.scrollIntoView({
block: 'nearest', block: 'nearest',
}); });
} }
@@ -80,12 +79,16 @@ export const DoubleLinkMenuContainer = (
if (types && ['ArrowUp', 'ArrowDown'].includes(event.code)) { if (types && ['ArrowUp', 'ArrowDown'].includes(event.code)) {
event.preventDefault(); event.preventDefault();
const isUpkey = event.code === 'ArrowUp'; const isUpkey = event.code === 'ArrowUp';
const indexBound = isUpkey ? types.length - 1 : 0;
if (!currentItem && types.length) { if (!currentItem && types.length) {
setCurrentItem(types[isUpkey ? types.length - 1 : 0]); setCurrentItem(types[indexBound]);
} }
if (currentItem) { if (currentItem) {
const idx = types.indexOf(currentItem); const idx = types.indexOf(currentItem);
if (isUpkey ? idx > 0 : idx < types.length - 1) { const needChange = isUpkey
? idx > indexBound
: idx < indexBound;
if (needChange) {
setNeedCheckIntoView(true); setNeedCheckIntoView(true);
setCurrentItem(types[isUpkey ? idx - 1 : idx + 1]); setCurrentItem(types[isUpkey ? idx - 1 : idx + 1]);
} }