| @@ -1,5 +1,6 @@ | |||
| import { | |||
| memo, | |||
| useCallback, | |||
| useEffect, | |||
| useState, | |||
| } from 'react' | |||
| @@ -47,10 +48,45 @@ const WorkflowPreview = () => { | |||
| switchTab('DETAIL') | |||
| }, [workflowRunningData]) | |||
| const [panelWidth, setPanelWidth] = useState(420) | |||
| const [isResizing, setIsResizing] = useState(false) | |||
| const startResizing = useCallback((e: React.MouseEvent) => { | |||
| e.preventDefault() | |||
| setIsResizing(true) | |||
| }, []) | |||
| const stopResizing = useCallback(() => { | |||
| setIsResizing(false) | |||
| }, []) | |||
| const resize = useCallback((e: MouseEvent) => { | |||
| if (isResizing) { | |||
| const newWidth = window.innerWidth - e.clientX | |||
| if (newWidth > 420 && newWidth < 1024) | |||
| setPanelWidth(newWidth) | |||
| } | |||
| }, [isResizing]) | |||
| useEffect(() => { | |||
| window.addEventListener('mousemove', resize) | |||
| window.addEventListener('mouseup', stopResizing) | |||
| return () => { | |||
| window.removeEventListener('mousemove', resize) | |||
| window.removeEventListener('mouseup', stopResizing) | |||
| } | |||
| }, [resize, stopResizing]) | |||
| return ( | |||
| <div className={` | |||
| flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl | |||
| `}> | |||
| relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl | |||
| `} | |||
| style={{ width: `${panelWidth}px` }} | |||
| > | |||
| <div | |||
| className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300" | |||
| onMouseDown={startResizing} | |||
| /> | |||
| <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'> | |||
| {`Test Run${!workflowRunningData?.result.sequence_number ? '' : `#${workflowRunningData?.result.sequence_number}`}`} | |||
| <div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}> | |||