86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { vscode } from "../vscode-api";
|
|
import { RawResultsSortState, SortDirection } from "../../pure/interface-types";
|
|
import { nextSortDirection } from "./result-table-utils";
|
|
import { Column } from "../../pure/bqrs-cli-types";
|
|
import { sendTelemetry } from "../common/telemetry";
|
|
|
|
interface Props {
|
|
readonly columns: readonly Column[];
|
|
readonly schemaName: string;
|
|
readonly sortState?: RawResultsSortState;
|
|
readonly preventSort?: boolean;
|
|
}
|
|
|
|
function toggleSortStateForColumn(
|
|
index: number,
|
|
schemaName: string,
|
|
sortState: RawResultsSortState | undefined,
|
|
preventSort: boolean,
|
|
): void {
|
|
if (preventSort) {
|
|
return;
|
|
}
|
|
|
|
const prevDirection =
|
|
sortState && sortState.columnIndex === index
|
|
? sortState.sortDirection
|
|
: undefined;
|
|
const nextDirection = nextSortDirection(prevDirection);
|
|
const nextSortState =
|
|
nextDirection === undefined
|
|
? undefined
|
|
: {
|
|
columnIndex: index,
|
|
sortDirection: nextDirection,
|
|
};
|
|
vscode.postMessage({
|
|
t: "changeSort",
|
|
resultSetName: schemaName,
|
|
sortState: nextSortState,
|
|
});
|
|
sendTelemetry("local-results-column-sorting");
|
|
}
|
|
|
|
export default function RawTableHeader(props: Props) {
|
|
return (
|
|
<thead>
|
|
<tr>
|
|
{[
|
|
<th key={-1}>
|
|
<b>#</b>
|
|
</th>,
|
|
...props.columns.map((col, index) => {
|
|
const displayName = col.name || `[${index}]`;
|
|
const sortDirection =
|
|
props.sortState && index === props.sortState.columnIndex
|
|
? props.sortState.sortDirection
|
|
: undefined;
|
|
return (
|
|
<th
|
|
className={`sort-${
|
|
sortDirection !== undefined
|
|
? SortDirection[sortDirection]
|
|
: "none"
|
|
}`}
|
|
key={index}
|
|
onClick={() =>
|
|
toggleSortStateForColumn(
|
|
index,
|
|
props.schemaName,
|
|
props.sortState,
|
|
!!props.preventSort,
|
|
)
|
|
}
|
|
>
|
|
<b>{displayName}</b>
|
|
</th>
|
|
);
|
|
}),
|
|
]}
|
|
</tr>
|
|
</thead>
|
|
);
|
|
}
|