fix(blocks): mobile at menu rendering

toeverything · Dec 20, 2024 · 8fe43a5 · 8fe43a5
1 parent cb1c432
commit 8fe43a5
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 47 deletions.
diff --git a/packages/blocks/src/root-block/widgets/keyboard-toolbar/config.ts b/packages/blocks/src/root-block/widgets/keyboard-toolbar/config.ts
@@ -295,7 +295,7 @@ const pageToolGroup: KeyboardToolPanelGroup = {
 
         return std.doc.schema.flavourSchemaMap.has('affine:embed-linked-doc');
       },
-      action: ({ rootComponent, closeToolbar }) => {
+      action: ({ rootComponent, closeToolPanel }) => {
         const { std } = rootComponent;
 
         const linkedDocWidget = std.view.getWidget(
@@ -321,7 +321,7 @@ const pageToolGroup: KeyboardToolPanelGroup = {
             // Wait for range to be updated
             inlineEditor?.slots.inlineRangeSync.once(() => {
               linkedDocWidget.show('mobile');
-              closeToolbar();
+              closeToolPanel();
             });
           })
           .run();

diff --git a/packages/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts b/packages/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts
@@ -23,6 +23,7 @@ import {
 } from '../../../_common/components/utils.js';
 import { getPopperPosition } from '../../utils/position.js';
 import { linkedDocPopoverStyles } from './styles.js';
+import { resolveSignal } from './utils.js';
 
 @requiredProperties({
   context: PropTypes.object,
@@ -90,7 +91,7 @@ export class LinkedDocPopover extends SignalWatcher(
 
   private _getActionItems(group: LinkedMenuGroup) {
     const isExpanded = !!this._expanded.get(group.name);
-    const items = Array.isArray(group.items) ? group.items : group.items.value;
+    const items = resolveSignal(group.items);
     if (isExpanded) {
       return items;
     }

diff --git a/packages/blocks/src/root-block/widgets/linked-doc/mobile-linked-doc-menu.ts b/packages/blocks/src/root-block/widgets/linked-doc/mobile-linked-doc-menu.ts
@@ -9,6 +9,7 @@ import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { signal } from '@preact/signals-core';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { join } from 'lit/directives/join.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import type {
@@ -24,6 +25,7 @@ import {
 } from '../../../_common/components/utils.js';
 import { PageRootBlockComponent } from '../../index.js';
 import { mobileLinkedDocMenuStyles } from './styles.js';
+import { resolveSignal } from './utils.js';
 
 export const AFFINE_MOBILE_LINKED_DOC_MENU = 'affine-mobile-linked-doc-menu';
 
@@ -36,14 +38,41 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
 ) {
   static override styles = mobileLinkedDocMenuStyles;
 
-  private readonly _expand$ = signal(false);
+  private readonly _expand = new Set<string>();
 
   private _firstActionItem: LinkedMenuItem | null = null;
 
   private readonly _keyboardController = new VirtualKeyboardController(this);
 
   private readonly _linkedDocGroup$ = signal<LinkedMenuGroup[]>([]);
 
+  private _renderGroup = (group: LinkedMenuGroup) => {
+    let items = resolveSignal(group.items);
+
+    const isOverflow = !!group.maxDisplay && items.length > group.maxDisplay;
+    const expanded = this._expand.has(group.name);
+
+    let moreItem = null;
+    if (!expanded && isOverflow) {
+      items = items.slice(0, group.maxDisplay);
+
+      moreItem = html`<div
+        class="mobile-linked-doc-menu-item"
+        @click=${() => {
+          this._expand.add(group.name);
+          this.requestUpdate();
+        }}
+      >
+        ${MoreHorizontalIcon()}
+        <div class="text">${group.overflowText || 'more'}</div>
+      </div>`;
+    }
+
+    return html`
+      ${repeat(items, item => item.key, this._renderItem)} ${moreItem}
+    `;
+  };
+
   private readonly _renderItem = ({
     key,
     name,
@@ -198,54 +227,17 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
   override firstUpdated() {
     if (!this._keyboardController.opened) {
       this._keyboardController.show();
-      const id = setInterval(() => {
-        if (!this._keyboardController.opened) return;
-        this._scrollInputToTop();
-        clearInterval(id);
-      }, 50);
-      this.disposables.add(() => {
-        clearInterval(id);
-      });
-    } else {
-      this._scrollInputToTop();
     }
+    this._scrollInputToTop();
   }
 
   override render() {
-    // todo: get rid of hard coded config
-    if (this._linkedDocGroup$.value.length === 0) {
+    const groups = this._linkedDocGroup$.value;
+    if (groups.length === 0) {
       return nothing;
     }
 
-    let group = this._linkedDocGroup$.value[0];
-
-    let items = Array.isArray(group.items) ? group.items : group.items.value;
-
-    if (items.length === 0) {
-      group = this._linkedDocGroup$.value[1];
-      items = (
-        Array.isArray(group.items) ? group.items : group.items.value
-      ).filter(item => item.name !== 'Import');
-    }
-
-    const isOverflow = !!group.maxDisplay && items.length > group.maxDisplay;
-
-    let moreItem = null;
-    if (!this._expand$.value && isOverflow) {
-      items = items.slice(0, group.maxDisplay);
-
-      moreItem = html`<div
-        class="mobile-linked-doc-menu-item"
-        @click=${() => {
-          this._expand$.value = true;
-        }}
-      >
-        ${MoreHorizontalIcon()}
-        <div class="text">${group.overflowText || 'more'}</div>
-      </div>`;
-    }
-
-    this._firstActionItem = items[0];
+    this._firstActionItem = resolveSignal(groups[0].items)[0];
 
     this.style.bottom =
       this.context.config.mobile.useScreenHeight &&
@@ -254,7 +246,7 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
         : `max(0px, ${this._keyboardController.keyboardHeight}px)`;
 
     return html`
-      ${repeat(items, item => item.key, this._renderItem)} ${moreItem}
+      ${join(groups.map(this._renderGroup), html`<div class="divider"></div>`)}
     `;
   }
 

diff --git a/packages/blocks/src/root-block/widgets/linked-doc/styles.ts b/packages/blocks/src/root-block/widgets/linked-doc/styles.ts
@@ -94,7 +94,14 @@ export const mobileLinkedDocMenuStyles = css`
     box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.07);
   }
 
-  ${scrollbarStyle(':host')}
+  :host::-webkit-scrollbar {
+    display: none;
+  }
+
+  .divider {
+    width: 100%;
+    border-top: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+  }
 
   .mobile-linked-doc-menu-item {
     display: flex;

diff --git a/packages/blocks/src/root-block/widgets/linked-doc/utils.ts b/packages/blocks/src/root-block/widgets/linked-doc/utils.ts
@@ -0,0 +1,5 @@
+import { Signal } from '@preact/signals-core';
+
+export function resolveSignal<T>(data: T | Signal<T>): T {
+  return data instanceof Signal ? data.value : data;
+}