Spaces:
Running
Running
| import {useEffect,useMemo,useRef,useState} from 'react'; | |
| import {createPortal} from 'react-dom'; | |
| import {Check,Copy,Download,Maximize2,Minimize2,X} from 'lucide-react'; | |
| import {highlightPython} from './python-highlight'; | |
| type Props={code:string;error:string;url:string;id:string;version:string;onClose:()=>void}; | |
| export default function CodePanel({code,error,url,id,version,onClose}:Props){ | |
| const [copied,setCopied]=useState(false),[copyError,setCopyError]=useState(false),[expanded,setExpanded]=useState(false); | |
| const panel=useRef<HTMLElement>(null),expandButton=useRef<HTMLButtonElement>(null); | |
| const collapse=()=>{setExpanded(false);requestAnimationFrame(()=>expandButton.current?.focus());}; | |
| useEffect(()=>{ | |
| if(!expanded)return; | |
| const app=document.querySelector<HTMLElement>('.app-shell'),wasInert=app?.inert; | |
| if(app)app.inert=true; | |
| panel.current?.querySelector<HTMLElement>('pre,button')?.focus(); | |
| const key=(e:KeyboardEvent)=>{ | |
| if(e.key==='Escape'){e.preventDefault();collapse();} | |
| if(e.key==='Tab'){ | |
| const nodes=Array.from(panel.current?.querySelectorAll<HTMLElement>('button:not(:disabled),a[href],pre[tabindex]')??[]),first=nodes[0],last=nodes.at(-1); | |
| if(e.shiftKey&&document.activeElement===first){e.preventDefault();last?.focus();} | |
| else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first?.focus();} | |
| } | |
| }; | |
| document.addEventListener('keydown',key);return()=>{document.removeEventListener('keydown',key);if(app)app.inert=wasInert??false;}; | |
| },[expanded]); | |
| const html=useMemo(()=>highlightPython(code),[code]); | |
| const copy=async()=>{try{await navigator.clipboard.writeText(code);setCopied(true);setCopyError(false);}catch{setCopied(false);setCopyError(true);}}; | |
| const content=<section ref={panel} id="selection-details" className={`dock-panel selection-details code-panel ${expanded?'code-expanded':''}`} aria-label="Python program" role={expanded?'dialog':undefined} aria-modal={expanded||undefined} data-ui> | |
| <header className="code-heading"><div><h2>The program</h2><p>Python · sand3d {version}{code?` · ${code.split('\n').length} lines`:''}</p></div> | |
| <div className="code-actions"> | |
| <button className="icon-button" aria-label={copied?'Python copied':'Copy Python'} title={copied?'Copied':'Copy Python'} disabled={!code} onClick={copy}>{copied?<Check size={16}/>:<Copy size={16}/>}</button> | |
| <a className="icon-button" aria-label="Download Python" title="Download Python" href={url} download={`${id}.py`}><Download size={16}/></a> | |
| <button ref={expandButton} className="icon-button" aria-label={expanded?'Collapse code':'Expand code'} title={expanded?'Collapse code':'Expand code'} onClick={()=>expanded?collapse():setExpanded(true)}>{expanded?<Minimize2 size={16}/>:<Maximize2 size={16}/>}</button> | |
| <button className="icon-button" aria-label="Close Python program" title="Close Python program" onClick={onClose}><X size={16}/></button> | |
| </div> | |
| </header> | |
| {copyError&&<p role="alert">Clipboard unavailable. Select the code below to copy it.</p>} | |
| {error?<p role="alert">{error}</p>:code?<pre tabIndex={0} aria-label="Python source code"><span className="code-gutter" aria-hidden="true">{code.split('\n').map((_,i)=>i+1).join('\n')}</span><code dangerouslySetInnerHTML={{__html:html}}/></pre>:<p role="status">Loading program…</p>} | |
| </section>; | |
| return expanded?createPortal(<div className="code-scrim">{content}</div>,document.body):content; | |
| } | |