commit12

resources/js/ContextTransitionDialog.jsx

@@ -0,0 +1,19 @@
+import React,{useEffect,useRef} from 'react';
+
+export default function ContextTransitionDialog({busy,error,onSave,onDiscard,onCancel}) {
+    const root=useRef(null);
+    useEffect(()=>{
+        const previous=document.activeElement;
+        root.current?.querySelector('button')?.focus();
+        return ()=>previous?.isConnected&&previous.focus();
+    },[]);
+    function keyboard(e){
+        if(e.key==='Escape'&&!busy){e.preventDefault();onCancel();}
+        if(e.key!=='Tab')return;
+        const controls=[...root.current.querySelectorAll('button:not(:disabled)')];
+        if(!controls.length){e.preventDefault();return;}
+        if(e.shiftKey&&document.activeElement===controls[0]){e.preventDefault();controls.at(-1).focus();}
+        else if(!e.shiftKey&&document.activeElement===controls.at(-1)){e.preventDefault();controls[0].focus();}
+    }
+    return <div className="context-transition-backdrop"><section ref={root} className="panel context-transition-dialog" role="dialog" aria-modal="true" aria-labelledby="context-transition-title" onKeyDown={keyboard}><h2 id="context-transition-title">Alterações por guardar</h2><p>Guarde as alterações, descarte-as ou cancele a mudança de contexto. Guardar usa o formulário e as validações actuais.</p>{error&&<p role="alert">{error}</p>}<div className="actions"><button disabled={busy} onClick={onSave}>Guardar e continuar</button><button disabled={busy} onClick={onDiscard}>Descartar e continuar</button><button disabled={busy} onClick={onCancel}>Cancelar</button></div></section></div>;
+}