71 lines
4.1 KiB
TypeScript
71 lines
4.1 KiB
TypeScript
import { useMemo } from "react";
|
|
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
|
|
import { Input } from "@/shared/ui/input";
|
|
import { Button } from "@/shared/ui/button";
|
|
import { FloatingWindow } from "@/shared/ui/floating-window";
|
|
import { cn } from "@/shared/ui/cn";
|
|
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui/table";
|
|
|
|
import { useAnswerNodeState } from "./answer-view-state-provider";
|
|
import type { AnswerTableState } from "./answer-view-state";
|
|
|
|
export function InteractiveDataTable({ title, columns, rows, state: controlledState, onStateChange, expanded = false }: {
|
|
title: string; columns: string[]; rows: string[][];
|
|
state?: Omit<AnswerTableState, "type">;
|
|
onStateChange?: (patch: Partial<Omit<AnswerTableState, "type">>) => void;
|
|
expanded?: boolean;
|
|
}) {
|
|
const [localState, patchLocal] = useAnswerNodeState<AnswerTableState>("Table", { title, columns, rows });
|
|
const state = controlledState ?? localState;
|
|
const patch = onStateChange ?? patchLocal;
|
|
const { query, sort } = state;
|
|
const filtered = useMemo(() => {
|
|
const items = rows.map((cells, id) => ({ cells, id }))
|
|
.filter(({ cells }) => cells.join(" ").toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
|
|
if (sort) items.sort((a, b) => {
|
|
const aValue = a.cells[sort.column], bValue = b.cells[sort.column];
|
|
const compared = /^[-+]?\d+(\.\d+)?%?$/.test(aValue) && /^[-+]?\d+(\.\d+)?%?$/.test(bValue)
|
|
? Number.parseFloat(aValue) - Number.parseFloat(bValue)
|
|
: aValue.localeCompare(bValue, "zh-CN", { numeric: true });
|
|
return sort.descending ? -compared : compared;
|
|
});
|
|
return items;
|
|
}, [rows, sort, query]);
|
|
return <div className="min-w-0 space-y-2" data-interactive-table>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Input aria-label={`搜索${title}`} placeholder="搜索当前数据" value={query} className="h-9 min-w-0 flex-1 text-xs"
|
|
onChange={(event) => { patch({ query: event.currentTarget.value }); }} />
|
|
<span className="text-[11px] tabular-nums text-muted-foreground">{filtered.length} / {rows.length} 行</span>
|
|
{!expanded ? <FloatingWindow title={`${title} · 表格`} triggerLabel={`放大查看表格 ${title}`}>
|
|
{() => <InteractiveDataTable title={title} columns={columns} rows={rows} state={state} onStateChange={patch} expanded />}
|
|
</FloatingWindow> : null}
|
|
</div>
|
|
<div role="region" aria-label={title} tabIndex={0}
|
|
className="answer-ui-table overflow-x-auto rounded-lg border border-border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
|
|
<Table>
|
|
<TableCaption className="caption-top font-medium">{title}</TableCaption>
|
|
<TableHeader className="bg-muted/50"><TableRow>
|
|
{columns.map((column, index) => <TableHead key={index} scope="col" className="whitespace-nowrap"
|
|
aria-sort={sort?.column === index ? sort.descending ? "descending" : "ascending" : "none"}>
|
|
<Button size="sm" variant="ghost" className="h-9 gap-1 px-1 text-xs" aria-label={`按${column}排序`}
|
|
onClick={() => patch({ sort: sort?.column === index
|
|
? sort.descending ? null : { column: index, descending: true }
|
|
: { column: index, descending: false } })}>
|
|
{column}{sort?.column === index ? sort.descending ? <ArrowDown size={12} /> : <ArrowUp size={12} /> : <ArrowUpDown size={12} />}
|
|
</Button>
|
|
</TableHead>)}
|
|
</TableRow></TableHeader>
|
|
<TableBody>
|
|
{filtered.map(({ cells, id }) => <TableRow key={id}>
|
|
{cells.map((cell, index) => <TableCell key={index}
|
|
className={cn("min-w-24", /^[-+]?\d+(\.\d+)?%?$/.test(cell) && "text-right tabular-nums")}>{cell}</TableCell>)}
|
|
</TableRow>)}
|
|
{!filtered.length ? <TableRow><TableCell colSpan={columns.length} className="py-6 text-center text-xs text-muted-foreground">
|
|
{rows.length ? "当前筛选没有匹配的数据。" : "没有已加载的数据。"}
|
|
</TableCell></TableRow> : null}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>;
|
|
}
|