| 271 | // ============================================================ |
| 272 | |
| 273 | function ExportDropdown({ |
| 274 | disabled, |
| 275 | tooltip, |
| 276 | onExport, |
| 277 | }: { |
| 278 | disabled: boolean; |
| 279 | tooltip: string; |
| 280 | onExport: (format: ExportFormat) => void; |
| 281 | }) { |
| 282 | const { t } = useTranslation(); |
| 283 | const [open, setOpen] = useState(false); |
| 284 | const containerRef = useRef<HTMLDivElement>(null); |
| 285 | |
| 286 | useEffect(() => { |
| 287 | const handler = (e: MouseEvent) => { |
| 288 | if ( |
| 289 | containerRef.current && |
| 290 | !containerRef.current.contains(e.target as Node) |
| 291 | ) { |
| 292 | setOpen(false); |
| 293 | } |
| 294 | }; |
| 295 | document.addEventListener("mousedown", handler); |
| 296 | return () => document.removeEventListener("mousedown", handler); |
| 297 | }, []); |
| 298 | |
| 299 | const formats = [ |
| 300 | { format: ExportFormat.CSV, label: "CSV" }, |
| 301 | { format: ExportFormat.JSON, label: "JSON" }, |
| 302 | { format: ExportFormat.XLSX, label: "XLSX" }, |
| 303 | ]; |
| 304 | |
| 305 | return ( |
| 306 | <div ref={containerRef} className="relative shrink-0"> |
| 307 | <Button |
| 308 | disabled={disabled} |
| 309 | title={tooltip} |
| 310 | onClick={() => setOpen(!open)} |
| 311 | > |
| 312 | <Download className="size-4 mr-1" /> |
| 313 | {t("common.export")} |
| 314 | </Button> |
| 315 | {open && !disabled && ( |
| 316 | <div |
| 317 | className={cn( |
| 318 | "absolute right-0 top-[42px] bg-background border border-control-border rounded-sm shadow-lg py-1 min-w-[100px]", |
| 319 | LAYER_SURFACE_CLASS |
| 320 | )} |
| 321 | > |
| 322 | {formats.map(({ format, label }) => ( |
| 323 | <button |
| 324 | key={label} |
| 325 | className="block w-full text-left px-3 py-1.5 text-sm hover:bg-control-bg" |
| 326 | onClick={() => { |
| 327 | onExport(format); |
| 328 | setOpen(false); |
| 329 | }} |
| 330 | > |