Also show selection in raw result view

This commit is contained in:
Asger F
2022-10-05 21:43:20 +02:00
parent 3c4682e556
commit 20dea5ea46
3 changed files with 23 additions and 4 deletions

View File

@@ -1,6 +1,6 @@
import * as React from 'react';
import { ResultRow } from '../../pure/bqrs-cli-types';
import { zebraStripe } from './result-table-utils';
import { selectableZebraStripe } from './result-table-utils';
import RawTableValue from './RawTableValue';
interface Props {
@@ -8,11 +8,13 @@ interface Props {
row: ResultRow;
databaseUri: string;
className?: string;
isSelected?: boolean;
onSelected?: (row: number, column: number) => void;
}
export default function RawTableRow(props: Props) {
return (
<tr key={props.rowIndex} {...zebraStripe(props.rowIndex, props.className || '')}>
<tr key={props.rowIndex} {...selectableZebraStripe(props.isSelected ?? false, props.rowIndex, props.className || '')}>
<td key={-1}>{props.rowIndex + 1}</td>
{props.row.map((value, columnIndex) => (
@@ -20,6 +22,7 @@ export default function RawTableRow(props: Props) {
<RawTableValue
value={value}
databaseUri={props.databaseUri}
onSelected={() => props.onSelected?.(props.rowIndex, columnIndex)}
/>
</td>
))}

View File

@@ -6,6 +6,7 @@ import { CellValue } from '../../pure/bqrs-cli-types';
interface Props {
value: CellValue;
databaseUri: string;
onSelected?: () => void;
}
export default function RawTableValue(props: Props): JSX.Element {
@@ -18,5 +19,5 @@ export default function RawTableValue(props: Props): JSX.Element {
return <span>{renderLocation(undefined, rawValue.toString())}</span>;
}
return renderLocation(rawValue.url, rawValue.label, props.databaseUri);
return renderLocation(rawValue.url, rawValue.label, props.databaseUri, undefined, props.onSelected);
}

View File

@@ -12,9 +12,22 @@ export type RawTableProps = ResultTableProps & {
offset: number;
};
export class RawTable extends React.Component<RawTableProps, Record<string, never>> {
interface RawTableState {
selectedItem?: { row: number, column: number };
}
export class RawTable extends React.Component<RawTableProps, RawTableState> {
constructor(props: RawTableProps) {
super(props);
this.setSelection = this.setSelection.bind(this);
this.state = {};
}
private setSelection(row: number, column: number) {
this.setState(prev => ({
...prev,
selectedItem: { row, column }
}));
}
render(): React.ReactNode {
@@ -37,6 +50,8 @@ export class RawTable extends React.Component<RawTableProps, Record<string, neve
rowIndex={rowIndex + this.props.offset}
row={row}
databaseUri={databaseUri}
isSelected={this.state.selectedItem?.row === rowIndex}
onSelected={this.setSelection}
/>
);