handleClickSelect(item)}>
{getKeyOf(item)}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
index 010aa20366..c78610052b 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
@@ -26,31 +26,31 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r
removeActive={removeActive}
itemContextAction={itemContextAction}
/>
-
-
-
-
-
clientHeight) scrollState = true
+ return { scrollHeight, clientHeight, scrollState }
+ }
+ return prevState
+}
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 3496f468d9..cdf4cab889 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
@@ -3,7 +3,9 @@
import React, {
Fragment,
useEffect,
- useRef
+ useReducer,
+ useRef,
+ useState
} from 'react'
import './remix-ui-vertical-icons-panel.css'
@@ -12,17 +14,44 @@ import { VerticalIcons } from '../../types/vertical-icons-panel'
import Home from './components/Home'
import Settings from './components/Settings'
import { RequiredSection } from './components/RequiredSection'
+import { verticalScrollReducer } from './reducers/verticalScrollReducer'
export interface RemixUiVerticalIconsPanelProps {
verticalIconsPlugin: VerticalIcons
}
let scrollHeight: any
+const initialState = {
+ scrollHeight: 0,
+ clientHeight: 0,
+ scrollState: false
+}
+
export function RemixUiVerticalIconsPanel ({
verticalIconsPlugin
}: RemixUiVerticalIconsPanelProps) {
const scrollableRef = useRef()
const iconPanelRef = useRef()
+ const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
+
+ useEffect(() => {
+ const evaluateScrollability = (evt: any) => {
+ console.log('resize event answered by dispatch!')
+ dispatchScrollAction({
+ type: 'resize',
+ payload: {
+ scrollHeight: document.querySelector('#remixuiScrollable')?.scrollHeight,
+ clientHeight: document.querySelector('#remixuiScrollable')?.clientHeight,
+ scrollState: false
+ }
+ })
+ }
+ addEventListener('resize', evaluateScrollability)
+
+ return () => {
+ removeEventListener('resize', evaluateScrollability)
+ }
+ })
function onThemeChanged (themeType: any) {
const invert = themeType === 'dark' ? 1 : 0
@@ -51,6 +80,7 @@ export function RemixUiVerticalIconsPanel ({
}
function addActive (name: string) {
+ console.log('addactive has been called now.')
if (name === 'home') return
const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
const invert = themeType === 'dark' ? 1 : 0
@@ -98,7 +128,7 @@ export function RemixUiVerticalIconsPanel ({
scrollableRef.current.clientHeight
- ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
+ ? 'remixui_default-icons-container remixui_requiredSection' : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
scrollableRef.current.clientHeight
? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
- : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
+ : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll' : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
ref={scrollableRef}
>