Krao Hasanee
2c1ff61b29
Clicking the dimmed area outside a modal (+Task, +Invoice, expense, review, etc.) accidentally dismissed it and lost in-progress input. Every popup already has an explicit Cancel/Close/✕ button, so the backdrop click handler is removed; also drops the now-dead onClose/blockClose prop plumbing that only existed to support it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
77 lines
2.8 KiB
React
77 lines
2.8 KiB
React
import { popupOverlayStyle, popupSurfaceStyle } from '../lib/popupStyles';
|
|
import PageLoader from './PageLoader';
|
|
|
|
export const POPUP_FIELD_LABEL = {
|
|
fontSize: 11,
|
|
fontWeight: 500,
|
|
color: 'var(--text-secondary)',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.8,
|
|
display: 'block',
|
|
marginBottom: 4,
|
|
};
|
|
|
|
export default function InvoiceDetailPopup({
|
|
title,
|
|
subtitle,
|
|
headerRight,
|
|
metaContent, // JSX fields rendered in flat meta grid (no cards)
|
|
metaActions, // optional JSX rendered right-aligned beside meta grid (e.g. Edit Dates)
|
|
metaCols = 4, // number of grid columns for meta strip
|
|
footerActions,
|
|
loading = false,
|
|
children,
|
|
}) {
|
|
return (
|
|
<div style={popupOverlayStyle}>
|
|
<div
|
|
style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, paddingBottom: 18, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
|
|
<div>
|
|
<div style={{ fontSize: 18, fontWeight: 500, color: 'var(--text-primary)', letterSpacing: 0.2, lineHeight: 1.1 }}>{title}</div>
|
|
{subtitle && <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-secondary)' }}>{subtitle}</div>}
|
|
</div>
|
|
{headerRight && <div style={{ flexShrink: 0 }}>{headerRight}</div>}
|
|
</div>
|
|
|
|
{/* Flat meta strip */}
|
|
{metaContent && (
|
|
<div style={{ padding: '18px 0', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${metaCols}, minmax(0, 1fr))`, gap: '14px 18px', flex: 1 }}>
|
|
{metaContent}
|
|
</div>
|
|
{metaActions && (
|
|
<div style={{ flexShrink: 0, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
|
|
{metaActions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Body */}
|
|
{loading ? (
|
|
<div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<PageLoader />
|
|
</div>
|
|
) : (
|
|
<div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto', paddingTop: 18 }}>
|
|
{children}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
{footerActions && (
|
|
<div className="modal-action-row" style={{ paddingTop: 18, borderTop: '1px solid var(--border)', flexShrink: 0 }}>
|
|
{footerActions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|