cleanup functions

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -1,21 +1,10 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable no-use-before-define */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line no-use-before-define
-import React, { Dispatch, Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import Badge from './Badge'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 
-  interface IconProps {
-    verticalIconPlugin: VerticalIcons
-    profile: IconProfile
-    contextMenuAction: (evt: any, profileName: string, documentation: string) => void
-    addActive: (profileName: string) => void
-    removeActive: () => void
-  }
-
 export interface IconStatus {
     key: string
     title: string
@@ -41,6 +30,14 @@ export interface IconProfile {
     tooltip?: string
   }
 
+  interface IconProps {
+    verticalIconPlugin: VerticalIcons
+    profile: IconProfile
+    contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+    addActive: (profileName: string) => void
+    removeActive: () => void
+  }
+
 const initialState = {
   text: '',
   key: '',
@@ -99,6 +96,9 @@ function Icon ({
       const action: IconBadgeReducerAction = { type: name, payload: { status: iconStatus, verticalIconPlugin: verticalIconPlugin } }
       dispatchStatusUpdate(action)
     })
+    return () => {
+      verticalIconPlugin.off(name, 'statusChanged')
+    }
   }, [])
 
   return (

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -114,8 +114,7 @@
   }
 
   .remixui_requiredSection {
-    flex-basis: 180px;
+    border-bottom: 1px solid var(--secondary);
-    flex-grow: 1;
   }
 
   #menuitems {

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -50,12 +50,6 @@ export function RemixUiVerticalIconsPanel ({
     }
   })
 
-  useEffect(() => {
-    addEventListener('pluginDisabled', (evt: any) => {
-      console.log('plugin disabled and it should have a payload ', { evt })
-    })
-  }, [Object.keys(verticalIconsPlugin.targetProfileForChange).length])
-
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
     // @ts-ignore
@@ -109,13 +103,9 @@ export function RemixUiVerticalIconsPanel ({
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
     })
-  }, [])
+    return () => {
-
+      themeModule.events.off('themeChanged')
-  useEffect(() => {
+    }
-    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
-    })
   }, [])
 
   useEffect(() => {