active class update for filepanel

pull/1671/head
Joseph Izang 3 years ago
parent 9cdddaeee9
commit 2b1b17a2c1
  1. 25
      libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
  2. 10
      package-lock.json

@ -1,6 +1,6 @@
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
import React, { Fragment } from 'react' import React, { Fragment, useEffect, useRef } from 'react'
import Icon from './Icon' import Icon from './Icon'
interface FilePanelProps { interface FilePanelProps {
@ -11,6 +11,25 @@ interface FilePanelProps {
} }
function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) { function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) {
const filePanelRef = useRef(null)
function onThemeChanged (themeType: any) {
const invert = themeType === 'dark' ? 1 : 0
// @ts-ignore
const active = filePanelRef.current && filePanelRef.current.querySelector('.active')
if (active) {
// @ts-ignore
const image = filePanelRef.current.querySelector('.remixui_image')
image.style.setProperty('filter', `invert(${invert})`)
}
}
useEffect(() => {
const themeModule = verticalIconsPlugin.registry.get('themeModule').api
themeModule.events.on('themeChanged', (theme: any) => {
onThemeChanged(theme.quality)
})
}, [])
return ( return (
<Fragment> <Fragment>
{verticalIconsPlugin.targetProfileForChange && {verticalIconsPlugin.targetProfileForChange &&
@ -20,7 +39,9 @@ function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeA
.map(p => ( .map(p => (
<div id="fileExplorerIcons" key={ <div id="fileExplorerIcons" key={
verticalIconsPlugin.targetProfileForChange[p].displayName verticalIconsPlugin.targetProfileForChange[p].displayName
} data-id="verticalIconsFileExplorerIcons"> } data-id="verticalIconsFileExplorerIcons"
ref={filePanelRef}
>
<Icon <Icon
kind={verticalIconsPlugin.targetProfileForChange[p].kind} kind={verticalIconsPlugin.targetProfileForChange[p].kind}
displayName={ displayName={

10
package-lock.json generated

@ -35941,16 +35941,6 @@
"es-abstract": "^1.19.1" "es-abstract": "^1.19.1"
} }
}, },
"object.hasown": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
"integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.19.1"
}
},
"object.map": { "object.map": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz", "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",

Loading…
Cancel
Save