fix: remove click outside system monitor panel (#3965)
This commit is contained in:
parent
8090a7be24
commit
14d486f299
@ -1,7 +1,6 @@
|
|||||||
import { Fragment, useCallback, useState } from 'react'
|
import { Fragment, useCallback, useState } from 'react'
|
||||||
|
|
||||||
import { Progress } from '@janhq/joi'
|
import { Progress } from '@janhq/joi'
|
||||||
import { useClickOutside } from '@janhq/joi'
|
|
||||||
import { useAtom, useAtomValue } from 'jotai'
|
import { useAtom, useAtomValue } from 'jotai'
|
||||||
import {
|
import {
|
||||||
MonitorIcon,
|
MonitorIcon,
|
||||||
@ -44,23 +43,11 @@ const SystemMonitor = () => {
|
|||||||
const [showSystemMonitorPanel, setShowSystemMonitorPanel] = useAtom(
|
const [showSystemMonitorPanel, setShowSystemMonitorPanel] = useAtom(
|
||||||
showSystemMonitorPanelAtom
|
showSystemMonitorPanelAtom
|
||||||
)
|
)
|
||||||
const [control, setControl] = useState<HTMLDivElement | null>(null)
|
|
||||||
const [elementExpand, setElementExpand] = useState<HTMLDivElement | null>(
|
|
||||||
null
|
|
||||||
)
|
|
||||||
const reduceTransparent = useAtomValue(reduceTransparentAtom)
|
const reduceTransparent = useAtomValue(reduceTransparentAtom)
|
||||||
|
|
||||||
const { watch, stopWatching } = useGetSystemResources()
|
const { watch, stopWatching } = useGetSystemResources()
|
||||||
|
|
||||||
useClickOutside(
|
|
||||||
() => {
|
|
||||||
toggleShowSystemMonitorPanel(false)
|
|
||||||
setShowFullScreen(false)
|
|
||||||
},
|
|
||||||
null,
|
|
||||||
[control, elementExpand]
|
|
||||||
)
|
|
||||||
|
|
||||||
const toggleShowSystemMonitorPanel = useCallback(
|
const toggleShowSystemMonitorPanel = useCallback(
|
||||||
(isShow: boolean) => {
|
(isShow: boolean) => {
|
||||||
setShowSystemMonitorPanel(isShow)
|
setShowSystemMonitorPanel(isShow)
|
||||||
@ -76,7 +63,6 @@ const SystemMonitor = () => {
|
|||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<div
|
<div
|
||||||
ref={setControl}
|
|
||||||
data-testid="system-monitoring"
|
data-testid="system-monitoring"
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'flex cursor-pointer items-center gap-x-1 rounded px-1 py-0.5 hover:bg-[hsla(var(--secondary-bg))]',
|
'flex cursor-pointer items-center gap-x-1 rounded px-1 py-0.5 hover:bg-[hsla(var(--secondary-bg))]',
|
||||||
@ -92,7 +78,6 @@ const SystemMonitor = () => {
|
|||||||
</div>
|
</div>
|
||||||
{showSystemMonitorPanel && (
|
{showSystemMonitorPanel && (
|
||||||
<div
|
<div
|
||||||
ref={setElementExpand}
|
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'fixed bottom-9 left-[49px] z-50 flex h-[200px] w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
|
'fixed bottom-9 left-[49px] z-50 flex h-[200px] w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
|
||||||
showFullScreen && 'h-[calc(100%-63px)]',
|
showFullScreen && 'h-[calc(100%-63px)]',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user