20 lines
1.5 KiB
React
20 lines
1.5 KiB
React
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>;
|
|
}
|