Also show selection in raw result view
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user