refactor

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

@@ -1,5 +1,3 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, {
   Fragment,
   useEffect,
@@ -7,16 +5,16 @@ import React, {
   useRef,
   useState
 } from 'react'
-
+import { Plugin } from '@remixproject/engine'
 import './remix-ui-vertical-icons-panel.css'
-import OtherIcons from './components/OtherIcons'
-import { VerticalIcons } from '../../types/vertical-icons-panel'
+import IconList from './components/IconList'
 import Home from './components/Home'
-import Settings from './components/Settings'
-import { RequiredSection } from './components/RequiredSection'
 import { verticalScrollReducer } from './reducers/verticalScrollReducer'
+import { Chevron } from './components/Chevron'
+import { IconRecord } from './types'
 export interface RemixUiVerticalIconsPanelProps {
-  verticalIconsPlugin: VerticalIcons
+  verticalIconsPlugin: Plugin
+  icons: IconRecord[]
 }
 
 const initialState = {
@@ -25,13 +23,13 @@ const initialState = {
   scrollState: false
 }
 
-export function RemixUiVerticalIconsPanel ({
-  verticalIconsPlugin
-}: RemixUiVerticalIconsPanelProps) {
+const RemixUiVerticalIconsPanel = ({
+  verticalIconsPlugin, icons
+}: RemixUiVerticalIconsPanelProps) => {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
   const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
-
+  const [theme, setTheme] = useState<string>('dark')
   useEffect(() => {
     const evaluateScrollability = (evt: any) => {
       dispatchScrollAction({
@@ -44,73 +42,22 @@ export function RemixUiVerticalIconsPanel ({
       })
     }
     addEventListener('resize', evaluateScrollability)
-
     return () => {
       removeEventListener('resize', evaluateScrollability)
     }
   })
-
-  function onThemeChanged (themeType: any) {
-    const invert = themeType === 'dark' ? 1 : 0
-    // @ts-ignore
-    const active = iconPanelRef.current.querySelector('.active')
-    if (active) {
-      // @ts-ignore
-      const image = iconPanelRef.current.querySelector('.remixui_image')
-      image.style.setProperty('filter', `invert(${invert})`)
-    }
-  }
-
-  function removeActive () {
-    // @ts-ignore
-    const images = iconPanelRef.current.querySelectorAll('.remixui_image')
-    images.forEach(function (im: any) {
-      im.style.setProperty('filter', 'invert(0.5)')
-    })
-
-    // remove active
-    // @ts-ignore
-    const currentActive = iconPanelRef.current.querySelector('.active')
-    if (currentActive) {
-      currentActive.classList.remove('active')
-    }
-  }
-
-  function addActive (name: string) {
-    if (name === 'home') return
-    const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
-    const invert = themeType === 'dark' ? 1 : 0
-    const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color
-    // @ts-ignore
-    const nextActive = iconPanelRef.current.querySelector(`[plugin="${name}"]`)
-    if (nextActive) {
-      const image = nextActive.querySelector('.remixui_image')
-      nextActive.classList.add('active')
-      image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(${brightness}%)`)
-    }
-  }
-
-  async function itemContextAction (e: any, name: string, documentation: string) {
-    verticalIconsPlugin.appManager.deactivatePlugin(name)
-    verticalIconsPlugin.renderComponent()
-  }
-
   useEffect(() => {
-    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
+    verticalIconsPlugin.on('theme', 'themeChanged', (th: any) => {
+      setTheme(th.quality)
     })
     return () => {
-      themeModule.events.off('themeChanged')
+      verticalIconsPlugin.off('theme', 'themeChanged')
     }
   }, [])
 
-  useEffect(() => {
-    if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) {
-      const doWalkThroughEvent = new Event('doWalkThrough')
-      document.dispatchEvent(doWalkThroughEvent)
+  async function itemContextAction (e: any, name: string, documentation: string) {
+    verticalIconsPlugin.call('manager', 'deactivatePlugin', name)
   }
-  }, [Object.keys(verticalIconsPlugin.targetProfileForChange).length])
 
   return (
     <div id="iconsP" className="h-100">
@@ -118,13 +65,22 @@ export function RemixUiVerticalIconsPanel ({
         <Home verticalIconPlugin={verticalIconsPlugin} />
         <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
           ? 'remixui_default-icons-container remixui_requiredSection' : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
-          <RequiredSection
+          <IconList
+            theme={theme}
+            icons={icons.filter((p) => p.isRequired)}
             verticalIconsPlugin={verticalIconsPlugin}
-            addActive={addActive}
-            removeActive={removeActive}
             itemContextAction={itemContextAction}
-            scrollableRef={scrollableRef}
           />
+          {
+            scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+              ? (
+                <Chevron
+                  direction='up'
+                  divElementRef={scrollableRef}
+                  cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+                />
+              ) : null
+          }
         </div>
         <div
           id="remixuiScrollable"
@@ -133,26 +89,29 @@ export function RemixUiVerticalIconsPanel ({
             : 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}
         >
-          <OtherIcons
+          <IconList
+            theme={theme}
+            icons={icons.filter((p) => {return !p.isRequired && p.profile.name !== 'settings'})}
             verticalIconsPlugin={verticalIconsPlugin}
-            addActive={addActive}
-            removeActive={removeActive}
             itemContextAction={itemContextAction}
           />
         </div>
-        {verticalIconsPlugin.targetProfileForChange &&
-          Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
-            <Fragment>
-              <Settings
+            <div>
+              { scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? (<Chevron
+                divElementRef={scrollableRef}
+                direction='down'
+                cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+              />) : null }
+              <IconList
+                theme={theme}
+                icons={icons.filter((p) => p.profile.name === 'settings')}
                 verticalIconsPlugin={verticalIconsPlugin}
-                addActive={addActive}
-                removeActive={removeActive}
                 itemContextAction={itemContextAction}
-                scrollableRef={scrollableRef}
               />
-            </Fragment>
-          ) : null}
+            </div>
       </div>
     </div>
   )
 }
+
+export default RemixUiVerticalIconsPanel