diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index fbc31f7819..247eee1ccf 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/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 -import React, { Dispatch, Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react' +// eslint-disable-next-line no-use-before-define +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 ( diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css index 0c5186d612..c7f91fd0bf 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css @@ -114,8 +114,7 @@ } .remixui_requiredSection { - flex-basis: 180px; - flex-grow: 1; + border-bottom: 1px solid var(--secondary); } #menuitems { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx index 0436175a8e..95ea7e58d3 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx +++ b/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) }) - }, []) - - useEffect(() => { - const themeModule = verticalIconsPlugin.registry.get('themeModule').api - themeModule.events.on('themeChanged', (theme: any) => { - onThemeChanged(theme.quality) - }) + return () => { + themeModule.events.off('themeChanged') + } }, []) useEffect(() => {