54 lines
2.5 KiB
JavaScript
54 lines
2.5 KiB
JavaScript
// ── Globaler Bestätigungs-Dialog ─────────────────────────────────────────────
|
|
// Verwendung: const { confirm, ConfirmDialog } = useConfirm();
|
|
// await confirm('Wirklich löschen?') && deleteFn();
|
|
import { useState, useCallback } from 'react';
|
|
|
|
export function useConfirm() {
|
|
const [state, setState] = useState({ open:false, msg:'', resolve:null });
|
|
|
|
const confirm = useCallback((msg='Wirklich fortfahren?') => {
|
|
return new Promise(resolve => {
|
|
setState({ open:true, msg, resolve });
|
|
});
|
|
}, []);
|
|
|
|
const handle = yes => {
|
|
state.resolve?.(yes);
|
|
setState({ open:false, msg:'', resolve:null });
|
|
};
|
|
|
|
const ConfirmDialog = () => !state.open ? null : (
|
|
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)',
|
|
zIndex:9000, display:'flex',
|
|
alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
|
|
justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
|
|
onClick={() => handle(false)}>
|
|
<div style={{ background:'#1a1a1e',
|
|
borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
|
|
width:'100%', maxWidth:500, padding:'20px 20px 32px',
|
|
border:'1px solid rgba(255,255,255,0.15)',
|
|
boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}
|
|
onClick={e => e.stopPropagation()}>
|
|
{window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
|
|
borderRadius:2, margin:'0 auto 18px' }}/>}
|
|
<p style={{ color:'#fff', fontFamily:'monospace', fontSize:14,
|
|
textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p>
|
|
<div style={{ display:'flex', gap:10 }}>
|
|
<button onClick={() => handle(false)} style={{
|
|
flex:1, padding:'12px 0', background:'rgba(255,255,255,0.06)',
|
|
border:'1px solid rgba(255,255,255,0.1)', borderRadius:10,
|
|
color:'rgba(255,255,255,0.7)', fontFamily:'monospace', fontSize:13, cursor:'pointer',
|
|
}}>Abbrechen</button>
|
|
<button onClick={() => handle(true)} style={{
|
|
flex:1, padding:'12px 0', background:'rgba(255,107,157,0.15)',
|
|
border:'1px solid rgba(255,107,157,0.4)', borderRadius:10,
|
|
color:'#ff6b9d', fontFamily:'monospace', fontSize:13, cursor:'pointer', fontWeight:700,
|
|
}}>Ja, löschen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return { confirm, ConfirmDialog };
|
|
}
|