Merge pull request #123 from Dataport/fix/plugin-icon-menu-initially-…

…open Fix issue of initiallyOpen in @polar/plugin-icon-menu not working
Dataport · Apr 18, 2024 · 946e8d2 · 946e8d2
2 parents 8528eee + 3c26939
commit 946e8d2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/packages/plugins/IconMenu/CHANGELOG.md b/packages/plugins/IconMenu/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## unpublished
+
+- Fix: Resolve issue with `initiallyOpen` not working as expected.
+
 ## 1.2.0
 
 - Feature: Improved implementation to make plugin SPA-ready.

diff --git a/packages/plugins/IconMenu/src/components/IconMenu.vue b/packages/plugins/IconMenu/src/components/IconMenu.vue
@@ -67,13 +67,14 @@ export default Vue.extend({
   data: () => ({ maxWidth: 'inherit' }),
   computed: {
     ...mapGetters([
+      'clientHeight',
+      'clientWidth',
       'hasSmallDisplay',
       'hasSmallHeight',
       'hasSmallWidth',
       'hasWindowSize',
-      'clientHeight',
     ]),
-    ...mapGetters('plugin/iconMenu', ['menus', 'open']),
+    ...mapGetters('plugin/iconMenu', ['initiallyOpen', 'menus', 'open']),
     asList() {
       return this.menus.length > 1
     },
@@ -96,6 +97,17 @@ export default Vue.extend({
     },
   },
   watch: {
+    // The map initially has a height of 0, so initially opening a menu only works after the height has changed
+    clientHeight(newValue: number, oldValue: number) {
+      if (
+        oldValue === 0 &&
+        newValue > 0 &&
+        !this.hasSmallHeight &&
+        !this.hasSmallWidth
+      ) {
+        this.openMenuById(this.initiallyOpen)
+      }
+    },
     // Fixes an issue if the orientation of a mobile device is changed while a plugin is open
     isHorizontal(newVal: boolean) {
       if (!newVal) {
@@ -113,7 +125,7 @@ export default Vue.extend({
   methods: {
     ...mapMutations(['setMoveHandle']),
     ...mapMutations('plugin/iconMenu', ['setOpen']),
-    ...mapActions('plugin/iconMenu', ['openInMoveHandle']),
+    ...mapActions('plugin/iconMenu', ['openInMoveHandle', 'openMenuById']),
     toggle(index: number) {
       if (this.open === index) {
         this.setOpen(null)

diff --git a/packages/plugins/IconMenu/src/store/index.ts b/packages/plugins/IconMenu/src/store/index.ts
@@ -4,7 +4,7 @@ import {
   generateSimpleMutations,
 } from '@repositoryname/vuex-generators'
 import { PolarModule } from '@polar/lib-custom-types'
-import { IconMenuState } from '../types'
+import { IconMenuGetters, IconMenuState } from '../types'
 
 const getInitialState = (): IconMenuState => ({
   menus: [],
@@ -14,11 +14,11 @@ const getInitialState = (): IconMenuState => ({
 // OK for module creation
 // eslint-disable-next-line max-lines-per-function
 export const makeStoreModule = () => {
-  const storeModule: PolarModule<IconMenuState, IconMenuState> = {
+  const storeModule: PolarModule<IconMenuState, IconMenuGetters> = {
     namespaced: true,
     state: getInitialState(),
     actions: {
-      setupModule({ commit, dispatch, rootGetters }): void {
+      setupModule({ commit, rootGetters }): void {
         const menus = rootGetters.configuration?.iconMenu?.menus || []
         const initializedMenus = menus
           .filter(({ id }) => {
@@ -45,15 +45,8 @@ export const makeStoreModule = () => {
           })
 
         commit('setMenus', initializedMenus)
-
-        const initiallyOpen =
-          rootGetters.configuration?.iconMenu?.initiallyOpen || ''
-
-        if (!rootGetters.hasSmallWidth && !rootGetters.hasSmallHeight) {
-          dispatch('openMenuById', initiallyOpen)
-        }
       },
-      openMenuById({ commit, getters, dispatch }, openId) {
+      openMenuById({ commit, dispatch, getters }, openId: string) {
         const index = getters.menus.findIndex(({ id }) => id === openId)
 
         if (index !== -1) {
@@ -84,6 +77,8 @@ export const makeStoreModule = () => {
     },
     getters: {
       ...generateSimpleGetters(getInitialState()),
+      initiallyOpen: (_, __, ___, rootGetters) =>
+        rootGetters.configuration?.iconMenu?.initiallyOpen || '',
     },
   }
 

diff --git a/packages/plugins/IconMenu/src/types.ts b/packages/plugins/IconMenu/src/types.ts
@@ -4,3 +4,7 @@ export interface IconMenuState {
   menus: Menu[]
   open: number | null
 }
+
+export interface IconMenuGetters extends IconMenuState {
+  initiallyOpen: string
+}