63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
export default function LocationMapSetupPanel({
|
|
hasAnyMap,
|
|
canManage,
|
|
zoneCount = 0,
|
|
saving,
|
|
savingAction,
|
|
onContinue,
|
|
onPreview,
|
|
onPublish,
|
|
onCreateFromZones,
|
|
onCreateBlank,
|
|
}) {
|
|
const hasZones = zoneCount > 0;
|
|
const createFromZonesLabel = `Create From ${zoneCount} Zone${zoneCount === 1 ? "" : "s"}`;
|
|
const createBlankLabel = savingAction === "create-blank" ? "Creating..." : "Create Blank Map";
|
|
const createZonesButtonLabel = savingAction === "create-zones" ? "Creating..." : createFromZonesLabel;
|
|
const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
|
|
|
|
return (
|
|
<section className="location-map-setup">
|
|
<h2>{hasAnyMap ? "Draft Map" : "No Map"}</h2>
|
|
{canManage ? (
|
|
<div className="location-map-setup-rows" role="group" aria-label="Map setup details">
|
|
<div className="location-map-setup-row">
|
|
<span>Zones</span>
|
|
<strong>{zoneCount}</strong>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{hasAnyMap && canManage ? (
|
|
<div className="location-map-setup-actions">
|
|
<button type="button" className="btn-primary" onClick={onContinue} disabled={saving}>
|
|
Continue Editing
|
|
</button>
|
|
<button type="button" className="btn-secondary" onClick={onPreview} disabled={saving}>
|
|
View Draft
|
|
</button>
|
|
<button type="button" className="btn-primary" onClick={onPublish} disabled={saving || !canManage}>
|
|
{publishLabel}
|
|
</button>
|
|
</div>
|
|
) : !hasAnyMap && canManage ? (
|
|
<div className="location-map-setup-actions">
|
|
{!hasZones ? (
|
|
<button type="button" className="btn-primary" onClick={onCreateBlank} disabled={saving}>
|
|
{createBlankLabel}
|
|
</button>
|
|
) : (
|
|
<>
|
|
<button type="button" className="btn-primary" onClick={onCreateFromZones} disabled={saving}>
|
|
{createZonesButtonLabel}
|
|
</button>
|
|
<button type="button" className="btn-secondary" onClick={onCreateBlank} disabled={saving}>
|
|
{createBlankLabel}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|