refactor(database): add reference counting to the popup target (#8792)

toeverything · Nov 22, 2024 · c4924fb · c4924fb
1 parent aa19fc9
commit c4924fb
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 115 deletions.
diff --git a/packages/affine/components/src/context-menu/menu-renderer.ts b/packages/affine/components/src/context-menu/menu-renderer.ts
@@ -397,10 +397,12 @@ export const createModal = (container: HTMLElement = document.body) => {
 export type PopupTarget = {
   targetRect: ReferenceElement;
   root: HTMLElement;
-  button: HTMLElement;
+  popupStart: () => () => void;
 };
 export const popupTargetFromElement = (element: HTMLElement): PopupTarget => {
   let rect = element.getBoundingClientRect();
+  let count = 0;
+  let isActive = false;
   return {
     targetRect: {
       getBoundingClientRect: () => {
@@ -411,7 +413,21 @@ export const popupTargetFromElement = (element: HTMLElement): PopupTarget => {
       },
     },
     root: getDefaultModalRoot(element),
-    button: element,
+    popupStart: () => {
+      if (!count) {
+        isActive = element.classList.contains('active');
+        if (!isActive) {
+          element.classList.add('active');
+        }
+      }
+      count++;
+      return () => {
+        count--;
+        if (!count && !isActive) {
+          element.classList.remove('active');
+        }
+      };
+    },
   };
 };
 export const createPopup = (
@@ -505,16 +521,10 @@ export const popMenu = (
   if (IS_MOBILE) {
     return popMobileMenu(props.options);
   }
-  const classList = target.button.classList;
-  const hasActive = classList.contains('active');
-  if (!hasActive) {
-    classList.add('active');
-  }
+  const popupEnd = target.popupStart();
   const onClose = () => {
     props.options.onClose?.();
-    if (!hasActive) {
-      classList.remove('active');
-    }
+    popupEnd();
   };
   const menu = new Menu({
     ...props.options,

diff --git a/packages/affine/data-view/src/core/filter/literal/define.ts b/packages/affine/data-view/src/core/filter/literal/define.ts
@@ -82,68 +82,74 @@ export const allLiteralConfig: LiteralItemsConfig[] = [
     type: t.array.instance(t.tag.instance()),
     getItems: (type, value, onChange) => {
       const set = new Set(value.value);
-      return (
-        type.element.data?.map(tag => {
-          const selected = set.has(tag.id);
-          const prefix = selected
-            ? CheckBoxCkeckSolidIcon({ style: `color:#1E96EB` })
-            : CheckBoxUnIcon();
-          return menu.action({
-            name: tag.value,
-            prefix,
-            label: () =>
-              html`<span
-                style="
+      return [
+        menu.group({
+          items:
+            type.element.data?.map(tag => {
+              const selected = set.has(tag.id);
+              const prefix = selected
+                ? CheckBoxCkeckSolidIcon({ style: `color:#1E96EB` })
+                : CheckBoxUnIcon();
+              return menu.action({
+                name: tag.value,
+                prefix,
+                label: () =>
+                  html`<span
+                    style="
              background-color: ${tag.color};
              padding:0 8px;
              border-radius:4px;
              font-size: 14px;
              line-height: 22px;
              border:1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
 "
-                >${tag.value}</span
-              >`,
-            select: () => {
-              if (selected) {
-                set.delete(tag.id);
-              } else {
-                set.add(tag.id);
-              }
-              onChange([...set]);
-              return false;
-            },
-          });
-        }) ?? []
-      );
+                    >${tag.value}</span
+                  >`,
+                select: () => {
+                  if (selected) {
+                    set.delete(tag.id);
+                  } else {
+                    set.add(tag.id);
+                  }
+                  onChange([...set]);
+                  return false;
+                },
+              });
+            }) ?? [],
+        }),
+      ];
     },
   }),
   createLiteral({
     type: t.tag.instance(),
     getItems: (type, value, onChange) => {
-      return (
-        type.data?.map(tag => {
-          return menu.action({
-            name: tag.value,
-            label: () =>
-              html`<span
-                style="
+      return [
+        menu.group({
+          items:
+            type.data?.map(tag => {
+              return menu.action({
+                name: tag.value,
+                label: () =>
+                  html`<span
+                    style="
              background-color: ${tag.color};
              padding:0 8px;
              border-radius:4px;
              font-size: 14px;
              line-height: 22px;
              border:1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
 "
-                >${tag.value}</span
-              >`,
-            isSelected: value.value === tag.id,
-            select: () => {
-              onChange(tag.id);
-              return false;
-            },
-          });
-        }) ?? []
-      );
+                    >${tag.value}</span
+                  >`,
+                isSelected: value.value === tag.id,
+                select: () => {
+                  onChange(tag.id);
+                  return false;
+                },
+              });
+            }) ?? [],
+        }),
+      ];
     },
   }),
 ];
diff --git a/packages/affine/data-view/src/widget-presets/quick-setting-bar/filter/condition-view.ts b/packages/affine/data-view/src/widget-presets/quick-setting-bar/filter/condition-view.ts
@@ -102,20 +102,28 @@ export class FilterConditionView extends SignalWatcher(ShadowlessElement) {
     const handler = popMenu(target, {
       options: {
         items: [
-          menu.action({
-            name: fn.label,
-            postfix: ArrowRightSmallIcon(),
-            select: ele => {
-              popMenu(popupTargetFromElement(ele), {
-                options: {
-                  items: this.getFunctionItems(target, () => {
-                    handler.close();
-                  }),
+          menu.group({
+            items: [
+              menu.action({
+                name: fn.label,
+                postfix: ArrowRightSmallIcon(),
+                select: ele => {
+                  popMenu(popupTargetFromElement(ele), {
+                    options: {
+                      items: [
+                        menu.group({
+                          items: this.getFunctionItems(target, () => {
+                            handler.close();
+                          }),
+                        }),
+                      ],
+                    },
+                    middleware: subMenuMiddleware,
+                  });
+                  return false;
                 },
-                middleware: subMenuMiddleware,
-              });
-              return false;
-            },
+              }),
+            ],
           }),
           menu.dynamic(() => this.getArgsItems()),
           menu.group({

diff --git a/packages/affine/data-view/src/widget-presets/tools/presets/filter/filter.ts b/packages/affine/data-view/src/widget-presets/tools/presets/filter/filter.ts
@@ -63,7 +63,6 @@ export class DataViewHeaderToolsFilter extends WidgetBase {
       this.toggleShowFilter();
       return;
     }
-    this.showToolBar(true);
     popCreateFilter(
       popupTargetFromElement(event.currentTarget as HTMLElement),
       {
@@ -75,9 +74,6 @@ export class DataViewHeaderToolsFilter extends WidgetBase {
           };
           this.toggleShowFilter(true);
         },
-        onClose: () => {
-          this.showToolBar(false);
-        },
       }
     );
     return;
@@ -104,13 +100,6 @@ export class DataViewHeaderToolsFilter extends WidgetBase {
     </div>`;
   }
 
-  showToolBar(show: boolean) {
-    const tools = this.closest('data-view-header-tools');
-    if (tools) {
-      tools.showToolBar = show;
-    }
-  }
-
   toggleShowFilter(show?: boolean) {
     const map = this.view.contextGet(ShowQuickSettingBarContextKey);
     map.value = {

diff --git a/packages/affine/data-view/src/widget-presets/tools/presets/search/search.ts b/packages/affine/data-view/src/widget-presets/tools/presets/search/search.ts
@@ -134,18 +134,6 @@ export class DataViewHeaderToolsSearch extends WidgetBase<
 
   preventBlur = false;
 
-  get showSearch(): boolean {
-    return this._showSearch;
-  }
-
-  set showSearch(value: boolean) {
-    this._showSearch = value;
-    const tools = this.closest('data-view-header-tools');
-    if (tools) {
-      tools.showToolBar = value;
-    }
-  }
-
   override connectedCallback() {
     super.connectedCallback();
     this.style.display = IS_MOBILE ? 'none' : 'flex';
@@ -155,6 +143,7 @@ export class DataViewHeaderToolsSearch extends WidgetBase<
     const searchToolClassMap = classMap({
       'affine-database-search-container': true,
       'search-container-expand': this.showSearch,
+      active: this.showSearch,
     });
     return html`
       <label class="${searchToolClassMap}" @click="${this._clickSearch}">
@@ -193,7 +182,7 @@ export class DataViewHeaderToolsSearch extends WidgetBase<
   private accessor _searchInput!: HTMLInputElement;
 
   @state()
-  private accessor _showSearch = false;
+  private accessor showSearch = false;
 }
 
 declare global {

diff --git a/packages/affine/data-view/src/widget-presets/tools/presets/sort/sort.ts b/packages/affine/data-view/src/widget-presets/tools/presets/sort/sort.ts
@@ -62,7 +62,6 @@ export class DataViewHeaderToolsSort extends WidgetBase {
       this.toggleShowQuickSettingBar();
       return;
     }
-    this.showToolBar(true);
     popCreateSort(popupTargetFromElement(event.currentTarget as HTMLElement), {
       sortUtils: {
         ...sortUtils,
@@ -81,9 +80,6 @@ export class DataViewHeaderToolsSort extends WidgetBase {
           });
         },
       },
-      onClose: () => {
-        this.showToolBar(false);
-      },
     });
     return;
   }
@@ -109,13 +105,6 @@ export class DataViewHeaderToolsSort extends WidgetBase {
     </div>`;
   }
 
-  showToolBar(show: boolean) {
-    const tools = this.closest('data-view-header-tools');
-    if (tools) {
-      tools.showToolBar = show;
-    }
-  }
-
   toggleShowQuickSettingBar(show?: boolean) {
     const map = this.view.contextGet(ShowQuickSettingBarContextKey);
     map.value = {

diff --git a/packages/affine/data-view/src/widget-presets/tools/presets/view-options/view-options.ts b/packages/affine/data-view/src/widget-presets/tools/presets/view-options/view-options.ts
@@ -73,10 +73,7 @@ export class DataViewHeaderToolsViewOptions extends WidgetBase {
   };
 
   openMoreAction = (target: PopupTarget) => {
-    this.showToolBar(true);
-    popViewOptions(target, this.dataViewInstance, () => {
-      this.showToolBar(false);
-    });
+    popViewOptions(target, this.dataViewInstance);
   };
 
   override render() {
@@ -90,13 +87,6 @@ export class DataViewHeaderToolsViewOptions extends WidgetBase {
       ${MoreHorizontalIcon()}
     </div>`;
   }
-
-  showToolBar(show: boolean) {
-    const tools = this.closest('data-view-header-tools');
-    if (tools) {
-      tools.showToolBar = show;
-    }
-  }
 }
 
 declare global {

diff --git a/packages/affine/data-view/src/widget-presets/tools/tools-view.ts b/packages/affine/data-view/src/widget-presets/tools/tools-view.ts
@@ -24,6 +24,10 @@ const styles = css`
     visibility: visible;
     opacity: 1;
   }
+  .toolbar-hover-container:has(.active) .affine-database-toolbar {
+    visibility: visible;
+    opacity: 1;
+  }
 
   .show-toolbar {
     visibility: visible;
@@ -42,7 +46,7 @@ export class DataViewHeaderTools extends WidgetBase {
 
   override render() {
     const classList = classMap({
-      'show-toolbar': this.showToolBar || IS_MOBILE,
+      'show-toolbar': IS_MOBILE,
       'affine-database-toolbar': true,
     });
     const tools = this.toolsMap[this.view.type];

diff --git a/packages/affine/data-view/src/widget-presets/views-bar/views-view.ts b/packages/affine/data-view/src/widget-presets/views-bar/views-view.ts
@@ -67,7 +67,7 @@ export class DataViewHeaderViews extends WidgetBase {
       height: 16px;
     }
 
-    .database-view-button.active {
+    .database-view-button.selected {
       color: var(--affine-text-primary-color);
       background-color: var(--affine-hover-color-filled);
     }
@@ -248,7 +248,7 @@ export class DataViewHeaderViews extends WidgetBase {
       const classList = classMap({
         'database-view-button': true,
         'dv-hover': true,
-        active: this.viewManager.currentViewId$.value === id,
+        selected: this.viewManager.currentViewId$.value === id,
       });
       const view = this.viewManager.viewDataGet(id);
       return html`