153 lines
4.4 KiB
React
153 lines
4.4 KiB
React
import React from 'react';
|
||
import './Toolbar.css';
|
||
|
||
function Toolbar({
|
||
toolMode,
|
||
onToolChange,
|
||
borderStyle,
|
||
onBorderStyleChange,
|
||
previewMode = false,
|
||
onTogglePreview,
|
||
onConfigureAPI,
|
||
onSave,
|
||
onLoad,
|
||
reportName,
|
||
onReportNameChange,
|
||
isSaving = false
|
||
}) {
|
||
return (
|
||
<div className="toolbar">
|
||
<div className="toolbar-group">
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'select' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('select')}
|
||
title="Select Tool"
|
||
>
|
||
↖️ Select
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addText' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addText')}
|
||
title="Add Text Field"
|
||
>
|
||
T Add Text
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addDBText' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addDBText')}
|
||
title="Add Database Text Field"
|
||
>
|
||
DB DB Text
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addExpr' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addExpr')}
|
||
title="Add Expression Field"
|
||
>
|
||
fx
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addFrame' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addFrame')}
|
||
title="Add Frame"
|
||
>
|
||
▭ Add Frame
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addHLine' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addHLine')}
|
||
title="Add Horizontal Line"
|
||
>
|
||
─ H-Line
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addVLine' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addVLine')}
|
||
title="Add Vertical Line"
|
||
>
|
||
│ V-Line
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'drawTable' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('drawTable')}
|
||
title="Draw Table (D)"
|
||
>
|
||
⊞ Draw
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${toolMode === 'addBand' ? 'active' : ''}`}
|
||
onClick={() => onToolChange('addBand')}
|
||
title="Add Band (B)"
|
||
>
|
||
▦ Band
|
||
</button>
|
||
</div>
|
||
<div className="toolbar-separator"></div>
|
||
<div className="toolbar-group">
|
||
<label className="toolbar-label">Line Style:</label>
|
||
<button
|
||
className={`toolbar-button ${borderStyle === 'single' ? 'active' : ''}`}
|
||
onClick={() => onBorderStyleChange('single')}
|
||
title="Single Line"
|
||
>
|
||
─ Single
|
||
</button>
|
||
<button
|
||
className={`toolbar-button ${borderStyle === 'double' ? 'active' : ''}`}
|
||
onClick={() => onBorderStyleChange('double')}
|
||
title="Double Line"
|
||
>
|
||
═ Double
|
||
</button>
|
||
</div>
|
||
<div className="toolbar-separator"></div>
|
||
<div className="toolbar-group">
|
||
<button
|
||
className={`toolbar-button ${previewMode ? 'active' : ''}`}
|
||
onClick={onTogglePreview}
|
||
title="Toggle Preview Mode"
|
||
>
|
||
{previewMode ? '👁️ Design Mode' : '📝 Preview Mode'}
|
||
</button>
|
||
{onConfigureAPI && (
|
||
<button
|
||
className="toolbar-button"
|
||
onClick={onConfigureAPI}
|
||
title="Configure API Endpoint"
|
||
>
|
||
⚙️ Configure
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="toolbar-separator"></div>
|
||
<div className="toolbar-group toolbar-group--file">
|
||
<input
|
||
type="text"
|
||
className="toolbar-report-name"
|
||
value={reportName || ''}
|
||
onChange={e => onReportNameChange && onReportNameChange(e.target.value)}
|
||
placeholder="Report name"
|
||
title="Report name"
|
||
/>
|
||
<button
|
||
className="toolbar-button"
|
||
onClick={onSave}
|
||
disabled={isSaving}
|
||
title="Save Report"
|
||
>
|
||
{isSaving ? '...' : '💾 Save'}
|
||
</button>
|
||
<button
|
||
className="toolbar-button"
|
||
onClick={onLoad}
|
||
title="Load Report"
|
||
>
|
||
📂 Load
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Toolbar;
|